[phina.js]コード内にフレームアニメーション定義を記載する

今回のTips

今回は、画像を使ったゲーム作りには欠かせないフレームアニメーションの小ネタを紹介します。phina.jsのフレームアニメーションについては、以下のエントリーがとても参考になります。

[phina.js]SpriteSheetを使ってみよう！ by @minimo 氏

上の記事に書いてあるように、フレームアニメーションで使用するスプライトシートは、基本的には外部のファイルにJSON形式で定義して、phina.jsからASSETとして読み込みます。

一方、phina.jsのソースを読むと仕組みが分かりますが、スプライトシートの定義はjsのコード内に直接書くこともできます。
方法は、以下のようにASSETのスプライトシートの該当箇所にJSONファイルの中身を書くだけです。
この手法は、手っ取り早くフレームアニメーションの確認や調整をしたい場合に便利かと思います。また、jsのコード内なので、コメントを付すこともできます。

var ASSETS = {
  image: {
    'explosion': 'https://rawgit.com/alkn203/radar_touch/gh-pages/assets/explosion.png',
  },
  spritesheet: {
    'explosion_ss':
    {
      "frame": {
        "width": 80,
        "height": 80,
        "cols": 8,
        "rows": 1,
      },
      // アニメーション
      "animations" : {
        "start": {
          "frames": [0,1,2,3,4,5,6,7],
          "next": "end",
          "frequency": 2,
        },
        "end": {
          "frames": [5,6,7],
          "next": "end",
          "frequency": 5,
        }
      }
    },
  }
};

サンプル

[runstantで確認]

まとめ

今回は、フレームアニメーションの小ネタについて書かせて頂きました。使い方としては、まずはコード内で書いて動作を確認しつつ、固まったらソースコード肥大化防止のために外部JSONファイルに移すという流れが良いでしょう。