2026年9月22日 下午 8:26
AI 設計AI × GAME DEV · 2026
QUICK ANSWER
用 AI 做 3D 遊戲，先把工作分清楚：ChatGPT 把參考圖整理成美術規格；ChatGPT 桌面版切到 Codex、連上本機資料夾，請它用 Three.js 做出能跑完一圈的原型；角色在 Blender 建模、匯出 GLB 再接進遊戲。之後每輪只修一個問題，用四句話回報：哪裡有問題、什麼情況發生、保留什麼、怎樣算修好。
CHAPTER 01 · THE PROJECT
《歐兜賣尬車》的起點很單純：讓我的角色騎著台灣機車，在一座有生活感的台北裡比賽。做到後來，車庫裡停了檔車「野狗傳奇125」、電動車「狗狗肉」和腳踏車「Vbike」，賽道經過早餐店、夜市和捷運出口，還有兩個對手嘉豪和宛晴會跟你搶名次。
程式交給 Codex 寫。真正花時間的，是把「看起來怪怪的」一條條修成具體的東西：頭髮要有體積、手腕要接得上、加速要有回饋、街道要留得出跑線。下面分九個階段拆解，每段都附實機畫面和能直接複製的提示詞。
這款遊戲用 Three.js 在瀏覽器即時渲染，玩家一按鍵，位置、碰撞和鏡頭都要當下算出來。所以開工前先想清楚，每個工具要交出什麼：
TOOLKIT · 每個工具交出什麼
CHATGPT
規格、參考圖、宣傳圖
整理需求、分析參考圖、討論風格
CODEX
能執行、能檢查的檔案
改程式、接素材、開預覽、除錯驗證
BLENDER
能載入遊戲的 GLB 模型
角色的立體造型、部件與材質
THREE.JS
玩家實際看到的畫面
在瀏覽器呈現模型、燈光、鏡頭與特效
ASSETS
整理好的圖像與聲音
介面圖像、配樂與操作回饋
分工不代表一直切換程式，ChatGPT 桌面版已經把對話、專案和 Codex 收在同一個 App 裡，重點是清楚這一刻要的是圖片、模型，還是能玩的功能。一張漂亮的三視圖，離能操控的 3D 角色還很遠：我的 Live2D 和 Q 版貼圖只當外型參考，角色模型在 Blender 用製作腳本建出來，匯出 GLB 後由遊戲載入、控制騎姿。
CHAPTER 02 · PREP
開一個專門資料夾，只放這次會用到的檔案。AI 的工作範圍越清楚，越不會動到不該動的東西：
FOLDER · 建議結構
my-racing-game/
references/ 角色與街景參考
assets/models/ 遊戲用 3D 模型
assets/audio/ 音樂與音效
src/ 程式
docs/ 規格與測試紀錄
已經有專案就不用硬搬，請 Codex 先讀懂原本的安排。角色素材至少要有正面、側面、背面和幾張表情，每張配一句用途，例如「這張看比例」「這張看後腦髮型」；圖跟圖衝突時寫清楚誰說了算，不然 AI 只能用猜的。
附上參考圖、說明每張的用途，請 ChatGPT 先列出不能改的特徵和還沒決定的地方。OpenAI 的官方說明也建議，拿參考圖生圖時要講清楚哪裡改、哪裡保留。
PROMPT · 整理美術規格
我要做一款台北風格的 Q 版機車競速遊戲。
圖1是角色正面、側面與背面，圖2是表情參考。
請先整理一份美術規格：
1. 角色不能失去的外型特徵。
2. 頭身比例、髮型體積、服裝層次與主色。
3. 從後方追車鏡頭看，仍要辨識得出的特徵。
4. 圖片互相矛盾或缺少資訊的地方。
風格是圓潤、鮮明、有玩具感的街機競速遊戲。
保留我的角色，不套用其他遊戲的角色或 Logo。
先交出規格與檢查清單，再進行製作。
這一步最有用的習慣，是把「更精緻」翻成看得到的條件：髮型精緻是髮束前後重疊、髮根接合自然；城市豐富是前景有騎樓、中景有商店、遠景有地標輪廓。規格存成 docs/art-direction.md，之後每輪都以它為準。生圖的手繪構圖和圈選修改，我在〈ChatGPT Images 2.5 怎麼用？〉拆過。
CHAPTER 03 · FIRST LAP
準備 ChatGPT 帳號、ChatGPT 桌面版和支援 3D 硬體加速的瀏覽器。打開桌面版，從下拉選單切到 Codex，在 Projects 新增本機專案、指到遊戲資料夾。網頁版的 ChatGPT 專案碰不到電腦裡的資料夾，要用桌面版的本機專案，Codex 才能直接讀寫檔案。第一次用可以先看〈Codex 是什麼？〉。
STEPS · 第一輪這樣跑
1
選資料夾
在專案入口選取遊戲資料夾，確認專案名稱正確。
2
附上規格
把規格和參考圖附進任務，或指出它們在專案裡的位置。
3
貼上任務
貼下面的原型任務，要安裝套件時先看清楚用途和範圍。
4
打開預覽
等檔案建好、伺服器啟動，再打開回傳的預覽連結。
5
試玩回報
先點一下畫面讓它接收鍵盤，問題截成只含遊戲的圖回報。
PROMPT · 第一輪原型
請在這個專案建立可玩的桌面瀏覽器 3D 競速原型。
使用 Three.js，先做一條封閉道路與簡單代用車輛。
這輪完成：
- ↑ / W 加速，↓ / S 煞車，左右方向鍵或 A、D 轉向。
- 跟隨車輛的第三人稱鏡頭。
- 道路邊界碰撞、檢查點、三圈完賽與重新開始。
- 一個可以直接開啟的本機預覽網址。
先不加入完整城市與精細角色。
請先檢查現有檔案和環境，再決定啟動方式。
完成後實際開啟預覽，說明哪些功能已驗證。
收到「完成了」不代表真的完成。打開預覽自己起跑、過彎、擦牆、跑完一圈，方向和鏡頭都正常再加精細模型。要載入 GLB 或 JavaScript 模組時，請 Codex 開本機伺服器並回傳網址，直接雙擊 HTML 常常只看到空白。網址裡的 localhost 只代表你這台電腦，不能直接丟給朋友玩。
▲ OpenAI 官方影片〈Codex for Creatives〉：看 OpenAI 的創意專家怎麼用 Codex 發想、做設計，把作品往前推
CHAPTER 04 · GAME FEEL
競速遊戲好不好玩，最高速度只佔一小部分。我要的是一玩就懂的循環：入彎甩尾、累積能量、找直線加速，再進下一個彎。
LOOP · 每一次甩尾，都在為下一次加速準備
STEP 01 · 入彎
Shift＋轉向
速度夠才進得了甩尾
STEP 02 · 甩尾成功
胎痕・滑胎聲・集氣
持續有效甩尾才累積
STEP 03 · 能量滿格
存下一次氮氣
留到直線再用
↓
用法 A · 小噴
甩尾結束後放開再按 ↑／W
約 0.65 秒內觸發，衝刺約 0.6 秒
用法 B · 氮氣
按一下 Space
加速約 2.5 秒，期間甩尾回充倍率 ×1.25
數值取自這個專案的遊戲設定
驗收時看三件事：只按 Shift 不轉向不能刷能量、按住 Space 不能無限觸發氮氣、一直按住油門不能自動觸發小噴。關鍵是程式要分開「正在按住」和「這一刻剛按下」，小噴和氮氣都用後者。功能也別一輪塞完，先做甩尾和胎痕，再做能量條，最後才加小噴和音效。擦牆則是扣掉撞向牆面的速度、保留沿牆前進的部分，再把車頭輕輕帶回道路，比一碰就歸零好操控得多。
最好玩的一次改動，是把檔車的氮氣改成「髒氣暴衝」：拿掉藍色火焰，換成沿路散開的黃褐與灰黑尾流。後來再依車款分開：野狗傳奇125 噴髒氣，狗狗肉是科幻能量，Vbike 是風壓、加快踩踏和汗滴。三台共用同一個加速狀態，只換呈現方式。
尾流要從排氣口冒出、留在世界裡慢慢散掉，不能整團黏在車尾；停止加速也要有一小段退場。速度模糊再誇張，中間的道路和轉彎方向都要看得清楚，效果最滿的時候也要還能開車。
PROMPT · 三台車三種加速
請讓三台車共用加速邏輯，但各自有不同視覺表現。
檔車：排氣口噴出誇張髒氣尾流。
電動車：青藍色科幻能量與短促流線。
腳踏車：風壓、加快踩踏、左右用力與汗滴。
加速時加入平滑的速度模糊，保留中央道路辨識。
特效結束、暫停、重新開始後，都要正確清理。
CHAPTER 05 · CHARACTER
放進遊戲之後才發現，玩家大部分時間看到的是後腦、背、手肘和車尾。背面的品質比正面海報更影響體驗，跟做介面一樣，要照顧的是使用者實際看到的角度。
MODELING · 建模順序
01
先抓輪廓
頭身比、耳朵高度、臉寬、頭髮側面厚度，比縫線更早影響辨識。
02
再做髮束
瀏海、側髮、後髮分開做，每束都有厚度，髮根交疊接合。
03
保留代表性服裝
白外套、青色滾邊、束帶和頸鏈，在常用鏡頭距離下要看得出來。
04
建立可動部件
頭、上臂、前臂、手掌和腿要能被姿勢控制。
05
匯出 GLB 進遊戲檢查
確認朝向、比例、材質和部件命名，再調坐高和握把位置。
我用的是有命名部件的 GLB，載入後再處理騎姿、頸鏈和長袖；不能假設任何 GLB 都套得上同一套手臂控制。不熟 Blender 可以先看〈不會 Blender 也能建 3D？〉。手看起來像斷掉時，我這樣下指令：
PROMPT · 修騎乘時的手臂
請只修角色騎乘時的手臂與長袖，保留臉型、髮型與配色。
從追車視角看，肩膀、上臂、手肘、前臂與手掌要連續。
左右手應貼合各車款握把，轉向時不能拉開手腕或穿過袖口。
請用正面、側面、背面、左右轉向四種情況檢查。
先提供模型檢視結果，再確認三款車的騎姿都成立。
長袖能讓輪廓好看一點，但真正要修的是關節接合，布料蓋不住錯位。所以我另外做了角色檢視頁，同一個問題固定在同一個角度比較，才看得出有沒有變好。
CHAPTER 06 · THE CITY
選車不一定要是卡片選單。我把三台車停進早餐店門前的停車格，選中的那台讓角色坐上去、車身放大一點。背景寫得越具體越好：紅黃招牌、外推遮雨棚、鐵窗、磁磚牆、不鏽鋼工作檯、醬料瓶，比一句「台灣風格」有用太多。
PROMPT · 早餐店選車
選車畫面改成台灣路邊早餐店前的機車停車格。
招牌文字精確使用「剩蛋餅早餐店」。
三台車彼此靠近且完整可見，選中後顯示角色騎乘並稍微放大。
車款名稱貼近各自停車格，主標題是「今天，想騎哪一台？」。
把設定收成一顆按鈕，出發後隱藏選車用介面。
請檢查小視窗下，名稱與出發按鈕不會蓋住車子。
驗收要輪流選三台車，確認名稱、模型、對手車款和試聽音效都有跟著換。
NEAR
近景
路面、紅線、騎樓、招牌、餐車、店面
貼在玩家身邊，負責速度感和生活感
MID
中景
街廓、夜市入口、捷運出口
讓人認得出自己騎到哪一區
FAR
遠景
101、大巨蛋、陶朱隱園、山的輪廓
撐起天際線，也當方向指標
製作順序是：先定道路、彎道和長直線；每一區先做一個辨識物，像西門站 6 號出口或夜市牌樓；再用窗戶、冷氣、陽台、店面和樹補密度；最後回到車尾鏡頭騎一遍，確認建築沒擋到彎道和地標。這是重新編排過的台北印象，大巨蛋被放在騎車容易看見的街邊，辨識度優先於真實地理。
光影最關鍵的一步，是讓天空的太陽方向、街道的主光、模型反射的環境三者一致，不然畫面再亮，車漆都像貼在背景前面。
LIGHTING · 五項渲染調整
這些是這個專案的設定方向，換了模型和材質要重新校正。調光時固定同一個鏡頭逐項開關：先主光和曝光，再反射和陰影，最後才加發光和模糊。
CHAPTER 07 · RACE DAY
選車時就讓玩家聽見差異：檔車催油、電動車的馬達、腳踏車的鈴聲。音效和配樂要分開控制，滑胎聲用開始、持續、結束三個狀態，別每一格畫面重播。音樂在按下出發後才播放，驗收時要真的按一次出發再聽。音檔來源也要記清楚，生成配樂可以參考〈Suno AI 完整介紹〉，別直接拿其他商業遊戲的配樂。
RACE FLOW · 一場比賽的六個段落
選車 → 地圖預覽 → 3、2、1 → 三圈競速 → 完賽特寫 → 頒獎與成績
地圖預覽約 6 秒、可以略過，只切大巨蛋、陶朱隱園和 101 幾個地標。兩位對手騎玩家沒選的另外兩台車：嘉豪戴安全帽、穿藍白拖，宛晴戴西瓜皮安全帽。對手的強度不能只靠加速度，要看過彎預判、選線、用加速的時機和失誤後能不能回到賽道；名次依圈數和賽道進度判定，重開一局時上一場的彩紙和成績都要清乾淨。
CHAPTER 08 · FEEDBACK
整個專案最值得帶走的技巧在這裡。「再精緻一點」有方向，但 AI 拿到只能猜。拆成四句，它就知道改哪裡、改到哪：
FEEDBACK · 回饋四句話
“
說得出問題在哪個鏡頭、哪個動作、哪個部件，AI 才會變成能一起把作品做完的夥伴。
每次只改一組相關的問題，頭髮、車子、地圖同時大改，變差了就找不出原因。
PROMPT · 最小範圍修正
請先讀取這次相關程式，找出問題原因，再做最小範圍修正。
保留已經正常的操控、車款選擇與計時。
完成後請列出：修改內容、實際驗證方式、仍未驗證的部分。
若只做了程式檢查，請不要宣稱已完成整場實玩。
專案有用 Git 的話，在輸入框打 /review，Codex 會檢查還沒提交的變更並列出問題，不會動到檔案。測試也分兩種：邏輯測試確認氮氣不會重複觸發，視覺檢查確認尾流沒擋住彎道，誰也取代不了誰。
CHAPTER 09 · KEY ART
封面要一眼看懂主角、題材和標題，實機畫面要讓人看清道路，兩者任務不同。我把方向收斂成鮮明、圓潤、帶玩具感的 Q 版競速視覺，一次比較五種構圖：
PROMPT · 五款直式封面
請為這款遊戲設計5張直式 Reels 封面，目標比例9:16。
標題精確使用「歐兜賣尬車」，主角使用附件中的我的角色。
保留黑白髮束、青色耳內、藍眼睛、白色長袖與頸鏈。
風格是圓潤、鮮明、玩具感的 Q 版街機競速，不走照片寫實。
五款分別探索日光甩尾、角色特寫、台北城市、夜市、早餐店。
保留標題閱讀空間，避免重要文字與臉貼近畫面邊緣。
每款構圖要明顯不同，不只換背景顏色。
選稿時縮到手機縮圖大小再看一次，讀不到標題、認不出角色就再調；生成的文字要逐字檢查。
CHAPTER 10 · TAKEAWAYS
CHECKLIST · 交付檢查表
要給朋友玩，還得另外準備部署版本，確認資產、授權和公開網址，再用別台電腦測一次。
TAKEAWAYS
→
先分工：ChatGPT 管規格和圖像，Codex 管能跑的程式，Blender 管模型，每一段交出的東西都要能檢查。
→
每一輪只做一個能驗收的目標，自己打開預覽玩過才算數。
→
回饋拆成四句：哪裡有問題、什麼情況發生、保留什麼、怎樣算修好。
這款遊戲最值得重複的，是同一個循環：提出具體目標、做出能檢查的版本、自己玩、再給下一輪精確的回饋。設計師每天本來就在做這件事，看稿、挑出哪裡不對、講清楚要改成什麼樣子。寫程式的門檻被 AI 拿掉之後，這個能力就直接變成做遊戲的能力。
RELATED READS · 延伸閱讀
EXTRA · LINKS · 延伸資源
✦ ChatGPT 快速開始（下載桌面版、切換到 Codex）
✦ 專案與對話說明（本機專案怎麼連接資料夾）
✦ 圖像生成說明（參考圖與修圖的寫法）
✦ 程式碼審查說明（/review 的用法）
✦ OpenAI〈Building games with Astra〉（官方用 Codex 做 3D 遊戲的紀錄）
✦ Three.js 官方文件：PMREMGenerator（環境反射）、GTAOPass（接觸遮蔽）
FAQ
A：能做出原型。程式、套件、預覽和修錯交給 Codex，你負責定規格、試玩和回報問題，再一輪一輪修到好玩。
A：在 ChatGPT 桌面版的下拉選單切到 Codex，開一個連接本機資料夾的專案。習慣終端機或程式編輯器，也可以用 Codex CLI 或 IDE 擴充功能。
A：要做能操控的 3D 角色，模型這關躲不掉。這個專案的角色在 Blender 建模後匯出 GLB；不熟 Blender 可以請 AI 寫腳本輔助，但輪廓和接合要自己檢查。
A：多半是直接雙擊了 HTML 或資產路徑出錯。請 Codex 開本機伺服器，再檢查入口檔、資產路徑和瀏覽器錯誤，先別重寫整個遊戲。
A：不行，它只代表你自己的電腦。要給別人玩得另外部署，確認資產、授權和公開網址，再用別台電腦測試。
A：回饋拆成四句：哪裡有問題、什麼情況發生、哪些要保留、怎樣算修好。每次只改一組相關問題，並請它列出改了什麼、怎麼驗證。
A：可以，這篇的五款封面就是 AI 生成的。提示詞寫死標題和角色特徵，縮到手機大小檢查可讀性，並標示它是宣傳圖、不是實機畫面。
