Spritesheet sprite not appearing?!

[BelugaBros]

Hi,

I'm new here and new to phaser, I'm currently making a flappy birds style game based on this tutorial:

http://blog.lessmilk.com/how-to-make-flappy-bird-in-html5-2/

 

I'm now trying to replace the yellow square... "bird.png" with an animated sprite of a beluga whale (beluga-sprite.png). I've spent all day at this and I keep checking my code to other peoples online examples and it seem to be correct but when I load my game, no animated beluga can be seen?? 

Any help would be very much appreciated, I'm pretty sure it's something really simple that i've missed?

Thanks
Tom





Here's the JS code:



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

 

var music;

var tilesprite;

 

var mainState = {

 

    preload: function() { 

        game.stage.backgroundColor = '#71c5cf';

//ADDED - added images

        game.load.image('background', 'assets/underwater.png');

        //game.load.image('midground'), 'assets/midground.png');

        

 

        game.load.image('bird', 'assets/bird.png');  

        game.load.image('pipe', 'assets/pipe.png'); 

 

//ADDED load spritesheet for protagonist

        game.load.spritesheet('beluga', 'assets/beluga-sprite.png', 50, 50, 3); 

 

        // Load the jump sound

        game.load.audio('jump', 'assets/jump.wav');   

//ADDED audio - ADDED dead.wav

        game.load.audio('dead', 'assets/dead.wav'); 

//ADDED AUDIO - added main theme music

        game.load.audio('music', 'assets/music.mp3');  

 

 

    },

 

    create: function() { 

 

 

        game.physics.startSystem(Phaser.Physics.ARCADE);

 

 

//ADDED background tilesprite

        //background = game.add.tileSprite(0, 0, 400, 490, 'background');    //didn't use this but kept it as reference

        background = game.add.tileSprite(0, 0, game.stage.bounds.width, game.cache.getImage('background').height, 'background');    

        //midground = game.add.tilesprie(0, 0, game.stage.bounds.width, game.cache.getImage('midground').height, 'midground');

        

//ADDED main character sprite

        beluga = this.game.add.sprite(70, 350, 'beluga');

        beluga.frame = 0;

//ADDED animation to main character sprite the last number is frames per second

        beluga.animations.add('swim', [0, 1, 2], 10, true);

//ADDED play the animation of the main character sprite

        beluga.animations.play('swim');

        game.physics.arcade.enable(beluga);

 

 

 

        this.pipes = game.add.group();

        this.pipes.enableBody = true;

        this.pipes.createMultiple(20, 'pipe');  

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

//ADDED changed starting point to lower down and slightly to the right from 100, 245 to 70, 420

        this.bird = this.game.add.sprite(70, 420, 'bird');

        game.physics.arcade.enable(this.bird);

 

//ADDED GRAVITY FROM 1000 to -750       - now floats upwards

        this.bird.body.gravity.y = -750; 

 

        // New anchor position

        this.bird.anchor.setTo(-0.2, 0.5); 

 

        var spaceKey = this.game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);

        spaceKey.onDown.add(this.jump, this); 

 

        this.score = 0;

        this.labelScore = this.game.add.text(20, 20, "0", { font: "40px Arial", fill: "#ffffff" });  

 

        // Add the jump sound

        this.jumpSound = this.game.add.audio('jump');

//ADDED -  Add the dead sound

        this.deadSound = this.game.add.audio('dead');

 

//ADDED - added main music & asked it to play only if music is not playing   

      if (!music || !music.isPlaying) {

        music = this.game.add.audio('music', 1, true);

        music.play('',0,1,true);

        }

     

       

 

            

        

        

 

    },

 

    update: function() {

        if (this.bird.inWorld == false)

            this.restartGame(); 

 

        game.physics.arcade.overlap(this.bird, this.pipes, this.hitPipe, null, this); 

 

        // Slowly rotate the bird downward, up to a certain point.

//ADDED ANGLE FROM 20 to 10!!!

        if (this.bird.angle < 10)

            this.bird.angle += 1;   

 

//ADDED background tile position to scroll

        background.tilePosition.x += -0.5;

 

//ADDED midground tile position scroll

        //midground.tilePosition.x += -2;

 

 

    },

 

    jump: function() {

        // If the bird is dead, he can't jump

        if (this.bird.alive == false)

            return; 

 

// ADDED VELOCITY FROM -350 to 280 - now swims downward instead of jumping up

        this.bird.body.velocity.y = 280;

 

// ADDED JUMP ANIMATION FROM -20 to -10 & time from 100 to 300

        // Jump animation

        game.add.tween(this.bird).to({angle: -10}, 300).start();

 

        // Play sound

        this.jumpSound.play();

    },

 

    hitPipe: function() {

        // If the bird has already hit a pipe, we have nothing to do

        if (this.bird.alive == false)

            return;

            

        // Set the alive property of the bird to false

        this.bird.alive = false;

//ADDED SOUND - ADDED a DEAD SOUND        

        // Play sound

        this.deadSound.play();

 

        // Prevent new pipes from appearing

        this.game.time.events.remove(this.timer);

    

        // Go through all the pipes, and stop their movement

        this.pipes.forEachAlive(function(p){

            p.body.velocity.x = 0;

        }, this);

 

 

    },

 

    restartGame: function() {

        

        game.state.start('main');

        

        

    },

 

    addOnePipe: function(x, y) {

        var pipe = this.pipes.getFirstDead();

 

        pipe.reset(x, y);

//ADDED - CHANGED VELOCITY FROM -200 TO -180 - SLOWING THE PACE OF THE GAME    - can later add an if statement to speed up game if on high enough score

        pipe.body.velocity.x = -180;  

        pipe.checkWorldBounds = true;

        pipe.outOfBoundsKill = true;

    },

 

    addRowOfPipes: function() {

        var hole = Math.floor(Math.random()*5)+1;

        

        for (var i = 0; i < 8; i++)

            if (i != hole && i != hole +1) 

                this.addOnePipe(400, i*60+10);   

    

        this.score += 1;

        this.labelScore.text = this.score;  

    },

};

 

game.state.add('main', mainState);  

game.state.start('main'); 

[Kobaltic]

First off use the code brackets when posting code. It makes it a little easier. They are the <> symbol on the toolbar.

 

Change this:

//ADDED animation to main character sprite the last number is frames per second        beluga.animations.add('swim', [0, 1, 2], 10, true);//ADDED play the animation of the main character sprite        beluga.animations.play('swim');

To this:

//ADDED animation to main character sprite         beluga.animations.add('swim', [0, 1, 2]);//ADDED play the animation of the main character sprite the last number is frames per second        beluga.animations.play('swim', 10, true);

Or this (since you are using all the frames, you don't need to say how many there are):

beluga.animations.add('swim'); 

Edit: You call the animation.play with the frames per second. More information here: http://phaser.io/examples/v2/animation/sprite-sheet