javascript - EaselJS Sprite gotoAndPlay 不会循环

Question

我使用 EaselJS 来制作 Sprite 动画。我设法让它向右和向左移动。重点是我在移动时使用了 gotoAndPlay 来为我的 Sprite 设置动画，但我的 Sprite 只执行一次动画，然后停止在最后一帧。我尝试改变频率来激活循环，​​但没有任何作用。希望您能指出我的错误在哪里，谢谢。这是我的代码:

var stage,
img = new Image(),
bg = new Image(),
bgBitmap,
link,
text,
clavier = {
    gauche: 0,
    droite: 0
};

window.onkeydown = keyPress;
window.onkeyup = keyRelease;

function keyPress(e) {
var i;
if (e.keyCode == 37) {
    clavier.gauche = 1;
    for (i = 0; i < 10; i++) {
        link.gotoAndPlay("wkLeft");
    }
}
if (e.keyCode == 39) {
    clavier.droite = 1;
    link.gotoAndPlay("wkRight");
}
}

function keyRelease(e) {
if (e.keyCode == 37) {
    clavier.gauche = 0;
    link.gotoAndPlay("stand");
}
if (e.keyCode == 39) {
    clavier.droite = 0;
    link.gotoAndPlay("stand");
}
}

function init() {
stage = new createjs.Stage('mon_canvas');

bg.src = "img/bg.png";
bg.onload = creationBg();

img.src = "img/img.png";
img.onload = creationPerso();

createjs.Ticker.useRAF = true;
createjs.Ticker.setFPS(60);
createjs.Ticker.addEventListener("tick", stage);
createjs.Ticker.addEventListener("tick", tick);
}

function creationPerso() {
var ss = new createjs.SpriteSheet({
    images: [img],
    frames: {
        height: 90,
        width: 90,
        regX: 45,
        regY: 45
    },
    animations: {
        wkRight: {
            frames: [5, 9, true, 6],
            speed: 0.1
        },
        stand: [15],
        wkLeft: {
            frames: [0, 4, true, 6],
            speed: 0.1
        }
    }
});
link = new createjs.Sprite(ss, "stand");
link.x = stage.canvas.width / 2;
link.y = 280;
stage.addChild(link);
}

function tick() {
deplacement();
scene.update();
}

function creationBg() {
bgBitmap = new createjs.Bitmap(bg);
bgBitmap.regX = 400;
bgBitmap.regY = 300;
bgBitmap.x = 400;
bgBitmap.y = 100;
bgBitmap.scaleX = 1;
bgBitmap.scaleY = 1;
stage.addChild(bgBitmap);
}

function deplacement() {
if (clavier.gauche == 1) {
    link.x = link.x - 1;
}
if (clavier.droite == 1) {
    link.x = link.x + 1;
}

}

window.onload = init;

Answer 1

您的 SpriteSheet 格式不正确。您使用了长格式动画格式，其中 frames 应包含帧编号列表 - 但您使用了 5,9,true,6 - 看起来像缩写形式(开始、结束、下一个、速度)。

这是使用缩写形式的固定定义。

var ss = new createjs.SpriteSheet({
    images: [img],
    frames: {
        height: 90,
        width: 90,
        regX: 45,
        regY: 45
    },
    animations: {
        wkRight: [5, 9, true, 0.1]
        stand: [15],
        wkLeft: [0, 4, true, 0.1]
    }
});

请注意，如果您的行走动画只是向左/向右翻转，那么您可以使用 scaleX=-1 翻转 Sprite ，从而减少 SpriteSheet 中的帧数。

请告诉我这是否有帮助。如果您在 JSFiddle 上发布了示例，也会有所帮助。这是我使用过的 SpriteSheet 示例:http://jsfiddle.net/lannymcnie/g5epoydb/2/