文章目录Phaser跑了十三年的 HTML5 游戏框架现在出了第四版Phaser跑了十三年的 HTML5 游戏框架现在出了第四版Phaser 是一个开源的 HTML5 游戏框架支持 WebGL 和 Canvas 两种渲染方式桌面和移动端浏览器都能跑。这个项目从 2011 年开始开发到现在已经超过 13 年在 GitHub 上拿到了将近 4 万颗 Star。用 Phaser 做出来的游戏可以发布到网页上也能打包成 iOS、Android 应用或者上架 Steam。YouTube Playables、Discord Activities、Reddit Games 这些平台也支持。开发语言方面JavaScript 和 TypeScript 都行前端框架兼容 React、Vue、Angular、Svelte 等 40 多种。Phaser 4 更新了什么Phaser 4 是一次大版本更新底层的 WebGL 渲染器全部重写。v3 的管线系统换成了基于节点的渲染架构WebGL 状态管理重新做过上下文丢失的恢复也内置了。整体性能比之前快扩展自定义渲染逻辑也更方便。四边形渲染改用索引缓冲区顶点上传开销减少了三分之一。多纹理批处理在移动端做了优化减少了不必要的批次切换。整个渲染采用即时模式数据不到真正需要的时候不会往 GPU 送。统一的滤镜系统v3 里的 FX 和 Mask 合并成了一个滤镜系统。滤镜可以应用到任意游戏对象或摄像机上不再限制哪些对象能用特效。每个滤镜接收一张输入图输出一张结果图互相之间可以组合。内置滤镜数量不少模糊、发光、阴影、像素化、色彩矩阵、泛光、暗角、擦除等等。v4 新增了几个ImageLight 做基于图像的光照Blocky 做像素风格的像素化GradientMap 做调色板映射Quantize 做复古抖动效果Key 做色度键控Blend 把 Canvas 的 27 种混合模式搬到了 WebGL 上。百万精灵和百万瓦片SpriteGPULayer 是 v4 新增的游戏对象专门用来渲染大量精灵。普通渲染方式处理几万个精灵没问题SpriteGPULayer 能处理百万级别速度快 100 倍左右。原理是把所有成员数据存在静态 GPU 缓冲区里一次绘制调用就全部画完省掉了每帧 CPU 到 GPU 的数据上传。每个成员支持位置、旋转、缩放、透明度、色调、帧的 GPU 驱动动画带有完整的缓动函数。TilemapGPULayer 把整个瓦片地图层渲染成一个四边形。着色器开销按像素算不按瓦片数算所以显示 4096 乘 4096 的瓦片也不会有性能问题。瓦片边界处的纹理过滤也做了处理没有接缝和渗色。色调系统重做色调功能把颜色和模式拆开了提供六种色调模式MULTIPLY、FILL、ADD、SCREEN、OVERLAY、HARD_LIGHT。新的 setTintMode() 方法可以显式控制模式BitmapText 的色调渲染也修好了。新的游戏对象v4 加了几个新对象。Gradient 可以渲染线性、径向、锥形、双线性颜色渐变支持抖动。Noise 系列对象在 GPU 上生成和动画化细胞噪声、单纯形噪声。CaptureFrame 在渲染中途截取帧缓冲区方便做后处理。Stamp 渲染一个跟摄像机无关的四边形适合 DynamicTexture 操作。光照和着色器改进光照现在一行代码就能启用sprite.setLighting(true)不用再折腾管线。物体可以根据自身纹理投射自阴影光源有明确的 z 高度值。光照支持大多数游戏对象包括 BitmapText、粒子、TileSprite 和两种瓦片地图层。Shader 游戏对象重写了改用基于配置的 API。GLSL 加载改用标准的 #pragma 指令能配合语法检查器使用。TileSprite 也重建了新的着色器支持纹理图集帧和瓦片旋转。包体大小phaser.js 原始文件有 8 MB 多其中 84% 是内联文档给 IDE 用的不会打进游戏包。压缩后的 phaser.min.js 是 345 KB这是包含全部功能的完整版本。如果不需要某些功能可以通过构建配置排除体积还能再小。安装npm 安装npm install phaser项目里直接 importimport Phaser from phaser;也可以用官方的 create-phaser-game 脚手架支持 Vue、React、Angular、Next.js、SolidJS、Svelte、Remix构建工具支持 Vite、Rollup、Parcel、Webpack、ESBuild、Bun。AI 辅助开发Phaser 的 API 被主流大模型广泛学习过Claude、GPT、Gemini 等模型都能直接生成 Phaser 代码。仓库里还自带了一套 AI Agent 技能文件覆盖场景、物理、输入、动画、瓦片地图、粒子、摄像机等子系统把 AI 编码工具指向这个目录就能获得深度的框架知识。Phaser 经过 13 年的迭代文档、示例、社区都已经很成熟。如果要找一个稳定的 HTML5 游戏开发框架它是目前 Star 数最高的选项之一。过 13 年的迭代文档、示例、社区都已经很成熟。如果要找一个稳定的 HTML5 游戏开发框架它是目前 Star 数最高的选项之一。
