以下のような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,
    });