大家好，很高兴又见面了，我是"高级前端?进阶?"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发，您的支持是我不断创作的动力。

什么是 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 安装
<script src="//cdn.jsdelivr.net/npm/phaser@3.80.1/dist/phaser.min.js"></script>
// 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);
    }
}

关于每一句代码的含义可以参考文末资料，本文不再过多赘述。

参考资料

https://github.com/phaserjs/phaser

https://newdocs.phaser.io/docs/3.80.0