Run Bob Run Animated Running
In this version of the game you will animate Bob so he looks like he is running and jumping.
Remove Existing Bob Image Data
In the load.js file, remove the following code from the PRELOAD function.
// data used to make bitmap (bmp) image of Bob
var bobData = [
'..0000..',
'..062...',
'.6.66...',
'..6EE66.',
'...EE...',
'.5666...',
'.5..6...',
'....55..'
];
game.bmpBob = game.create.texture('bob', bobData, 4, 4, 0, false);
Add New Bob Image Data
Replace the code you just removed with the code below.
This code will give bob all the different image data frames needed to make him run and jump.
// BOB IMAGE DATA
// data used to make Bob look like he is running and jumping
var bobStand1Data = [
'..0000..',
'..0220..',
'...66...',
'..6EE6..',
'..6EE6..',
'...66...',
'...66...',
'...55...'
];
var bobStand2Data = [
'..0000..',
'..0110..',
'...66...',
'..6EE6..',
'..6EE6..',
'...66...',
'...66...',
'...55...'
];
var bobRight1Data = [
'..0000..',
'..062...',
'.6.66...',
'..6EE66.',
'...EE...',
'.5666...',
'.5..6...',
'....55..'
];
var bobRight2Data = [
'..0000..',
'..062...',
'...66.6.',
'..6EE6..',
'.6.EE...',
'...66...',
'...66...',
'...55...'
];
var bobLeft1Data = [
'..0000..',
'...260..',
'...66.6.',
'.66EE6..',
'...EE...',
'...6665.',
'...66.5.',
'..55....'
];
var bobLeft2Data = [
'..0000..',
'...260..',
'.6.66...',
'..6EE6..',
'...EE.6.',
'...66...',
'...66...',
'...55...'
];
var bobJump1Data = [
'..0000..',
'..062...',
'.7.66.7.',
'..6EE6..',
'...EE...',
'.566665.',
'........',
'........'
];
var bobJump2Data = [
'..0000..',
'..062...',
'...66...',
'.76EE67.',
'...EE...',
'.566665.',
'........',
'........'
];
// combine all frames
var bobData = bobStand1Data.concat(bobStand2Data);
bobData = bobData.concat(bobRight1Data).concat(bobRight2Data);
bobData = bobData.concat(bobLeft1Data).concat(bobLeft2Data);
bobData = bobData.concat(bobJump1Data).concat(bobJump2Data);
// create a binaryImage (a spritesheet pic) from the data
// this image will have all frames inside it, one on-top of the other.
// game.create.texture(key, data, pixelHeightX, PixelHeightY, Palette = 0 for default palette, false = generate a bitmap(bmp) image)
game.bmpBobSpriteSheet = game.create.texture('bobSpriteSheet',bobData, 4, 4, 0, false);
Test Bob SpriteSheet
Change the load.js file's CREATE function like below.
This will add the "bob spritesheet" to the game so we can see it and keep the MainMenu state from running.
create: function() {
this.bob = game.add.sprite(1,1, game.bmpBobSpriteSheet);
// start menu state is commented out, so it won't run.
//game.state.start('menu');
}
Run Game and Check for Errors
You should see Bob's SpriteSheet which will look something like this.
The spritesheet is one image that contains all the images we need for our animation.
Continue On...
Replace the CREATE function with code below so it continues on to the MENU state.
create: function() {
game.state.start('menu');
}
Change Bob to an animation object
In the playlevel1.js file's CREATE function do the following:
this.bob = game.add.sprite(100,100, game.bmpBob);
Replace it with the code below, which will add our spritesheet, create the bob object and add animations to it.
// add Bob's SpriteSheet to our game
// addSpriteSheet(key, url, data, frameWidth, frameHeight, frameMax, margin, spacing)
// frameWidth = 8 pixels wide * 4 pixel width = 32
// frameMax = 8 frames
game.cache.addSpriteSheet('bobSpriteSheet','', game.bmpBobSpriteSheet.canvas, 8*4, 8*4, 8,0,0);
// add bob object to game using the spriteSheet
this.bob = game.add.sprite(100,100, "bobSpriteSheet");
// add several animation routines to bob.
// animations.add(animationsGroupNames, frames to use, swap frames every 10 frames per second)
this.bob.animations.add('stand',[0,1], 10, true);
this.bob.animations.add('right',[2,3], 10, true);
this.bob.animations.add('left',[4,5], 10, true);
this.bob.animations.add('jump',[6,7], 10, true);
Make Bob Move
In the playlevel1.js file's UPDATE function do the following:
// make bob move
// make bob jump
Step 2: Replace it with this code which now calls a function.
this.makeBobMove();
Step 3: add this function right after the UPDATE function.
makeBobMove: function() {
if (game.input.keyboard.isDown(Phaser.Keyboard.A))
{
this.bob.body.velocity.x = -200;
this.bob.play('left');
} else if (game.input.keyboard.isDown(Phaser.Keyboard.D))
{
this.bob.body.velocity.x = 200;
this.bob.play('right');
} else if (game.input.keyboard.isDown(Phaser.Keyboard.UP))
{
// check if bob is sitting on an immovable object
// onTheGround variable will be true or false
this.onTheGround = this.bob.body.touching.down;
// bob can only jump if he is currently no the ground
if (this.onTheGround)
{
// make bob jump
this.bob.body.velocity.y = -900;
this.bob.body.velocity.x = 0;
this.bob.play('jump');
}
} else
{
// bobs not moving, so make him stand still
this.bob.body.velocity.x = 0;
this.bob.play('stand');
}
},
Run Game and Check for Errors
Now whenever Bob moves, we play an animation!
Play It! Can you draw your own animations?
Play code on plnkr Edit code on plnkr