javascript - EaselJS SpriteSheet 不响应 gotoAndPlay

标签 javascript html canvas easeljs sprite-sheet

我正在开发一个 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

最佳答案

如果您在一次调用(或类似)中调用gotoAndStopgotoAndPlay,那么它将不断重置到第一帧。您必须确保仅在动画更改时调用这些函数一次。

设置此功能的一个好方法是存储当前动画,存储它,并且仅在动画发生变化时才更改它。像这样的东西:

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

这只是一个示例,但应该可以给您一个想法。您应该只调用这些方法一次来启动动画。

关于javascript - EaselJS SpriteSheet 不响应 gotoAndPlay,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23355512/

相关文章:

javascript - Dialogflow API 如何使用 api 发送请求

javascript - respond.min.js,第 5 行字符 746,访问被拒绝,在 IE8 中?

html - 基于 css 的链接悬停激活/停用 div

javascript - Canvas 线条先变浅然后变暗

javascript - 如何画两个边相交的圆?

android - 使用独立线程 Android 在 Canvas 上绘图

javascript - CSS 转换不适用于 Firefox

javascript - 在参数中传递值时出现错误无法读取未定义的属性 'value'

javascript - 你能解决吗?使用数组的 JavaScript 轮播实现

html - 使用 CSS 在 DIV 上自定义图形边框