Sign in to follow this  
jamespierce

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

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

 

Share this post


Link to post
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".

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.