Search the Community

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