I've just started working with Phaser using TypeScript and I'm facing an issue. I attempted to move my main objects out of the create and preload methods by loading them as Phaser.Scene class properties. However, after making this change, my game only displays a black screen with no errors...
Can someone please review the code below and help me identify what may be causing this problem?
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);
}
}
}