タイルに命を吹き込むアセット配置（工場やダークウェブ）

【連載】GCP×AI：0円で創る近未来IT覇権ゲーム『ネオ・ジパング』開発記

前回では、数学の力（三角関数とキューブ座標）を使って、ブラウザ上に美しい六角形のグリッドを描き出しました。しかし、今のままではまだ、ただの「幾何学模様」に過ぎません。

今回は、この無機質なグリッドの一つひとつに、「半導体工場」「データセンター」「ダークウェブ」といった属性を与え、ゲームの世界として命を吹き込むプロセスを解説します。

もちろん、画像ファイルは1枚も使いません。

「サバイバルDX」的アセット定義

通常のゲーム開発であれば、ここでデザイナーが描いた美しいイラスト（PNGファイルなど）を読み込みます。しかし、私たちはブラウザ完結・低スペックPC対応の「サバイバルDX」を掲げています。

私たちが使うのは、画像ではなく「定義（オブジェクト）」です。

ネオ・ジパングを構成する資源セクター

ゲーム『ネオ・ジパング』では、近未来の覇権争いに必要な要素を以下の6つのアセットに集約しました。

• POWER（発電所）: すべての計算の源。

• DATA（オフィス街）: 情報が蓄積される都市の核。

• FACT（半導体工場）: ハードウェアを錬成する拠点。

• HARD（採掘場）: 地下に眠るレアメタル。

• AI（研究施設）: 知性が加速する特異点。

• DARK（ダークウェブ）: 秩序の外側。略奪と攪乱の地。

これらを、コード内で「色（ネオンカラー）」と「ラベル（文字）」として定義します。画像がないからこそ、プレイヤーの想像力を刺激する「ターミナル感」が強調されるのです。

AIに「絶妙なバランス」を計算させる

これらのアセットをマップに配置する際、手動で一つずつ決めるのは非効率です。かといって、完全にランダムだと「資源が偏りすぎてゲームにならない」という問題が起きます。

ここでAI（Gemini）の出番です。プロンプトで以下のように指示を出します。

AIは、数学的な配列のシャッフル（フィッシャー–イェーツのシャッフルなど）を駆使して、「毎回変わるけれど、常に遊びやすい」という黄金のバランスを持ったマップ生成ロジックを一瞬で書き上げてくれます。

数字トークンが「運命」を決める

セクターの上に配置される「2〜12」の数字。これはボードゲーム愛好家ならお馴染みの、ダイスの出目に対応する「確率」です。

Canvas上でこの数字を描画する際も、単なるテキストではなく「円形のトークン」として描画します。 さらに、出現率の高い「6」と「8」を警告色のマゼンタで強調する。こうした細かい視覚的演出も、コード一行で制御可能です。

軽量であることは「自由」であること

画像アセットに依存しない開発の最大のメリットは、「修正の速さ」にあります。 「工場の色をやっぱりオレンジにしたい」「新しい『暗号資産』セクターを追加したい」と思ったら、コードを数文字書き換えてGitHubにプッシュするだけ。

1秒後には、世界中のプレイヤー（あるいは自分自身のブラウザ）に反映されます。

次なる戦局へ

マップは完成しました。アセットも配置されました。 いよいよ次回からは、この静止したマップに「動き」を与えます。

「第3章：フロントとバックの結合 ～Python(FastAPI)でゲームロジックを制御する～」。

これまではフロントエンド（見た目）中心でしたが、いよいよバックエンドの軍師、Pythonが動き出します。ブラウザの中に「生きている宇宙」が誕生する瞬間を、どうぞお見逃しなく。