大家好，很高兴又见面了，我是"高级前端?进阶?"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发，您的支持是我不断创作的动力。
什么是 Phaser
Phaser is a fun, free and fast 2D game framework for making HTML5 games for desktop and mobile web browsers, supporting Canvas and WebGL rendering.
Phaser 是一个快速、免费且有趣的开源 HTML5 游戏框架，可跨桌面和移动 Web 浏览器提供 WebGL 和 Canvas 渲染，也可以使用第 3 方工具将游戏编译为 iOS、Android 和本机应用程序。 开发者可以使用 JavaScript 或 TypeScript 进行开发。
Phaser 3.80 的发布带来了一系列新功能和改进，丰富了开发人员的体验，亮点包括：
WebGL 上下文丢失处理：一个强大的解决方案，即使在 WebGL 上下文丢失的情况下也能保持游戏平稳运行，从而确保游戏不间断
压缩纹理改进：添加了对 BPTC 和 RGTC 文件格式、sRGB 色彩空间的支持以及围绕 Mipmap 级别的大量更新。
Base64 加载器集成：允许加载 Base64 编码资源，促进需要嵌入式资源（例如：可播放广告）的环境的开发流程更加顺畅。
缩放管理器捕捉模式：一项新功能允许开发人员为游戏尺寸设置 “捕捉” 值，非常适合像素艺术游戏和需要精确缩放控制的游戏。
图块地图增强功能：修复和更新了图块碰撞和渲染、增强了图块到精灵创建属性以及对基于图块的游戏元素的更多控制。
目前，Phaser 由 Phaser Studio Inc 积极开发和维护，由于快速支持和开发人员友好的 API，Phaser 目前是 GitHub 上最受好评的游戏框架之一。
目前 Phaser 在 Github 通过 MIT 协议开源，有超过 36.3k 的 star、7.1k 的 fork、33.4k 的项目依赖量，是一个值得关注的前端开源项目。
如何使用 Phaser
开发者可以通过 NPM 安装，也可以通过 CDN 引入：
npm install phaser// npm 安装// cdn 引入
如果开发者熟悉 Web 开发和打包程序，Phaser 已经发布了一系列项目模板来帮助快速开始游戏，比如：Vite、Webpack、Esbuild、Rollup、Parcel 等等。
下面是 Phaser 官方的基础示例：
const config = { type: Phaser.AUTO, width: 800, height: 600, // 画布大小 physics: { default: 'arcade', arcade: { gravity: {y: 200} } }, scene: Example // 场景就是下面的 Example};const game = new Phaser.Game(config);
config 是一个非常标准的 Phaser 3 游戏配置对象，其表明使用 WebGL 渲染器，将画布的大小设置为 800 x 600 像素，启用 Arcade 物理。
class Example extends Phaser.Scene constructor { super; } preload { this.load.setBaseURL('https://labs.phaser.io'); // 将 Base URL 设置为 Phaser 服务器并加载 3 个 PNG 文件 this.load.image('sky', 'assets/skies/space3.png'); this.load.image('logo', 'assets/sprites/phaser3-logo.png'); this.load.image('red', 'assets/particles/red.png'); } create { this.add.image(400, 300, 'sky'); const particles = this.add.particles(0, 0, 'red', { speed: 100, scale: { start: 1, end: 0 }, blendMode: 'ADD' }); const logo = this.physics.add.image(400, 100, 'logo'); logo.setVelocity(100, 200); logo.setBounce(1, 1); logo.setCollideWorldBounds(true); particles.startFollow(logo); }}
关于每一句代码的含义可以参考文末资料，本文不再过多赘述。
参考资料
