Phaser Images not Preloading

Question

If anyone has used Phaser, perhaps you can help me with my code. I am trying to create a Flappy Bird clone, and so far it is working pretty well. However, whenever I open the game the first time, the sprites of the pipes don't seem to show up. I've preloaded both the bird and the pipe sprites, and only the bird sprite loads on the first attempt. As soon as the game restarts (when the bird dies), the pipes load normally. I am using WAMP to host a local server.

Here is my code:

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

Where is `this.game.add.sprite(100, 245, 'bird');` for the pipe? Also, you don't need WAMP unless you're using PHP or some other server side scripting language, you can open JS/HTML/CSS/images just fine in a browser — zajd, Mar 08 '14 at 06:02
@zjd sprite are added with `this.pipes.createMultiple(20, 'pipe')` and with chrome image will not show in the canvas if you dont use a webserver "_Cross-origin image load denied by Cross-Origin Resource Sharing policy._" — MamaWalter, Mar 09 '14 at 01:51
Well, there's your problem. You cannot add sprites in the preload function. Add them in create() instead. — zajd, Mar 09 '14 at 04:11
try to read on http://phaser.io/docs/2.3.0/Phaser.State.html — Oli Soproni B., Apr 19 '15 at 05:19

score 2 · Answer 1 · answered Mar 09 '14 at 02:04

As in the tutorial, try to put the creation of the group in the create function:

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

Phaser Images not Preloading

1 Answers1