add-assets

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Add Assets

添加资源

Replace basic geometric shapes (circles, rectangles) with pixel art sprites for all game entities. Every character, enemy, item, and projectile gets a recognizable visual identity — all generated as code, no external image files needed.

将所有游戏实体的基础几何图形（圆形、矩形）替换为像素艺术精灵。每个角色、敌人、物品和抛射物都将拥有独特的视觉标识——所有内容均通过代码生成，无需外部图像文件。

Instructions

操作说明

Analyze the game at

$ARGUMENTS

(or the current directory if no path given).

First, load the game-assets skill to get the full pixel art system, archetypes, and integration patterns.

分析位于

$ARGUMENTS

的游戏（若未指定路径则分析当前目录）。

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

Step 1: Audit

步骤1：审计

Read
```
package.json
```
to identify the engine (Phaser or Three.js — this skill is Phaser-focused)
Read
```
src/core/Constants.js
```
to understand entity types, colors, and sizes
Read all entity files (
```
src/entities/*.js
```
) and find every
```
generateTexture()
```
,
```
fillCircle()
```
,
```
fillRect()
```
, or
```
fillEllipse()
```
call that creates an entity sprite
Read scene files to check for inline shape drawing used as game entities
List every entity that currently uses geometric shapes

读取
```
package.json
```
以识别使用的引擎（Phaser或Three.js——本技能专注于Phaser）
读取
```
src/core/Constants.js
```
以了解实体类型、颜色和尺寸
读取所有实体文件（
```
src/entities/*.js
```
），找到所有用于创建实体精灵的
```
generateTexture()
```
、
```
fillCircle()
```
、
```
fillRect()
```
或
```
fillEllipse()
```
调用
读取场景文件，检查是否有作为游戏实体的内联图形绘制
列出所有当前使用几何图形的实体

Step 2: Plan

步骤2：规划

Present a table of sprites to create:

Entity	Archetype	Grid	Frames	Description
Player	Humanoid	16x16	4	...
Enemy X	Flying	16x16	2	...
Pickup	Item	8x8	1	...

Choose the palette that best matches the game's existing color scheme:

DARK — gothic, horror, dark fantasy
BRIGHT — arcade, platformer, casual
RETRO — NES-style, muted tones

Explain: "Each entity will get a pixel art sprite defined as a grid of color indices. At 16x16 scaled 2x, they render at 32x32 pixels — small and retro but recognizable. Animations use 2-4 frames for walk cycles and wing flaps."

创建待制作的精灵表格：

实体	原型	网格	帧数	描述
玩家	人形	16x16	4	...
敌人X	飞行型	16x16	2	...
拾取物	物品	8x8	1	...

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

深色系 — 哥特风、恐怖、黑暗奇幻
明亮系 — 街机、平台跳跃、休闲
复古系 — NES风格、柔和色调

说明："每个实体都将获得一个由颜色索引网格定义的像素艺术精灵。16x16的网格缩放2倍后，渲染尺寸为32x32像素——小巧且复古，但辨识度高。动画使用2-4帧实现行走循环和翅膀扇动效果。"

Step 3: Implement

步骤3：实现

Create

src/core/PixelRenderer.js

— the

renderPixelArt()

and

renderSpriteSheet()

utility functions

Create
```
src/sprites/palette.js
```
— the shared color palette
Create sprite data files in
```
src/sprites/
```
:
- ```
player.js
```
  — player idle + walk frames
- ```
enemies.js
```
  — all enemy type sprites and frames
- ```
items.js
```
  — pickups, gems, hearts, etc.
- ```
projectiles.js
```
  — bullets, fireballs, bolts (if applicable)
Update each entity constructor:
- Replace
```
fillCircle()
```
  /
```
generateTexture()
```
  with
```
renderPixelArt()
```
  or
```
renderSpriteSheet()
```
- Add Phaser animations for entities with multiple frames
- Adjust physics body dimensions if sprite size changed (
```
setCircle()
```
  or
```
setSize()
```
  )
For static items (gems, pickups), add a bob tween if not already present

创建

src/core/PixelRenderer.js

— 包含

renderPixelArt()

和

renderSpriteSheet()

工具函数

创建
```
src/sprites/palette.js
```
— 共享调色板
在
```
src/sprites/
```
目录下创建精灵数据文件：
- ```
player.js
```
  — 玩家待机+行走帧
- ```
enemies.js
```
  — 所有敌人类型的精灵和帧
- ```
items.js
```
  — 拾取物、宝石、心形道具等
- ```
projectiles.js
```
  — 子弹、火球、能量弹（如适用）
更新每个实体构造函数：
- 将
```
fillCircle()
```
  /
```
generateTexture()
```
  替换为
```
renderPixelArt()
```
  或
```
renderSpriteSheet()
```
- 为多帧实体添加Phaser动画
- 若精灵尺寸变化，调整物理体尺寸（
```
setCircle()
```
  或
```
setSize()
```
  ）
对于静态物品（宝石、拾取物），若尚未添加则添加上下浮动的补间动画

Step 4: Verify

步骤4：验证

Run
```
npm run build
```
to confirm no errors
Check that collision detection still works (physics bodies may need size adjustments)
List all files created and modified
Remind the user to run the game and check visuals
Suggest running
```
/game-creator:qa-game
```
to update visual regression snapshots since all entities look different now

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

Next Step

下一步

Tell the user:

Your game entities now have pixel art sprites instead of geometric shapes! Each character, enemy, and item has a distinct visual identity.

Files created:
src/core/PixelRenderer.js
— rendering engine
src/sprites/palette.js
— shared color palette
src/sprites/player.js
,
enemies.js
,
items.js
— sprite data
Run the game to see the new visuals. If you have Playwright tests, run
/game-creator:qa-game
to update the visual regression snapshots.

告知用户：

你的游戏实体现在已使用像素艺术精灵替代几何图形！每个角色、敌人和物品都拥有独特的视觉标识。

已创建文件：
src/core/PixelRenderer.js
— 渲染引擎
src/sprites/palette.js
— 共享调色板
src/sprites/player.js
、
enemies.js
、
items.js
— 精灵数据
运行游戏查看新视觉效果。若你使用Playwright测试，请运行
/game-creator:qa-game
更新视觉回归快照。