はじめに

phina.jsとはゲームが簡単に作れるJavaScriptのライブラリです。
詳しくはこちらを参照してください。
とりあえず試してみたいって方のための phina.js 入門 | phiary

SpriteSheetってなに？

SpriteSheetの前に、スプライトアニメーションについて説明します。
スプライトアニメーションとは、アニメーションの各コマ画像を一枚画像の中にタイル状に配置し、画像内での表示位置を連続で切り替えることで、アニメーションを実現させる手法です

こんな感じの画像の１フレームづつ切り替えて
　

この様な形で表示します（１～４フレーム目を繰り返してます）

frameIndexによるスプライトアニメーションサンプル
(runstant)

上記サンプルではSpriteのframeIndexを変化させて実現してますが、プログラム内で現在、フレームの何番目を表示するかを指定し、さらにプログラム内で任意の速度でフレームを進める様に制御しなくてはなりません。

これはいかにも面倒で、また、画像の変更にも弱い感じの方法です。
これを分かり易く、ｎ番のフレームからｎ番のフレームは○○のアニメーションと名前を付けて定義をしたものがSpriteSheetです。

使い方

SpriteSheetとして、下記の様にJSON形式で書いたファイルを用意します。
拡張子は何でもＯＫですが、この記事中ではSpriteSheetという事で.ssを使用しております。
（注：JSONにはコメントが付けられませんが、説明の為に付加してます。コピペする場合はコメントを全て削除してください）

hiyoko.ss

{
    //画像情報
    "frame": {
        "width": 32,    //１フレームの横幅
        "height": 32,   //１フレームの縦幅
        "cols": 6,      //横のフレーム数
        "rows": 3       //縦のフレーム数
    },

    //アニメーション情報
    "animations" : {
        "start": {              //アニメーション名
            "frames": [0,1,2,3],//表示するフレーム番号を配列として並べる(０始まり)
            "next": "start",    //アニメーション終了時、次のアニメーションを指定
                                //ループさせたい場合は自分を指定する
            "frequency": 5      //フレーム毎の間隔
        }
    }
}

このファイルをSpriteSheetのアセットとして読み込みます。

sample.js

var ASSETS = {
  //ひよこの画像
  image: {
    'hiyoko': 'https://rawgit.com/minimo/phina.js_advent_20151212/master/hiyoco_nomal_full.png',
  },
  //SpriteSheet
  spritesheet: {
    'hiyoko_ss': 'https://rawgit.com/minimo/phina.js_advent_20151212/master/hiyoko_short.ss',
  }
};

SpriteSheetをFrameAnimationで読み込み、Spriteにアタッチします。

var piyo = Sprite('hiyoko', 32, 32);
var ss = FrameAnimation('hiyoko_ss')
ss.attachTo(piyo);

アタッチ後にgotoAndPlayで再生するアニメーションを指定します。

ss.gotoAndPlay('start');

これでSpriteSheet通りにアニメーションが再生されます。
詳しい手順はサンプルを参照してください。

SpriteSheetとFrameAnimationによるスプライトアニメーションサンプル
(runstant)

まとめ

frameIndexを使用したスプライトアニメーションは手軽ですが、プログラム内である程度制御する必要があり、構造が複雑になりがちです。
そこでSpriteSheetを使用してアニメーション制御を任せてしまえば、プログラムも見通しがよくなるのでは無いでしょうか（主観）
便利な機能ですので使ってみてください！！

この記事で使用した画像とSpriteSheet置き場ですgithub
ひよこの画像は萬楽活戯大系（@CarasOhmiさん）よりお借り致しました。
ありがとうございます。

[phina.js]SpriteSheetを使ってみよう！

はじめに

SpriteSheetってなに？

使い方

まとめ