Phaser
Phaser[1]是一個HTML5遊戲框架，此框架的目的是輔助開發者真正快速地製作強大的、跨瀏覽器的HTML5遊戲。 此框架對瀏覽器的唯一要求是支持畫布（canvas）標籤。
 | |
| 開發者 | Richard Davey |
|---|---|
| 首次發布 | 2013年4月12日 |
| 當前版本 | 3.60.0 2023年4月12日 |
| 源代碼庫 | github |
| 編程語言 | JavaScript、TypeScript |
| 類型 | 應用框架 |
| 許可協議 | MIT License |
| 網站 | phaser |
概述
編輯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）.