透過 AI 工具，教你用一個下午，實現一個遊戲夢

我覺得大部份喜愛玩遊戲的人，內心深處都有一個夢，想做一款屬於自己的遊戲。

今天在 AI 的幫助下，難度已經大大降低，只要跟著這篇做完，小白也能做出一款打開瀏覽器就能玩的 pixel art 動作網頁遊戲，免安裝。

你只需要：輸入 prompt、按 Enter、等 AI 跑。

沒有親手畫過任何 sprite、沒有手寫過一條遊戲平衡、沒有除錯過 hitbox 數學。

這篇不是要你變成遊戲開發者，是讓你看到 AI 現在可以做到這件事——一個下午，由零到能玩。

以下內容我將會以西遊記遊戲做例子，教大家一步步做出來。

當你理解了當中的重點後，可以隨你喜歡去修改，做出一款你自己心中的小遊戲。

為什麼現在做得到

過去要自己從零到一做完整遊戲，至會撞兩道牆：

• 美術牆：怎樣做出遊戲需要的素材呢？通常只能上網買別人做好的。
• 程式碼牆：不懂寫程式是絕對做不出來，即使有 RPG Maker 之類，但不懂寫程式能做出來的東西很有限。

現在三個工具一起處理掉了：

• OpenAI Image 2 — 可以生成圖片素材
• agent-sprite-forge（GitHub）— Codex 的 skill，用 $generate2dsprite 觸發。生成 Pixel Sprite，幫 Codex 自動後處理 sprite：去背、按網格切幀、共用基線對齊，輸出乾淨透明 PNG + 動畫 GIF
• Codex GPT-5.5 — 設計遊戲、實作遊戲邏輯，全部都可以靠 AI 完成

三件工具串起來，你就能輕易做出自己的小遊戲。

工具怎麼裝、怎麼存取

整件事其實比你想像中更簡單——其實也只是兩件事：

1. 安裝 Codex GPT-5.5

下載 Codex：https://openai.com/codex/。

2. 安裝 agent-sprite-forge（Codex 的 skill）

https://github.com/0x0funky/agent-sprite-forge

打開 Terminal 輸入以下指令：

