Phaser.State не инициализируется

Question

Я создаю свою первую игру Phaser в качестве приложения приемника хромового разрешения, у меня проблемы с моим кодом.

код у меня есть ниже работы:

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 не инициализируется, может кто-то пролить свет на это для меня.

Я знаю, что код учебника использует 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.