Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

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"});
    }
}

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

>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>
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading