ここから遊べます

「GTA 6のようなオープンワールドゲームを、大阪を舞台にブラウザで動かしたい」——そんなテーマで、Claude Fable 5.2を使ってゲームを作ってみました。

完成したのは、通天閣・新世界から天王寺・あべのハルカス周辺を自由に歩き回り、車を運転し、ミッションに挑戦できる3Dサンドボックスゲーム 「VELA BAY」 です。

まずは実際に触ってみてください。

プレイする: https://github30.github.io/fable52-gta6/
ソースコード: https://github.com/GitHub30/fable52-gta6

※GTA VIおよびRockstar Gamesの公式作品ではありません。GTAのようなオープンワールド作品に着想を得た、独立したオリジナルゲームです。ゲーム内の車・人物・建物モデル・音声はコードから生成しており、公式アセットは使用していません。

できあがった大阪の街

今回こだわったのは、架空の街を手作業で並べるのではなく、実際の大阪の地図データをゲームのワールドに変換したことです。

舞台は新今宮・新世界・天王寺・阿倍野周辺。およそ 1,557m × 1,386m のエリアを歩き回れます。

項目	内容
道路	OpenStreetMap由来の3,699区間
建物	OpenStreetMap由来の4,519棟
地形	国土地理院の標高データを利用。標高差は約26.6m
航空写真	国土地理院の空中写真タイル
ランドマーク	通天閣、あべのハルカス、天王寺動物園、てんしばなど
交通	日本の道路に合わせた左側通行

地面には航空写真を貼り、標高データから地形を生成。道路と建物は地図データの形状を使って配置しています。上町台地の高低差もあるので、完全な平面マップではありません。

あべのハルカスは高さ300mのガラスの塔として、通天閣は専用モデルとして実装しました。

何ができるのか？

見た目を眺めるだけのデモではなく、実際に操作できるゲームになっています。

車に乗って大阪を走る

プリウス風のリフトバック、アルファード風のミニバンを実装しました。タクシーやパトカーも街を走っています。駐車中の車だけでなく、走行中の車にも乗り込めます。

車にはダメージがあり、衝突を繰り返すと煙が出て走行不能になります。救急車や消防車も配置し、一般車両として街中を走るようにしました。

歩行者と交通AI

街には歩行者と一般車両が存在します。車両AIは実際の道路グラフをたどって走行し、歩行者は歩道を移動したり道路を横断したりします。危険を感じた歩行者が逃げる挙動もあります。

手配度と警察の追跡

車両強盗や暴行などを行うと、手配度が★1〜5で上昇します。パトカーがプレイヤーを追跡し、囲まれて停止すると逮捕されます。警察の視界から逃れ続けると手配を解除できます。

さらに、手配度が上がるとパトカーから警官が降りて徒歩で追跡してきます。

武器・ヘリコプター

素手、ピストル、AK-47、ロケットランチャーを切り替えられます。ヘリコプターにも乗り込めるので、地上だけでなく上空から大阪の街を眺められます。ビルの屋上への着陸にも対応しています。

ミッション・時間・天候

ミッションは以下の5種類です。

配達
チェックポイントレース
逃走
タクシー
木箱回収

クリアすると賞金を獲得できます。街には現金バッグや隠しパッケージも配置しました。

昼夜のサイクルと、晴れ・曇り・雨・霧の天候変化にも対応しています。雨の日はタイヤが滑りやすくなり、夜になると街灯や窓明かり、車のヘッドライトが点灯します。

技術構成

技術	用途
TypeScript	ゲームロジック
Three.js	3D描画・シーン管理
Vite	開発サーバー・ビルド
Python	地図データの取得・変換
Canvas / Web Audio	テクスチャやサウンドの生成
localStorage	セーブデータの保存

ランタイムの主要ライブラリはThree.jsです。物理エンジンは導入せず、ゲームに必要な範囲に絞った独自の衝突判定を実装しています。

実装で面白かったところ

1. 地図データをゲーム用の座標に変換する

tools/fetch_osaka.py でOpenStreetMapと国土地理院のタイルを取得し、ゲーム内で扱いやすいローカル座標へ変換しています。

生成するデータは次のとおりです。

map.json: 道路グラフ、建物の輪郭など
dem.bin: 標高データ
ground.jpg: プレイ範囲の航空写真
far.jpg: 周辺エリアの航空写真

標高データは4m間隔の格子に変換し、ゲーム内では補間して地面の高さを求めます。道路・建物の配置だけでなく、車やプレイヤーの足元の高さにも利用しています。

緯度・経度をメートル単位のローカル座標へ変換する処理は、概ね次の考え方です。

x = (lon - LON0) * 111320 * cos(radians(LAT0))
z = -(lat - LAT0) * 110920

地図の中心付近を原点にすることで、Three.jsのワールド内で扱いやすい座標になります。地球全体を扱うGISではなく、今回のような限定されたエリアのゲームマップに絞った単純化です。

2. 物理エンジンなしで建物との衝突を処理する

建物の輪郭は単純な四角形とは限りません。そこで建物を多角形として扱い、プレイヤーや車両を円として近似する「円 vs 多角形」の衝突判定を実装しました。

