Phaser.State 未初始化

Question

我正在创建我的第一个 Phaser 游戏作为 chromecast 接收器应用程序，我的代码遇到了一些问题。

我下面的代码有效：

class TNSeconds {

game: Phaser.Game;


constructor() {
    this.game = new Phaser.Game(window.innerWidth * window.devicePixelRatio -20, window.innerHeight * window.devicePixelRatio -20, Phaser.CANVAS, 'content', { preload: this.preload, create: this.create });
}

preload() {
    this.game.load.image('BG', 'bg.png');
    this.game.load.atlas("Atlas", "atlas.png", "atlas.json");
}

create() {
    var background= this.game.add.sprite(this.game.world.centerX, this.game.world.centerY, 'BG');
    logo.anchor.setTo(0.5, 0.5);
    this.game.add.sprite(320, 100, "Atlas", "dron1", this.game.world);
}
}


window.onload = () => {
    var game = new TNSeconds();

};

但是我正在学习教程并且示例中的代码如下所示：

class Game extends Phaser.Game {

constructor() {
    // init game
    super(window.innerWidth * window.devicePixelRatio - 20, window.innerHeight * window.devicePixelRatio - 20, Phaser.CANVAS, 'content', State);
}


}

class State extends Phaser.State {
    preload() {
        this.game.load.image('BG', 'bg.png');
        this.game.load.atlas("Atlas", "atlas.png", "atlas.json");
    }
create() {

    this.add.image(0, 0, "BG");

    this.add.sprite(320, 100, "Atlas", "dron1", this.world);

}

}

window.onload = () => {
   var game = new Game();

};

教程代码看起来更清晰，只是为了遵循教程我想以类似的方式实现我的代码，问题似乎是 State class 没有初始化，谁能帮我解释一下。

我知道教程代码使用 this.add.image 而我使用 this.game.add.sprite 这不是问题。

Answer 1

试试这样的：

game.ts

module Castlevania {

    export class Game extends Phaser.Game {

        constructor() {

            super(800, 600, Phaser.AUTO, 'content', null);

            this.state.add('Boot', Boot, false);
            this.state.add('Preloader', Preloader, false);
            this.state.add('MainMenu', MainMenu, false);
            this.state.add('Level1', Level1, false);

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

boot.ts

module Castlevania {

    export class Boot extends Phaser.State {

        preload() {

            this.load.image('preloadBar', 'assets/loader.png');

        }

        create() {

            //  Unless you specifically need to support multitouch I would recommend setting this to 1
            this.input.maxPointers = 1;

            //  Phaser will automatically pause if the browser tab the game is in loses focus. You can disable that here:
            this.stage.disableVisibilityChange = true;

            if (this.game.device.desktop) {
                //  If you have any desktop specific settings, they can go in here
                this.stage.scale.pageAlignHorizontally = true;
            }
            else {
                //  Same goes for mobile settings.
            }

            this.game.state.start('Preloader', true, false);
        }
    } 
}

您可以找到一个完整的示例 here。

Phaser.State 未初始化

Phaser.State not initializing

typescript

phaser-framework

game.ts

boot.ts