Unity でClaude Codeコーディングでシンプルなボードゲームを作成する

モルヴェイラ

質問: ボードゲームを作りたい

全くUnityとかわからないんですが、ボードゲームのようなものを作りたいです。

Claude Codeのコーディングで、ボードゲームのようなものを作ってみます。

事前準備

Unity

こちらの記事を参照して、Unityのプロジェクトを作成します。

Claude Code

こちらのの記事を参照して、ClaudeデスクトップアプリケーションをインストールしてClaude Codeを利用できるようにします。

ボードづくり

はじめにフィールドとなるボードを作成します。今回は 100×100マスのボードとします。
Claude CodeでUnityプロジェクトのフォルダを作業フォルダとして次のプロンプトを実行します。

次のような質問がありました。

しばらくすると実装が完了します。

Unity Editorのウィンドウに移動し、[Game Object]メニューの[Board Game]の[Board Grid]の項目をクリックします。


実行します。中央にグリッドが表示できました。

グリッド選択

グリッドが表示されただけで何もできないので、クリックするとマスが選択できるようにします。 ついでにマスの位置にカメラが移動するようにします。
次のプロンプトを実行します。

しばらくすると実装が完了します。

説明に従って、Board Gridを一旦削除し。再度Board Gridを配置します。


再度実行します。グリッドの全体が表示されました。


グリッド内のマスをマウスの左ボタンでクリックします。 クリックしたセルの境界線が黄色で選択され、選択したグリッドを中心に表示拡大されます。


別のグリッドをクリックすると、クリックしたグリッドが選択され、カメラが選択したセルが中心になるように移動します。


セルの選択と移動が実装できました。

ユニットの配置

駒(ユニット)を配置します。次のプロンプトを実行します。

以下のディレクトリが作成されます。今回はテクスチャやマテリアルは無いので、fbxファイルをModels/Units/に配置します。

fbxモデルは以下を用意しました。Midjourneyでイラストを作成して、Tripo 3Dで変換して、3dsmaxでRetopologyしてポリゴンを整理したモデルです。 変換モデルなので、ポリゴンは汚いです。

続いて以下のプロンプトを実行します。

しばらくすると実装が完了します。

シーンのBoardGrid オブジェクトを選択して、Inspectorの[Board Units]の項目を開き、[初期配置 Initial Units]の項目の[+]ボタンをクリックします。項目が追加されますので、fbxファイルの項目をPreftabに設定し、X,Yのテキストボックスに配置したい座標を設定します。
(下図の画面では"Unit Id"が表示されていますが、これはもう少し後の実装後の画面キャプチャのため、表示されています。)

もう1項目追加し、ship_02 も画面に配置します。

ユニットの向きがおかしい

(向きを変える方法はこちらの記事で紹介します)

設定した、Prefabsのオブジェクトを[Board Units]の項目に設定します。

ユニットの位置微調整

ユニットが少し浮いている感を出したいので、次のプロンプトで調整します。

カメラのパース

ここまで作業して実行した画面が下図です。実行すると、グリッドの指定したX,Yの位置にユニットが表示されました。

ステータスウィンドウの実装

データ構造

今回のデータ構造は以下です。
画面のユニットの性能をunit.jsonで定義します。unit.json内にweaponsの項目があり、武器はweapon.jsonで定義することにします。

ユニットデータの作成

{
  "id": "ship_01",
  "team": "blue",
  "class": "destroyer",
  "hp": 500,
  "max_hp": 500,
  "armor": 30,
  "speed": 8,
  "weapons": ["pulse_laser", "missile"]
}

{
  "id": "ship_02",
  "team": "red",
  "class": "destroyer",
  "hp": 400,
  "max_hp": 400,
  "armor": 30,
  "speed": 7,
  "weapons": ["mega_beam", "missile"]
}

JSONファイルが、Assets\Resources\Units\units.json に作成され、情報が保存されます。

ウェポンデータの作成

