this in Phaser game JS

Question

so I recently started learning JS and now trying to use Phaser to make games. In the piece of code below,

1- is the author referring to mainState by using "this"?? 2- there is no variable defined for bird. where does it store data then??

// Initialize Phaser, and creates a 400x490px game
var game = new Phaser.Game(400, 490, Phaser.AUTO, 'gameDiv');

// Creates a new 'main' state that will contain the game
var mainState = {

    // Function called first to load all the assets
    preload: function() { 
        // Change the background color of the game
        game.stage.backgroundColor = '#71c5cf';

        // Load the bird sprite
        game.load.image('bird', 'assets/bird.png');  

        // Load the pipe sprite
        game.load.image('pipe', 'assets/pipe.png');      
    },

    // Fuction called after 'preload' to setup the game 
    create: function() { 
        // Set the physics system
        game.physics.startSystem(Phaser.Physics.ARCADE);

        // Display the bird on the screen
        this.bird = this.game.add.sprite(100, 245, 'bird');

        // Add gravity to the bird to make it fall
        game.physics.arcade.enable(this.bird);
        this.bird.body.gravity.y = 1000; 

        // Call the 'jump' function when the spacekey is hit
        var spaceKey = this.game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);
        spaceKey.onDown.add(this.jump, this); 

        // Create a group of 20 pipes
        this.pipes = game.add.group();
        this.pipes.enableBody = true;
        this.pipes.createMultiple(20, 'pipe');  

        // Timer that calls 'addRowOfPipes' ever 1.5 seconds
        this.timer = this.game.time.events.loop(1500, this.addRowOfPipes, this);           

        // Add a score label on the top left of the screen
        this.score = 0;
        this.labelScore = this.game.add.text(20, 20, "0", { font: "30px Arial", fill: "#ffffff" });  
    },

Robin · Accepted Answer · 2015-05-07 13:51:34Z

3

this in the code you posted refers to mainState as you inferred. Using this.valueName creates a new value on the mainState object.

See this link for more info on the this keyword and what it refers to when used in different places. This example from the linked page is relevant to your code:

var o = {
  prop: 37,
  f: function() {
    return this.prop;
  }
};

console.log(o.f()); // logs 37

It stores the data as usual, for all intents and purposes it performs the same function as adding another value outside the function as normal. And could be accessed with mainState.bird.

var mainState = {
    bird : game.addBird(...)
}

answered May 7, 2015 at 13:51

Robin

1,27111 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

PhotonStorm Over a year ago

It's worth adding that Phaser will automatically populate the mainState object with a bunch of properties so you never have to access the game global directly. For example: this.game.input.keyboard. should really be written as: this.input.keyboard. The same goes for this.game.add - can just be this.add and so on. Please see the docs page for more details and a list of all the properties you can use.

famousgarkin · Accepted Answer · 2015-05-07 14:02:13Z

3

Yes, the this keyword in the mainState object's functions points to the mainState object itself.

The bird variable is defined on the mainState object itself with:

// Display the bird on the screen
this.bird = this.game.add.sprite(100, 245, 'bird');

edited May 7, 2015 at 14:02

answered May 7, 2015 at 13:54

famousgarkin

14.2k5 gold badges60 silver badges74 bronze badges

2 Comments

vvvsg Over a year ago

so basically this.bird makes a new variable named bird... right?

famousgarkin Over a year ago

@vvvsg Yes, but it's tied to the mainState object, i.e. is a property of the mainState object.

Collectives™ on Stack Overflow

this in Phaser game JS

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related