1

私はeaseljsが初めてで、画像を特定の数に分割する方法を知りたいと思っていました。これまでに収集したものから、SpriteSheets を使用してこれを達成することになっています。ただし、私が見た唯一のチュートリアルは、1 つの画像を複数の画像に分割して SpriteSheet に配置するのではなく、1 つの SpriteSheet に複数の画像を使用するものです。これはこれまでの私のコードです (スプライトシート配列にまだ適切にアクセスできないため、変数フレームが未定義であることはわかっています):

  var data = {
    images: ["/images/teemo.png"],
    frames: {width:50, height:50}
  };
  var spriteSheet = new createjs.SpriteSheet(data);
  console.log(spriteSheet);
  console.log(spriteSheet[frames]);
  var frames = spriteSheet[frames];
  console.log(frames);
  for (var i=0; i<frames.length; i++){
    var bmp = new createjs.Bitmap(SpriteSheet[frames][i]);
  }
4

1 に答える 1

1

スプライトシートは興味深い方法です (実際にはクラスの意図ではありません)。あなたの使い方は間違っていますが。

  1. スプライトシートを作成する
  2. Sprite インスタンス (EaselJS 0.6.1 以前では BitmapAnimation と呼ばれていました) を作成し、それぞれが同じ SpriteSheet インスタンスを指します。
  3. sprite.gotoAndStop(frame) を使用して、各インスタンスに異なるピースを表示させます

次に例を示します。

for (var i=0; i< numberOfImages; i++) {
    var sprite = new createsjs.Sprite(spriteSheetData);
    sprite.gotoAndStop(i);
    stage.addChild(sprite);
    // Other stuff
}

Bitmap と sourceRect プロパティを使用して画像の一部を切り抜くこともできます。このプロパティは、切り抜き領域を定義する Rectangle を取ります。これは最終的に上記のアプローチとほぼ同じになりますが、各 Rectangle の寸法を決定するのにより多くの作業が必要になる場合があります。

乾杯。

于 2013-10-27T15:37:56.397 に答える