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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

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