What does "this" refer to in create()?

Phaser 3
1

Hi everyone. First time posting here. I’ve worked in Phaser 2 before and I’m just now getting into Phaser 3.

I’ve been searching around and I’m finding conflicting information about the context of “this” in create, update and preload functions. I had been under the impression that “this” referred to the Scene, but after I’d been working on my game for a bit I realized that “this” was referring to the Game. For instance, I couldn’t call this.restart(). I’d have to call this.scene.restart().

If I do:

var config = {
type: Phaser.AUTO,
width: 800,
height: 600,
parent: ‘test’,
scene: {
preload: preload,
create: create,
update: update
},
};
var game = new Phaser.Game(config);
function preload (){}
function create ()
{
console.log(‘myThis’,this);
}
function update (){}

Here “this” is referring to the game. Does this seem right?

2

It’s the scene.

this.scene is the scene’s scene plugin, i.e. the scene’s own interface to the scene manager.

The game also has a scene property, but that’s the scene manager itself.

Phaser Chains can explain some of this.

1 Like
3

Ok, that makes sense. So “this” is the scene and this.scene really refers back to the scene manager. But why isn’t restart() listed as a method on SceneManager?

4

No, this.scene is ScenePlugin and this.scene.manager is SceneManager. Only ScenePlugin belongs to one scene, so restart() only makes sense there.

1 Like
5

i assume it will be the scene in this case. i think they have phD’s in javascript this (and a bit o’ that) but once you get to it - its usually the last reference or passed object , if you were to onclick or mouseover a button and from there pass (this) to function then inside the function you can address all the properties (if thats what its called im not a pro) the object has

//game.js goes in separate file as do some global (im not into 'good practice' since im the only one reading and modding it so ...)

class SceneTOP extends Phaser.Scene {
    constructor(){
        super("commonmenu");

    }

preload(){
        this.canvas = this.sys.game.canvas; //here this refers to the scene
        $('#scenevar1').val(0);
}

create(){
        
    var thismenu = {

        fontsize: '16px',
        fontFamily: 'tahoma',
        color: '#ffffff',
        padding: 10,
        backgroundColor: 'rgba(0,0,128,0.9)'
    };

//    this.tyrdate = this.add.text(0,0,window.tyrdate);

    this.tyrdate = this.add.dom(0,0,'tyrdate',null,window.tyrdate).setOrigin(0,0); // it says 'optional' but i probably missing something @'tyrdate'
    this.tyrdate.setClassName('tyrdate');

//    this.loading = this.add.text(200,100,"this.loading txt can alter, mind"); // not needed anymore i guess
    this.infotext = this.add.text(20,600, "mouse over ,touch, tag or click stuff", infopanelstyle); //<-- here this refers to the scene "add text to scene"

    this.menuBTN1 = this.add.sprite(wu,20,'btn_account').setOrigin(0,0).setFrame(0).setInteractive({ pixelPerfect: true }).setDisplaySize(wu*20,wu*10)
/*
//stufff
*/
    this.menu_oo = this.add.sprite(0,0,'btn_menu_outline_over').setOrigin(0,0).setVisible(0).setDisplaySize(wu*20,wu*10); //<-- just doodles since i have three frames per btn already , wu and wh are global referring to "window unit, relative to window size etc. etc .. in general someone like samme knows a lot more about where the mustard comes from tho ... i just couldnt resist)
    this.menu_od = this.add.sprite(0,0,'btn_menu_outline_down').setOrigin(0,0).setVisible(0).setDisplaySize(wu*20,wu*10);

    this.menuBTN1.infotext = "account info / secure settings";   
/*
//...morestuff
*/
    this.menuBTN1.on('pointerover', this.mouseoverbutton); <--- pass the button to function attached to scene
    this.menuBTN1.on('pointerout', this.mouseoutbutton);
/*
//...evenmorestuff
*/

    this.menuBTN1.on('pointerdown', function(event){

        this.menuBTN1.setFrame(2);
        this.menu_oo.setVisible(0);
        this.menu_od.x = this.menuBTN1.x;
        this.menu_od.y = this.menuBTN1.y;
        this.menu_od.setVisible(1);

        if(this.registry.values.currentscene == "loginGame"){

            //there was steemit stuff here
        }

        this.scene.stop(this.registry.values.currentscene); <------- calling scene from button

        this.time.delayedCall(40,function(){

            $("#scenevar1" ).val(4);
            $( "#fieldformdiv" ).html( "<img src=/media/UI/loading.gif >" );
            this.scene.start("fasterthanclearing"); <-if this were the button it would probably need this.scene.scene.start(...
        },[],this)  

    }, this); <-- passing the scene

/*
//hellamorestuff
*/

}

update(){
/*
//and then some stuff
*/
}

mouseoverbutton(){


    this.setFrame(1);  <------------------ this refers to the button
    this.scene.menu_oo.x = this.x;
    this.scene.menu_oo.y = this.y;
    this.scene.menu_oo.setVisible(1);
//which was textobject before
//    this.scaleX = 1.1;
//    this.setStyle({color: '#00ff00', backgroundColor: 'rgba(0,0,128,0.5)'});
//    this.setPadding({ y: 10, left: 10, right : 5});
    this.scene.oldskoolfunkystack = this.scene.infotext.text;
    this.scene.infotext.visible = true;
    this.scene.infotext.text = this.infotext;
}

mouseoutbutton(){

//outstuff
}
}

its possible that this makes scholars cry but i just go with what works … if any pro-dev wants to add or correct something thats not about formatting or team-practice i am always willing to learn :slight_smile:

wow … its so hard not to answer sometimes …