いざゲームを作ってみようと思った時、サンプルは動いた意味は分かった。 じゃあ1つのゲームにまとめるにはどうしたらいいの？ってなっちゃうのかなと思います。 ご参考までにPhina.js でTap Runnerを作った時の流れを説明します。

部品（標準クラス群）のサンプル

ゲームを構成する部品は様々ですが、Phina.js 標準クラス群についてはすでに素晴らしい記事があります。 なので本記事では部品の詳細には触れません。

• phina.js Tips集 | Qiita

自分部品

サンプルで作れる簡単な部品を組み合わせて、ゲームに必要な部品を作ります。 時には新しい部品を作る必要があるかもしれませんが、目的がはっきりしていれば割とできちゃうものです。

ワタシが作った部品のサンプルページは以下です。 ちょっと面倒ですが、部品ごとに確認用のページを作っておくと、疎結合を維持したりその後の動作確認に役立ちます。

• Tap Runner用の部品サンプル
• yamahei/phina_samples

ちなみにサンプルごとにデバッグ用のフラグを入れています。 ソースコードをダウンロードしてフラグをONにすると、内容が確認しやすいと思います。

アニメーションと当たり判定

サンプルを元にスプライトをアニメーションさせることはできましたが、当たり判定が大きすぎて不満でした。

• [phina.js-Tips-021] Spriteにフレームアニメーションさせる | Qiita

そこで、スプライトの中に当たり判定枠を追加できるように部品を作りました。

• char_sample

マップと当たり判定

スプライトをタイル状に敷き詰めてマップとして機能させました。 各タイル（マップチップ）ごとに当たり判定を持たせてキャラクタとの衝突判定ロジックを確認しています。

• map_sample

Phina.jsの弱点として、WebGL対応が弱いことが挙げられます。 スプライトをタイル状に敷き詰めると描画が重すぎてまともに動きません。 それらの対策もこのマップ部品で行っています。

マップ自動生成

Tap Runner はステージを自動生成しています。 とはいっても完全自動ではなく、ステージを構成する部品をどう組み合わせるかの指定まではプログラム上で行っています。

• map_generate_sample

その他の部品

急に粗くなりますが、テキストを表示するボックスや、選択肢、アイテムなども部品にまとめています。

• textbox_sample
• selector_sample
• items_sample

ゲームに整える

上記の部品をまとめるとほとんどゲームになります。 衝突したときに何が起きるかを記述するだけ、、ではないですが、ここまでできていればゴールは近いです。

あとはタイトルやエンディングのシーンオブジェクトを追加すれば立派な（？）ゲームになります。

謝辞

画像は Phina.js 様より使わせていただきました。