我正在使用Fez开发基于EaselJS的HTML5 Canvas游戏,但发现一个问题,试图将SpriteSheets实现为英雄时,我无法解决自己的问题。
问题是我已经为英雄定义了三个动画("stand"
,"jump"
和"run"
),并且当我尝试使用hero.gotoAndPlay("run")
或hero.gotoAndStop("stand")
从一个动画更改为另一个动画时,动画没有更改,更改,但仅显示第一帧或更改为错误的动画。
有人能帮我吗?我在做什么错,如何解决?谢谢。
这是我用来创建英雄Sprite的相关JavaScript代码:
var data = {
images: ["http://i.imgur.com/M0GmFnz.png"],
frames: {width:34, height:46},
animations: {
stand:0,
run:[0,12,true,0.25],
jump:13
}
};
var spriteSheet = new createjs.SpriteSheet(data);
var hero = new createjs.Sprite(spriteSheet, "stand");
hero.offset = 4 + 1; // "+1" is important, change the first number only.
hero.regX = hero.offset + 2;
hero.regY = hero.offset;
hero.width = 34 - (hero.offset*2) - 12;
hero.height = 46 - (hero.offset*2);
hero.x = 0;
hero.y = 0;
hero.jumping = true;
stage.addChild(hero);
以及我用来更改动画的代码:
if(!left && !right){ // User isn't pressing left arrow or right arrow
hero.gotoAndStop("stand");
}else{
hero.gotoAndPlay("run");
}
JSFiddle
Official Site
最佳答案
如果您在勾号(或类似名称)中呼叫gotoAndStop
或gotoAndPlay
,它将不断重设至第一帧。您必须确保在动画更改时仅一次调用这些函数。
进行此设置的一个好方法是存储,存储当前动画,并且仅在动画更改时才对其进行更改。就像是:
var animation;
if(!left && !right){ // User isn't pressing left arrow or right arrow
animation = "stand";
}else{
animation = "run";
}
if (currentAnimation != animation) {
hero.gotoAndStop(animation);
}
这只是一个例子,但是应该给您一个想法。您只应一次调用这些方法来启动动画。