3

EaselJSにはスプライトを管理する素晴らしい方法があることは知っていますが、それを簡単にすることさえ可能ですか？

次のリンクは、テクスチャアトラスを使用するように私を説得しました：http：//www.altdevblogaday.com/2012/09/17/building-an-html5-game-dont-shrug-off-atlases/

私がこれをそんなにひどく欲しがる理由はほとんどありません：

  • Flash CS6のスプライトシートの生成機能により、TextureAtlasをすぐに使用できるようになります
  • ロード時間を改善します
  • 帯域幅を節約
  • より良い開発時間

これを開始する方法がわかりません。助けていただければ幸いです。

4

1 に答える 1

3

わかりました、私は私のコメントを少し拡張します。

EaselJS で表示要素を作成するときは、ソース画像を指定します。

srcImage = new Image();
srcImage.src = "http://whatever.com/image.png";
...
sprite1 = new Bitmap(srcImage);

デフォルトでは、Bitmap のインスタンスはイメージ全体です。ただし、ビットマップをその画像の領域に特定することはできます。たとえば、画像に 32x32 タイルの行が含まれているとします。

sprites = [];
for(i=0; i<8; i++) {
  sprites[i] = new Bitmap(srcImage);
  sprites[i].sourceRect = { x:i*32, y:0, width:32, height:32 };
}

これで 8 つのスプライトができました。それぞれがソース イメージの異なる 32x32 領域を参照しています。

動的に変更することもできます:

sprCursor = new Bitmap(srcImage);
sprCursor.sourceRect = ( x:0, y:0, width:32, height:32 };
...
if(cursorOverButton) {
  sprCursor.sourceRect = { x:32, y:0, width:32, height:32 };
  // or more efficiently, sprCursor.sourceRect.x = 32;
}

これは、EaselJS がアニメーション化されたスプライトを処理するために舞台裏でどのように機能するかということだと思います。

于 2012-11-16T16:16:45.013 に答える