【バイブコーディング】レトロ戦略ゲームを作るその３(マップエディタ)

前回、レトロ戦略ゲームの画像素材を生成AIで制作したものに置き換えたことで、地形やユニットの識別ができるようになった。

今回は、マップを編集する機能を実装する。

マップをどのように実装するのがよいかCodexに相談したところ、対戦画面にはフィールドと操作パネルがあるので、UIはそのままで、シーンだけを別に管理するのが良いとのことだった。

質問:

マップエディタを追加したいです。
どのように実装するのが良いですか？

回答:

おすすめは、対局用 BattleScene に編集機能を足す のではなく、EditorScene を別で作る構成です。
今のコードベースだと、データはすでに ScenarioData (line 240) と JSON 変換があるので、エディタはこれを直接編集するのが一番素直です。

...(略)

バトルシーンとエディットシーンの切り替え方法は、ボタン追加を提案されたが、ゲーム操作と混じると分かりにくくなるので、右クリックのコンテキストメニューでも良いか聞いたところ、良いと思うとのことだったので、その方針にする。

質問:

シーンの切り替えの操作はどうしますか？

回答:

おすすめは、常時見えている専用ボタン ではなく、文脈に応じた遷移 にすることです。

基本はこうです。

Battle -> Editor
Commands に Edit Map を置く
押すと「現在マップを編集するか」「初期マップを編集するか」を選べる

...(略)

質問:

右クリックしたときのコンテキストメニューを開いてそこからシーンを切り替えるのはどうでしょうか？

回答:

ありです。むしろこのゲームにはかなり合っています。

左クリック主体のゲームなので、右クリックを「場面切替や補助コマンドの入口」にするのは自然です。
常設ボタンを増やすより UI を汚しにくいのも利点です。

...(略)

実装の詳細を検討させた後、初版の実装範囲が提示されたので、初版実装を依頼した。

操作パネルに多少ボタンの重なりがあったので、修正を依頼したところ、基本的な操作ができる状態になった。

マップサイズが固定で、変更できなかったため、マップサイズ変更の方法を相談した。

サイズを数値入力して、アンカーを設定して、拡張するのが良いとのことだったので、その方針を採用した。

マップサイズ変更の操作はどこから行うのが良いか相談したところ、Toolsにボタン追加を提案されたが、マップ編集と混じるのは良くないので、ヘッダーのマップサイズをクリックするのはどうか聞いたところ良いとのことだったので採用した。

ヘッダーのマップサイズをクリックするとポップオーバーで編集できるようになった。

マップサイズが表示領域外の場合、マウスの中央ボタンをパンすることでスクロールできるようになっている。
しかし、表示領域外に続いていてスクロールできることが視覚的にわかりにくい。

ChatGPTにスクリーンショットを与えてどのような方法があるか聞いたところ、「edge fade」と呼ばれる手法が良く使われるとのことだった。
そこで、Codexに「edge fade」の実装を依頼した。

表示領域の枠の黒のマージン部分に、フェードアウトする形でマップの続きが描かれるようになった。
これで、スクロール可能であることが視覚的にわかるようになった。

Codexと相談しながらマップエディタを実装した。
マップサイズ変更やスクロール処理も相談しながら実装することで、わかりやすいUIが実装できた。
マップの保存や読み込みもできるようにしたい。

TadaoYamaokaの開発日記