javascript - 使用 EaselJS 加载 sprite 表

标签 javascript sprite-sheet easeljs

作为 EaselJS 的新手,我使用了与源 zip 文件打包在一起的“Simple Sprite Sheet”示例中的代码。我试图让 Sprite 表加载并播放,但只出现第一帧。

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);
}

我认为我不需要代码功能,因为我没有注册任何事件,我只是从 instance1 播放,框架和 Canvas 的大小相等,如果我替换 动画会播放animate.gotoAndPlay("instance1");animate.play("instance1");,但是循环。有什么建议么?提前致谢。

最佳答案

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

问题是 spritesheet 格式错误。 “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"]);
});

希望对遇到同样问题的人有所帮助。 干杯,

关于javascript - 使用 EaselJS 加载 sprite 表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10773896/

相关文章:

css - 如何使用 Google Material Design Sprite 图标..?

java - 如何放大像素? - java

javascript - EaselJS 多行 Spritesheet

javascript - 作为 div 背景的 Canvas 动画 - EaselJS

javascript - 选择画架鼠标事件不起作用

javascript - 获取 select2 中的当前元素

javascript - if 语句内的函数也在 if 语句外运行

javascript - 如何通过拖放重新排序 4 个 div(使用 angular2/4)?

javascript - 将一个数组值复制到其他数组

android - AndEngine如何获取透明动画?