創建一個水平spritesheet的js動畫

Question

我已經通過文檔和樣本只丟失在過時的文檔。顯然沒有最新版本的createjs的樣本。

我需要平滑滾動水平spritesheet。這樣在新圖像完全處於「窗口」之前顯示圖像的中間部分。因此，頁面中的位置不會只移動單列中顯示的內容。水平spritesheet是不同的。而且我們不會在我們上下滾動的圖像之間切換。

我在我的智慧結束與此。

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

該行給出了一個錯誤

不是構造

this.sprite = createjs.BitmapAnimation(spriteSheet); 

給出錯誤

不是函數

這裏是精靈表

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類。

Older versions（0.6.0）有，但最有可能被SpriteSheet類替代。

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