# Phaser 3 游戏开发技巧 ## 快速入门 ### 最常见的模式 **多场景流程** 常量配置= { 场景：[启动、预加载、主菜单、游戏、GameOver] }; // 启动 → 预加载器 → 主菜单 → 游戏 → GameOver **对象池** 创建（）{ this.projectiles = this.physical.add.group({ 类别类型：射弹，框架数量：20个，活跃：假，可见：假 }); } 火（）{ constprojectile = this.projectiles.getFirstDead(false); if (射弹) 射弹.fire(x, y); } **全球动画** // 在 Preloader.js 中 create() this.anims.create({ 键：“步行”，帧： this.anims.generateFrameNumbers('player', { start: 0, end: 3 }), 帧率：10，重复：-1 }); **只需向下输入** if (Phaser.Input.Keyboard.JustDown(this.spacebar)) { this.jump(); } ## 导航指南 ### 如何使用此技能该技能提供对 18 个综合模式文件的访问，涵盖 Phaser 3 开发的各个方面。每个文件都包含详细的模式、代码示例和最佳实践。 **查找特定模式：** # 阅读特定主题阅读知识库/06-input-handling.md # 在所有文件中搜索模式 grep -r“对象池”知识库/ # 通过关键字查找模式 grep -i“动画”知识库/*.md grep -i“碰撞”知识库/*.md **按号码快速查找：** * 01 = 场景架构 * 02 = 资产管理 * 03 = 物理与碰撞 * 04 = 运动模式 * 05 = 动画系统 * 06 = 输入处理 * 07 = 状态管理 * 08 = 对象池和内存 * 09 = 网格系统 * 10 = 自定义游戏对象 * 11 = UI/HUD 模式 * 12 = 补间和视觉效果 * 13 = 音频集成 * 14 = 游戏循环模式 * 15 = 算法实现 * 16 = 性能优化 * 17 = 代码组织 * 18=发展理念 ## 目录 ### 1\.场景架构 [knowledgebase/01-scene-architecture.md]() 多场景流、UI 叠加的并行场景、带效果的场景转换、场景之间的数据传递。 **关键模式：** * 启动 → 预加载器 → 主菜单 → 游戏 → GameOver 流程 * 使用 `scene.launch()` 的并行 UI 场景 * 相机淡入淡出过渡 * 通过`init(data)`传递场景数据 ### 2\.资产管理 [knowledgebase/02-asset-management.md]() 两阶段加载、纹理图集、多格式音频、字体同步。 **关键模式：** * Boot中的Bootstrap资源，Preloader中的完整资源 * 多个精灵的纹理图集 * 多格式音频以实现浏览器兼容性 * WebFont加载同步 ### 3\.物理与碰撞 [knowledgebase/03-physicals-collision.md]() 物理配置、碰撞与重叠、动态响应、状态门控碰撞。 **关键模式：** * 用于物理阻挡的碰撞器，用于触发器的重叠 * 基于位置的动态响应（桨击打） * 状态门控碰撞检查 * 每轨/层碰撞隔离 ### 4\.运动模式 [knowledgebase/04-movement-patterns.md]() 基于速度、基于时间的离散、基于计时器、追踪、方向验证、屏幕环绕。 **关键模式：** * 基于速度的连续动作游戏 * 网格游戏基于时间的离散 * 基于计时器的回合制游戏 * 方向验证（防止 180° 转弯） ### 5\.动画系统 [knowledgebase/05-animation-system.md]() 全局动画创建、反向动画、动画驱动逻辑、基于状态的控制。 **关键模式：** * 在 Preloader 中创建一次动画，随处使用 * 游戏同步的动画事件 * 带缓存的基于状态的动画控制 * 外部动画JSON数据 ### 6\.输入处理 [knowledgebase/06-input-handling.md]() 键盘、指针、触摸、JustDown 模式、双输入支持、输入选通、清理。 **关键模式：** * JustDown 用于单按检测 * 双键盘+指针支持 * 动画期间的输入门控 * 事件驱动的指针移动 * 使用“once()”一次性输入 ### 7\.状态管理 [knowledgebase/07-state-management.md]() 场景级状态、持久性注册表、localStorage、GameObject 数据组件、状态机。 **关键模式：** * 用于配置的构造函数，用于可重置状态的 init() * 跨场景数据的注册表 * 用于自定义属性的 GameObject 数据组件 * 布尔标志与状态机 ### 8\.对象池和内存 [knowledgebase/08-object-pooling-memory.md]() 基于组的池化、启用/禁用模式、对象重用、动态纹理清理。 **关键模式：** * 使用`frameQuantity`预创建，使用`getFirstDead()`回收 * 启用/禁用而不是创建/销毁 * 重置可重复使用对象的模式 * 预防动态纹理清理 ### 9\.网格系统 [knowledgebase/09-grid-systems.md]() 双坐标、二维数组、邻接助手、网格对齐、可视化。 **关键模式：** * 将网格坐标与像素坐标分开 * 带边界检查的二维数组 * 邻接助手（8 方向、4 方向） * 网格对齐组创建 ### 10\.自定义游戏对象 [knowledgebase/10-custom-game-objects.md]() 扩展精灵/图像、构图模式、扩展组、自注册。 **关键模式：** * 当需要物理+动画时扩展Sprite * 通过物理扩展静态精灵的图像 * 非目视经理的作文 * 动画必须调用`super.preUpdate()` ### 11\. UI/HUD 模式 [knowledgebase/11-ui-hud-patterns.md]() 文本样式、定位、动态更新、位图字体、图标计数器、分层。 **关键模式：** * 用于定位的文本原点（左上角、中心等） *带有补间的动画计数器 * 基于图标的计数器（红心、生命） * 分层 UI 的深度/z 排序 ### 12\.补间和视觉效果 [knowledgebase/12-tween-visual-effects.md]() 基本补间、交错动画、精心设计的序列、相机效果、粒子。 **关键模式：** * 用于排序的补间回调 * 交错网格动画 * 精心设计的序列，具有累积延迟 * 相机抖动、闪光、褪色 * 粒子发射器 ### 13\.音频集成 [knowledgebase/13-audio-integration.md]() 声音管理、音频锁定处理、集中音频、延迟/排序音频。 **关键模式：** * 多格式音频加载 * 音频锁定检测和处理 * UI场景集中音频管理 * 跨场景持续音乐 ### 14\.游戏循环模式 [knowledgebase/14-game-loop-patterns.md]() 标准更新、最小事件驱动、自定义对象的预更新、委托、计时器。 **关键模式：** * update() 中的早期退出防护 * 回合制游戏的事件驱动 * 基于计时器的重复/一次性事件 * 更新对经理的授权 ### 15\.算法实现 [knowledgebase/15-algorithm-implementations.md]() 洪水填充、智能随机放置、可解谜题生成、邻近计算、跟随链、人工智能。 **关键模式：** * 4 方向扩散的递归洪水填充 * 有效位置收集，保证安置 * Walker算法解决可解谜题 * 使用 ShiftPosition 跟随链条 ### 16\.性能优化 [knowledgebase/16-performance-optimization.md]() 对象池、纹理缓存、最小化更新逻辑、事件驱动、静态组。 **关键模式：** * 对象池消除了 GC 暂停 * 不可移动物体的静态组 * update() 中事件驱动的过度轮询 * 渲染性能的纹理图集 ### 17\.代码组织 [knowledgebase/17-code-organization.md]() 文件结构、ES6 模块、常量管理、关注点分离。 **关键模式：** * 场景、游戏对象、管理器、实用程序、常量文件夹 * ES6模块导入 *精灵/动画/音频键的常量文件 * 在create()中清除初始化顺序 ### 18\.发展理念 [knowledgebase/18-development-philosophy.md]() 架构原则、何时使用物理、场景决策、更新与事件、渐进难度。 **关键模式：** * 何时使用物理与手动逻辑 * 单场景、多场景、并行场景 * Update() 与事件驱动方法 * 渐进难度模式 ## 核心模式参考 ### 场景设置导出默认类 Game 扩展 Phaser.Scene { 构造函数（）{ 超级('游戏'); // 配置常量这个.GRID_SIZE = 32; } 初始化（）{ // 重置可重置状态这个.score = 0; this.gameOver = false; } 创建（）{ // 初始化对象 this.player = new Player(this); this.enemies = this.physical.add.group(); // 设置碰撞 this.physical.add.collider(this.player, this.enemies, this.onHit, null, this); } 更新（时间，增量）{ if (this.gameOver) 返回； // 游戏逻辑 } } ### 自定义游戏对象导出默认类 Player 扩展 Phaser.Physics.Arcade.Sprite { 构造函数（场景，x，y）{ 超级（场景，x，y，'玩家'）； // 自注册场景.add.existing(this); 场景.physical.add.existing(this); // 配置 this.setCollideWorldBounds(true); this.isAlive = true; } 更新前（时间，增量）{ super.preUpdate(时间, 增量); // 动画必需的 if (!this.isAlive) 返回； this.handleMovement(); } } ### 网格系统 // 双坐标系 this.gridX = 5; 这个.gridY = 3; this.sprite.x = this.gridX * TILE_SIZE; this.sprite.y = this.gridY * TILE_SIZE; // 带边界检查的二维数组 getCellXY(x, y) { if (x < 0 || x >= this.width || y < 0 || y >= this.height) { 返回空值； } 返回 this.grid[y][x]; } ### 碰撞处理 // 物理碰撞 this.physical.add.collider(玩家、平台); // 基于触发器的重叠 this.physical.add.overlap(玩家, 硬币, this.collectCoin, null, this); // 与状态门碰撞 onHit（玩家，敌人）{ if (!player.isAlive) 返回； if (player.invincible) 返回； if (enemy.alpha < 1) 返回； this.handleDamage(玩家，敌人); } ### 输入模式创建（）{ // 光标键 this.cursors = this.input.keyboard.createCursorKeys(); // 特定键 this.spacebar = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.SPACE); // 指针/触摸 this.input.on('pointerdown', this.handleClick, this); } 更新（）{ // 连续输入 if (this.cursors.left.isDown) { this.player.setVelocityX(-160); } // 单击输入 if (Phaser.Input.Keyboard.JustDown(this.spacebar)) { this.jump(); } } ### 动画设置 // 在预加载器中 create() - 全局动画 this.anims.create({ key: '玩家行走', 帧： this.anims.generateFrameNumbers('player', { start: 0, end: 3 }), 帧率：10，重复：-1 }); // 在游戏中 create() - 使用动画 this.player.play('玩家行走'); // 动画事件 this.player.on('animationcomplete-attack', this.spawnProjectile, this); ### 状态管理 // 场景级状态初始化（）{ 这个.score = 0; this.lives = 3; this.gameOver = false; } // 跨场景数据的注册表 this.registry.set('highscore', this.score); const highscore = this.registry.get('highscore'); // 游戏对象数据 sprite.setData({ gridX: 5, gridY: 3, type: '敌人' }); const gridX = sprite.data.values.gridX; ## 常见陷阱 **要避免的严重错误：** 1. **在自定义精灵中忘记`super.preUpdate(time, delta)`** * 没有这个动画将无法工作 * 始终在 preUpdate() 中首先调用 2. **缩放静态组后不调用`refreshBody()` this.platforms.create(x, y, '平台') .setScale(2) .refreshBody(); // 必需 3. **在 update() 中创建对象而不是池化** * 导致GC暂停和性能不佳 * 预先创建池，通过启用/禁用进行回收 4. **缺少网格访问边界检查** if (x < 0 || x >= 宽度 || y < 0 || y >= 高度) 返回 null; 5. **不清理监听器/计时器** 关闭（）{ this.input.off('pointerdown', this.handleClick); if (this.timer) this.timer.remove(); } 6. **使用错误的碰撞方法** * 使用`collider`进行物理阻挡 * 对触发器/拾音器使用“overlap” 7. **当事件起作用时在 update() 中轮询** * 使用物理重叠代替距离检查 * 使用指针事件而不是检查每一帧 8. **硬编码值而不是常量** // 坏处：幻数精灵.x = 400; // 好：命名常量常量 GRID_SIZE = 32; sprite.x = gridX * GRID_SIZE; 9. **不在 init() 中重置状态** * 场景重启无法正常工作 * 将所有可重置状态放在 init() 中，而不是构造函数中 10. **忽略回调中的上下文绑定** // 使用箭头函数或绑定 this.time.delayedCall(1000, () => this.start(), [], this); ## 性能提示 * **对象池**用于频繁创建/销毁的对象 * **纹理图集** 将精灵组合成单个图像 * **静态组**用于不可移动的平台/墙壁 * **事件驱动** update() 中的过度轮询 * **最小更新逻辑** \- 仅每帧所需的内容 * **缓存查找** \- 不要每帧都搜索数组 * **设置深度一次** \- 不要对每一帧进行排序 ## 何时读取详细文件 **开始新游戏？** → 阅读 [01-scene-architecture.md]() **性能问题？** → 阅读 [16-performance-optimization.md]() **基于网格的游戏？** → 阅读 [09-grid-systems.md]() **复杂的动画？** → 阅读 [05-animation-system.md]() 并[12-tween-visual-effects.md]() **输入问题？** → 阅读 [06-input-handling.md]() **内存泄漏？** → 阅读 [08-object-pooling-memory.md]() **实现算法？** → 阅读 [15-algorithm-implementations.md]() **架构决策？** → 阅读 [18-development-philosophy.md]() ## 快速参考备忘单 ### 场景流程启动 → 预加载器 → 主菜单 → 游戏 → GameOver this.scene.start('NextScene', { 分数: this.score }); this.scene.launch('GameUI'); // 平行场景 ### 物理 this.physical.add.collider(a, b); // 物理阻塞 this.physical.add.overlap(a, b, 回调); // 仅触发 sprite.setCollideWorldBounds(true); sprite.setImmovable(true); ### 分组和池化 this.items = this.physical.add.group({frameQuantity: 20 }); const item = this.items.getFirstDead(false); item.enableBody(true, x, y, true, true); item.disableBody(true, true); ### 输入 this.cursors = this.input.keyboard.createCursorKeys(); Phaser.Input.Keyboard.JustDown(key) this.input.on('pointerdown', 回调, this); ### 补间 this.tweens.add({ 目标：精灵， x：400，持续时间：1000，轻松：'Power2'， onComplete: () => {} }); ### 相机 this.cameras.main.shake（持续时间，强度）； this.cameras.main.fadeOut(持续时间); this.cameras.main.flash(duration, r, g, b); 该技能提供了全面的 Phaser 3 模式。阅读详细的知识库文件以获取深入的示例和高级技术。

编写 Phaser 3 游戏

包含技能