CreateJS-无法让我的Spritesheet进行动画处理

Question

I've checked this forum/the internet/google forwards and backwards for my particular question, but to no avail. 我已经检查了这个论坛/互联网/谷歌对我的特定问题的来回查询，但无济于事。 I get examples that come close to mine - which I try to impart into my own example, but nothing doing. 我得到的示例与我的非常接近-我试图将其引入我自己的示例中，但无济于事。 Please help! 请帮忙！ Again I apologize if this has been answered and I just overlooked, if so please throw me a link - otherwise here is my code: 再次抱歉，如果我已经回答了这个问题，但我只是忽略了，如果可以，请给我一个链接-否则，这是我的代码：

All I'm trying to do is animate a single sprite image of a jumping Mega Man. 我要做的就是为一个跳跃的《超人》的子画面制作动画。
Thanks, and Happy Holidays! 谢谢，节日快乐！

NOTE: Here the sprite I'm using 注意：这里我正在使用的精灵

HERE IS MY: JsFiddle 这是我的： 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

Here is a quick edit. 这是一个快速编辑。 http://jsfiddle.net/lannymcnie/f58mr0Lk/9/ http://jsfiddle.net/lannymcnie/f58mr0Lk/9/

Your Fiddle wasn't very helpful, since it was just your code pasted in. I modified it to drop the body tag (jsfiddle does that for you), import easeljs, and use the full image path. 您的Fiddle并不是很有用，因为它只是粘贴了您的代码。我对其进行了修改，以删除body标签（jsfiddle为您完成此操作），导入easyljs，并使用完整的图像路径。
The BitmapAnimation class was renamed to Sprite sometime ago. 不久前，BitmapAnimation类已重命名为Sprite。 I am not sure what version of EaselJS you are using, but it might not have that class anymore. 我不确定您使用的是哪个版本的EaselJS，但可能不再具有该类。
I removed the Bitmap. 我删除了位图。 The SpriteSheet data accepts either a string path, or an Image reference, not a Bitmap. SpriteSheet数据接受字符串路径或图像引用，而不接受位图。
As I suggested below, I pulled out the entire update method, added the Sprite one time, and then had the tick just update the stage directly. 正如我在下面建议的那样，我退出了整个更新方法，一次添加了Sprite，然后使刻度线直接更新了舞台。

The fiddle "works" now, but the spritesheet dimensions don't seem right. 小提琴现在“有效”，但Spritesheet尺寸似乎不正确。 Have a look. 看一看。

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 个解决方案

解决方案1
0 2014-12-25 19:04:01

CreateJS-无法让我的Spritesheet进行动画处理

问题描述

1 个解决方案

解决方案1 0 2014-12-25 19:04:01

解决方案1
0 2014-12-25 19:04:01