CODEWITHSUNDEEP
typescriptphaser-framework
LordTribual
LordTribual

Reputation: 4249

Phaser game setup with Typescript

I am starting a game and I want to use Phaser as my game framework. In addition to that my current stack includes Typescript and Webpack. However, my problem is that I cannot get Phaser to work when I try to extend the Phaser Game class Phaser.Game as follows:

export class Game extends Phaser.Game {
  sprite: Phaser.Sprite;

  constructor(public width: number, public height: number) {
    super(width, height, Phaser.AUTO, 'game', null);

    this.state.add('Boot', Boot, false);

    this.state.start('Boot');
  }

  preload(): void {
    console.log('preload');
  }

  create(): void {
    console.log('create');
  }

  update(): void {
    console.log('update');
  }

  render(): void {
    console.log('render');
  }
}

This is what most people do. Nevertheless it seems that none of my functions are being called except the constructor. Besides the approach above, which I would highly prefer, I saw people doing the following instead:

game: Phaser.Game;

constructor() {
  this.game = new Phaser.Game(1280, 720, Phaser.AUTO, 'content', {
    create: this.create, preload: this.preload
  });
}

Basically they define a variable of Phaser.Game and create a new instance and pass those methods along in the constructor. This actually works, but I am wondering why the former does not. Am I missing something?

Upvotes: 2

Views: 1325

Answers (1)

Clark
Clark

Reputation: 2678

I set up mine like this:

Game

export class Game extends Phaser.Game {

        constructor() {

            var renderMode: number = Phaser.AUTO;

            super(100, 100, renderMode, "content", null);

            //add the states used the first will automatically be set
            this.state.add(GameStates.BOOT, Boot, true);
            this.state.add(GameStates.PRELOADER, Preloader, false);
            this.state.add(GameStates.MAINMENU, MainMenu, false);
            this.state.add(GameStates.GAME, SwipeEngine, false);

        }

}

Optional State constants 

export class GameStates {

        static BOOT: string = "boot";
        static PRELOADER: string = "preloader";
        static MAINMENU: string = "mainMenu";
        static GAME: string = "game";

    }

Each State

export class Boot extends Phaser.State {

        preload() {

            console.log("Boot::preload");


            this.load.image("blah");
            this.load.image("blah2");

            this.load.json("blah"), true);

        }

        create() {

            console.log("Boot::create");


            //start the preloader state
            this.game.state.start(GameStates.PRELOADER, true, false);

        }

        shutdown(): void {

            console.log("Boot::shutDown");

        }

    }

Upvotes: 3

Related Questions