開發遊戲時，畫面、特效、音效的呈現是吸引玩家很重要的關鍵，也是讓玩家能夠更加放鬆地享受遊戲內容的必備要素，例如現在強調的虛擬實境等，也都是為了這個目的而存在。這篇文章整理我在開發遊戲時會用到的技術：Graphics Library 與 GPU 加速的原理、OpenGL 與 Direct3D 的差異、各遊戲平台的特性，以及 Unity、Cocos2d、HTML5 Canvas 等遊戲引擎的選擇思路，最後說明我為什麼選擇用 PixiJS + TypeScript 開發連連看遊戲。
為什麼遊戲開發比一般網頁開發更重視畫面與動畫？
在開發遊戲程式時，會較一般網頁或應用程式的開發，花更多的時間與心力在畫面的串接以及動畫邏輯撰寫，讓遊戲畫面能夠與玩家有更多的互動。
例如：
- 畫面元素的物理性、玩家投擲物體時飛落的路徑
- 物件間碰撞的偵測與觸發的事件
- 遊戲角色特定的動作該配合出現的特效
- 攻擊時的特效粒子系統
- 特殊效果的畫面濾鏡等等
遊戲開發有哪些常用的圖像與動畫技術？
上述的每一個項目都有相關的技術可以去學習，幫助我們更快上手：
| 技術類型 | 代表工具 | 作用 |
|---|---|---|
| 物理引擎 | Box2D（憤怒鳥使用） | 賦予物體物理特性，具有掉落、碰撞等行為 |
| 骨骼動畫 | Spine、DragonBones | 壓縮 2D 遊戲所需要的素材大小 |
| 粒子系統 | particles.js | 讓美術用特效產生器產生設定檔，並於遊戲中執行 |
| 著色器 | Shader | 用一連串數學公式對圖片做出水波、風吹、霧霾、煙霧等特殊動畫效果 |
以骨骼動畫為例，像下面這隻龍走動的動畫，可以用一張分解部位圖搭配骨骼動畫引擎來組合出連續動作：
組合動畫所使用的龍的分解部位圖：
另外在遊戲開發上，對數學、物理、色彩矩陣等的了解度也十分重要。有了這些技術的幫助，我們不用每一個特效都製作連續圖檔，可以降低美術的負擔，也能讓特效有更多的變化性、更小的遊戲檔案大小。
在學習這些技術之前，首先要認識最基礎的 Graphics Library。
Graphics Library 是什麼？GPU 如何加速遊戲畫面？
現在的 Graphics Library 主要的作用，是幫助我們能夠使用 GPU 來做電腦圖像處理。GPU（圖形顯示器）又稱顯示核心、視覺處理器、顯示晶片或繪圖晶片，是一種專門在個人電腦、工作站、遊戲機和一些行動裝置（如平板電腦、智慧型手機等）上執行繪圖運算工作的微處理器。
在 GPU 尚未出現前，圖形的繪製是和一般的複雜運算一起使用 CPU 去做運算，因為影像輸出的處理需要大量的運算，會讓電腦的運算速度被拖慢。直到 1999 年 8 月輝達公司（NVIDIA）在發表 GeForce 256 繪圖處理晶片時，提出了將影像輸出的顯示晶片視為獨立運算單元的概念。
GPU 不同於傳統的 CPU——傳統 CPU 內核數量較少、專為通用計算而設計；相反地，GPU 是一種特殊類型的處理器，具有數百或數千個內核，經過最佳化，可並列執行大量計算。雖然 GPU 在遊戲中以 3D 彩現而聞名，但它們對執行分析、深度學習和機器學習演算法尤其有用。近年來十分流行的 AI 人工智慧，由於在大數據處理時需做許多的矩陣計算，也用到 GPU 特殊運算的功能。GPU 可讓某些計算比傳統 CPU 上執行相同的計算速度快 10 倍至 100 倍。
起初，高效能 3D 圖像只可經設有 3D 加速功能（和完全缺乏 2D GUI 加速功能）的獨立繪圖處理卡上運算，如 3dfx 的 Voodoo。然而由於製造技術進步，影像、2D GUI 加速和 3D 功能都整合到一塊晶片上，現在許多 2D 的遊戲引擎也都能夠享受 GPU 所帶來的效益。
有了 3D 圖形庫，撰寫可以善用 GPU 的遊戲引擎不再困難重重。以前還沒有統一的 API 規範時，開發 3D 遊戲必需要先有配合的 GPU 硬體廠商，並且針對該硬體去撰寫相關的驅動程式來使用 GPU 的運算功能，這讓開發 3D 遊戲困難重重。3D 圖形庫最有名的有 Direct3D 和 OpenGL：雖然 DirectX 在家用市場全面領先，但在專業高端繪圖領域，OpenGL 是不能被取代的主角。
OpenGL 和 Direct3D 有什麼差別？
#### OpenGL
OpenGL 是個與硬體無關的軟體介面，可以在不同的平台如 Windows 95、Windows NT、Unix、Linux、MacOS、OS/2 之間進行移植。這些 API 規範描述了繪製 2D 和 3D 圖形的抽象 API。這些 API 雖然可以完全透過軟體去撰寫，但它是為大部分或全部使用 GPU 硬體加速而設計的。OpenGL 規範由 1992 年成立的 OpenGL 架構評審委員會（ARB）維護。OpenGL 不僅語言無關，而且平台無關，在各種平台及設備都有支援 OpenGL 的介面，移植性較佳。
近年來由於 WebGL 的推出，讓網頁的 3D 效果也能夠享受到 GPU 加速效果，使得 3D 的遊戲得以在網頁上被實現。Three.js 就是一個基於 OpenGL、使用 JavaScript 做開發的 3D 引擎。
OpenGL 是一個不斷進化的 API，新版 OpenGL 規範會定期由 Khronos Group 發布，透過擴展 API 來支援各種新功能。
#### Direct3D
Direct3D 是 DirectX 下的一個子項目，提供設計人員一個共同的硬體驅動標準，讓遊戲開發者不必為每一品牌的硬體來寫不同的驅動程式，也降低用戶安裝及設置硬體的複雜度。
舉個例子，以前在 DOS 下玩遊戲時，不像現在安裝就可以玩了，過去往往要先設置聲卡的品牌和型號，然後還要設置 IRQ（中斷）、I/O（輸入與輸出）、DMA（存取模式），如果哪項設置得不對，遊戲聲音就發不出來。這部分的設置不僅讓玩家傷透腦筋，對遊戲開發者來說更頭痛——為了讓遊戲能在眾多電腦中正確運行，開發者必須在開始製作遊戲前，就把市面上所有音效卡的硬體數據都收集過來，然後根據不同的 API 來寫不同的驅動程式，這對遊戲製作公司來說很難完成，所以當時多媒體遊戲很少。
微軟看到了這個問題，為眾廠家推出了一個共同的應用程式介面——DirectX。只要遊戲是依照 DirectX 來開發的，不管是什麼顯卡、聲卡，統統都能玩，而且還能發揮更佳的效果（前提是顯卡、聲卡的驅動程式也必須支援 DirectX）。
#### 現況比較
| OpenGL | Direct3D | |
|---|---|---|
| 平台支援 | 跨平台（Windows、Unix、Linux、MacOS 等） | 以 Windows 平台為主 |
| 適用領域 | CAD、內容創作、能源、娛樂、遊戲開發、虛擬實境 | 多媒體、娛樂、即時 3D 動畫 |
| 市場定位 | 專業高端繪圖領域不可被取代的主角 | Windows 平台遊戲開發占大部分市場 |
OpenGL 因為具有多平台支援的特色，同一套程式可以直接套用在各種不同的平台，因此在專業高端繪圖領域得到廣泛的應用；DirectX 則適合多媒體、娛樂、即時 3D 動畫等廣泛實用的 3D 圖形計算，在基於 Windows 平台的遊戲開發中占了大部分的市場。
常見的遊戲平台有哪些？
網頁遊戲
網頁遊戲（簡稱頁遊）又稱 Web 遊戲，是一種基於網頁的電子遊戲，一般不用下載用戶端，任何一台能上網的電腦就可以進行遊戲。與其他大型遊戲比較，具有占用空間小、硬體要求低等特點。過去 Flash 是網頁遊戲最火紅的工具，曾有一段時間 Flash 遊戲在 Facebook 上非常受歡迎，如 Candy Crush 等，都同時有手機遊戲與 Facebook 版本。
智慧型手機遊戲
由於大多數早期手機的效能所限，手機遊戲普遍比較簡單，畫面也比較粗糙，更不用說操作性了（事實上很少有手機的鍵盤適合玩遊戲），因此益智類遊戲（如俄羅斯方塊、貪食蛇、推箱子等）是常見的遊戲類型。目前由於手機以及類手機的 PDA 裝置發展，手機處理資訊的能力增強，漸漸出現了更大畫面、更加複雜的手機遊戲，也有更多公司推出多人線上手機遊戲。
電腦應用遊戲
大多數的經典遊戲都是電腦應用軟體，如英雄聯盟、魔獸世界、天堂、世紀帝國等。由於電腦取得容易，又具備語音、易於打字等功能，在線上與網友互動更為方便，較大型的多人線上遊戲還是以電腦應用為主。近年來更興起了遊戲直播的風潮，實況主常透過直播平台轉播遊戲過程、生活瑣事與商業活動，並與觀眾即時互動，吸引許多忠實觀眾。
家用遊戲機
如 Wii U、PlayStation 4、Xbox One。電視遊戲指的是使用電視作為顯示器來遊玩的電子遊戲類型，遊戲通常利用連接至遊戲機的掌上型裝置（「控制器」或「搖桿」）來操控。控制器通常包含數個按鈕和方向控制裝置（例如類比操縱桿），藉由按下或轉動這些裝置來控制螢幕上的影像。而螢幕、喇叭和搖桿也可以整合在一個小型物件中，稱作「掌上型電玩」或簡稱「掌機」（Handheld game console）。
遊戲平台
Steam 為其中最大的遊戲平台，是美國電子遊戲商維爾福（Valve）於 2003 年 9 月 12 日推出的數位發行平台，提供數位版權管理、多人遊戲、串流媒體和社群網路服務等功能。藉助 Steam，用戶能安裝並自動更新遊戲，也可以使用好友列表、組隊、雲端儲存、遊戲內語音和聊天功能。Steam 免費提供了一個 API 稱為 Steamworks，開發商可以用來整合 Steam 的功能到自己的產品中，例如網路、線上對戰、成就、微交易，並透過 Steam 創意工坊分享用戶創作的內容。
主流遊戲引擎怎麼選？Unity、Cocos2d、Flash AIR 與 HTML5 Canvas
Unity
Unity 是現行最普遍用來開發遊戲的遊戲引擎，可用於開發 Windows、MacOS 及 Linux 平台的單機遊戲，PlayStation、XBox、Wii、3DS 和任天堂 Switch 等遊戲主機平台的遊戲，或是 iOS、Android 等行動裝置的遊戲，支援的遊戲平台還延伸到了基於 WebGL 技術的 HTML5 網頁。再加上 Unity 有 Unity Asset Store，對獨立開發者而言是最好的選擇。Unity 引擎本身就含有碰撞偵測、物理引擎、角色模式、玩家視角、光源設定等功能，並且有很完整的 IDE 介面，可支援如 Spine 等骨骼動畫，讓開發者能更簡易地製作出吸引人的遊戲。爐石戰記、仙劍 6、神魔之塔都是用 Unity 開發的有名遊戲。
Cocos2d
Cocos2d 是一個開源的 2D 遊戲框架，在各種不同的程式語言都有不同的實作。一開始在 iOS 裡支援度最高的遊戲引擎就是 Cocos2d，因此有許多 iOS 小遊戲都是使用 Cocos2d 開發的。後來也有了 Java 版本可運行於 Android 平台；Cocos2d-X 是基於 Cocos2d for iPhone 並使用 C++ 語言實現的多平台版本，後來也有了 JavaScript 版本。現在的 Cocos2d 可以支援許多不同的平台，但由於其 IDE 介面不像 Unity 般強大，普及性還是不如 Unity。
Flash AIR
雖然現在在網頁應用上，Flash 已經幾乎完全被淘汰掉了，但在手機遊戲上，仍有許多以 Flash AIR 所開發的遊戲，相關遊戲作品可見 Adobe 的作品牆。
HTML Canvas
由於 WebGL 的推出，現在在網頁上開發遊戲也可以有很不錯的畫面及效能，因此有越來越多的小遊戲都是以 H5 來製作。網頁遊戲本身具有許多好處：不需安裝、馬上可以進行遊戲、很容易與其他網頁做結合與搭配。對於網頁活動行銷專案裡的小遊戲、廣告案，或者像『奔跑吧！台北』這類政見小遊戲，由於其遊戲目標是吸引更多人在遊戲中去了解商品或理念，更需要能夠完整地與相關網站做連結，這時候 H5 就是最好的選擇。
使用 H5 Canvas 開發遊戲的缺點是，即使有 WebGL 的幫助，JavaScript 效能還是沒辦法與手機原生 native code 的速度相比，因此較不容易開發全 3D 又很複雜的遊戲。
為什麼連連看選擇用 PixiJS + TypeScript 開發？
連連看屬於很簡單的小遊戲，本身較不會有太大的效能問題；現在網頁遊戲要包成 APP 也有許多方法，並且以網頁的特性做開發，可以更方便地將遊戲嵌入不同的平台上。所以在這個系列中我選擇了使用 PixiJS + TypeScript 來開發連連看遊戲。
延伸閱讀
常見問題
什麼是 Graphics Library？
Graphics Library 是幫助開發者使用 GPU 做電腦圖像處理的函式庫。它把繪製 2D / 3D 圖形的運算交給擁有數千個核心、可並列計算的 GPU 執行，比在 CPU 上運算快上 10 到 100 倍，最著名的有 OpenGL 和 Direct3D。
OpenGL 和 DirectX 該怎麼選？
看目標平台：OpenGL 跨平台、移植性佳，適合 CAD、內容創作、虛擬實境等專業高端繪圖領域；DirectX（Direct3D）以 Windows 平台為主，適合多媒體、娛樂與即時 3D 動畫，在 Windows 遊戲開發占大部分市場。
GPU 為什麼比 CPU 適合處理遊戲畫面？
GPU 具有數百到數千個核心，專為並列執行大量計算而最佳化，影像輸出處理需要的大量運算交給 GPU 後，不會拖慢整機速度，某些計算甚至比傳統 CPU 快 10 至 100 倍，這也是深度學習常用 GPU 的原因。
用 HTML5 Canvas 開發遊戲有什麼優缺點？
優點是不需安裝、馬上可玩、容易與其他網頁結合，很適合活動行銷小遊戲與廣告案；缺點是即使有 WebGL 加速，JavaScript 效能仍比不上手機原生 native code，較不容易開發全 3D 又複雜的遊戲。
骨骼動畫的好處是什麼？
骨骼動畫工具（如 Spine、DragonBones）可以將一張分解部位圖透過骨架組合成連續動作，不用逐格繪製連續圖檔，能壓縮 2D 遊戲素材大小、降低美術負擔，並讓動畫有更多變化性。
連連看這類小遊戲適合用什麼技術開發？
連連看遊戲邏輯簡單、效能負擔小，用 PixiJS + TypeScript 這類網頁技術開發就很合適，還能方便地嵌入不同平台，或包裝成 APP 發佈。
參考資料
- 圖形處理器 - 維基百科
- Stage3D 運作原理
- OpenGL - 維基百科
- 比較 DirectX 和 OpenGL 的區別
- OpenGL 和 DirectX 是什麼？
- 手機遊戲 - 維基百科
- 網頁遊戲 - 維基百科
最後更新
2026-08-28（原文發布於 2018-10-24，本文保留原始筆記內容並補上 GEO 結構。）
關於作者 {#author}
Claire Chang ｜ 企業 AI 導入與流程轉型顧問。專注於 AI Agent 架構設計、ERP 系統整合與企業 AI 治理。
首次發布：2018-10-24