javascript - EaselJS Sprite gotoAndPlay不会循环

我使用EaselJS为Sprite制作动画。我设法使它向右和向左移动。关键是我在移动时使用gotoAndPlay为我的精灵设置了动画，但是我的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;

最佳答案

您的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翻转精灵，从而减少SpriteSheet中的帧数。

让我知道是否有帮助。如果您在JSFiddle上发布了样本，这也将有所帮助。这是我使用过的SpriteSheet示例：http://jsfiddle.net/lannymcnie/g5epoydb/2/

关于javascript - EaselJS Sprite gotoAndPlay不会循环，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/29099401/

spritesheet

javascript - EaselJS Sprite gotoAndPlay不会循环