精灵未显示

Question

我正在尝试显示精灵。

HTML 文件：

<head>
    <script src="https://github.com/photonstorm/phaser-ce/releases/download/v2.7.5/phaser.min.js"></script>
</head>
<body>
    <div id="game"></div>
    <script src="main.js"></script>
</body>

main.js :

(() => {
    var preload = () => {
        Game.load.image("player", "assets/player.png");
    },

    create = () => {
        Game.add.sprite(225, 450, "player");
    },

    update = () => {

    },

    Game = new Phaser.Game(500, 500, Phaser.AUTO, "game",
        {
            preload : "preload",
            create : "create",
            update : "update"
        }
    );
})();

只是没有显示精灵，只有全黑背景。 Firefox 开发者控制台显示 TypeError: this.onPreloadCallback.call is not a function.

Answer 1

定义 var Game 时，必须正确指向您之前定义的函数。

(() => {
    var preload = () => {
        Game.load.image("player", "assets/player.png");
    },

    create = () => {
        Game.add.sprite(225, 450, "player");
    },

    update = () => {

    };

    var Game = new Phaser.Game(500, 500, Phaser.AUTO, "game",
    {
        preload : preload,
        create : create,
        update : update
    });
})();

相当于：

(() => {
    var Game = new Phaser.Game(500, 500, Phaser.AUTO, "game",
    {
        preload : () => {
            Game.load.image("player", "assets/player.png");
        },
        create : () => {
            Game.add.sprite(225, 450, "player");
        },
        update : () => {}
    });
})();

精灵未显示

Sprite not shown

javascript

phaser-framework