Vibe Coding 遊戲開發秘笈

原文: 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）通訊，適合即時交互

這就是目前的一些開發筆記，希望對你有幫助!