Passing data (more than one) from scene to scene

Phaser 3
1

Hi there!

I’m currently working on an inventory system. I have a menu, and an inventory set up. I’m using the rexUI plugins.

codepen example here

I’ve been passing through the neccesary data from one scene to another using the scene.launch function. I’ve run into a problems with how that data is transferred or read.

class InventoryScene extends Phaser.Scene {
constructor() {
super({key: "InventoryScene", active: true})
}
preload() {
this.load.scenePlugin({
        key: 'rexuiplugin',
        url: url,
        sceneKey: 'rexUI'
    });       
}

init(data) {
this.inventory = data
// console.log(this.inventory)
// let newArr = this.inventory(Math.sqrt)

this.scene.sleep()
}

create() { 

let scene = this, menu = undefined

this.menuKeys = this.input.keyboard.addKeys("W, S, A, D, P, Z");

let items = scene.inventory.items

// console.log(items)    
let w = config.width / 2 -38, h = config.height / 2 -77

this.menu = createList(scene, w, h, items, function(button) {
  let activePointer = scene.input.activePointer
  
  let inventoryButton = button
  let data = {activePointer, inventoryButton}
  // heres my trouble, I'm unsure how to seperate these and use the data properly
//

  scene.scene.launch("UseMenuScene", data)
  scene.scene.pause()
})
}

MainScene > InGameMenuScene > InventoryScene > UseMenuScene

I have scenes that are seperated, as seen in my codepen example.
Aside from the main scene, theres the InGameMenu scene that handles the first menu that you see.
The one I’m having trouble with is the UseMenuScene, and how to receive the data that was passed through the Inventory scene.

I want to recieve the the pointer data and button data (selected item)from the previous scene

class UseMenuScene extends Phaser.Scene {
  constructor() {
    super({key: "UseMenuScene", active: true})
  }
  preload() {
    this.load.scenePlugin({
      key: 'rexuiplugin',
      url: url,
      sceneKey: 'rexUI'
    });
  }
  
  init(data) {
    this.pointer = data
  }
  
  create() {
    this.menuKeys = this.input.keyboard.addKeys("P");
    let scene = this
    
    let menu = createUseMenu(scene, this.pointer.x, this.pointer.y, [{name: "Use"}], function() {
      menu.destroy()
      scene.scene.wake('InventoryScene')
      scene.scene.sleep()
    })
    
    this.scene.pause("InventoryScene")
  }
}

I had attempted to send both button data and pointer data, created in the inventory scene, so that the x and y of the inventory list at the mouse position was read and the UseMenu is created.
I’ve been using the init function in the scenes, so I can read the data.

I want to send two pieces of data, from a parent scene, to its child scene. I would assume you can use destructuring to send to pieces of data, but I also want to be able to read it correctly, because I feel I have failed to grasp how properly passing information from scene to scene works.

If anyone could give me a rundown on the dos and donts of dealing with data, or any criticism, I will take it on board to the best of my ability.

I am currently using codepen to complete the inventory for future reference, in case anyone wants to look at the code.

If anyone could help me out, I’d appreciate it. :slight_smile:

edit: So i attempted again to send two pieces of data, and while its working, I’m getting an uncaught type error which the reason why I’m not sure.

Uncaught TypeError: Cannot read property 'x' of undefined at UseMenuScene.create

  create() {
let scene = this
console.log(scene.data.inventoryButton)
console.log(scene.data.activePointer)

let menu = createUseMenu(scene, scene.data.activePointer.x, scene.data.activePointer.y, [{name: "Use"}, {name: "Equip"}], function() {
  menu.destroy()
  scene.scene.wake('InventoryScene')
  scene.scene.sleep()
})

this.scene.pause("InventoryScene")
}

The console says I’m recieving both objects but I cant use them without getting the uncaught type error.

Thanks

2 
var myCar = {
    make: 'Ford',
    model: 'Mustang',
    year: 1969
};
3

I know I need to brush up on objects and do some reading. I’m hoping someone can tell me because a quick read through working with objects, hasnt really given me an answer. I atleast know that I can pass pointer information through from scene to scene. I’m dumbfounded as how to pass an object of objects through without getting an error. Thanks though.

4 
let data = { a:activePointer, i:inventoryButton, o: { str:"another object" } }
1 Like
5

Ohh. Thanks a lot. You’ve saved me a lot of time. I’ll make sure I’ll read about objects more often. Thanks

6

Just posting here in case anyone wants to check the code for the inventory. Just finished working on the parts I was struggling with here. Here it is in codepen.Thanks again!