網頁遊戲？

關鍵字總是能再長出更多的關鍵字

遊戲引擎、WebGL、Phaser ？？

針對網頁遊戲的開發 MDN 也幫開發者整理好學習資源了 Introduction to game development for the Web

Web 可以作為開發遊戲的平台，這個平台有以下核心技術可能會使用到：

音訊：Web Audio API
圖像：WebGL
輸入控制：Touch 事件、裝置的 sensor...等
語言：JavaScript (或是使用 C/C++ 編譯成 JavaScript)
網路： WebRTC 或是 WebSockets
儲存：IndexedDB 或是 雲端
網頁技術：HTML、CSS、SVG...等

如果想純用 JavaScript 手刻遊戲，可以一步一步照著 MDN 的的文件認識以上這些技術，又或者是想要直接使用巨人造好的輪子體驗開發遊戲的感覺，就可以選擇適合的 Library 或是遊戲引擎，這份文件 Engines and libraries 有將遊戲相關的 Engine 或是 Library 條列出來，標註星星數、最後 commit 時間以及附上簡單的描述

比較多人在討論或是使用的：

PixiJS：2D library，使用 WebGL，也支援 Canvas
Three.js：3D library
Babylon.js：3D render engine
Phaser：屬於 framework，建立的遊戲可以編譯給多個平台使用，包含物理引擎幫忙物理及數學的計算

PixiJS

延續上一篇的關鍵字 PixiJS， PixiJS 很懂開發者的選擇困難，在官網文件一開始就先說明 PixiJS 是什麽？不是什麽？可以用來做什麽？不能做什麽？ 將自己定位的很清楚！

以下內容取自 PixiJS 官網文件

PixiJS 是什麽？

是一個使用 WebGL 來顯示影像或是其他 2D 內容的 rendering 系統，支援點擊或是觸控事件的操作。

不像 Unity 或是 Phaser，PixiJS 不是一個 framework。在建立遊戲的過程，一個 framework 的設計會考量到所有操作，包含：管理使用者的設定、音訊的播放、物件的腳本...等。但 PixiJS 只被設計用來做一件事 — render 圖像內容！

PixiJS 的世界是 2D 的，如果要找 render 3D 模型的話，可以選擇 Babylon.js 或是 Three.js

不像 Unity 有 UI tools，PixiJS 中沒有 UI Library，必須自己建立 UI

PixiJS 不幫忙儲存資料，可依需求自行選擇 Cookies、Web Storage 或是 server-based storage

PixiJS 沒有整合 audio library，可另外使用 PixiJS Sound plugin

＊遊戲是一個全新的世界、全新的領域，想吸收關鍵字，可以參考台北遊戲開發者論壇的議程內容，每年都會舉辦，今年已邁入第 13 屆

感想

工具很多，比起星星數或是 commit 時間，也許更重要的是，先了解工具符不符合需求，就像 PixiJS 文件一樣，明確框住自己的定位在哪裡。

參考資源

PixiJS 官網 - What PixiJS Is
PixiJS 官網 - What PixiJS Is Not
10 Best Javascript Game Engines and Library 2024
2024 台北遊戲開發者論壇