EaselJS精灵gotoAndPlay赢得't循环

EaselJS Sprite gotoAndPlay won't loop

本文关键字：循环 精灵 gotoAndPlay 赢得 EaselJS      更新时间：2023-09-26

我使用EaselJS制作精灵动画。我设法使它左右移动。关键是，我在移动时使用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;

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

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

相关文章：