Phaser 03：使用对象作为 Phaser.Scene 属性

问题描述

我正在使用 TypeScript 开始使用 Phaser。所以我试图将我的主要对象移出 create 和 preload 方法，我认为最好的方法是将它们加载为 Phaser.Scene 类属性。但我可能做错了什么或不明智......在我这样做之后我没有错误，但游戏只显示黑屏......

你能看看下面的代码，看看有什么问题吗？

import * as Phaser from 'phaser';

const sceneConfig = {
    active: false,visible: false,key: 'Game',}

export default class GameScene extends Phaser.Scene {
    platforms : Phaser.Physics.Arcade.StaticGroup
    player: Phaser.Types.Physics.Arcade.SpriteWithDynamicBody 
  
    constructor() {
      super(sceneConfig);
      this.platforms = this.physics.add.staticGroup()
      this.player = this.physics.add.sprite(100,450,'dude')
    }
  
    preload() {
      this.load.image('sky','src/assets/sky.png');
      this.load.image('ground','src/assets/platform.png');
      this.load.image('star','src/assets/star.png');
      this.load.image('bomb','src/assets/bomb.png');
      this.load.spritesheet('dude','src/assets/dude.png',{ frameWidth: 32,frameHeight: 48 }
      );
    }
   
    create() {
      
      this.add.image(0,'sky').setorigin(0,0) 
  
  
      this.platforms.create(400,568,'ground').setScale(2).refreshBody();
  
      this.platforms.create(600,400,'ground');
      this.platforms.create(50,250,'ground');
      this.platforms.create(750,220,'ground');
      
      this.player.body.setGravityY(300)
      this.player.setBounce(0.2);
      this.player.setCollideWorldBounds(true);
  
      this.anims.create({
          key: 'left',frames: this.anims.generateFrameNumbers('dude',{ start: 0,end: 3 }),frameRate: 10,repeat: -1
      });
  
      this.anims.create({
          key: 'turn',frames: [ { key: 'dude',frame: 4 } ],frameRate: 20
      });
  
      this.anims.create({
          key: 'right',{ start: 5,end: 8 }),repeat: -1
      });
  
      this.physics.add.collider(this.player,this.platforms);
  
  
      
  
  
    }
   
    public update() {
      // Todo
      var cursors = this.input.keyboard.createCursorKeys();
      if (cursors.left.isDown)
      {
          this.player.setVeLocityX(-160);
  
          this.player.anims.play('left',true);
      }
      else if (cursors.right.isDown)
      {
          this.player.setVeLocityX(160);
  
          this.player.anims.play('right',true);
      }
      else
      {
          this.player.setVeLocityX(0);
  
          this.player.anims.play('turn');
      }
  
      if (cursors.up.isDown && this.player.body.touching.down)
      {
          this.player.setVeLocityY(-330);
      }
  
    }
  }
  

解决方法

您不应该在构造函数中添加场景，因为场景尚未初始化（显然，您仍在构造函数中！）

移动这些以创建和使用 definite assignment assertion：

export default class GameScene extends Phaser.Scene {
  platforms!: Phaser.Physics.Arcade.StaticGroup
  player!: Phaser.Types.Physics.Arcade.SpriteWithDynamicBody 
  
  constructor() {
    super(sceneConfig);
  }
  
  create() {
    this.platforms = this.physics.add.staticGroup()
    this.player = this.physics.add.sprite(100,450,'dude')
    ...