add-assets

性能说明

• 请从容、彻底地完成此任务
• 质量比速度更重要
• 请勿跳过验证步骤

添加素材

将基础几何形状（圆形、矩形）替换为像素艺术精灵图，应用于所有游戏实体。每个角色、敌人、物品和投射物都应拥有易于辨认的视觉形象——全部通过代码生成，无需外部图像文件。

说明

分析 $ARGUMENTS 中的游戏（如果未提供路径，则分析当前目录）。

首先，加载 game-assets 技能，了解完整的像素艺术系统、原型和集成模式。

步骤 1：审查

• 阅读 package.json，确定使用的引擎（Phaser 或 Three.js——此技能侧重 Phaser）
• 阅读 src/core/Constants.js，了解实体类型、颜色和尺寸
• 阅读所有实体文件（src/entities/*.js），查找创建实体精灵的所有 generateTexture()、fillCircle()、fillRect() 或 fillEllipse() 调用
• 阅读场景文件，检查是否有用于绘制游戏实体的内嵌形状
• 列出当前使用几何形状的所有实体

步骤 2：规划

提供要创建的精灵图表：

实体	原型	网格	帧数	描述
玩家（个性人物）	Personality	32x48	1-4	[name] 的漫画化形象，缩放 4 倍
玩家（通用）	Humanoid	16x16	4	...
敌人 X	Flying	16x16	2	...
可拾取物	Item	8x8	1	...

如果游戏中有真实人物或知名个性人物，玩家角色默认采用 Personality 原型。该原型使用 32x48 网格，缩放 4 倍（渲染尺寸为 128x192px，约占画布高度的 35%）——足够大，让玩家一眼就能认出这个人物。

选择最符合游戏现有配色方案的调色板：

• DARK — 哥特风、恐怖、黑暗奇幻
• BRIGHT — 街机、平台游戏、休闲游戏
• RETRO — NES 风格、柔和色调

网格尺寸从 8x8（小型可拾取物）到 16x16（标准实体），再到 32x48（个性人物角色）不等。具名角色始终使用 Personality 原型，确保表情包的关键亮点——认出这个人物——能立即呈现。

步骤 3：实现

1. 创建 src/core/PixelRenderer.js——包含 renderPixelArt() 和 renderSpriteSheet() 工具函数
2. 创建 src/sprites/palette.js——共享调色板
3. 在 src/sprites/ 中创建精灵数据文件：
   • player.js——玩家待机和行走帧
   • enemies.js——所有敌人类型的精灵图及帧
   • items.js——可拾取物、宝石、爱心等
   • projectiles.js——子弹、火球、能量弹（如适用）
4. 更新每个实体的构造函数：
   • 使用 renderPixelArt() 或 renderSpriteSheet() 替换 fillCircle() / generateTexture()
   • 为包含多帧的实体添加 Phaser 动画
   • 如果精灵尺寸发生变化，调整物理碰撞体尺寸（setCircle() 或 setSize()）
5. 对静态物品（宝石、可拾取物），如果尚未添加，则为其添加上下浮动补间动画

步骤 4：验证

• 运行 npm run build，确认没有错误
• 检查碰撞检测仍可正常工作（可能需要调整物理碰撞体尺寸）
• 列出所有新建和修改的文件
• 提醒用户运行游戏并检查视觉效果
• 建议运行 /game-creator:qa-game，更新视觉回归快照，因为现在所有实体的外观都已不同

用法示例

标准游戏

/add-assets examples/asteroid-dodge

结果：审查所有使用几何形状的实体 → 创建包含玩家、陨石和宝石像素艺术的 src/sprites/ → 使用 renderPixelArt() 替换 fillCircle()/fillRect() → 调整碰撞边界。

个性人物游戏（来自推文）

/add-assets examples/nick-land-dodger

结果：检测到具名人物 → 使用缩放 4 倍的 32x48 Personality 原型 → 将易于辨认的漫画形象作为玩家角色 → 为敌人和物品制作主题像素艺术。

故障排除

精灵显示出来了，但尺寸不对

原因： 像素艺术的尺寸与原始碰撞箱不匹配。 解决方法： 让精灵尺寸接近原始 fillRect/fillCircle 的尺寸。必要时调整碰撞边界。

精灵没有显示

原因： 首次渲染帧之前未创建 Canvas 纹理。 解决方法： 在场景的 preload() 或 create() 中生成纹理，而不是在 update() 中生成。

下一步

告诉用户：

游戏实体现在都使用像素艺术精灵，而不是几何形状了！每个角色、敌人和物品都有独特的视觉形象。

已创建的文件：

• src/core/PixelRenderer.js — 渲染引擎
• src/sprites/palette.js — 共享调色板
• src/sprites/player.js、enemies.js、items.js — 精灵数据

运行游戏即可查看新的视觉效果。如果你有 Playwright 测试，请运行 /game-creator:qa-game 来更新视觉回归快照。