Jump to content

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...