使用画架JS加载精灵表

Loading sprite sheet with EaselJS

本文关键字：加载 精灵 JS      更新时间：2023-09-26

作为EaselJS的新手，我使用了与源zip文件打包的"Simple Sprite Sheet"示例中的代码。 我正在尝试加载和播放精灵表，但只出现了第一帧。 

function init() {
    var stage = new Stage(document.getElementById("canvas"));
    var ss = new SpriteSheet({
        "frames": {
            "width": 159,
            "numFrames": 71,
            "regX": 0,
            "regY": 0,
            "height": 85
        },
        "animations":{
            "instance1": [0, 0], 
            "images": ["./assets/spritesheet.png"]
        });
    var animate = new BitmapAnimation(ss);
    animate.x = 0;
    animate.y = 0;
    ss.getAnimation("instance1").frequency = 2;
    ss.getAnimation("instance1").next = "instance1";
    animate.gotoAndPlay("instance1");

    stage.addChild(animate);
    Ticker.setFPS(60);
    Ticker.addListener(stage);
}

我认为我不需要自动收报机功能，因为我没有注册任何事件，我只是从实例 1 播放，帧和画布的大小相等，如果我用 animate.play("instance1"); 替换animate.gotoAndPlay("instance1");，动画会播放，但循环。 有什么建议吗？ 提前谢谢。

我相信

我在另一个网站上回答了这个问题。

问题是精灵表格式是错误的。"animations"属性是一个对象，其中包含具有开始帧和结束帧的命名动画。在此示例中，唯一动画的开始帧和结束帧是 [0，0]，"images"属性位于动画对象内部。正确的格式可以在这里看到：

https://github.com/CreateJS/EaselJS/blob/master/examples/SimpleSpriteSheet.html

var ss = new SpriteSheet({
    "frames": {
        "width": 159,
        "numFrames": 71,
        "regX": 0,
        "regY": 0,
        "height": 85
    },
    "animations":{
        "instance1": [0, 25] // sample end frame is "25"
    },
    "images": ["./assets/spritesheet.png"]);
});

我希望这对其他有同样问题的人有所帮助。干杯

相关文章：