Phaser scene will not boot correctly, it just displays a empty screen

Question

I have switched my code config to allow me to create multiple scenes and I plan to overlap scenes to create my game UI and other screens (menu, end, leaderboard...). Im just not sure why my game will not work currently when I changed my scene setup.

It just displays a black screen and my previous code to create the game looked like this and worked properly, OLD CODE (OLD FORMAT)

let config = {
    type: Phaser.AUTO,
    width: 3000,
    height: 1250,
  autoCenter: true,
  backgroundColor: '#1c1c1c',
    physics: {
        default: 'arcade',
        arcade: {
            gravity: {
                y: 0
            },
            debug: true
        }
    },
    scene: {
        preload: preload,
        create: create,
        update: update
    }
};

//CREATE GAME SCENE || CREATE GAME SCENE || CREATE GAME SCENE
const game = new Phaser.Game(config);

function preload() {...}
function create() {...}
function update() {...}

NEW CODE (UPDATED FORMAT)

class GameScene extends Phaser.Scene {
  constructor(config) {
    super(config);
  }
  preload(){...}
  create(){...}
  update(){...}
}
var config = {
    type: Phaser.AUTO,
  parent: "phaser-game",
    width: 3000,
    height: 1250,
    autoCenter: true,
    backgroundColor: '#1c1c1c',
    physics: {
        default: 'arcade',
        arcade: {
            gravity: {
                y: 0
            },
            debug: true
        }
    },
};
//ADD GAME SCENES AND PLAY GAME
var game = new Phaser.Game(config);
game.scene.add("Game", GameScene);
game.scene.start("Game");

