Phaser场景不加载

huangapple go评论62阅读模式
英文:

Phaser scenes don't load

问题

在浏览器中,我只看到黑色画布,我定义了2个场景,但不知道为什么看不到文本,请有人帮忙。
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" });
    }
}
英文:

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

答案1

得分: 0

以下是您要翻译的内容:

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 them in the config if not it will cause an error and 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 basically:

<!-- begin snippet: js hide: false console: false babel: false -->

<!-- language: lang-js -->
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,
        backgroundColor: 0xffffff,
        // Remove Scene2 if it is not loaded
        // scene: [Scene1, Scene2]                
        scene: [Scene1]
    }
    var game = new Phaser.Game(config);
}

<!-- language: lang-html -->
<script src="//cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.js"></script>

<!-- end snippet -->
英文:

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:

<!-- begin snippet: js hide: false console: false babel: false -->

<!-- language: lang-js -->

document.body.style = &#39;margin:0;&#39;;

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

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

<!-- language: lang-html -->

&lt;script src=&quot;//cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.js&quot;&gt;&lt;/script&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年2月10日 17:02:30
  • 转载请务必保留本文链接:https://go.coder-hub.com/75408906.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定