Why my `phaser_game` is `undefined` here?

[notalentgeek]

const ASSETS:string = "./assets";

// Simple game.
class SimpleGame {
  phaser_game:Phaser.Game;

  constructor () {
    this.phaser_game = new Phaser.Game(
      800,
      600,
      Phaser.AUTO,
      "phaser",
      { create: this.create, preload: this.preload }
    );
  }

  create () {
    let piplup_sprite:Phaser.Sprite = this.phaser_game.add.sprite(
      this.phaser_game.world.centerX,
      this.phaser_game.world.centerY,
      "logo"
    );
    piplup_sprite.anchor.setTo(0.5, 0.5);
  }

  preload () {
    let piplup_sprite_path:string = ASSETS + "/piplup.png";

    console.log(this.phaser_game); // Undefined?

    this.phaser_game.load.image("logo", piplup_sprite_path);
  }
}

window.onload = () => {
  let simple_game:SimpleGame = new SimpleGame();
};

I suppose the title is self-explanatory. I used Phaser with vanilla JavaScript before. Decided to learn TS but I got stuck why the `this.phaser_game` is undefined, while it is clearly defined in `constructor`?

[notalentgeek]

If I change the variable name from `phaser_game` to `game` it works. Is this true? Why the variable name need to be dictated by Phaser if so?

Here is the working codes.

const ASSETS:string = "./assets";

// Simple game.
class SimpleGame {
  game:Phaser.Game;

  constructor () {
    this.game = new Phaser.Game(
      800,
      600,
      Phaser.AUTO,
      "phaser",
      { create: this.create, preload: this.preload }
    );
  }

  create () {
    let piplup_sprite:Phaser.Sprite = this.game.add.sprite(
      this.game.world.centerX,
      this.game.world.centerY,
      "piplup"
    );
    piplup_sprite.anchor.setTo(0.5, 0.5);
  }

  preload () {
    let piplup_sprite_path:string = ASSETS + "/piplup.png";

    console.log(this.game); // Undefined?

    this.game.load.image("piplup", piplup_sprite_path);
  }
}

window.onload = () => {
  let simple_game:SimpleGame = new SimpleGame();
};

 

[notalentgeek]

This is ain't good I am moving back to vanilla JS XD.

[mattstyles]

20 hours ago, notalentgeek said:

Decided to learn TS but I got stuck why the `this.phaser_game` is undefined, while it is clearly defined in `constructor`?

Where is it `undefined`? Which line is throwing you the error and what exactly does the error say?

[notalentgeek]

2 hours ago, mattstyles said:

Where is it `undefined`? Which line is throwing you the error and what exactly does the error say?

It is in `preload()` regardless I have solved this problem. It seems, it was misunderstanding from my part.