COMPLETE CODE (https://replit.com/@JackF99/test-2d-array#script%20(copy).js)

//DECLARE VARIABLES || DECLARE VARIABLES || DECLARE VARIABLES 
let random;
let attack = false;
let attackTimer = false;
let flipPlayer = false;
let attackAnimation = false;

//CREATE GAME SCENE || CREATE GAME SCENE || CREATE GAME SCENE
class GameScene extends Phaser.Scene {
    constructor(config) {
        super(config);
    }
    preload() {
        //PRELOADING ASSETS || PRELOADING ASSETS || PRELOADING ASSETS
        //SPRITES
        this.load.spritesheet("player", "assets/sprites/player.png", {
            frameWidth: 16,
            frameHeight: 30
        });
        this.load.spritesheet("sword", "assets/sprites/sword.png", {
            frameWidth: 10,
            frameHeight: 22
        });
        this.load.spritesheet("spikes", "assets/sprites/spikes.png", {
            frameWidth: 16,
            frameHeight: 16
        });
        //TILES
        this.load.image("floor", "assets/tiles/floor.png");
        this.load.image("floor_1", "assets/tiles/floor_1.png");
        this.load.image("floor_2", "assets/tiles/floor_2.png");
        this.load.image("floor_3", "assets/tiles/floor_3.png");
        this.load.image("floor_4", "assets/tiles/floor_4.png");
        this.load.image("floor_5", "assets/tiles/floor_5.png");
        this.load.image("floor_6", "assets/tiles/floor_6.png");
        this.load.image("floor_7", "assets/tiles/floor_7.png");
        this.load.image("wallLeft", "assets/tiles/wallLeft.png");
        this.load.image("wallRight", "assets/tiles/wallRight.png");
        this.load.image("wallBottom", "assets/tiles/wallBottom.png");
        this.load.image("wallTop", "assets/tiles/wallTop.png");
        this.load.image("bg", "assets/tiles/bg.png");
        //DECLARE KEYS USED
        this.keys = this.input.keyboard.addKeys('SPACE,W,A,S,D,Q');
        cursors = this.input.keyboard.createCursorKeys();
    }
    create() {
        this.cameras.main.zoom = 4;
        //CREATE ANIMATIONS || CREATE ANIMATIONS || CREATE ANIMATIONS
        //PLAYER ANIMATIONS
        this.anims.create({
            key: 'stand',
            frames: this.anims.generateFrameNumbers('player', {
                frames: [0, 1, 2, 3]
            }),
            frameRate: 1,
            repeat: -1
        });
        this.anims.create({
            key: 'walk',
            frames: this.anims.generateFrameNumbers('player', {
                frames: [4, 5, 6, 7]
            }),
            frameRate: 10,
            repeat: -1
        });
        //WEAPON ANIMATIONS
        this.anims.create({
            key: 'sword',
            frames: this.anims.generateFrameNumbers('sword', {
                frames: [6]
            }),
        });
        this.anims.create({
            key: 'attack',
            frames: this.anims.generateFrameNumbers('sword', {
                frames: [0, 1, 2, 3, 4, 5]
            }),
            frameRate: 5
        });
        //GAME OBJECT ANIMATIONS
        this.anims.create({
            key: 'spikes',
            frames: this.anims.generateFrameNumbers('spikes', {
                frames: [0, 1, 2, 3]
            }),
            frameRate: 2,
            repeat: -1
        });
        //DECLARE GROUPS || DECLARE GROUPS || DECLARE GROUPS
        this.spikes = this.physics.add.staticGroup();
        //GENERATE MAP || GENERATE MAP || GENERATE MAP
        var level = getMap();
        let map = this.make.tilemap({
            data: level,
            tileWidth: 16,
            tileHeight: 16
        });
        map.addTilesetImage(0, 'bg', 16, 16, 0, 0, 0);
        map.addTilesetImage(1, 'floor', 16, 16, 0, 0, 1);
        map.addTilesetImage(2, 'wallLeft', 16, 16, 0, 0, 2);
        map.addTilesetImage(3, 'wallRight', 16, 16, 0, 0, 3);
        map.addTilesetImage(4, 'wallBottom', 16, 16, 0, 0, 4);
        map.addTilesetImage(5, 'wallTop', 16, 16, 0, 0, 5);
        map.addTilesetImage(6, 'floor_1', 16, 16, 0, 0, 6);
        map.addTilesetImage(7, 'floor_2', 16, 16, 0, 0, 7);
        map.addTilesetImage(8, 'floor_3', 16, 16, 0, 0, 8);
        map.addTilesetImage(9, 'floor_4', 16, 16, 0, 0, 9);
        map.addTilesetImage(10, 'floor_5', 16, 16, 0, 0, 10);
        map.addTilesetImage(11, 'floor_6', 16, 16, 0, 0, 11);
        map.addTilesetImage(12, 'floor_7', 16, 16, 0, 0, 12);
        map.addTilesetImage(13, 'spikes', 16, 16, 0, 0, 13);
        map.addTilesetImage(14, 'floor', 16, 16, 0, 0, 14);

        let mapLayer = map.createLayer(0, map.tilesets, 0, 0);
        map.forEachTile(tile => {
            //Generate sprites on specific map tiles
            if (tile.index == 13) {
                this.spikes.create(tile.pixelX + 8, tile.pixelY + 8, "spikes")
                    .setDepth(10);
            }
        });
        map.setCollisionBetween(2, 5, true);
        //CREATE PLAYER || CREATE PLAYER || CREATE PLAYER
        this.cPlayer = this.add.container(176, 816);
        this.player = this.add.sprite(0, 0, "player");
        this.sword = this.add.sprite(10, 3, "sword");
        this.cPlayer.setSize(16, 20);
        this.physics.add.existing(this.cPlayer);
        this.cPlayer.add([this.player, this.sword]);
        this.physics.add.collider(this.cPlayer, mapLayer);
        this.cameras.main.startFollow(this.cPlayer);
        //FINAL CHANGES || FINAL CHANGES || FINAL CHANGES
        this.spikes.playAnimation('spikes');
        this.sword.play("sword", true);
        //Set images in layers
        this.cPlayer.setDepth(100);
        this.physics.world.enableBody(this.cPlayer);
    }
    update() {
        //PLAYER MOVEMENT || PLAYER MOVEMENT || PLAYER MOVEMENT
    //PLAYER ATTACK
        if (this.keys.SPACE.isDown && attackTimer == false) {
            attack = true;
        }
        if (attack == true && attackTimer == false) {
            this.sword.play("attack");
            attack = false;
            attackTimer = true;
            attackAnimation = true;
            if (flipPlayer == false) {
                this.cPlayer.setSize(0, 15);
            } else {
                this.cPlayer.setSize(-32, 15)
            }
            this.time.addEvent({
                delay: 1000,
                callback: () => {
                    this.sword.play("sword", true);
                },
            });
            this.time.addEvent({
                delay: 400,
                callback: () => {
                    attackAnimation = false;
                },
            });
            this.time.addEvent({
                delay: 3000,
                callback: () => {
                    attackTimer = false;
                },
            });
        }
    //MOVE PLAYER WITH KEY PRESS
        if (flipPlayer == true && attackAnimation == false) {
            this.cPlayer.setSize(-16, 15);
        } else if (flipPlayer == false && attackAnimation == false) {
            this.cPlayer.setSize(16, 15);
        }
        if (cursors.left.isDown || this.keys.A.isDown) {
            this.cPlayer.body.setVelocityY(0);
            this.cPlayer.body.setVelocityX(-200);
            this.cPlayer.setScale(-1, 1);
            this.player.play("walk", true);
            flipPlayer = true;
        } else if (cursors.right.isDown || this.keys.D.isDown) {
            this.cPlayer.body.setVelocityY(0);
            this.cPlayer.body.setVelocityX(200);
            this.cPlayer.setScale(1);
            this.player.play("walk", true);
            flipPlayer = false;
        } else if (cursors.up.isDown || this.keys.W.isDown) {
            this.cPlayer.body.setVelocityX(0);
            this.cPlayer.body.setVelocityY(-200);
            this.player.play("walk", true);
        } else if (cursors.down.isDown || this.keys.S.isDown) {
            this.cPlayer.body.setVelocityX(0);
            this.cPlayer.body.setVelocityY(200);
            this.player.play("walk", true);
        } else {
            this.player.play("stand", true);
            this.cPlayer.body.setVelocityX(0);
            this.cPlayer.body.setVelocityY(0);
        }
    }
}
//END OF GAME SCENE
//CREATE GAME || CREATE GAME || CREATE GAME
//CREATE PHASER SETTINGS
var config = {
    type: Phaser.AUTO,
  parent: "phaser-game",
    width: 3000,
    height: 1250,
    autoCenter: true,
    backgroundColor: '#1c1c1c',
    physics: {
        default: 'arcade',
        arcade: {
            gravity: {
                y: 0
            },
            debug: true
        }
    },
};
//ADD GAME SCENES AND PLAY GAME
var game = new Phaser.Game(config);
game.scene.add("Game", GameScene);
game.scene.start("Game");

Just looking for help figuring out how to separate my scenes without my code not working. I have no idea where the error is in this code.

winner_joiner · Accepted Answer · 2023-05-05T21:31:04.277

If you check the browser console (this is always a good idea, when phaser freezes) you can see, that there is an error:

caught ReferenceError: cursors is not defined

simply change the line 44 to (replace cursors with this.cursors):

this.cursors = this.input.keyboard.createCursorKeys();

and all other instances where cursors is used (in the update function, lines: 180, 186, 192 and 196)

These lines:

...
if (this.cursors.left.isDown || this.keys.A.isDown) {
    ...
} else if (this.cursors.right.isDown || this.keys.D.isDown) {
    ...
} else if (this.cursors.up.isDown || this.keys.W.isDown) {
    ...
} else if (this.cursors.down.isDown || this.keys.S.isDown) {
    ...
}
...

and that Error/Problem should be resolved.

The problem is that, without this, the cursors is a global variable, but for it to work you would have to define it with the line let cursors; or similar, BUT since global variables are not the best option for data of a specific instance/class, the property option is the way to go.

Id appreciate it if u take a look at my new question https://stackoverflow.com/questions/76205270/how-can-i-check-for-overlap-during-a-single-sprite-frame-and-subtract-only-1-fr — JackF99, May 09 '23 at 01:18
@JackF99 Sure think, but you don't have to message me over comments. I check the `phaserjs` `phaser-framework` Tag's atleast once a day. :) — winner_joiner, May 09 '23 at 05:07

Phaser scene will not boot correctly, it just displays a empty screen

1 Answers1

Linked