CreateJS の SpriteSheet クラス

1. スプライトシートの画像ファイル名
2. フレームの情報 （位置、大きさ等）
3. フレームを再生する順序

それぞれ、複数存在する場合 （例えば 2 つのファイルに分けてフレームが配置されている場合） は、複数指定します。

スプライトシートの画像ファイルの指定

具体的な例を紹介します。まず、画像ファイル名の指定方法です。

images: ["image1.png", "image2.png"],

"images" という名前で、画像ファイルのパスの配列を記述します。複数の画像を使う場合、順番が意味を持つので注意します。

フレーム情報の指定

次は、フレームの情報です。これは 2 種類の書き方があります。

まず、スプライトシート内に、同じ大きさのフレームが順番に並べられている場合は、以下のように記述します。

frames: {width:64, height:64, count:20, regX: 32, regY:64},

属性の名前は "frames" です。width と height で縦と横の大きさを指定します。上の例では、幅も高さも 64 ピクセルのフレームが並んでいることになります。3 つ目以降はオプションで、順に、フレーム数と基準点の座標の指定です。

この宣言方法では、フレームは、スプライトシートの左上から順に並んでいるものとして扱われます。フレーム数を省いた場合、スプライトシートの大きさとフレームの大きさから、フレーム数が計算されます。

スプライトシート内のフレームが、それぞれ違う大きさだったり、並び順と再生順が異なる場合は、上の書き方はできません。そこで、以下のようにフレーム 1 つ 1 つの情報を列挙します。

frames: [
  //x, y, width, height, imageIndex, regX, regY
  [0,0,64,64,0,32,64],
  [64,0,96,64,0]
],

それぞれのフレームは 7 つの数字から成ります。最初の 4 つは必須で、それぞれ順番に、フレームの x 座標、y 座標、幅、高さを示します。

5 つ目の数値は、フレームが含まれる画像ファイルを示します。値は、"images" 配列のインデックスです。デフォルトは 0 なので、スプライトシートが 1 枚画像の時は、指定不要です。

コッチの方法では、frames 配列内に記述された順番が、フレームの番号として使われます。

フレームの再生順序の指定

最後に、フレーム再生順の指定です。この指定は、上で定義したフレームを、そのまま順番に表示するだけであれば、とくに無くても構いません。タイムラインにラベルを付けて、再生の範囲や順番を制御したい、あるいはフレームの定義された順番とは無関係に表示する順番を宣言したい場合に必要になるもの、という理解で良いかと思います。

フレームの再生順序の指定も、2 種類の指定方法があります。どちらの場合も "animations" 属性として記述する点は同じです。

animations: {
  // start, end, next, frequency
  run: [0,5],
  jump: [6,11,"run",2]
 }

最初の方法は、開始フレームと終了フレームの番号を指定する方法です。上の "run" と名付けられたアニメーションでは、0 と 5 が指定されているため、frames に定義されているフレームの最初から 6 つ目までが順番に再生されます。

オプションとして、次に再生するアニメーションも指定できます。"jump" では、3 つ目の要素に "run" が指定されているので、jump 再生終了後は run が再生されます。"run" の代わりに "jump" が指定されていると、同じアニメーションがループすることになります。

4 つ目の要素は、進行の頻度の指定です。上の "jump" には 2 が指定されていますが、これは tick 2 つで 1 コマ進めたい、という指示です。SpriteSheet クラス自体に再生機能がある訳ではないので、実際には、再生する側に、この値に応じて動作を変えるロジックが必要です。

さて、フレームの再生順序を指定するもう一つの方法です。こちらは、フレームを任意の順序で再生したいときに使います。

animations: {
  run: {
    frames: [1,2,3,2,1]
  }
}

このように、"frames" に、再生する全てのフレームを 1 つ 1 つ順番に並べます。

こちらの書き方で、次に再生するアニメーションと頻度を指定したい場合は、以下のように記述します。

animations: {
  jump: {
    frames: [4,5,6,1],
    next: "jump",
    frequency: 2
  }
}

ちなみに、animations では、両方の書き方が混在しても大丈夫です。

animations: {
  run: [0,4],
  jump: {
    frames: [4,5,6,1],
    next: "run",
    frequency: 2
  }
}