2013-04-14 4 views
1

Я создаю свой лист спрайтов с помощью Flash Pro и загружаю спрайт с помощью EaselJS. Я замечаю, что если мой спрайт слишком велик, он обрезается снизу (т. Е. Руки вырезаются). Следующий код демонстрирует это:Почему мой спрайт обрезается снизу?

<html> 
    <head> 
     <title>Example</title> 
     <script type="text/javascript" src="easeljs-0.6.0.min.js"></script> 
    </head> 

    <body> 
     <canvas id="canvas"> 
      HTML5 Canvas not supported 
     </canvas> 
     <script> 
      canvas = document.getElementById("canvas"); 
      stage = new createjs.Stage(canvas); 

      // create spritesheet and assign the associated data. 
      largeSS = new createjs.SpriteSheet({ 
       images: ["large.jpg"], 
       frames: [[0,0,221,200,0,0,0],[221,0,221,200,0,0,0],[0,200,221,200,0,0,0],[221,200,221,200,0,0,0]], 
       animations: { 
        talk: [0, 3, "talk", 7] 
       } 
      }); 

      bmpAnimation = new createjs.BitmapAnimation(largeSS); 
      bmpAnimation.gotoAndPlay("talk"); 
      stage.addChild(bmpAnimation); 
      createjs.Ticker.addListener(stage); 
     </script> 
    </body> 
</html> 

Следующая моя large.jpg:

Однако проблема решается, если я сделаю мой спрайт меньше. Ниже я точно такой же код, за исключением использования меньшего размера кадра и то же, но меньше, спрайт лист:

<html> 
    <head> 
     <title>Example</title> 
     <script type="text/javascript" src="easeljs-0.6.0.min.js"></script> 
    </head> 

    <body> 
     <canvas id="canvas"> 
      HTML5 Canvas not supported 
     </canvas> 
     <script> 
      canvas = document.getElementById("canvas"); 
      stage = new createjs.Stage(canvas); 

      // create spritesheet and assign the associated data. 
      smallSS = new createjs.SpriteSheet({ 
       images: ["small.jpg"], 
       frames: [[0,0,100,91,0,0,0],[100,0,100,91,0,0,0],[0,91,100,91,0,0,0],[100,91,100,91,0,0,0]], 
       animations: { 
        talk: [0, 3, "talk", 7] 
       } 
      }); 

      bmpAnimation = new createjs.BitmapAnimation(largeSS); 
      bmpAnimation.gotoAndPlay("talk"); 
      stage.addChild(bmpAnimation); 
      createjs.Ticker.addListener(stage); 
     </script> 
    </body> 
</html> 

small.jpeg:

Я действительно потянув меня за волосы по этой проблеме. Может кто-нибудь, пожалуйста, объясните мне, почему это происходит? Что я делаю не так? Или существует ли ограничение на то, насколько велики спрайты?

спасибо.

ответ

2

Размер по умолчанию для холста меньше ваших изображений - так что ваше изображение обрезается. (Chrome - 300x150). Установите высоту холста выше, а остальная часть анимации будет видна.

Cheers!

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