Question

我已经检查了这个论坛/互联网/谷歌前进和后退我的特定问题，但无济于事。我得到了接近我的例子 - 我试图将其传达给我自己的例子，但没有做任何事情。请帮忙！我再次道歉，如果这已被回答，我只是忽略了，如果是这样，请给我一个链接 - 否则这是我的代码：

我试图做的就是为跳跃的超级男人的单个精灵图像制作动画谢谢，祝节日快乐！

注意：Here the sprite I'm using

这是我的：JsFiddle

var stage, canvas,
bmpA, data,
megaman, spriteSheet;

function Main() {
    canvas = document.getElementById('canvas');
    stage = new createjs.Stage(canvas);

    container = new createjs.Container();

    megaman = new Image();
    megaman.src = "megaman__jump.png";
    var bmpA = new createjs.Bitmap(megaman);

    data = new createjs.SpriteSheet({
        images: [bmpA],
        frames: {
            width: 79,
            height: 139,
            count: 7
        },
        animations: {
            jump: [0, 6, "jump"]
        }
    });

    spriteSheet = new createjs.BitmapAnimation(data);
    spriteSheet.gotoAndPlay("jump");


    createjs.Ticker.setFPS(30);
    createjs.Ticker.addEventListener("tick", update);
}

function update(event) {
    stage.addChild(spriteSheet);
    stage.update();
}


</script>

</head>

<body onload = "Main();">
    <canvas id = "canvas" width = "780" height = "300"
        style = "border: 1px solid #000;"></canvas>
</body>
</html>


  [1]: http://i.imgur.com/Q1OQM.png

Answer 1

这是一个快速编辑。 http://jsfiddle.net/lannymcnie/f58mr0Lk/9/

你的小提琴并不是非常有用，因为它只是你的代码粘贴。我修改它以删除body标签（jsfiddle为你做的），导入画架，并使用完整的图像路径。
BitmapAnimation类在不久前重命名为Sprite。我不确定您使用的是哪个版本的EaselJS，但它可能不再具有该类。
我删除了位图。 SpriteSheet数据接受字符串路径或Image引用，而不是Bitmap。
正如我在下面建议的那样，我取出了整个更新方法，添加了Sprite一次，然后直接更新了阶段。

小提琴＆＃34;工作＆＃34;现在，但spritesheet尺寸似乎不对。看看。

data = new createjs.SpriteSheet({
    images: ["http://i943.photobucket.com/albums/ad274/Rah5er0/megaman__jump.png~original"],
    frames: {
        width: 79,
        height: 139,
        count: 7
    },
    animations: {
        jump: [0, 6, "jump"]
    }
});

var sprite = new createjs.Sprite(data);

CreateJS - 无法让我的spritesheet动画

1 个答案: