企业官网建设流程全解析

Phaser 4.2.1 API 参考指南：7 个高频接口与源码定位

【免费下载链接】phaserPhaser is a fun, free and fast 2D game framework for making HTML5 games for desktop and mobile web browsers, supporting Canvas and WebGL rendering.项目地址: https://gitcode.com/gh_mirrors/ph/phaser

弹球演示写完了，碰撞回调却找不到在哪注册，场景切换方法也不在文档首页。下面给 Phaser 4.2.1 的 API 参考清单，每条都带源码路径，可直接抄用。

跑一个开箱即用的弹球

完整配置，不依赖外部资源：

new Phaser.Game({ type: Phaser.AUTO, width: 800, height: 600, physics: { default: 'arcade', arcade: { gravity: { y: 400 } } }, scene: { create: function () { const box = this.add.rectangle(400, 100, 40, 40, 0xffcc00); this.physics.add.existing(box); box.setCollideWorldBounds(true); box.setBounce(1, 1); } } });

• type: Phaser.AUTO优先 WebGL，不可用时自动退回 Canvas
• this.physics.add.existing(box)传什么，物理体就加在谁身上
• setBounce系数是 0-1，填 1 才不掉能量

跑起来后，黄色小方块会在画布底部持续弹跳。重力值来自 physics 配置里的gravity.y。

查高频 API

整理 7 个覆盖 80% 场景的高频接口：

拆三个重点子系统

注册碰撞回调

arcade 物理工厂干两件事：挂物理体、注册碰撞。

create: function () { const player = this.add.rectangle(100, 300, 32, 32, 0x3366ff); const gem = this.add.rectangle(300, 300, 32, 32, 0xffcc00); this.physics.add.existing(player); this.physics.add.existing(gem); this.physics.add.overlap(player, gem, function (a, b) { b.setScrollFactor(0).setVisible(false); }); }

overlap 只通知、不推挤；想让物体分开，换成 collider。第三个参数就是回调函数，两个物体接触的那一帧触发一次。

切换场景并传数据

Scene 是状态的基本单位，start 第二个参数是跨场景通信的入口。

create: function () { this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.ESC) .on('down', () => this.scene.start('GameOver', { score: 100 })); } // GameOver 场景内部 create: function (data) { this.add.text(16, 16, '得分: ' + data.score); }

start 会停掉当前场景再起新场景；想让两个场景并行跑，用 this.scene.launch。只想停某一个，用 this.scene.stop('key')。

播放帧动画与补间

anims 系统只管帧序列和播放状态，播放动作发生在 sprite 上。示例依赖一张 player.png 精灵表（多帧 32x32），自行放入 assets/ 目录。

preload: function () { this.load.spritesheet('player', 'assets/player.png', { frameWidth: 32, frameHeight: 32 }); }, create: function () { this.anims.create({ key: 'walk', frames: this.anims.generateFrameNumbers('player', { start: 0, end: 3 }), frameRate: 10, repeat: -1 }); const player = this.add.sprite(100, 100, 'player'); player.play('walk'); this.tweens.add({ targets: player, x: 300, duration: 1000 }); }

frameWidth 和 frameHeight 不传就会切帧失败，这是做动画最常见的坑。

收集生态与扩展资源

仓库里的几份指南，配合源码一起看：

• 引擎入口与构建脚本说明：README.md
• TypeScript 类型声明：types/phaser.d.ts
• 3.x 升 4.x 迁移指南：changelog/v4/4.0/MIGRATION-GUIDE.md
• WebGL 着色器编写指南：docs/Phaser 4 Shader Guide/Phaser 4 Shader Guide.md
• 渲染内部空间图解：docs/Phaser 4 Internal Space Guide/Phaser 4 Internal Space Guide.md

确认版本与里程碑

• 当前仓库为 4.2.1（代号 Giedi），是 4.x 系列最新正式版本
• 3.x 系列止步于 3.90（2025 年 5 月），两条线并行维护
• 4.0 是 3 到 4 的最后一次大改版，4.1 与 4.2 以修 bug 和补渲染为主
• 完整变更日志：CHANGELOG.md

clone 下来可以先跑一遍测试套件，确认本地环境没问题：

git clone https://gitcode.com/gh_mirrors/ph/phaser cd phaser && npm install && npm test

然后把上面弹球示例里的 rectangle 换成自己的精灵，试一次碰撞回调。

【免费下载链接】phaserPhaser is a fun, free and fast 2D game framework for making HTML5 games for desktop and mobile web browsers, supporting Canvas and WebGL rendering.项目地址: https://gitcode.com/gh_mirrors/ph/phaser