{
  "id": "pulse_laser",
  "type": "energy",
  "damage": 35,
  "range": 12,
  "cooldown": 2,
  "attenuation": 0.9,
}

{
  "id": "mega_beam",
  "type": "energy",
  "damage": 45,
  "range": 10,
  "cooldown": 2,
  "attenuation": 0.8,
}

{
  "id": "missile",
  "type": "real",
  "damage": 20,
  "range": 18,
  "cooldown": 4,
  "attenuation": 1,
}

JSONファイルが、Assets\Resources\Weapons\weapons.json に作成され、情報が保存されます。

JSON読み込み部分とユニットへの割り当て機構の作成

ユニット情報のJSONファイルが作成できましたので、これを読み込んで画面のユニットにステータスデータを 割り当てる部分を作成します。

ステータスウィンドウにユニットデータを表示

クラス: "Destroyer"
HP: 500/500
装甲: 30
移動: 7
武器
　パルスレーザー
　　エネルギー兵器
　　攻撃力: 35
　　射程:12
　　クールダウン: 2
 　　減衰率: 10%
　 ミサイル
　　エネルギー兵器
　　攻撃力: 20
　　射程:18
　　クールダウン: 4
 　　減衰率: 0%

実行して、ユニットをクリックします。ステータスウィンドウが表示されます。

コマンドの作成(移動)

ターンの実装

ターン終了時にカメラを引きます。

カメラの微調整

コマンドの作成(攻撃)

実ダメージ = 基本ダメージ（damage） * (attenuation)*(距離)  - (armor * 乱数(0.. 1))

ボードの縮小 (デバッグ用)

ここは手動で、Board Grid (Script) の Width = 16 / Height = 16 に変更します。
ユニットの配置座標もblue (ship_01): (4, 4) red (ship_02): (11, 11) に変更します。

ダメージの表示

攻撃コマンドは実装できましたが、画面にダメージが表示されたほうが良いです。

ユニットの破壊

リソースは特に用意せず、Unity組み込みのパーティクルで実装されました。

ゲームオーバーの実装

ユニットステータスウィンドウのリッチ化

ステータスウィンドウに3Dのユニットが表示され回転するようになりました。

リリース版でのバグ取り

ここでリリース版を作成してプレイしてみましたが、うまく画面が表示されないです。以下のやり取りで不具合を修正します。

C:\Users\<ユーザー名>\AppData\LocalLow\<会社名>\<プロダクト名>\Player.log の内容

C:\Users\<ユーザー名>\AppData\LocalLow\<会社名>\<プロダクト名>\Player.log の内容

カメラの微調整

ユニットの色変更

設計変更

ここでunit.json内にteamが記載されていることがちょっとまずいと考え、以下のプロンプトを実行します。

Teamの設定はBoardGridの[Initial Units]に設定することになりました。

BGM/SE

フォルダが作成され、配置場所の案内があります。

Assets/Audio/
  ├─ BGM/     ← 戦闘BGM、タイトルBGM など
  └─ SE/      ← 攻撃音、爆発音、UIクリック音 など

BGMはSunoで、SEはSuno Soundsで作成します。詳しくはこちらの記事を参照してください。

BGMとSEのサウンドファイルを配置しました。

BGMが設定できたら、SEを設定します。次のプロンプトを実行します。

抜けていたので、こちらも追加します。

ユニットの移動音もあっても良いのですが、今回は無しにしました。

攻撃音はJSON側に設定できるよう、JSONファイルの書き換えもエージェント側で実施してもらえました。

    {
      "id": "pulse_laser",
      "name": "パルスレーザー",
      "type": "energy",
      "damage": 35,
      "range": 12,
      "cooldown": 2,
      "attenuation": 0.9,
      "se": "laser"
    },

ダメージをしっかり見せたい

ダメージの数字が出終わる前にターン終了でカメラを引いてしまう部分を修正します。

ターンをわかりやすく

コマンドウィンドウに重なってしまうので、次のようにします。

