Vibe Coding 遊戲開發秘笈
原文 aaronjmars•編輯 Chiny•2025-03-15
原文: https://x.com/aaronjmars/status/1900534858402680896
今年是 2025 年,大家只用一台電腦和 Cursor / Windsurf,再加上自己的 Vibe,開發可以隨處遊玩的遊戲(致敬 @levelsio & @NicolaManzini)。
雖然單純使用 Vibe Coding 開發遊戲程式也可以,但如果可以理解自己在做什麼,以及如何讓自己更有效率仍然相當方便。仔細的規劃通常能讓 AI 的輸出結果更好,因此讓我們開始吧!
這是我在過去幾週製作與自動化遊戲的開發筆記,也歡迎分享你最愛的工作流程。
Three.js
這是進行 Vibe Coding 的主要 JavaScript 函式庫,一切都被高度抽象化且簡潔,你只需要一個 HTML 檔案和一個 JS 檔案 (但如果是比較大型的專案,你應該使用 Bundler)。
你可以在本機開發,也可以使用 CDN 來避免建置(no-build setup)。ThreeJS 三個核心要素:場景(scene)、相機 (camera) 和渲染器(renderer)。
- 場景 (Scene): 類似於 3D 世界的容器,所有物件(例如模型、光源)都會被加入到場景中。
- 相機 (Camera): 決定玩家/觀眾觀看場景的角度與視野,常見的有透視相機 (PerspectiveCamera) 和 正交相機(OrthographicCamera)。
- 渲染器 (Renderer): 將 3D 場景轉換為 2D 畫面並顯示在螢幕上,Three.js 主要使用 WebGLRenderer。
Three.js 抽象化了 WebGL。如果想使用 3D 素材,推薦使用 glTF 或 GLB 格式。它還支援許多外掛(add-ons),其中主要的有:
- R3F (React Three Fiber): 專為 React 設計的 Three.js 擴充套件,與原生 Three.js 使用方式相似,但效能更優化,並提供更多功能,且支援 TypeScript,適合與 React 生態系整合。
- Drei: 一款抽象化函式庫,能讓你用極少的程式碼完成許多複雜的 3D 功能,例如建立光源、軌道控制(OrbitControls)或加載 3D 模型等,大幅簡化開發流程。
- PostProcessing: 提供高品質的後製特效,如泛光(Bloom)、景深(Depth of Field)、動態模糊(Motion Blur)等,可提升遊戲畫面質感。
- three.quarks:強大的粒子系統,適合製作煙霧、火焰、爆炸等特效。
- three-nebula:另一款粒子引擎,提供更靈活的自訂效果。
- three-gpu-pathtracer:基於 GPU 的光線追蹤渲染器,能實現更真實的光影效果。
物理引擎
目前你的遊戲可能會因為 Three.js 沒有內建物理引擎 而難以遊玩,因此你需要一個物理函式庫來處理碰撞、約束甚至流體動力學。 主要的物理函式庫有:
- Oimo.js:輕量且簡單
- ammo.js:支援進階物理計算
- cannon-es:適合小型/中型遊戲,處理簡單交互
- rapier:高效能、適用於行動裝置、精確,與 R3F 相性佳
- Jolt:進階物理運算,效能出色
此外,還有一些能簡化開發流程的框架:
- A-Frame:專注於 XR / VR,封裝大量複雜操作
- ECSY:基於 Entity Component System(ECS) 的架構,與 Three.js 兼容
- Needle:用來在 Unity 和 Three.js 之間架橋
你也可以選擇其他 3D 或 2D 遊戲框架,例如:
- Babylon.js:開源 3D 引擎,基於 WebGL & JS,內建物理引擎
- PlayCanvas:專為高品質 3D 遊戲設計
- Phaser:HTML5 2D 遊戲框架,內建物理引擎
- melonJS:基於精靈圖(sprite)的 2D 遊戲引擎
多人遊戲
要讓你的遊戲支援多人模式,你可以選擇 WebSockets 或 WebRTC:
- WebSockets:基於伺服器的架構,適合傳統多人遊戲
- WebRTC:點對點(P2P)通訊,適合即時交互
這就是目前的一些開發筆記,希望對你有幫助!