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

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

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

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

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

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

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

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,
    });

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

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');

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