phaser4-game-asset-integration

Plans, creates, registers, and integrates game visuals like characters, animations, and backgrounds into Phaser 4 games.

Installation
Run `npx skills add "https://github.com/weberwang/phaser-skills" --skill "phaser4-game-asset-integration"` to install this skill, then follow its SKILL.md instructions for my next request.

Paste this into Claude Code, Cursor, or any agent that can run commands.

What this skill does
What it does: - Organizes and checks game art assets for Phaser 4, a JavaScript game engine - Creates visual plans for game scenes, characters, animations, and special effects - Verifies that all art files match the game design and work correctly in the game - Tracks which images are used, which are missing, and how they are licensed - Combines multiple art pieces into complete game screens for testing When to use it: - You are building a game with Phaser 4 and need to manage all the artwork - You want to make sure all images are ready before putting them into the game code - You need to check that game scenes look correct and match the original design - You are updating or redesigning how a game looks visually - You need to document where images came from and verify they are licensed for use
SKILL.mdShow the author's original SKILL.md (not in English)
---
name: phaser4-game-asset-integration
description: 为 Phaser 4 游戏规划、生产、登记、验证并集成 UI、角色、场景、动画、VFX、背景和参考还原资源。用于正式视觉资源、视觉系统、资源接入、视觉重构、运行时视觉验收和来源/许可登记;不用于纯玩法规则修改。
---

# Phaser 4 游戏美术生产与接入

## 全局控制接入

控制面边界:可提议、可审查、可在当前用户任务的 Work Item 范围内修改,且必须回到 `$phaser4-game-workflow-control` 风险门。

本领域可提议、审查,并在当前用户任务、Implementation Package、A 等级和路径范围内生产或接入资源;任务内方案、路径和资源清单变化时同步更新计划并重验受影响部分。所有结论回到 [`phaser4-game-workflow-control`](../phaser4-game-workflow-control/SKILL.md) 审计和状态迁移。V0-V4 是 `stageId`,不得旁路全局状态、带副作用的 A4-A6 精确操作批准、diff 审计和证据门。

## 工作流

### 场景还原合同(effect-image 强制)

V2 拆解先遵守[功能语义分组约束](../phaser4-game-ui-layout/references/functional-semantic-grouping.md):确认区域、功能组件、部件和独立元素的归属与理由;布局不得按文字类型或几何包含重新分组。归属不明留在拆解确认,不自动生成可放行布局。

