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不可用时自动退回 Canvasthis.physics.add.existing(box)传什么物理体就加在谁身上setBounce系数是 0-1填 1 才不掉能量跑起来后黄色小方块会在画布底部持续弹跳。重力值来自 physics 配置里的gravity.y。查高频 API整理 7 个覆盖 80% 场景的高频接口高频操作对应类 / 方法源码相对路径游戏初始化new Phaser.Game(config)src/core/Game.js场景切换this.scene.start(name, data)src/scene/SceneManager.js精灵创建this.add.sprite(x, y, key)src/gameobjects/sprite/Sprite.js注册碰撞回调this.physics.add.collider(objA, objB, cb)src/physics/arcade/Factory.js创建帧动画this.anims.create(config)src/animations/AnimationManager.js加载精灵表this.load.spritesheet(key, url, size)src/loader/LoaderPlugin.js读取按键输入this.input.keyboard.addKey(SPACE)src/input/keyboard/KeyboardPlugin.js拆三个重点子系统注册碰撞回调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.mdTypeScript 类型声明types/phaser.d.ts3.x 升 4.x 迁移指南changelog/v4/4.0/MIGRATION-GUIDE.mdWebGL 着色器编写指南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.902025 年 5 月两条线并行维护4.0 是 3 到 4 的最后一次大改版4.1 与 4.2 以修 bug 和补渲染为主完整变更日志CHANGELOG.mdclone 下来可以先跑一遍测试套件确认本地环境没问题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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考