使用 Typescript 的 Phaser 游戏设置

Question

我正在开始一个游戏，我想使用 Phaser 作为我的游戏框架。除此之外，我当前的技术栈还包括 Typescript 和 Webpack。但是，我的问题是，当我尝试如下扩展 Phaser Game class Phaser.Game 时，我无法让 Phaser 工作：

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');
  }
}

这是大多数人的做法。尽管如此，似乎 none 我的函数被调用了，除了构造函数。除了我非常喜欢的上述方法外，我看到人们改为执行以下操作：

game: Phaser.Game;

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

基本上，他们定义了一个 Phaser.Game 变量并创建了一个新实例，并在构造函数中传递了这些方法。这确实有效，但我想知道为什么前者不起作用。我错过了什么吗？

Answer 1

我是这样设置我的：

游戏

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);

        }

}

可选状态常数

export class GameStates {

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

    }

每个州

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");

        }

    }

使用 Typescript 的 Phaser 游戏设置

Phaser game setup with Typescript

typescript

phaser-framework