Phaser scenes don't load

in browser i see only black canvas and i define 2 scenes but I dunno why i see no text someone help pls
game.js

window.onload=function(){
    var game = new Phaser.Game();
    var config = {
        width: 800,
        height: 500,
        backgroundcColor: 0xffffff,
        scene: [Scene1, Scene2]
    }
    var game = new Phaser.Game(config);
}

Scene1.js

class Scene1 extends Phaser.Scene {
    constructor(){
        super("Scene1");
    }
    create(){
        this.add.text(20,20,"Loading game", {font:"25px Arial", fill:"yellow"});
    }
}

>Solution :

There are some possible issues:

  • remove the first line var game = new Phaser.Game(); from the onload function. Since at the end you are creating it again, this time with the config object (and each call create a new canvas / phaser app).
  • Are you loading Scene1 and Scene2, you have to load both if you reference the in the config if not it will cause an error an the execution stops (Even if you are only using one).

If all this does solve the problem, check the browser console for errors, since any error in the code will/can stop the correct application flow.

Here you can see, that your code works basiclly:

document.body.style = 'margin:0;';

class Scene1 extends Phaser.Scene {
    constructor(){
        super("Scene1");
    }
    create(){
        this.add.text(20,20,"Loading game", {font:"25px Arial", fill:"yellow"});
    }
}

window.onload = function(){
    // remove this line it is not needed
    //var game = new Phaser.Game();
    var config = {
        width: 800,
        height: 500,
        backgroundcColor: 0xffffff,
        // Remove Scene2 if it is not loaded
        //scene: [Scene1, Scene2]                
        scene: [Scene1]
    }
    var game = new Phaser.Game(config);
}
<script src="//cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.js"></script>

Leave a Reply