I'm working with EaselJS SpriteSheets and I want to know how I can make my hero stop running smoothly, So if the SpriteSheet is playing the "run" animation and it's on frame 5, I'll need to animate though frames 6, 7, 8, 8, 8, 7, 6, 5 and then stop on 0 in order make my hero stand still. How can I do that?
Here's my SpriteSheet:
Note that the frames aren't consecutive: They go from 0 to 4, 4 to 0 then 5 to 8. Frame 9 is unused.
Here's my SpriteSheet code:
user.hero.bmp = new createjs.Bitmap("Graphics/Fox.png");
user.hero.bmp.cache(0, 0, user.hero.bmp.image.width, user.hero.bmp.image.height);
var data = new createjs.SpriteSheet({
images: [user.hero.bmp.cacheCanvas],
frames: {
width: 30,
height: 40
},
animations: {
stand: 0,
run: {
frames: [0,1,2,3,4,4,4,3,2,1,0,5,6,7,8,8,8,7,6,5],
next: true,
speed: .75
}
}
});
user.hero = new createjs.Sprite(data, "stand");
// Removed lots of non-relevant things here
movableObjContainer.addChild(user.hero);
movableObj.push(user.hero);
Here's the function I use to change between animations:
function changeAnimation(obj, frameOrAnimation) {
if (obj.animation != frameOrAnimation) {
obj.animation = frameOrAnimation;
obj.gotoAndPlay(frameOrAnimation);
}
}
Function usage: changeAnimation(user.hero, "stand");
and here's the most important part, the animation logic that runs inside ticker:
if ((user.input.left || user.input.right) && !user.hero.jumping) {
changeAnimation(user.hero, "run");
} else if (!user.hero.jumping && user.hero.animation != "stopFalling" && user.hero.animation != "almostFalling") {
changeAnimation(user.hero, "stand");
}