Next2Dでゲームを作ってみる(前半)

ゲームを作ってみる

今日から、Next2D Frameworkを利用してナンバーパズルゲームを作ってみようと思います。

仕様を考える

• パズルのピースを四色とする。同じ色同士のピースが結合でき、ナンバーは加算される
• ピースが結合するとランダムで新しいピースが生成される
• ナンバーはユーザーが指定した2から9の倍数になると得点に加算され、タイムゲージが回復する
• タイムゲージが0になるとゲーム終了

シーンのURL設計を考える

• オープニング

https://example.com/top

• ホーム画面

https://example.com/home

• ゲーム画面

https://example.com/game/play

• ゲーム終了画面

https://example.com/game/result

素材を作る

• タイトルロゴ
• 四色のピースとテキストエリア
• タイムバー

必要な素材をNoCode Toolで制作してみようと思います。
まずは素材なので、デフォルトの機能だけで作っていきます。また、見た目を整えるのは最終日に行います。

タイトルロゴ

タイトルロゴをテキスト機能で設置します。

四色のピースとテキストエリア

角丸矩形の雛形にBevelフィルターを薄く適用して、それっぽいボタンを4つ作ります。

タイムバー

マスクを適用して、中のShapeのx座標を移動してバーの減算を表現します。

ViewとViewModelを作成する

URL設計したパスをrouting.jsonに追加します。

routing.json

{
  "top": {
    "requests": [
      {
        "type": "content",
        "path": "{{ content.endPoint }}content/opening.json",
        "name": "OpeningContent",
        "cache": true
      }
    ]
  },
  "home": null,
  "game/play": {
    "requests": [
      {
        "type": "content",
        "path": "{{ content.endPoint }}content/material.json",
        "name": "MaterialContent",
        "cache": true
      }
    ]
  },
  "game/result": null
}

自動生成

デフォルトで設定されてるディレクトリは不要なのでsrc/viewの中を空にします。
routing.jsonに設定すれば、後は以下のコマンドを実行するだけで自動でViewとViewModel、そして必要なディレクトの全てを自動生成します。

npm run generate

これで、素材の準備はできたので、明日からはFrameworkでロジック部分の制作を進めていければと思います。