Writing Phaser 3 Games

Name: Writing Phaser 3 Games
Author: tomcoolpxl

github.com/tomcoolpxl开发0154 次安装今天更新

代码仓库

关于 Writing Phaser 3 Games

这项 Phaser 3 游戏开发 Skill 面向需要实用实现模式的开发者。18 个主题文件涵盖场景、物理、输入、动画、性能等系统，并提供代码示例及常见问题提示。

主要功能

0118 个主题模式指南
02场景架构与转场
03物理、碰撞和移动模式
04输入、动画与状态管理
05对象池和性能技巧
06代码组织与常见问题

适用场景

01规划多场景 Phaser 游戏
02实现键盘、指针或触摸输入
03构建基于网格的游戏逻辑
04排查性能或内存问题

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/tomcoolpxl/sugar-splat --skill writing-phaser-3-games

安装后在 Claude Code 中输入/writing-phaser-3-games确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

knowledgebase/

01-scene-architecture.md

05-animation-system.md

03-physics-collision.md

02-asset-management.md

08-object-pooling-memory.md

09-grid-systems.md

06-input-handling.md

04-movement-patterns.md

10-custom-game-objects.md

07-state-management.md

13-audio-integration.md

12-tween-visual-effects.md

15-algorithm-implementations.md

11-ui-hud-patterns.md

16-performance-optimization.md

TOC.md

14-game-loop-patterns.md

17-code-organization.md

18-development-philosophy.md

详细介绍

Phaser 3 游戏开发技能

快速入门

最常见的模式

多场景流程

const config = {
    scene: [ Boot, Preloader, MainMenu, Game, GameOver ]
};
// Boot → Preloader → MainMenu → Game → GameOver

对象池

create() {
    this.projectiles = this.physics.add.group({
        classType: Projectile,
        frameQuantity: 20,
        active: false,
        visible: false
    });
}

fire() {
    const projectile = this.projectiles.getFirstDead(false);
    if (projectile) projectile.fire(x, y);
}

全局动画

// In Preloader.js create()
this.anims.create({
    key: 'walk',
    frames: this.anims.generateFrameNumbers('player', { start: 0, end: 3 }),
    frameRate: 10,
    repeat: -1
});

JustDown 输入

if (Phaser.Input.Keyboard.JustDown(this.spacebar)) {
    this.jump();
}

导航指南

如何使用此技能

此技能提供 18 个全面的模式文件，涵盖 Phaser 3 开发的所有方面。每个文件都包含详细的模式、代码示例和最佳实践。

查找特定模式：

# Read a specific topic
Read knowledgebase/06-input-handling.md

# Search for a pattern across all files
grep -r "object pooling" knowledgebase/

