Jump to content

Spritesheet sprite not appearing?!


Recommended Posts


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


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?


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() { 
//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
        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');
//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);
    update: function() {
        if (this.bird.inWorld == false)
        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)
// 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
    hitPipe: function() {
        // If the bird has already hit a pipe, we have nothing to do
        if (this.bird.alive == false)
        // Set the alive property of the bird to false
        this.bird.alive = false;
        // Play sound
        // Prevent new pipes from appearing
        // Go through all the pipes, and stop their movement
            p.body.velocity.x = 0;
        }, this);
    restartGame: function() {
    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);  



Link to comment
Share on other sites

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):


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

Link to comment
Share on other sites


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...