さらに、空間ハッシュで近くにある建物だけを調べるようにしています。マップ全体の建物を毎回総当たりする必要がありません。

実装では38m四方のセルに建物ポリゴンを登録し、プレイヤーや車両の円が重なるセルだけを検索します。イメージとしては次のような処理です。

const CELL = 38;
const minCellX = Math.floor((x - radius) / CELL);
const maxCellX = Math.floor((x + radius) / CELL);
const minCellZ = Math.floor((z - radius) / CELL);
const maxCellZ = Math.floor((z + radius) / CELL);

// この範囲のセルに登録されたポリゴンだけを衝突判定する

建物の輪郭は多角形、プレイヤーや車両は円で近似することで、物理エンジンを導入せずに必要な衝突処理を実現しています。

3. 道路グラフを使った車両AI

車両AIは道路の中心線ではなく、左側通行を考慮したレーン上の経路を追従します。交差点に到達すると、接続している道路から次の進行先を選びます。

警察車両も同じ車両制御を使い、通常時は道路に沿って走り、追跡時はプレイヤーへ接近する経路を選択します。

開発時のChromium環境（Windows 11、AMD Radeon内蔵GPU）での計測では、シミュレーション部分は約0.3ms/フレームでした。これは描画を含むFPSではなく、開発環境内での処理時間です。PCやブラウザが変われば結果も変わるため、一般的な性能値としては扱えません。

4. 車両や人物をコードから生成する

車・人物・建物の壁面テクスチャ・効果音は、外部のゲームアセットに依存せずコードから生成しています。これにより、地図データ以外の素材を大量に用意しなくても、ゲームとして成立するところまで作れました。

Fable 5.2での開発について

今回の開発は、最初の指示だけで全機能を一度に生成して終わり、という進め方ではありません。

リポジトリの docs/SPRINT_LOG.md にも記録しているとおり、都市の生成、プレイヤー操作、車、交通AI、ミッション、警察、戦闘、ヘリコプター、実際の大阪マップという単位に分けて、段階的に実装と検証を進めました。

特に意識したのは、機能を追加したら「実際に動くか」を確認することです。たとえば、車に乗れるか、壁にめり込まないか、警察に逮捕されるか、ミッションをクリアできるかを個別にチェックし、問題があれば修正してから次へ進みました。

Fable 5.2は2026年11月9日にAnthropicから発表されたモデルで、公式ドキュメントでも長い工程を伴うエージェント型の作業や高度なコーディングが用途として挙げられています。

今回のプロジェクトは、そうしたモデルを使って、地図データの加工からゲームロジック、描画、操作、検証までを一つの成果物にまとめた事例です。もちろん、これだけでモデルの性能を一般化できるわけではありません。

ローカルで動かす

Node.jsとnpmを用意したら、次のコマンドで起動できます。

git clone https://github.com/GitHub30/fable52-gta6.git
cd fable52-gta6
npm install
npm run dev

ブラウザで http://localhost:5173 を開きます。

本番ビルドと型チェックは以下です。

npm run typecheck
npm run build

操作方法

操作	キー
移動・アクセル・ブレーキ・ハンドル	`W` `A` `S` `D`
カメラ操作	マウス（環境によってはドラッグ）
走る	`Shift`
ジャンプ／ハンドブレーキ	`Space`
車に乗る・降りる	`E`
ミッション開始	`F`
攻撃	左クリック
武器切り替え	`1` `2` `3` `4`
ヘリコプターの上昇・下降	`Space` / `Shift`
クラクション	`H`
ラジオ ON/OFF	`R`
時刻を進める／天候切り替え	`T` / `Y`
ミッション中止	`M`
ポーズ	`Esc`

まだできていないこと・制限

もちろん、GTA VIと同じ規模や品質ではありません。現時点では、次のような制限があります。

建物の壁面は種類別の生成テクスチャで、実際の建物の外観や看板を再現しているわけではありません。
建物の高さデータがない場合は、面積などから推定しています。
高架道路・高架鉄道・駅舎内部・信号機などは未実装です（交差点では車両同士が譲り合う簡易制御です）。
PLATEAUの3D都市モデルはまだ取り込んでいません。
実機のGoogle ChromeでのFPSや操作感は、今後さらに確認が必要です。

地図の形状や航空写真がリアルでも、建物の細部まで実物どおりというわけではありません。ここは今後の改善ポイントです。

まとめ

今回作ったのは、実際の大阪の地図データをベースにした、ブラウザで遊べる3Dオープンワールドゲームです。

AIにコードを書かせるだけでなく、地図データをゲーム向けに変換し、道路を走るAIや衝突判定を組み合わせていくことで、街を歩いて車を運転できるところまで形にできました。

大阪の街を自分で走り回れるので、ぜひ一度プレイしてみてください。

🎮 VELA BAYをプレイする
💻 GitHubリポジトリ

参考・データ出典

道路・建物データは © OpenStreetMap contributors（ODbL）です。航空写真・標高データには国土地理院の地理院タイルを使用し、加工して利用しています。利用時はそれぞれの利用条件・出典表記に従ってください。