====== スプライトの表示とアニメーション ======

以下のような2コマの画像の表示を行います。

{{:phinajs:player.png|}}

スプライトシートの定義をjson形式で作成します。

<code>
{
    "frame": {
        "width": 16,
        "height": 16,
        "cols": 2,
        "rows": 1
    },
    "animations": {
        "normal": {
            "frames": [0, 1],
            "next": "normal",
            "frequency": 12
        }
    }
}
</code>

各項目の意味は以下の通りです。

  * width: 1フレームの幅
  * height: 1フレームの高さ
  * cols: スプライトシート中の横方向のフレーム数
  * rows: スプライトシート中の縦方向のフレーム数
  * animations: アニメーションの定義
  * frames: アニメーションに使用するフレームの番号、スプライトシートの左上から0始まり
  * next: 次のアニメーション、自分自身を指定するとループする
  * frequency: アニメーション間隔

これらのファイルはそれぞれplayer.pngとplayer_ss.jsonとしてimagesディレクトリ下に配置するものとします。

GameAppにこれらのファイルをアセットとして登録します。

<code>
const ASSETS = {
    image: {
        'player': './images/player.png'
    },
    spritesheet: {
        'player_ss': './images/player_ss.json'
    },
};

phina.main(function() {

    var app = GameApp({
        width: SCREEN_WIDTH,
        height: SCREEN_HEIGHT,
        startLabel: 'main',
        assets: ASSETS,
        fit: false,
    });
</code>

あとはシーンの中などで、スプライトとスプライトシートを作成し、attachToでスプライトとスプライトシートの紐づけをして、gotoAndPlayでアニメーションを開始します。

<code>
this.player = Sprite('player', 16, 16);
this.player.x = this.gridX.center();
this.player.y = this.gridY.center();
this.player.addChildTo(this);

this.player_ss = FrameAnimation('player_ss');
this.player_ss.attachTo(this.player);
this.player_ss.gotoAndPlay('normal');
</code>

==== 参考リンク ====

  * [[https://qiita.com/minimo/items/0aad94d94478845d3ce2|[phina.js]SpriteSheetを使ってみよう！ - Qiita]]