2013-09-22 1 views
1

Я пытаюсь нарисовать анимированное растровое изображение на моей сцене, но я не могу заставить его работать. Я могу проверить, что анимация добавлена ​​на сцену в консоли, но она не отображается.EaselJS: Не удается получить BitmapAnimation для отображения на этапе

HTML:

<canvas id="canvas" width="300" height="300"></canvas> 

JavaScript:

var canvas = document.getElementById('canvas'), 
    stage = new createjs.Stage(canvas), 
    chopperImg = document.createElement('img'), 
    spriteSheet, 
    animation; 

chopperImg.addEventListener('load', function (e) { 

    spriteSheet = new createjs.SpriteSheet({ 
     images: [ chopperImg ], 
     frames: { width: 64, height: 75, count: 10 }, 
     animations: { 
      idle: [ 0, 9, 'idle', 4 ] 
     } 
    }); 

    animation = new createjs.BitmapAnimation(spriteSheet); 
    animation.gotoAndPlay('idle'); 

    stage.addChild(animation); 

    createjs.Ticker.setFPS(30); 
    createjs.Ticker.addListener(stage); 
}); 

chopperImg.src = 'http://dutchnoobz.nl/chopper.gif'; 

Я сделал JSFiddle демонстрируя мою проблему здесь: http://jsfiddle.net/WWpVX/1/

ответ

5

Ваш GIF имеет высоту только 73px, ваша Frame- размеры не могут превышать размеры изображения, я обновил вашу скрипку, он работает здесь: http://jsfiddle.net/WWpVX/2/

frames: { width: 64, height: 73, count: 10 } 
+0

Спасибо, я бы не догадался. –

 Смежные вопросы

  • Нет связанных вопросов^_^