CODEWITHSUNDEEP
javascriptphaser-framework
rdrgtec
rdrgtec

Reputation: 640

Phaser 3: Using Objects as Phaser.Scene properties

I'm beginning on Phaser, using TypeScript. So I'm trying to move my main objects out of the create and preload methods, and I thought the best way of doing that was loading them as Phaser.Scene class properties. But I may be doing something wrong or not advisable... after I did this I got no error, but the game only shows a black screen...

Could you please take a look in the code below and see what's wrong?

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, 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',
          frames: this.anims.generateFrameNumbers('dude', { start: 5, end: 8 }),
          frameRate: 10,
          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);
      }
  
    }
  }

Upvotes: 1

Views: 882

Answers (1)

Dave
Dave

Reputation: 2049

You should not be adding to the scene in the constructor, as the scene has not been initialized yet (obviously, you're still in the constructor!)

Move these to create and use a 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')
    ...

Upvotes: 1

Related Questions