# Find patterns by keyword
grep -i "animation" knowledgebase/*.md
grep -i "collision" knowledgebase/*.md

按编号快速查找：

01 = 场景架构
02 = 资源管理
03 = 物理与碰撞
04 = 移动模式
05 = 动画系统
06 = 输入处理
07 = 状态管理
08 = 对象池与内存
09 = 网格系统
10 = 自定义游戏对象
11 = UI/HUD 模式
12 = 补间与视觉效果
13 = 音频集成
14 = 游戏循环模式
15 = 算法实现
16 = 性能优化
17 = 代码组织
18 = 开发理念

核心模式参考

场景设置

export default class Game extends Phaser.Scene {
    constructor() {
        super('Game');
        // Configuration constants
        this.GRID_SIZE = 32;
    }

    init() {
        // Reset resettable state
        this.score = 0;
        this.gameOver = false;
    }

    create() {
        // Initialize objects
        this.player = new Player(this);
        this.enemies = this.physics.add.group();

        // Setup collisions
        this.physics.add.collider(this.player, this.enemies, this.onHit, null, this);
    }

    update(time, delta) {
        if (this.gameOver) return;
        // Game logic
    }
}

自定义游戏对象

export default class Player extends Phaser.Physics.Arcade.Sprite {
    constructor(scene, x, y) {
        super(scene, x, y, 'player');

        // Self-register
        scene.add.existing(this);
        scene.physics.add.existing(this);

        // Configuration
        this.setCollideWorldBounds(true);
        this.isAlive = true;
    }

    preUpdate(time, delta) {
        super.preUpdate(time, delta);  // ESSENTIAL for animations

        if (!this.isAlive) return;
        this.handleMovement();
    }
}

网格系统

// Dual coordinate system
this.gridX = 5;
this.gridY = 3;
this.sprite.x = this.gridX * TILE_SIZE;
this.sprite.y = this.gridY * TILE_SIZE;

// 2D array with bounds checking
getCellXY(x, y) {
    if (x < 0 || x >= this.width || y < 0 || y >= this.height) {
        return null;
    }
    return this.grid[y][x];
}

碰撞处理

// Physical collision
this.physics.add.collider(player, platforms);

// Trigger-based overlap
this.physics.add.overlap(player, coins, this.collectCoin, null, this);

// Collision with state gates
onHit(player, enemy) {
    if (!player.isAlive) return;
    if (player.invincible) return;
    if (enemy.alpha < 1) return;

    this.handleDamage(player, enemy);
}

输入模式

create() {
    // Cursor keys
    this.cursors = this.input.keyboard.createCursorKeys();

    // Specific key
    this.spacebar = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.SPACE);

    // Pointer/touch
    this.input.on('pointerdown', this.handleClick, this);
}

update() {
    // Continuous input
    if (this.cursors.left.isDown) {
        this.player.setVelocityX(-160);
    }

    // Single-press input
    if (Phaser.Input.Keyboard.JustDown(this.spacebar)) {
        this.jump();
    }
}

动画设置

// In Preloader create() - global animations
this.anims.create({
    key: 'player-walk',
    frames: this.anims.generateFrameNumbers('player', { start: 0, end: 3 }),
    frameRate: 10,
    repeat: -1
});

// In Game create() - use animations
this.player.play('player-walk');

// Animation events
this.player.on('animationcomplete-attack', this.spawnProjectile, this);

状态管理

// Scene-level state
init() {
    this.score = 0;
    this.lives = 3;
    this.gameOver = false;
}

// Registry for cross-scene data
this.registry.set('highscore', this.score);
const highscore = this.registry.get('highscore');

// GameObject data
sprite.setData({ gridX: 5, gridY: 3, type: 'enemy' });
const gridX = sprite.data.values.gridX;

常见问题

应避免的严重错误：

在自定义精灵中忘记调用 super.preUpdate(time, delta)
- 没有这一步，动画将无法正常工作
- 务必在 preUpdate() 中第一时间调用

缩放静态组后未调用 refreshBody()

this.platforms.create(x, y, 'platform')
    .setScale(2)
    .refreshBody();  // REQUIRED

在 update() 中创建对象，而不是使用对象池
- 会导致 GC 停顿和性能下降
- 预先创建对象池，通过启用／禁用来回收对象

访问网格时缺少边界检查

if (x < 0 || x >= width || y < 0 || y >= height) return null;

未清理监听器／计时器

shutdown() {
    this.input.off('pointerdown', this.handleClick);
    if (this.timer) this.timer.remove();
}

使用了错误的碰撞方法
- 需要物理阻挡时使用 collider
- 触发器／拾取物使用 overlap
事件即可处理，却在 update() 中轮询
- 使用物理重叠检测，而非距离检查
- 使用指针事件，而非每帧检查

使用硬编码值，而非常量

// Bad: magic numbers
sprite.x = 400;

// Good: named constants
const GRID_SIZE = 32;
sprite.x = gridX * GRID_SIZE;

未在 init() 中重置状态
- 场景重启将无法正常工作
- 将所有可重置状态放入 init()，而非构造函数

忽略回调中的上下文绑定

// 使用箭头函数或 bind
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

速查表

场景流程

Boot → Preloader → MainMenu → Game → GameOver
this.scene.start('NextScene', { score: this.score });
this.scene.launch('GameUI');  // Parallel scene

物理引擎

this.physics.add.collider(a, b);        // Physical blocking
this.physics.add.overlap(a, b, callback); // Trigger only
sprite.setCollideWorldBounds(true);
sprite.setImmovable(true);

组与对象池

this.items = this.physics.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', callback, this);

补间动画

this.tweens.add({
    targets: sprite,
    x: 400,
    duration: 1000,
    ease: 'Power2',
    onComplete: () => {}
});

摄像机

this.cameras.main.shake(duration, intensity);
this.cameras.main.fadeOut(duration);
this.cameras.main.flash(duration, r, g, b);

此技能提供全面的 Phaser 3 模式。请阅读知识库中的详细文件，了解深入示例和高级技巧。

支持 Markdown

登录后评论

基本信息

作者: tomcoolpxl
仓库: tomcoolpxl/sugar-splat
分类: 开发
安装次数: 154
GitHub Stars: 0

报告问题

Writing Phaser 3 Games

关于 Writing Phaser 3 Games

主要功能

适用场景

安装

包含的文件

详细介绍

Phaser 3 游戏开发技能

快速入门

最常见的模式

导航指南

如何使用此技能

目录

1. 场景架构

2. 资源管理

3. 物理与碰撞

4. 移动模式

5. 动画系统

6. 输入处理

7. 状态管理

8. 对象池与内存

9. 网格系统

10. 自定义游戏对象

11. UI/HUD 模式

12. 补间与视觉效果

13. 音频集成

14. 游戏循环模式

15. 算法实现

16. 性能优化

17. 代码组织

18. 开发理念