Question

我使用EaselJS为Sprite制作动画。我设法让它向右和向左移动。关键是我在移动时使用gotoAndPlay动画我的精灵，但是我的精灵只动画一次，然后在最后一帧停止。我试图改变频率，激活循环，但没有任何作用。我希望你能弄清楚我的错误在哪里，谢谢。这是我的代码：

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

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

EaselJS Sprite gotoAndPlay不会循环

1 个答案: