javascript - Phaser 图像未预加载

Question

如果有人使用过 Phaser，也许你可以帮助我修改我的代码。我正在尝试创建一个 Flappy Bird 克隆版本，到目前为止它运行得很好。然而，每当我第一次打开游戏时，管道的 Sprite 似乎都没有出现。我已经预加载了小鸟和管道 Sprite ，并且在第一次尝试时仅加载了小鸟 Sprite 。一旦游戏重新开始(当小鸟死亡时)，管道就会正常加载。我正在使用 WAMP 托管本地服务器。

这是我的代码:

var game = new Phaser.Game(400, 490, Phaser.AUTO, 'game_div');


var main_state = {

    preload: function() { 
        this.game.stage.backgroundColor = '#66CCFF';
        this.game.load.image('pipe', 'assets/pipe.png');
        this.game.load.image('bird', 'assets/bird.png');
        this.pipes = game.add.group();
        this.pipes.createMultiple(20, 'pipe');
    },

    add_one_pipe: function(x, y) {
        var pipe = this.pipes.getFirstDead();
        pipe.reset(x, y);
        pipe.body.velocity.x = -200
        pipe.outOfBoundsKill = true;
    },

    add_row_of_pipes: function() {
        var hole = Math.floor(Math.random()*5) + 1;

        for (var i = 0; i < 8; i++) {
            if (i != hole && i != hole + 1) {
                this.add_one_pipe(400, i * 60 + 10);
            }
        }

        this.score += 1;
        this.label_score.content = this.score;
    },

    create: function() { 
        this.bird = this.game.add.sprite(100, 245, 'bird');
        this.bird.body.gravity.y = 1000;

        var space_key = this.game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);
        space_key.onDown.add(this.jump, this);

        this.timer = this.game.time.events.loop(1500, this.add_row_of_pipes, this);

        this.score = 0;
        var style = { font: "30px Arial", fill: "#ffffff" };
        this.label_score = this.game.add.text(20, 20, "0", style);
    },

    update: function() {
        if (this.bird.inWorld == false) {
            this.restart_game();
        }

        this.game.physics.overlap(this.bird, this.pipes, this.restart_game, null, this);
    },

    jump: function() {
        this.bird.body.velocity.y = -350;
    },

    restart_game: function() {
        this.game.time.events.remove(this.timer);
        this.game.state.start('main');
    },
};

// Add and start the 'main' state to start the game
game.state.add('main', main_state);  
game.state.start('main'); 

Answer 1

如tutorial中所示，尝试将组的创建放在create函数中:

create: function() { 
    this.bird = this.game.add.sprite(100, 245, 'bird');
    this.bird.body.gravity.y = 1000;

    var space_key = this.game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);
    space_key.onDown.add(this.jump, this);

    this.pipes = game.add.group();
    this.pipes.createMultiple(20, 'pipe');

    this.timer = this.game.time.events.loop(1500, this.add_row_of_pipes, this);

    this.score = 0;
    var style = { font: "30px Arial", fill: "#ffffff" };
    this.label_score = this.game.add.text(20, 20, "0", style);
},