タイトル画面

バグ修正

クールダウンの実装

発射間隔を実装します。(もっと早めに実装しても良かったのですが。)

Webビルド用での不具合対処

フォントファイルが必要との回答があったので。

フォントの表示の改善

WorldSpace Canvas の dynamicPixelsPerUnit を上げる対処になりました。

エラーが発生したので対処してもらいます。

攻撃モーション

だいぶ無茶ぶりですが、以下のプロンプトを投げてみます。

それっぽいモーションを実装してくれました。

SEタイミング調整

ちょっと爆発のSEのタイミングが遅いので調整します。

これは、オーディオファイル側に先頭無音部分があるためとのことです。Claude Codeがffmpegで先頭部分の無音をカットしてくれました。

実行画面

ここまでの実行画面です。

スタート画面です。


グリッドにユニットが配置されています。


クリックするとユニットが選択されてステータスウィンドウが表示されます。画面下部にはコマンドウィンドウも表示されます。


[移動]ボタンをクリックした状態です。移動できるセルが表示できています。


こちらは攻撃の場合


ダメージ表示です。

背景

背景を設定したいですが、どのように実装すればよいかわからないので聞いてみます。

回答があり確認した結果、パノラマ・スカイボックスの実装になりました。 画像はプログラムで生成してプログラムで星を描画して解像度が足りるようにするとのこと。

星をテクスチャではなく「ジオメトリ（小さな板＝ビルボード）」で描画する方式に変えました。

大きな惑星を置きたくなったので、fbxファイルを用意して配置してもらいます。
惑星のオブジェクトは下図です。
テクスチャは、GPT Image2で作成しました。惑星のイメージを画像で生成して、次のプロンプトを実行します。

Prompt

この画像の惑星の地表面をテクスチャマッピングするための地表の画像を作成してください。地表面のみの画像です。
n=4
アスペクト比を16:9にする

こちらの画像が生成できましたので、テクスチャとして利用します。

実行画面

ここまでの実行画面です。
タイトル画面です。


背景が惑星になりました。


ステータスウィンドウなども表示できています。


問題なさそうです。


ちょっと惑星のわっかがしょぼいので、こちらは修正しようと思います。

デモ版

実際にプレイできます。とはいえ、ゲーム性がまだない、COMプレイヤーもないので、レーザーを打ち合うだけの運ゲームです。

• https://www.ipentec.com/demos/Mini-Fleet-Tactics-01/index.html

まとめ

ゲームはプログラムだけでなく、アセット（画像、3Dモデル、BGM、SE）の準備があるため、かなり大変ですが、昨今のAIの技術進歩でものすごく効率よく準備できる状況になり、 比較的簡単にゲームが作れるようになった印象です。
ちなみに今回、コードはClaude Codeにコーディングさせており、人力では全く記述していません。

この後どうするのか

COMロジック

COMプレイヤーが欲しいので、COMプレイヤーを実装したいですが、現在の環境を鑑みるとLLMで実装したいです。 Gemma4を利用して、戦況とユニット配置とステータスを渡すと、次の行動を出すような仕組みを入れたいです。 LLMなので、現在の状況を踏まえて、セリフ（「ここで突撃よ！」など）も合わせて出すのもよさそうですが、実現可能か検証は必要そうです。

地形効果

現状はフラットなマップですが、隕石群のマスなどを用意して、防御効果が上がるなど戦略性が出る仕組み。

UI改善

HPバーがマップ上のユニットの上に見えたほうが良いです。

その後

COMロジックをllama.cpp (Gemma4 12B)に処理をするよう接続しました。またアクションロジックと同時に相手のキャラクターのセリフも出力する動作にしました。 セリフは Irodori-TTS サーバーでボイス化してゲーム内で再生する仕組みを実装しています。

サーバー側の設備が必要なため、実際にプレイできる環境の準備が難しいので、動画でデモが見れます。

著者

Penta

iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用