Game Development Reference
In-Depth Information
Listing 8-18.
Runner Methods Used to Animate
p.run = function () {
if (this.currentAnimation === 'idle') {
this.gotoAndPlay('run');
this.speed = 10;
}
}
p.jump = function () {
if (this.currentAnimation != 'jump') {
this.gotoAndPlay('jump');
this.on('animationend',function(e){
if(this.speed > 0){
this.gotoAndPlay('run');
}
})
}
}
p.stand = function () {
if (this.currentAnimation === 'run') {
this.gotoAndStop('idle');
this.speed = 0;
}
}
Each method is fairly similar and straightforward. First, each checks against current animations to prevent
unwanted results. For example, having the sprite jump when it is already jumping is not what you want. Each method
plays the appropriate animation when allowed to do so. The
run
and
stand
methods both change the
speed
property
so it will stop or move across the screen accordingly.
The
jump
animation in the sprite sheet data is set to immediately play the
idle
animation when complete. You
want this to be the case when jumping in place, but if the sprite is running (i.e. the
speed
property is greater than 0),
the next animation should be
run
.
You use the
animationend
event to check this when the sprite is finished jumping.
Listing 8-19 shows the complete
Grant
class.
Listing 8-19.
Runner Class in Completion
(function () {
window.sprites = window.sprites || {};
var Runner = function (spritesheet) {
this.initialize(spritesheet);
}
var p = Runner.prototype = new createjs.Sprite();
p.Sprite_initialize = p.initialize;
p.speed = 0;
p.initialize = function (spritesheet) {
this.Sprite_initialize(spritesheet, 'idle');
this.on('tick',function(e){