`effect-image` 表示正式 Scene 的视觉事实与结构关系还原,不是独立 PNG 生产。全局基线冻结并完成基础实施后,V1 冻结 `scene_reconstruction_contract`、主参考、响应式、逐区视觉事实与容差,并把 HUD、modal、popup、drawer、toast 统一记录为宿主显示层子任务。本次完整 inventory 的瞬态层按 required state 冻结宿主同屏图;未就绪者按[子任务规则](../phaser4-game-workflow-control/references/control-model.md#显示层子任务与宿主继续推进)登记 `deferred_layers` 并行推进,不自动抢占宿主主线。常驻层仍保留主图归属;宿主满足自身前置后继续 V2 两次确认、V3 与正式实现。运行态默认使用 `visual_validation.mode=usability`,允许小幅位置、尺寸、边距和换行差异;effect-image 不自动启用 `exact`,只有明确精确需求时才启用严格像素/全矩阵验证。V4 必须关闭全部待办,并验证瞬态层打开→交互→关闭/恢复轨迹;不能报告缺层的整体完成。完整 inventory 缺图或合同/目标不匹配仍按真实影响修复/重验,上游事实失效才回退。

效果图/参考图是否适用只看当前场景 Work Item 是否把它指定为正式运行画面的视觉目标,与是否生成、制作或新增资源无关。适用时,参考还原是同一场景实现生命周期内的视觉模式与合同叠加,必须进入 `effect-image` 的 V1→V4 还原链,包含 `scene_reconstruction_contract`、布局绑定、coverage、宿主场景同屏组合和 fidelity 验收;即使所有区域都用 `reuse-existing`/`runtime-program` 实现、零新资源且零 ImageGen 也不例外。不创建第二个场景 Work Item 或第二条 V1→V4。仅仅生成新资源,或仅把图片作为灵感、说明或临时参考,不足以触发 `effect-image`,仍按普通资产、组件或场景路径分类。`image_generation_required`、`generate-now`、资源数量和 `production_method` 只能在已经触发后由 V2 决定生产路线,不能参与 V0 applicability 判定。

effect-image ImageGen 的完整提示词模板、asset_prompt 事实继承规则、透明生产要求和 generation_record 结构化字段统一见[《Effect-image ImageGen 忠实还原提示词合同》](references/effect-image-prompt-contract.md)。透明 alpha 单图只允许背景移除生产:先生成非透明、轮廓清晰、与主体高对比、便于去背的纯色背景,再绑定恰好一条成功的 `background_removal_attempts`。本 Skill 只保留路由和硬不变量,不在此复制模板。

V3 将当前已确认生产范围的全部待生成图片汇总为一个批量任务,一次编排提交,禁止逐张创建任务或等待上一张验收后才生成下一张;每个 component × required state 仍输出独立位图,详见[图片批量生成](references/visual-production-pipeline.md#图片批量生成)。V3 需要使用正式 Scene 结构的同屏组合预验收;V4 默认验证代表性完整画面、关键内容可用性、实际交互和正式 Scene 消费证据,仅 exact 模式要求完整逐区域精确测量和差异材料。资源 loaded/used、missing=0、resize 稳定只属于工程子门,不能单独驱动 COMPLETE。

1. 读取项目配置、GDD、visual-design、TDD、控制面和资源登记;执行 [V0-V4 视觉生产管线](references/visual-production-pipeline.md)。
2. V0 先判断任务属于原子资源、组件/资源集,还是场景/整套 UI/视觉系统/重做;参考还原是否适用只由当前场景 Work Item 的正式运行视觉目标声明决定,不由新资源或 ImageGen 需求决定。原子资源只有在结构、布局、交互和视口行为不变,且已有适用视觉契约、视觉可交付结论与预算基线时才能跳过 V1/V2;任务内小幅适配可更新计划并重验,不必重新授权。
3. foundation-only 基础实施完成后,V1 建立功能规格、玩法视觉契约、必要低保真/灰盒与预算,只定义契约,不写正式场景功能代码;Work Item 指定效果图为还原目标时,V1 同时按[视觉还原](references/visual-reconstruction.md)生成或接收并冻结 scene master/reference target、宿主上下文效果图、参考身份、对比条件、可观察视觉事实和初步还原草案。V2 按串行硬门执行:阶段 A 从冻结原图、区域与组件事实生成按人工确认顺序排列的拆解图、技术 JSON 和 `decomposition_elements`,人工修改并确认。阶段 B 结合原图构图、视觉重心与元素语义,按同一顺序生成唯一的逐元素 `left/center/right × top/center/bottom` 决策;布局生成器只消费已确认元素和该视觉决策,不能依赖预存 `layout_nodes` 或用测量距离猜测对齐。布局决策和布局图人工修改后重新生成,并以 `layout-annotation-confirmation/1.0` 确认最终布局。布局只在冻结原图上叠加父子框与右栏说明,不重新生成或替换视觉参考图,也不提供多个布局方案。
4. schema 1.5 `visual-assets.json` 先声明 `effect_image_reconstruction`:普通资产为 `not-applicable`,不要求还原工件;效果图还原为 `effect-image`。后者冻结目标后、进入 V3 前以 `v2-ready` 完成合同回对和 coverage,V2/V3 可暂无 fidelity case;只有 V4 验证完成才为 `v4-complete` 并要求全部 case 通过。效果图 coverage 逐区登记 `annotation_number` 与 `implementation_plan`,先完成 ownership/实现分类,再做带证据 SHA、冻结目标 SHA、分析 ID 和完成时间的 `state_analysis`,严格在 component inventory 之前完成,最后按唯一原子部件填写 `component_inventory`、placements 与 `expected_assets`;编号不是资产数量单位。状态分析必须覆盖普通、selected/active、disabled、pressed/hover、victory/defeat/paused,实际适用写 `required`,不适用写 `not-applicable+reason`。② 顶部 6 个按钮必须 6 个 component;⑧ 的 3 个相同底部表面可登记 1 个 component+3 个 placements,⑨ 的动作图标按实际复用关系登记;③、④、⑦ 只有在明确单部件且其余状态不适用时才保持单图。默认 individual 模式禁止横向组图;ImageGen 无条件要求 `individual + atlas_allowed=false`,其 `expected_assets.width/height` 由验证器按逻辑像素 `ceil(max placement width/height × intended_scale_range.max × 1.5)` 自动计算,必须精确为最小尺寸;`scene_asset_usage.max_dpr` 必须严格为数字 `1.5`,`padding_policy` 必须为 `none`,尺寸合同本身不需要 human_review。这里的 1.5 是最大生产 DPR;运行时实际 DPR 按设备动态读取并封顶为 1.5。只有 authored-raster/authored-svg/reuse 等非 ImageGen 方法才可在显式合同下使用完整 `atlas_slice` 图集。每个 placement 必须声明 `interaction_required`,真实 `interaction_hotspots` 只能按 placement 一一绑定且不计入视觉资产。确认图仍同时呈现 `generate-now`、`reuse-existing` 和 `runtime-program`,但 PNG 仅绘制用户摘要与“本次生成 / 复用既有资源 / 程序实现”标签;placement ID、坐标尺寸、组件/状态/资产技术字段不进入可见行。运行 `--proposal` 时,这些技术字段完整写入拆解分析技术 JSON,并与 PNG 元数据、区域定义 SHA 及现有 confirmation 字段绑定。ImageGen 只有在合同显式声明 `image_generation_required=true` 时才启用,并且必须使用 `imagegen+raster-image`、完整提示词/生成记录、输出元数据和运行时消费证据;`independent-production` 与 `generate-now` 不作任何 ImageGen 推断。V2 再按 [资产生产路线](references/asset-production-routes.md) 选择路线。
5. V2 可运行 `node scripts/validate_visual_manifest.mjs docs/visual-assets.json --stage V2`;V3 正式验收运行 `node scripts/validate_visual_manifest.mjs docs/visual-assets.json --stage V3 --check-files --project-root .`,V4 正式验收运行同命令但使用 `--stage V4`。两阶段均逐项验证真实文件、来源/许可信息(如适用)、预算、冻结基线、coverage、`production_contract_audit`、F2 两类机器证据、F3 runtime replay 和与 `visual_validation.mode` 匹配的 fidelity cases。效果图清单根节点必须绑定单一 camelCase 的 `workItemId` 与 `candidateVersion`,并与 `candidate_identity.sha256/diff_fingerprint` 及当前实施包一致。
6. 当前场景 Work Item 按控制面定义的 V1→V4 阶段推进;本领域负责在 V2 两次独立确认后生产正式资源,在 V3 完成资源级验收与宿主同屏组合预验收,并在 V4 提供运行态视觉证据。正式代码只消费当前场景或合规 `shared` 且 V3 `accepted` 的资源;公共正式资源只允许至少两个场景稳定复用或属于运行必需。场景联合验收前必须清除灰盒、占位和 fallback。

所有 ImageGen 单图生产顺序固定为“生成原图 →(透明路线一次受控背景移除)→ Sharp 尺寸归一化 → V3/final/runtime”。不透明 `alpha=false` 可输出 JPEG,透明 `alpha=true` 只能输出含 Alpha 的 PNG。透明生成记录使用 `source_background_mode=opaque`、`final_background_mode=transparent` 和 `transparency_strategy=background-removal`,`normalization_record.source_file` 必须绑定背景移除输出。首次输出比例不符时最多重生一次;第二次仍不符时,若冻结裁切焦点和安全事实允许,使用 `crop-and-resize-to-contract` 并在 `aspect_ratio_correction` 中绑定两次真实原始 ImageGen attempt 的 `attempt_id`、`generation_record_id`、`generated_at`、文件、实际 SHA 和实际宽高;两次 attempt 的路径和 SHA 必须不同,旧的仅路径数组结构拒绝,不要求两次尺寸相同但第二次实际宽高必须等于当前归一化输入。透明路线的 attempts 仍绑定两次不透明原始输出,受控裁切可在唯一一次背景移除后的同尺寸含 Alpha 输入上执行。若裁切会损伤主体、文字、透明轮廓或关键构图,则先由生产流程对不透明生成结果生成式延展到目标比例,再执行一次背景移除和普通归一化。该比例修正适用于所有 ImageGen 图片,`padding_policy=none`,禁止非等比拉伸、padding、contain、复制边缘或裁切冻结 `reference_target`。原图已满足尺寸也必须写 `normalization_record.operation=not-required`,透明资产必须前后保留 Alpha。
7. V2 前的灰盒或视觉样片必须与正式运行链隔离,不得注册正式入口或实现正式业务逻辑;V2 通过后,V3 与后续正式功能实现才可沿用同一生产 Scene 入口/骨架逐步落地,禁止一次性截图 Scene、整屏铺图、隐藏覆盖层和绝对叠层凑像素。V4 在正式功能实现之后与玩法协作完成结构化集成、动态验收和低保真清理;上游事实或当前受影响候选身份变化时才使对应 fidelity case 失效重采,其他单元证据继续有效。

正式效果图标注命令必须带 `--proposal <file>.json`;省略该参数直接失败,不生成只有用户图示的成功产物。

效果图生产必须先引用已冻结的全局视觉基线;全局候选选择、冻结状态和跨 Work Item 引用规则以[控制模型](../phaser4-game-workflow-control/references/control-model.md)及[全局视觉控制](references/global-visual-control.md)为准。本领域只补充生成记录、锚点继承和资源合同要求;场景仍在同一 Work Item 内按 V1→V4 完成。

布局生成的标准交付除 PNG 外必须包含同一候选目录的 `layout-nodes.json`、`layout-decision.json`、自包含 `review.html` 和 `generation-result.json`。布局审阅页只用于可读的人工作业,不能替代拆解确认、独立布局确认或 PNG/F2 机器门;其模板、真实 SHA 绑定、候选状态和离线边界见 [`离线布局审阅产物`](../phaser4-game-ui-layout/references/layout-review-artifacts.md)。

## 条件参考

- 参考截图、录屏、运行项目或源码还原:读取 [视觉还原](references/visual-reconstruction.md)。
- 装饰性屏幕空间满幅背景:读取 [满幅背景](references/full-bleed-background.md);世界空间关卡、Tilemap 或玩法环境改读资产生产路线。
- UI:同时读取 [`phaser4-game-ui-layout`](../phaser4-game-ui-layout/SKILL.md) 的布局合同、Phaser 适配器和证据矩阵;资源 origin、布局锚点与动画偏移按合同分离,资产接入不得重新发明布局规则。
- QA 测量、动态 resize、完整 viewport 截图和只读 Hook:读取 [响应式视觉验证](../phaser4-game-qa-performance/references/responsive-visual-validation.md),不得在资产文档复制其字段或阈值。

## 审核与交付

所有候选先通过 F0-F3;F4 只处理带外部写入、付费、真机、破坏性或外部删除、发布副作用的 A4-A6 操作。无副作用本地 A4 集成不因等级标签额外等待批准。V1/V2 确定性机器检查必须执行;用户选择只用于真实设计取舍和 V2 两次视觉确认。自动路径记录 `AUTO` 决策依据,实质取舍记录一次 `USER_DECISION` 并回写权威工件。每个交付包记录当前任务范围、候选身份、基线、来源/许可(如适用)、预算和证据;普通任务不要求独立授权记录。

### 视觉确认边界

同一场景 Work Item 的 V0→V4 链在 V2 依次完成拆解确认和布局确认,冻结还原方案。`visual-decomposition-confirmation/1.0` 绑定 annotation/proposal/decision SHA、target、V2 candidate、diff、baseline、全部编号和用户原文;已确认的目标或方案发生实质变化时重新确认受影响部分,普通运行态布局微调不重开 V2。V2 拆解图、技术 JSON、合同回对、coverage 和结构化机器检查必须齐全,布局确认另行绑定最终布局图与决策文件。V3 资源与同屏组合、V4 代表性完整画面和关键可用性证据绑定当前身份;overlay、diff 和完整逐区域精确 fidelity 仅在 exact 模式强制。根节点 PASS、布尔值、AI reviewer 字段或旧 `human_review` 均不能代替两次 V2 确认。

Ships with 38 supporting files:

  • agents/openai.yaml
  • assets/layout-node-names.zh-CN.json
  • assets/layout-review-template.html
  • references/asset-production-routes.md
  • references/effect-image-font.md
  • references/effect-image-prompt-contract.md
  • references/effect-image-splitting.md
  • references/full-bleed-background.md
  • references/game-feel-quality-gate.md
  • references/gameplay-visual-contract.md
  • references/global-visual-control.md
  • references/visual-production-pipeline.md
  • references/visual-reconstruction.md
  • scripts/automatic-layout-decision.mjs
  • scripts/decomposition-elements.mjs
  • scripts/effect_image_annotation_core.mjs
  • scripts/effect_image_font.mjs
  • scripts/effect_image_raster.mjs
  • scripts/generate_effect_image_annotation.mjs
  • scripts/generate_effect_image_annotation.test.mjs
  • … and 18 more

Mirrored from the author's public source. Install counts from the open skills registry.

The systems behind these skills get built for partners every week.

Partner with us