Phaser 03: Using Objects as Phaser.Scene properties

[grdigdev]

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