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）.