git clone https://github.com/0x0funky/agent-sprite-forge.git
cd agent-sprite-forge
python3 -m pip install -r requirements.txt
mkdir -p ~/.codex/skills
cp -R ./skills/* ~/.codex/skills/

如果搞不懂，你甚至可以直接叫 AI 幫你處理：

我想安裝這個 Skill https://github.com/0x0funky/agent-sprite-forge.git，
但不懂如何處理，你幫我直接安裝到 Codex 使用的 Skill folder 下面，
安裝之後告訴我怎麼驗證和使用。

安裝完重開 Codex session。要驗證是否已經正確安裝這個 skill。

在 Codex 對話打 $generate2dsprite，如果 Codex 有找到 Generate 2D Map 和 Generate 2D Sprite 就 OK。

安裝完成之後，選好項目的檔案在哪就可以開始。

真實流程：分多個對話，不要一個超大 prompt

因為 AI 的 context window 有限，如果你下一整個超大超長的 prompt，去到後面，可能 AI 就會開始跑偏。

所以比較有效的方法是把我們想做的東西拆成幾個比較細小的任務，再針對每個任務來下指令。

我自己這次大概分成這幾段：

分對話的好處：每個對話 context window 只裝一件事，Codex 不會飄、不會把前面對話的內容混進來搞亂。對話之間用「上一個對話的輸出路徑」做契約——例如對話 9 寫程式碼時參考對話 2-8 出來的 sprite 資料夾。

我幾個關鍵 prompts

對話 1 — 遊戲設計

我沒寫一個完整 spec 給 Codex；我寫一段簡介然後問問題：

我想做一隻 5 關妖洞橫向動作 game，主題西遊記。
主角孫悟空，要有基本的普攻，左右移動，跳躍。技能要有金箍棒、筋斗閃、分身大絕招，
每招可以升 4 級。每關 5 波小怪打完出 BOSS，過關升級。

技術棧：網頁版遊戲，盡量簡單，不要 over engineering
想做到要桌面版 + 手機版橫向都能玩。

幫我設計：
- 5 關各自的 theme、mob、boss、hazard pattern
- 4 招技能 1–4 級的差異
- 波次系統 + 升級機制
- HUD layout

先設計，coding 實作我會之後另一個對話開始。

Codex 出一份 spec，我看完改幾個 boss 模式，然後 spec 寫成 markdown 給之後對話參考。

這可以說是最重要的一步，盡量把所有細節都談好，不斷問 AI 有沒有不清晰的，讓它一直問你問題。

對話 2 — 主角 sprite

使用 $generate2dsprite 幫我生成主角孫悟空的角色圖片，要 Q 版 Pixel 風。
包括以下動作動畫：
1. 左右移動
2. 跳躍
3. 普通攻擊
4. 筋斗雲閃避
5. 金箍棒攻擊技能
6. 大絕招分身攻擊
7. 其他沒有 cover 在內的動畫（ie: 受傷）
same character identity, same silhouette, locked baseline

關鍵字：「same character identity, same silhouette, locked baseline」——這三句是 sprite 不糊不浮的最低條件。

對話 3–7 — 5 關怪物 sprite

這一段最瑣碎、但最決定美術品質。每隻怪一個對話。

先解釋術語：mob 是遊戲開發行話，就是普通小怪 / 雜兵——每關 boss 戰前要清的那些一波波出來的雜魚。

一開始的版本不要做得太複雜：每關先做 2 隻小怪 + 1 隻 boss。

之後再慢慢加。

關鍵是先做出第一張當美術參考：

第 1 關 mob1（純描述，建立第 1 關美術風格）
   ↓ view_image
第 1 關 mob2（參考 mob1）
   ↓ view_image
第 1 關 boss（參考第 1 關全部小怪）
   ↓
第 2 關 mob1（參考第 1 關 boss + 主角，建立第 2 關美術風格）
   ↓
... 重複到第 5 關 boss

第一隻怪：純描述

第一隻小怪沒有參考，全靠 prompt 講清楚要什麼：

使用 $generate2dsprite，按照 spec 的關卡設計，生成一隻小怪。
- Q 版 pixel art 風，跟主角孫悟空同一個 art style
- 需要包含左右移動，受傷，攻擊，投射物（如有），死亡等等
- same silhouette baseline、locked frame size

第二隻和之後的怪物：鎖定風格

上傳第一隻怪的 sprite 圖，然後：

使用 $generate2dsprite 幫我生成第 1 關的 mob2，跟 mob1 同一個 stage、不需要一模一樣，但要看起來是同一系列的怪。
這隻是 mob1 的進化版，比較強、視覺上明顯升級。
same silhouette baseline

重點是真的要把圖傳給 AI 看。

Boss 段：把前兩隻怪一起當參考

上傳 mob1 和 mob2 的 sprite 圖，然後：

使用 $generate2dsprite 幫我生成第 1 關的 boss，要看起來像這兩隻 mob 的「大佬」，明顯比他們強。
動作：走、攻擊、施法、第二階段、被打、死亡。
same silhouette, locked baseline

5 關每關都是這個模式。這樣怪物之間的美術風格也不會跑掉。

對話 8 — 場景背景

怪物的 Sprite 全部做完才做場景。

原因：場景對齊的參考是主角和 boss 的基線，兩邊做齊才有真實的高度參考可以鎖。

上傳主角和最後一關 boss 的 sprite 圖，然後：

使用 $generate2dsprite 幫我生成 5 關的場景背景，照之前 spec 寫的 5 個關卡 theme。
要 hi-res pixel art 風，背景解析度不要糊。
畫面下半部要預留位置放主角和怪，不要太多 detail 撞色。
順便每張出一張純黑 silhouette mask，給我做 parallax background。

對話 9 — 程式碼

最後當圖片素材都做好，再加上遊戲設計 spec，就可以叫 AI 正式開工實作：

進入 Plan Mode 幫我開始實作這個 game spec，
圖片 assets 在 /path/assets
如果有不清晰或是欠缺的部份，可以跟我說。

跟著做：怎麼開始

1. 開 ChatGPT Plus 或 Pro 帳號（如果未有）
2. 裝 agent-sprite-forge（上面安裝步驟）
3. 寫一段你自己的遊戲簡介（題材、玩法、關卡數）
4. 開第一個對話問設計，等 Codex 出 spec
5. 第二個對話開始用 $generate2dsprite 出 sprite，每個角色 / 場景一個對話
6. 全部 sprite 出完，另開一個對話寫程式碼
7. 不斷調整，改善
8. 加入新功能
9. 重複以上完善遊戲

途中會撞到的事情：

• Sprite 行走循環浮高浮低：叫 Codex 用 --shared-scale --align bottom flag 重新處理，多數搞掂；不行再重新生成圖片
• 角色換對話之後風格飄：參考圖一定要真的附在對話裡（Codex 裡用 view_image），不要只貼路徑
• 程式碼寫到一半 Codex 開始幻覺 sprite 路徑：開新對話，重新附上 spec + sprite 資料夾結構
• AI 的程式碼有錯誤、UI 有問題、圖片不理想等等，全部說明清楚，然後讓 AI 幫你解決