從這裡可以遊玩
「想把像 GTA 6 那樣的開放世界遊戲，以大阪為舞台在瀏覽器裡跑起來」——我就用 Claude Fable 5.2 以這個主題做了一款遊戲。
完成的是一款 3D 沙盒遊戲 「VELA BAY」，你可以在通天閣、新世界到天王寺、阿倍野 Harukas 周邊自由走動、開車，並挑戰任務。
先請實際體驗看看。
※這不是 GTA VI 及 Rockstar Games 的官方作品。這是一款受到 GTA 類開放世界作品啟發的獨立原創遊戲。遊戲內的車輛、人物、建築模型與音效皆由程式碼生成，未使用官方素材。
做出來的大阪街道
手機也能玩
這次的重點不是手工把虛構街道一條條排出來，而是把真實大阪的地圖資料轉換成遊戲世界。
舞台設定在新今宮、新世界、天王寺、阿倍野一帶。你可以在大約 1,557m × 1,386m 的區域內自由探索。
項目內容道路來自 OpenStreetMap 的 3,699 個路段建築來自 OpenStreetMap 的 4,519 棟地形使用國土地理院的高程資料。高低差約 26.6m航空照片國土地理院的航照圖磚地標通天閣、阿倍野 Harukas、天王寺動物園、天芝等交通依照日本道路規則採左側通行地面鋪上航照圖，並根據高程資料生成地形。道路與建築則使用地圖資料的形狀進行配置。由於上町台地有高低起伏，因此不是完全平坦的地圖。
阿倍野 Harukas 以 300m 高的玻璃高塔實作，通天閣則以專用模型實作。
能做什麼？
這不是只用來看畫面的展示，而是一款可以實際操作的遊戲。
開車在大阪兜風
實作了 Prius 風格的掀背車、Alphard 風格的廂型車。計程車與警車也會在城市中行駛。不只是停著的車，連行駛中的車也能上車。
車輛有損傷系統，反覆碰撞後會冒煙並無法行駛。也配置了救護車與消防車，讓它們作為一般車輛在街上行駛。
行人與交通 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／frame。這不是包含繪製的 FPS，而是開發環境中的處理時間。若更換電腦或瀏覽器，結果也會不同，因此不能當作一般性能數值來看。
4. 從程式生成車輛與人物
車輛、人物、建築外牆材質與音效，都是不依賴外部遊戲素材，而是從程式碼生成的。這讓我們即使沒有大量準備地圖資料以外的素材，也能把遊戲做成可玩的程度。
Fable 5.2 的開發過程
這次的開發並不是只下第一個指令，讓它一次生成所有功能就結束。
如同在儲存庫的 docs/SPRINT_LOG.md 中記錄的那樣，我們把城市生成、玩家操作、車輛、交通 AI、任務、警察、戰鬥、直升機、實際大阪地圖等功能拆成單位，分階段進行實作與驗證。
特別重視的是：新增功能後要確認「真的能動」。例如會逐一檢查能不能上車、會不會卡進牆裡、能不能被警察逮捕、能不能完成任務；如果有問題，就先修正再往下做。
Fable 5.2 是 Anthropic 於 2026 年 11 月 9 日發表的模型，官方文件中也把需要長流程的代理型工作與高階程式開發列為用途之一。
這個專案就是使用這類模型，將地圖資料處理、遊戲邏輯、繪製、操作與驗證整合成單一成果的案例。當然，不能只靠這一個專案就概括模型整體性能。
在本機上執行
準備好 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收音機 開／關R推進時間／切換天氣T / Y中止任務M暫停Esc還沒完成的內容與限制
當然，它的規模與品質都還無法和 GTA VI 相比。目前仍有以下限制：
- 建築外牆是依類型生成的材質，並沒有重現真實建築外觀或招牌。
- 若沒有建築高度資料，會根據面積等資訊進行推估。
- 高架道路、高架鐵道、車站內部、交通號誌等尚未實作（路口採用車輛彼此禮讓的簡易控制）。
- 尚未導入 PLATEAU 的 3D 都市模型。
- 實機 Google Chrome 上的 FPS 與操作手感，之後還需要進一步確認。
即使地圖形狀與航照圖很真實，建築細節也不會完全與實物一致。這是未來需要持續改善的部分。
總結
這次做出來的是一款以實際大阪地圖資料為基礎、可在瀏覽器遊玩的 3D 開放世界遊戲。
不只是讓 AI 幫忙寫程式，而是把地圖資料轉成適合遊戲的形式，再結合道路行駛 AI 與碰撞判定，一步步做到能在街上走路、開車的程度。
因為你可以自己在大阪街頭到處開車兜風，請務必實際玩看看。
參考・資料來源
- Anthropic — Claude Fable 5.2 / Mythos 5.2 發表
- Claude Fable 5.2 官方文件
- Claude Fable 5.2 的提示詞指南
- 開發日誌（Sprint Log）
- 架構設計
- OpenStreetMap — Copyright and License
- 國土地理院 — 地圖等的使用與出處標示
道路與建築資料為 © OpenStreetMap contributors（ODbL）。航照圖與高程資料使用並加工了國土地理院的地理院圖磚。使用時請遵守各自的使用條件與出處標示規定。
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
