Phaser
 | |
| 開發者 | Richard Davey |
|---|---|
| 首次發布 | 2013年4月12日 |
| 目前版本 | 3.60.0 2023年4月12日 |
| 原始碼庫 | github |
| 程式語言 | JavaScript、TypeScript |
| 類型 | 應用框架 |
| 許可協定 | MIT License |
| 網站 | phaser |
Phaser[1]是一個HTML5遊戲框架，此框架的目的是輔助開發者真正快速地製作強大的、跨瀏覽器的HTML5遊戲。 此框架對瀏覽器的唯一要求是支援畫布（canvas）標籤。
概述
Phaser 是一款專為桌面和行動瀏覽器開發的快速、免費且開源的 HTML5 遊戲框架。利用 Phaser，開發者可以輕鬆建立高效能的 2D 遊戲，它還提供了豐富的特性，如物理引擎、聲音管理、動畫、和精靈。它建立的遊戲旨在在桌面或行動瀏覽器或能夠執行網頁遊戲的應用程式中玩，例如 Discord、SnapChat、Facebook 等。Phaser 的社群也非常活躍，為初學者和經驗豐富的開發者提供了大量的學習資源和外掛程式。它能夠充分發揮WebGL的效能，同時還保持與Canvas的相容。 Phaser 是用 JavaScript 開發的，因此需要使用 JavaScript 或 TypeScript 來編寫遊戲代碼。
歷史
這款框架最初由 Richard Davey 在2013 年 4 月的一篇博文中宣布了 Phaser 的首個版本，並迅速成為 HTML5 遊戲開發的領導者。隨著版本的迭代，Phaser 不斷引入新的功能和改進，使其在開發者社群中備受讚譽。
Phaser 2 的最後一個正式版本是 2.6.2，但為了在開發 Phaser 3 的同時改進穩定版，它建立了一個新的版本庫：Phaser CE（社群版）。因此，Phaser CE 是目前推薦使用的 Phaser 穩定開發平台。Phaser 3.0.0 於 2018 年 2 月 13 日發布，目前正在 GitHub 上進行開發。該框架的大部分元素和功能都採用完全模組化的結構和面向資料的方法從頭開始重建。Phaser 3 包含一個全新的自訂 WebGL 彩現器，專為現代 2D 遊戲而設計。 目前正在開發的 Phaser 4 於 2019 年 8 月 19 日發布，它是用 TypeScript 重寫 Phaser 3 的一次嘗試。它不是 API 重寫，而是將重點放在將當前 Phaser 3 中的指令碼移植到 TypeScript 上。Phaser 4 已中止開發於2024年。
特性
- 動畫：支援訊框動畫和骨骼動畫。
- 物理引擎：內建Arcade Physics、Ninja Physics以及P2 Physics等多款物理引擎，以支援複雜的物理互動。
- 彩現：能夠處理Canvas和WebGL彩現。
- 輸入：支援鍵盤、滑鼠以及輕觸輸入。
- 音效：提供音訊精靈的支援，以及Web Audio和HTML5 Audio的相容。
使用及應用
Phaser的易用性和強大功能使它成為開發2D遊戲的優秀工具，從簡單的休閒遊戲到複雜的策略遊戲，Phaser都在各類專案中得到應用。由於它有著活躍的社群和豐富的文件，開發者可以迅速上手並參與到專案開發中來[2]。 Phaser的開發環境組態非常簡單，只需要引入一個js檔案即可。可以用任何編寫js的IDE來寫Phaser，比如Sublime、WebStorm或者nodepad++。
外掛程式
Phaser的生態系統提供了一系列的外掛程式、擴充機制、積極的社群，以及與其他工具和引擎整合開發。Phaser外掛程式主要包括四類，分別是：BasePlugin 類、ScenePlugin 類、PluginCache、DefaultPlugins。但概括其特性可將Phaser外掛程式分為兩大類，即官方內建外掛程式和開發者自訂外掛程式，其中，內建外掛程式分為全域和場景專用外掛程式。
Phaser的外掛程式機制可以概括為：
● 安裝外部外掛程式記錄：開發者使用」installScenePlugin」方法來記錄外部外掛程式的安裝情況。這個過程用於讓Phaser熟知哪些外掛程式可以使用。
● 外掛程式實例化：通過」PluginManager.addToScene()「方法將外掛程式添加到場景中從而實例化外掛程式。這個過程用於實現外掛程式和場景中的對象進行互動。
● 檢查：在切換場景時，重新檢查外掛程式的安裝情況。
● 釋放：在銷毀遊戲時，Phaser釋放外掛程式所占用的資源，清除外掛程式資料。
Phaser外掛程式為遊戲開發者提供了豐富多樣的資源和工具，在滿足特定需求的同時簡化開發流程，從而創造更有吸引力的遊戲體驗。
HTML5 遊戲專案的基本結構
一個 HTML5 遊戲專案通常包括以下資料夾和檔案：
- Scripts/ (或 js/) ：在這個資料夾中，你可以找到關鍵的框架檔案，通常被稱為「Phaser.js」。它通常包含一個專門用於利用該框架的遊戲代碼的檔案。
- Src/：這個資料夾是為了儲存原始檔而設定的。這些檔案最終會被編譯以建立完整的遊戲代碼。
- Assets/：在這個資料夾內，你可以找到各種子資料夾：
- Images：這裡存放了圖形資產，如背景和精靈。
- Maps：這裡存放遊戲中使用的任何瓦片圖所需的資料。
- Sounds：這是遊戲的音效儲存的地方，通常有多種格式。
- Music：這裡包含遊戲的音樂軌道，也有多種格式。
- Misc：雜項資料，如對話檔案、執行時指令碼和其他特殊檔案，都儲存在這裡。
- Index.html：這個檔案是遊戲的入口點。因此，它設定了遊戲並啟動了載入過程。JavaScript 在初始設定之後處理互動。此 html 檔案還可能包括基本樣式來定位網頁上的遊戲，並圍繞它建立一個使用者介面（UI）。[3]
發展歷程
Richard Davey在2013年4月的部落格文章中宣布了Phaser的首次發布。[4] 1.0版於9月發布，整合了用於彩現的Pixi.js庫。[5]
Phaser 2的最後一個官方版本是2.6.2，但為了在開發Phaser 3的同時對穩定版本進行改進，建立了一個新的倉庫：Phaser CE（Community Edition）。 [6] 因此，Phaser CE目前是使用Phaser進行開發的推薦穩定平台。
Phaser 3.0.0於2018年2月13日發布，其開發正在GitHub上進行。[7] 該框架的大多數元素和功能都已從零開始重建，採用完全模組化的結構和資料導向的方法。Phaser 3包括一個為現代2D遊戲設計的全新客製化WebGL彩現器。自那時以來，已經完成了大部分文件和使用者範例，並且已經實現了大多數功能。
目前正在開發的是Phaser 4，宣布於2019年8月19日，它試圖用TypeScript重寫Phaser 3。[8] 這不是API重寫，而是將重點放在將目前在Phaser 3中的指令碼移植到TypeScript上。
Phaser自從發布以來，已經經過多個版本的迭代與改進，它在開發者社群中積累了大量的使用者，並且得到了一致好評。其發展受益於開源社群的貢獻和積極的回饋。[9]
Richard Davey 得到 Open Core Ventures 投資， 並創立 Phaser Studio。
2024年，Phaser 4 已中止開發, 專注強化Phaser 3 和 Phaser Editor 的功能。
架構和功能
Phaser 可在任何支援畫布（canvas）元素的網路瀏覽器中執行。使用 Phaser 製作的遊戲使用 JavaScript 或 TypeScript 開發。載入圖片、聲音和其他遊戲檔案等資源需要網路伺服器，因為瀏覽器要求網頁只能訪問來自同一來源的檔案[10]。
彩現
Phaser 可使用 WebGL 或 Canvas 元素進行彩現，如果瀏覽器支援 WebGL，則可選擇使用 WebGL；如果裝置不支援 WebGL，則會退回到 Canvas。
物理
Phaser 配備了 3 種物理系統： Arcade Physics、Ninja Physics 和 P2.JS。
Arcade Physics 僅用於高速 AABB 碰撞。忍者物理 "允許使用複雜的瓷磚和斜坡，足以滿足關卡場景的需要。"P2.JS 是一個全身物理系統，支援約束、彈簧和多邊形等。
從 phaser 3.6 開始，有兩個主要的物理引擎。它們分別被稱為 Arcade 和 Matter。還有一個與 Arcade 相似的引擎，名為 Impact，但鮮為人知。
在這三個引擎中，Arcade 可能是使用最多的一個，因為它速度快且易於使用。它在所有基本物理引擎功能（如重力、加速度和阻力）的基礎上，使用軸對齊（非旋轉）的矩形和圓形進行碰撞檢測。它的缺點是功能有限。要利用支援的形狀製作複雜的撞擊框可能非常困難，而且多個物體靠近會導致穩定性問題。
Matter 是更先進的物理引擎，但其複雜性也隨著功能的增加而提高。Matter 能夠類比非常逼真的全身物理效果。它支援多種功能，如剛體、複合體、彈性碰撞、穩定堆疊以及品質和密度等物理屬性。
Impact 與 Arcade 有許多相似之處，但也帶來了一些有用的優勢。例如，Impact 可以在瓦片貼圖中加入斜坡，而 Arcade 的軸對齊矩形則無法做到這一點。不過，這樣做的缺點是您必須使用 Impact 引擎開發人員自己的 "Weltmeister "編輯器來建立平鋪貼圖。
動畫和音訊
Phaser是一款功能強大的遊戲引擎，具備出色的動畫和音訊功能，提供了多種工具和選項來實現引人入勝的遊戲體驗：
動畫： Phaser支援Spritesheet和紋理圖集，這些包括了多個訊框或角色動畫，開發者能使用訊框序列來製作動畫。phaser的動畫序列功能使開發者能夠輕鬆建立精靈的動畫序列，包括迴圈、速度和訊框速率的控制，從簡單的角色移動到複雜的特效動畫。同時phaser還提供內建的Tweening引擎，用於建立平滑的過渡動畫，這對於實現比如漸變、縮放、旋轉等動畫特別有用，還可以實現其他的複雜的特效動畫。
音訊： Phaser允許開發者管理和播放網路音訊和HTML5音訊，並且提供了豐富的音訊效果控制選項，包括音量、靜音、迴圈、淡入淡出和聲道定位等，這些屬性可以通過需求進行調整，同時phaser支援音訊檔的預載入，以確保無延遲的音效播放，以便於隨時播放，提供更好的遊戲體驗。
與其他遊戲引擎對比
Phaser與其他遊戲引擎的對比
Phaser是一款專注於2D遊戲開發的開源引擎，受到了眾多開發者的喜愛。與其他流行的遊戲引擎相比，Phaser有其獨特的優勢和局限性。
Phaser vs. Cocos2d-x: Cocos2d-x是一款跨平台的2D/3D遊戲開發框架。相比於Phaser，它支援更多的原生平台，如iOS和Android。然而，Phaser基於HTML5, 更容易與現代的Web技術整合，適合Web平台的快速迭代和部署。
Phaser vs. Unity 2D: Unity是業界知名的遊戲開發引擎，同時支援2D和3D遊戲開發。相比於Phaser，Unity提供了更為強大的編輯器工具和更廣泛的平台支援。但Phaser相對輕量，對於初學者來說，入門門檻可能更低，特別是對於僅想專注於Web遊戲開發的人。
在選擇遊戲引擎時，開發者需要考慮目標平台、專案規模、學習曲線和社群支援等因素。Phaser因其簡單、易用而備受喜愛，尤其適合那些希望快速上手Web遊戲開發的人。
參見
參考文獻
- ^ Phaser Project Setup. An Introduction to HTML5 Game Development with Phaser.JS. Taylor & Francis Group, 6000 Broken Sound Parkway NW, Suite 300, Boca Raton, FL 33487-2742: CRC Press. 2016-09-22: 43–53.
- ^ Lodriguez, Oscar. Correction to: Let’s Build a Multiplayer Phaser Game. Let’s Build a Multiplayer Phaser Game. Berkeley, CA: Apress. 2019: C1–C1. ISBN 978-1-4842-4248-3.
- ^ Phaser (game framework). Wikipedia. 2023-10-14 （英語）.
- ^ Rich. Announcing Phaser (Flixel HTML5) and our Adobe Max session. Phonon Storm. [2023-10-19]. （原始內容存檔於2023-06-01）.
- ^ Rich. By Rich Tags 1.0 release, framework, hard work, html5 Posted in Phaser 3 comments Phaser 1.0 and the journey we took to get there. Phonon Storm. [2023-10-19]. （原始內容存檔於2023-06-02）.
- ^ Phaser - Download - Phaser CE - Community Edition. Phaser. [2023-10-19]. （原始內容存檔於2022-09-29）.
- ^ Phaser - The fast, fun and free HTML5 Game Framework. Phaser. [2023-10-19]. （原始內容存檔於2018-05-15）.
- ^ Phaser 3 Dev Log #148: Phaser 4 Announcement and a catch-up on Phaser 3.18 and 3.19 releases. - Phaser3 - Phaser. Phaser. [2023-10-19]. （原始內容存檔於2020-02-20）.
- ^ Richard, Davey. Phaser 3 入门实例教程. 2018-02-20 [2023-10-13]. （原始內容存檔於2023-10-13）.
- ^ Same-origin policy - Web security MDN. mozilla.org. [2021-09-30]. （原始內容存檔於2017-03-12）.