This keyword questions in scenes?

Phaser 3
1

I hv a question on multiple scenes using the SAME this keyword, example, this.map , this.player, etc…

When I changed to different map levels, should I use the same this.map or different this.map2 instead ??
Or should I just use local variable , let map = …

I m a bit confused on using the “this” variable, I thought they are LOCAL in the current scene and referring to the current object in the scene …

I m using the below to stop and start the next scene…

this.scene.stop("level1");
this.scene.start("level2");

Example codes - level1

preload() {
    this.load.tilemapTiledJSON('map', 'assets/level1.json');
    this.load.spritesheet('tiles', 'assets/tiles64x64.png', {frameWidth: 64, frameHeight: 64});
}

create() {
    this.map = this.make.tilemap({key: 'map'});
    let Tiles = this.map.addTilesetImage('tiles64x64','tiles');
}

Example codes - level2

preload() {
    this.load.tilemapTiledJSON('map', 'assets/level2.json');
    this.load.spritesheet('tiles', 'assets/tiles64x64.png', {frameWidth: 64, frameHeight: 64});
}

create() {
    this.map = this.make.tilemap({key: 'map'});
    let Tiles = this.map.addTilesetImage('tiles64x64','tiles');
}
2

Hey Stanley, the this keyword is used to describe a property of an object. The let keyword is used for local scope. If you assign a variable using this in any of the methods within a class, you will also be able to access that same variable anywhere else within that same object/class.

A good rule of thumb is if you need to access a variable multiple times throughout an object’s life-cycle, use this.<varname>. If you only need to store a temporary value, such as iterating through a loop, use let <varname>

3

Thanks for the reply…

Within a scene object and across scenes, I noticed the this.player are using the first occurrence, meaning this.player was dude.png and in level2 onwards, I changed this.player to dude2.png, the scene a level2 still load the dude.png …

Is this as expected behaviour?

4

Ah, I see what you are asking now. Each scene is its own object and completely separate from your previous scene. So if you have SceneA and you assign this.player, when you start SceneB, this.player should be undefined.

In order to switch scenes, you shouldn’t have to call this.scene.stop("level1");, as, this.scene.start("level2"); will stop the previous scene for you.

If the new scene is somehow maintaining properties from a different scene, I’d assume you are doing something wrong… perhaps you’re accidentally assigning the same class to different keys?

5

Here are the level1 and level2 code , dude2.png was never loaded…

Level 1 scene …

class level1 extends Phaser.Scene {
constructor () {
    super({ key: 'level1' });
}

preload() {
this.load.spritesheet('player','assets/dude.png', { frameWidth: 64, frameHeight: 96} );
}

create() {
this.player = this.physics.add.sprite(200, 200, 'player');
}

Level 2 scene …

class level2 extends Phaser.Scene {
constructor ()
{
    super({ key: 'level2' });
}

preload() {
this.load.spritesheet('player','assets/dude2.png', { frameWidth: 64, frameHeight: 96} );
}

create(){
this.player = this.physics.add.sprite(200, 200, 'player');
}
6

Hey Stanley, sorry – I thought I responded to this a couple days ago, but I guess my post was never published.

Anyway, you do have to give unique keys when loading images. So to fix your issue, in scene one I would have this:

class level1 extends Phaser.Scene {
constructor () {
    super({ key: 'level1' });
}

preload() {
this.load.spritesheet('dude','assets/dude.png', { frameWidth: 64, frameHeight: 96} );
}

create() {
this.player = this.physics.add.sprite(200, 200, 'dude');
}

and scene 2:

class level2 extends Phaser.Scene {
constructor ()
{
    super({ key: 'level2' });
}

preload() {
this.load.spritesheet('dude2','assets/dude2.png', { frameWidth: 64, frameHeight: 96} );
}

create(){
this.player = this.physics.add.sprite(200, 200, 'dude2');
}
1 Like
7

Got it…

Thanks …