创建水平spritesheet的js动画

Question

我已经浏览了文档和示例，只是在过时的文档中丢失了。显然没有最新版本的 createjs 的示例。

我需要平滑滚动水平精灵sheet。这样中间的图片就显示在新图片完全在"window"之前。所以页面中的位置并没有移动，只是从单列水平精灵显示的内容sheet不同。而且我们不会在上下滚动的图像之间切换。

我对此束手无策。

 this.sprite = new createjs.BitmapAnimation(spriteSheet);

该行出错

not a constructor

 this.sprite = createjs.BitmapAnimation(spriteSheet);

报错

not a function

这是精灵sheet

https://github.com/nydehi/asp.net-mvc-example-invoicing-app/blob/master/screenshots/1.png

我现在正在这样做，没有错误，但没有任何显示。

<script type="text/javascript" src="createjs-2014.12.12.min.js"></script>
<script>
  function init() {
  var data = {
        images: ["1.png"],
        frames: {width:15, height:20},
        animations: {
            stand:0,
            run:[1,5],
            jump:[6,8,"run"]
        }
    };
    var spriteSheet = new createjs.SpriteSheet(data);
    var animation = new createjs.Sprite(spriteSheet, "run");
   var stage = new createjs.Stage("demoCanvas");
 stage.addChild(animation);
        animation.gotoAndPlay("run");   //walking from left to right
stage.update();
  }
</script>

Answer 1

您可能使用的是更新版本的 CreateJS（大约 0.8.2 版），它上面不再有 BitmapAnimation class。

Older versions (0.6.0) had it, but it was most likely replaced by the SpriteSheet class.

Check here for the most recent documentation.

Answer 2

早期关于 BitmapAnimation 被弃用的评论是正确的。您更新后的代码示例在其他方面看起来还不错。

我认为您只是缺少在内容更改时更新舞台的东西。您的示例只有一个更新，但是因为您的图像是使用字符串路径加载的，所以当您调用 stage.update().

时它还没有准备好

任何时候内容改变，你需要告诉舞台刷新。通常，这是在内容更改时手动控制的，或者不断使用 Ticker。

createjs.Ticker.on("tick", function(event) { 
    // Other updates

    // Update the stage
    stage.update(event); 
});

// Or a handy shortcut if you don't need to do anything else on tick:
createjs.Ticker.on("tick", stage);

创建水平spritesheet的js动画

Create js animation of a horizontal spritesheet

javascript

createjs

easeljs