Jump to content
This forum will be closing down. Please move to the respective dedicated project forums.

When to use "this.game" and when only "this"


jamespierce
 Share

Recommended Posts

Hello guys,

I have been a long-time lurker on this forum. Most of my time spent here I wasn't even logged in but I have always enjoyed a ton of great answers here and even more interesting questions asked. Anyways, I don't want to waste your time with introducing myself and will allow myself to ask a question for the first time!

I am confused by the usage of "this." vs. "this.game". It seems that I can use both interchangeably without any errors popping up in the console and the same results on the screen. Here is an example:

var MyGame = {};

MyGame.game = new Phaser.Game(800, 600, Phaser.AUTO, '');

MyGame.Boot = function() {};

MyGame.Boot.prototype = {
	preload: function() {},
	
	create: function() {
		this.game.stage.backgroundColor = '#FFFFFF';
		
		this.game.physics.startSystem(Phaser.Physics.ARCADE);
		
		this.state.start('Preload');
	},

    update: function() {}
};

The three lines in the "create" method can all be written beginning with "this.game" or just "this." For example:

this.game.stage.backgroundColor = '#FFFFFF';
this.stage.backgroundColor = '#FFFFFF';
		
this.game.physics.startSystem(Phaser.Physics.ARCADE);
this.physics.startSystem(Phaser.Physics.ARCADE);
		
this.game.state.start('Preload');
this.state.start('Preload');

They work just fine in both ways. How come that is so? When do I use "this.game" and when only "this."?

I have been following along these tutorials which is also where I got the above code snippets from:
SpaceHipster Tutorial: https://gamedevacademy.org/html5-phaser-tutorial-spacehipster-a-space-exploration-game/
BunnyDefender YT Series: link

 

Link to comment
Share on other sites

The `game` variable within the `Boot` object is set to references the global game-object you created earlier in the line with "MyGame.game" (that is, it is set somewhere in the Phaser code, not in your code example above). Like JazzAceman said; Boot.game.state and Boot.state both references the same object. Therefor, both the `game` and the `Boot` state have the properties stage and physics, and that's why the code works in both cases.

Also, the keyword `this` in JavaScript is a little tricky because it depends on how the function is called. It works differently compared to the keyword this also used in Java and C++, see a short explanation here. If you have time to go into it a little more, I recommend reading You Don't Know JS (free online book series) which also has a part about "this & Object Prototypes".

Link to comment
Share on other sites

15 hours ago, BdR said:

Also, the keyword `this` in JavaScript is a little tricky because it depends on how the function is called. It works differently compared to the keyword this also used in Java and C++, see a short explanation here. If you have time to go into it a little more, I recommend reading You Don't Know JS (free online book series) which also has a part about "this & Object Prototypes".

Thank you for these resources in addition to explaining the references to the game object in Phaser.

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...