Appearance
什么是 Phaser.js?
Phaser 是一个 HTML5 游戏框架以及一组专门用于为 Web 浏览器创建游戏的工具和服务。它是使用并依赖 Web 技术构建的。它创建的游戏旨在在桌面或移动浏览器或能够运行网络游戏的应用程序上玩,例如 Discord、SnapChat、Facebook、微信、Playable Ads、Telegram、Twitch 等。还有一些方法可以将 Phaser 游戏转换为原生移动和桌面应用程序,许多开发人员已经成功地做到了这一点。Phasers 的主要关注点是,并且永远是 Web。没有其他方法可以为游戏开发者提供相同的覆盖面和潜在受众规模,而且通常没有任何把关人。
Phaser 目前是一个 2D 游戏框架。这意味着它的功能和内部设计都完全基于创建快如闪电的 2D 游戏。它不包括 3D 渲染或 3D 物理作为内置功能。同样,有一些方法可以集成第三方库来提供它,但 Phaser 本身是 2D 的,我们的文档和示例反映了这一点。我们的 2025 年路线图确实提供了一流的 3D 支持。
Phaser 是用 JavaScript 开发的,因为这是 Web 浏览器的语言。因此,您需要使用 JavaScript 或 TypeScript 对游戏进行编码。我们所有的示例和文档都以 JavaScript 提供,但我们也提供 TypeScript 定义。该 API 富有表现力且易于上手,非常适合初学者和经验丰富的开发人员。由于其成熟度,它也被 ChatGPT、Claude 和 Cursor 等 AI 工具很好地索引。因此,如果您想通过提示学习,Phaser 是您的理想选择。
Phaser 作为 JavaScript 库提供。这可以下载、从内容分发网络 (CDN) 链接,或通过任何标准 JavaScript 包管理器(如 npm)进行安装。Phaser 本身不是桌面应用程序。您无需“安装”它,尽管我们确实提供了 Phaser Editor。Phaser 的核心是一个 JavaScript 库,您可以将其包含在自己的网页或捆绑包中。然后,使用 JavaScript 编写游戏代码,并在 Web 浏览器中一起运行它们。
Phaser 已经积极开发超过 11 年。它背后有一个专门的全职团队,他们不断努力使其达到最佳状态,同时保持易于学习。它被世界各地的开发人员使用,并已被用于创建数以千计的游戏,从小型原型到拥有数百万玩家的正式商业游戏。由于其成熟度,Phaser 是一个稳定可靠的框架。这不是一种 “时尚”。当做出更改时,它们是为了整个框架的利益,而不仅仅是为了追逐“时尚”的新技术。
产品网站告诉您何时不应该使用它们几乎是闻所未闻的。但是,我们认为了解 Phaser 何时不是合适的技术选择非常重要:
- 您希望将游戏完全制作成 3D。
- 您希望仅在现代游戏机上发布您的游戏,例如 PS5、XBox 或 Nintendo Switch。
- 你不能编码,需要一个基于无代码的编辑器。
- 如果以上任何一项适用于您,那么还有其他框架,这将是更合适的框架。但是,如果您想制作 Web 上的 2D 游戏,那么我们坚信 Phaser 是一个不错的选择,数百万玩家喜欢使用它制作的游戏已经证明了这一点。
技术特点
WebGL & Canvas
Phaser 具有支持 WebGL 和 Canvas 的自定义渲染器。该渲染器经过多年的迭代而发展,目前在桌面和移动设备上拥有出色的性能。如果你需要在屏幕上炸开数以万计的精灵,它可以轻松处理。最近的更新还增加了对特殊效果的支持,例如 Bloom、Glow 和 Shine。我们一直在努力改进我们的渲染器,以使其尽可能快速和优化。
资产加载
我们使加载资产变得像一行代码一样简单。支持 30 多种不同的文件格式,包括音频、视频、二进制、纹理、svg、css、html、瓦片地图数据等等。需要 Phaser 没有的格式吗?扩展 Loader 非常简单,可以直接在代码中创建自定义文件类型。更好的是,如果您使用的是 Phaser Editor,它将为您生成资源加载器包,您可以直观地将资源拖放到游戏中,检查资源属性等等。
物理
Phaser 包括两个物理系统:Arcade 和 Matter。Arcade 是一个轻量级的物理系统,非常适合更多街机风格的游戏。得益于它的四叉树,它可以非常快速地处理许多简单的物体,并且在 Phaser Editor 中完全支持,因此您可以直接动态调整物理属性。Matter Physics 是一个全身物理系统,能够处理更复杂的形状和接触分辨率,适用于需要更强大功能的用户。这两个系统都是可选的,您可以自由携带自己的物理库。只要它提供 JavaScript 接口,它就可以与 Phaser 一起使用。
Game 对象
这些是所有 Phaser 游戏的构建块。提供 30 多种不同的游戏对象,您可以即时访问 Sprite、图像、文本、网格、容器、九切片、视频、TileSprite、粒子发射器、形状等等。通过扩展强大的基类,您可以创建具有自定义属性和行为的自己的游戏对象。通过使用 Phaser Editor,您可以轻松检查 Game Object,实时查看和修改其所有属性,并立即看到结果。
动画
好的动画真的可以将游戏推向一个新的水平。Phaser 支持轻松声明从纹理帧或 sprite 表创建的动画,或从第三方包加载动画数据。然后,您可以在游戏中的任何 Sprite 上播放动画。动画具有大量播放控件,从反向播放到循环播放,再到按顺序将多个动画链接在一起。Phaser Editor 用户可以使用友好的可视化界面配置他们的动画,让他们获得恰到好处的外观。对于更高级的基于骨骼的动画,Phaser 还支持 Spine 动画软件。
输入
能够让玩家控制正在发生的事情对于大多数游戏来说是必不可少的,因此 Phaser 可以通过单个 Input Manager 提供对键盘、游戏手柄、鼠标和触摸事件的访问。从侦听特定键到拖放和其他指针移动,都可以轻松响应玩家作。可以通过一个功能启用 Game Object 的输入,您可以设置它们的点击区域形状,甚至可以检查其纹理上的“像素完美”点击。
粒子发射器
想要添加一些闪烁的火焰吗?想让宇宙飞船在被摧毁时爆炸成碎片吗?想在玩家射击时在屏幕上投掷子弹吗?粒子可以让它发生。通过丰富的配置选项生成令人印象深刻的视觉效果,或在 Phaser 编辑器中直观地创建它们。
场景管理器
Phaser 使用 Scenes 的概念,允许您将游戏划分为多个逻辑部分。场景可以是您的主菜单、游戏关卡、Boss 战、物品商店等等。场景包含游戏对象,您可以在游戏中拥有任意数量的场景。Scene Manager 允许您在它们之间轻松移动、暂停、恢复甚至并行运行它们。它们是可扩展且灵活的,是 Phaser 运行方式的核心。Phaser Editor 包括一个强大的可视化场景编辑器,让您可以将对象拖放到您想要的任何位置,并随时调整其属性。
相机
从一开始,Phaser 就支持在您的游戏中使用多个摄像头。单个游戏场景可以支持多个摄像机,同时查看游戏世界的任何部分。它们可以有自己的视口,甚至可以相互重叠,您可以完全控制滚动和缩放他们正在查看的内容。内置相机效果包括相机抖动、闪光、淡化、滚动和缩放。
补间动画
想要让您的游戏 logo 平稳地下降到场景中,然后稍微弹跳一下?补间是为您的游戏提供应有的有趣运动的完美工具。补间通过一个简单的函数创建,可以应用于任何对象,并带有 30 多种运动缓动效果和许多回调和事件。您甚至可以在复杂的时间轴序列中将补间链接在一起。
高级纹理
纹理是所有游戏的视觉命脉,代表您在屏幕上看到的一切。Phaser 可以使用浏览器支持的任何图像格式,以及本地加载纹理图集和精灵表。渲染器中内置了更高级的格式,包括完整的 Compressed Texture 支持。如果您需要在纹理上实时绘制,那么 Dynamic Textures 为您提供了一个可视化的游乐场来执行此作,而不会影响性能。可以通过统一管理器轻松共享、销毁和创建纹理。
声音
您无法在游戏中击败重击的配乐或丰富的效果。Phaser 使您能够通过统一的 API 通过 HTML 音频或 Web 音频播放声音。您还可以控制音量、声像调整和完整的空间音频效果,从而将声音放置在游戏世界中的任何位置。
瓦片地图
瓦片地图起源于复古街机和电脑游戏,其中游戏关卡实际上是由网格中对齐的矩形“图块”创建的,由于使用它们创建关卡的便利性,瓦片地图在今天仍然非常流行。它们也非常适合“像素艺术”风格的游戏。Phaser 内置了对渲染瓦片地图的支持,可以从 CSV 或平铺 JSON 文件或从运行时创建的瓦片数据数组。Arcade 和 Matter 物理系统也支持瓦片地图碰撞。
额外的 API 和插件
Phaser 包含大量支持 API 供您使用。其中包括几何函数、交集、数学、种子随机化、常用实用程序、结构、插值、缩放、dom 处理、计时器事件等功能。浏览我们的文档,了解内置功能的概述。当然,作为 JavaScript,您可以拉取您需要的任何第三方包,并且 Phaser 拥有一个健康的插件生态系统,有数百个插件可用,涵盖了各种附加功能。当然,您可以创建自己的插件并与社区分享。