Question

我正在试图在画架和动画片上制作动画片。这是我第一次使用精灵，因此我不了解它们。

用于显示此特定动画的简单画架代码是;

var stage;

function init() {

    // create a new stage and point it at our canvas:
    stage = new createjs.Stage(document.getElementById("demoCanvas"));

     var data = {
         images: ["http://i.imgur.com/g5WtL7v.png"],
         frames: {width:256, height:256},
         animations: {
            run:[0,4]
            }
     };

     var spriteSheet = new createjs.SpriteSheet(data);
     var animation = new createjs.BitmapAnimation(spriteSheet);
     animation.gotoAndPlay("run");

}

但精灵根本没有出现在画布上。我做错了什么？

补充问题; 在画架中定义帧可以通过

完成

frames: [ // x, y, width, height, imageIndex, regX, regY

虽然我理解宽度和高度，但是x，y，imageIndex和regX是什么，regY。文档解释了我如何使用这些参数，但对于我生命中第一次使用精灵的人，我只是不知道这些术语的含义。

编辑：我也尝试过更改代码;

 var stage;

function init() {

    // create a new stage and point it at our canvas:
    stage = new createjs.Stage("demoCanvas");

    var data = {
        images: ["http://i.imgur.com/g5WtL7v.png"],
        frames: {width:256, height:256, count:8},
        animations: {
            run:[0,4, true]
        }
    };

    var ss = new createjs.SpriteSheet(data);
    var animation = new createjs.BitmapAnimation(ss);

    animation.x = 100;
    animation.y = 100;

    stage.addChild(animation);

    createjs.Ticker.setFPS(60);
    createjs.Ticker.addEventListener("tick", stage);
}

但我仍然看到一块空白的画布......

Answer 1

你错过了frame-object中的帧数：

frames: {width:...,height:...,count:4} // or whatever number of frames your sprite holds

以防万一：宽度和高度是1帧的宽度和高度，而不是整个图像。

在此处查看更多信息和示例：http://www.createjs.com/Docs/EaselJS/classes/SpriteSheet.html

Answer 2

好的，我通过结合上面列出的代码来完成工作;

var stage;

function init() {

    // create a new stage and point it at our canvas:
    stage = new createjs.Stage("demoCanvas");

    var data = {
        images: ["http://i.imgur.com/g5WtL7v.png"],
        frames: {width:256, height:256, count:8},
        animations: {
            run:[0,4, true]
        }
    };

    var ss = new createjs.SpriteSheet(data);
    var animation = new createjs.BitmapAnimation(ss);



    animation.x = 100;
    animation.y = 100;

    stage.addChild(animation);
    animation.gotoAndPlay("run");

    createjs.Ticker.setFPS(10);
    createjs.Ticker.addEventListener("tick", stage);
}

现在我有一些问题;

如果我需要animation.gotoAndPlay("run");为sprite设置动画，那么https://github.com/CreateJS/EaselJS/blob/master/examples/SpriteSheet_simple.html处的代码不需要它吗？
了new createjs.Sprite(ss, "run");和new createjs.BitmapAnimation(spriteSheet);之间的区别。我无法找到前者的任何文件。

我的简单画架脚本中的精灵动画没有显示出来

2 个答案: