Skip to content

live demo功能拆分 #36

Description

@xyh202131

Windup Asset Lab - 工作台功能资产清单

项目概述

Windup Asset Lab 工作台是一套面向 2D 游戏角色的资产工作流原型系统,将自由节点画布、角色生成、动作分帧、几何质检、人工审核、可复用流程连成一条可追溯的交付链路。

核心目标: 不是生成"一组看起来不错的图",而是交付"一组经过审核、可修复、可追溯、进入引擎即可播放的角色资产"。

工作台职责: 生成入口、资产管理、逐帧审核、质检门禁、导出


一、核心业务功能模块

1.1 角色生成引擎

功能描述: 基于 AI 的角色母版与动作生成核心引擎,支持从自然语言到完整角色包的一键生成。

核心子功能:

  • 母版生成: 根据角色描述生成角色基准形象
  • 动作条生成: 一次性生成 8 相位横向动作条,自动切分为 8 张 256×256 帧
  • 单帧修复: 被退回的坏帧可单独修复,无需重新生成整条动作
  • 自然语言快速创建: 解析自然语言,依次完成意图解析、母版、动作、质检和打包

生成能力:

  • 新角色默认生成母版 + 呼吸待机 + 行走,3 次模型调用完成原本需要 17 次调用的角色包
  • 支持的动作类型:idle(待机)、walk(行走)、run(奔跑)、jump(跳跃)、lantern(提灯)
  • 支持的视角:side(侧视)、topdown(俯视)、isometric(2.5D)

安全机制:

  • 生成过程通过后端代理,API Key 不进入浏览器
  • API Key 仅保留在当前后端进程内存,按 HttpOnly 浏览器会话隔离

相关文件:

  • create-character.js
  • generate.js

1.2 审核工作流

功能描述: 逐帧审核与版本化同步系统,确保候选资产经过人工确认后才能进入正式资产库。

核心子功能:

  • 逐帧播放: 固定 8 FPS 播放,支持逐帧检查、循环播放
  • 洋葱皮功能: 多帧叠加显示,便于观察帧间变化
  • 脚底线与锚点对齐: 辅助判断脚底漂移和主体位置
  • 人工审核: 逐帧通过 / 退回,版本化同步
  • 导出门禁: 所有帧通过后才解锁导出功能

审核状态流转:

queued → generating → awaiting_review → approved
                    \-> failed

三个人工决策点:

  1. 角色母版锁定
  2. 候选资产采用(采用前自动备份原帧)
  3. 逐帧通过与导出准入

相关文件:

  • review-store.js
  • editor.js

1.3 质量检测系统

功能描述: 自动质检系统,识别画布错误、脚底漂移、主体比例波动与循环断层。

核心检测项:

  • 不可见帧检测: 检测透明度过低或无内容的帧
  • 主体高度波动检测: 识别帧间主体高度突变(阈值: 28%)
  • 中心漂移检测: 识别帧间主体水平中心偏移(阈值: 42像素)
  • 脚底基线检测: 识别帧间脚底位置不连续(阈值: 5像素)
  • 背景残留检测: 识别背景未完全去除的帧
  • 循环接缝检测: 识别动作首尾帧衔接问题

局限性: 自动质检适合发现尺寸跳变、脚底漂移等几何问题,但不能可靠判断步态语义、解剖正确性、衣装细节和"是否变脸",这些需要人工审核。

相关文件:

  • quality-check.js

1.4 工作流模板系统

功能描述: 可复用的生产流程模板管理,支持流程保存、复用和自动运行。

核心子功能:

  • 模板保存: 保存项目约束、来源、动作描述、FPS,以及节点连线、位置和画布视口
  • 模板复用: 选择已验证模板,填写新角色资料后自动还原节点图并按顺序运行
  • 版本管理: 记录模板版本和运行次数
  • 自动运行: 已验证流程可自动重放生成节点,但仍需人工确认才会正式入库

安全特性:

  • 模板只保存配置,不保存 API Key、候选图片或临时任务数据
  • 自动流程在 awaiting_review 停下,只有用户确认后才调用 promote

相关文件:

  • workflow-routes.js
  • workflow-app.js

1.5 资产发布系统

功能描述: 正式资产入库与版本管理,确保候选资产与正式资产隔离。

核心子功能:

  • 资产采用: 候选资产通过审核后正式入库,采用前自动备份原帧
  • 资产版本管理: 追踪资产版本历史
  • 失败回滚: 发布失败时自动回滚到上一版本
  • 原子角色包入库: 确保角色包完整性

相关文件:

  • asset-library-model.js

二、图像处理功能模块

2.1 背景去除

功能描述: 基于色度键和 AI 的背景去除技术。

核心子功能:

  • 色度键抠图: 根据四角颜色计算背景色,通过距离公式去除背景
  • AI 智能抠图: 使用 rembg 模型进行高精度背景去除
  • 阴影消除: 识别并消除地面阴影

2.2 动作条切分与归一化

功能描述: 将横向 sprite sheet 切分为独立帧并归一化到标准画布。

核心子功能:

  • 动作条切分: 将 8 相位横向动作条确定性切分为 8 张独立帧
  • 帧归一化: 将切分后的帧裁剪并放置到 256×256 标准画布
  • 缩放计算: 根据主体尺寸计算适应画布的缩放比例
  • 脚底对齐: 按脚底位置对齐帧(跳跃动作有特殊偏移)

2.3 Sprite Sheet 打包

功能描述: 将独立帧打包为 Sprite Sheet,并生成多平台配置文件。

支持的游戏引擎:

  • TexturePacker (JSON 格式)
  • Cocos2d-x (Plist 格式)
  • Godot Engine (.tres 格式)

附加功能: GIF 动画预览生成

相关文件:

  • sprite-packer.js

2.4 帧对齐与骨架生成

功能描述: 帧序列对齐与骨骼参考生成工具。

核心子功能:

  • 帧锚点计算: 根据脚底位置和中心点计算帧锚点
  • 帧对齐: 将一组帧对齐到统一坐标系
  • 骨架生成: 生成骨骼动画参考帧,用于辅助角色动画生成

三、工作台核心模块

3.1 API 客户端

功能描述: 统一的 HTTP 客户端封装,处理 API 请求、错误处理和运行时配置。

核心功能:

  • GET/POST 请求封装
  • API 错误处理(ApiError 类)
  • 运行时配置解析
  • 资源 URL 构建

相关文件:

  • api-client.js

3.2 编辑器会话管理

功能描述: 管理编辑器中的角色、动作、帧选择状态,提供帧偏移调整和锚点设置。

核心子功能:

  • 角色选择: 在多个角色间切换
  • 视角选择: 在不同视角(侧视/俯视/2.5D)间切换
  • 动作选择: 在不同动作间切换
  • 帧选择: 选择特定帧进行查看和编辑
  • 帧偏移调整: 微调帧的位置(nudge 操作)
  • 锚点设置: 设置角色锚点位置

相关文件:

  • editor-session.js

3.3 运动状态机

功能描述: 纯状态机实现,管理动画播放和角色移动状态。

状态定义:

  • AnimationState: PAUSED(暂停)、PLAYING(播放)
  • LocomotionState: IDLE(静止)、AUTO(自动漫游)、MANUAL(手动控制)

事件处理:

  • RESET: 重置状态
  • CHARACTER_TOGGLE: 切换角色播放
  • PLAYBACK_TOGGLE: 切换播放/暂停
  • AUTO_TOGGLE: 切换自动漫游
  • MANUAL_INPUT: 手动输入(左右方向)
  • PAUSE_FOR_REVIEW: 暂停以进行审核

相关文件:

  • motion-state.js

3.4 播放时钟

功能描述: 基于 FPS 的动画播放时钟,统一管理编辑器中的所有动画间隔。

核心功能:

  • 按指定 FPS 触发 tick 回调
  • 支持启动/停止控制
  • 统一的时钟管理

相关文件:

  • playback-clock.js

3.5 任务轮询器

功能描述: 轮询生成任务状态,支持自动停止和错误处理。

核心功能:

  • 定期轮询任务状态
  • 任务完成或失败时自动停止
  • 错误处理与回调

配置参数:

  • 轮询间隔(默认 900ms)
  • 活跃状态列表(queued、generating、processing)

相关文件:

  • job-poller.js

3.6 运行时配置

功能描述: 支持运行时动态配置,无需修改源码。

配置项:

  • apiBase: API 服务地址
  • gameOrigin: 游戏运行时地址
  • gamePath: 游戏路径
  • previewNamespace: 预览命名空间

配置方式:

  • 前端:通过 window.WINDUP_CONFIG 全局变量
  • 后端:通过环境变量

相关文件:

  • runtime-config.js

四、工作台功能组件

4.1 自由节点画布

功能描述: 可视化节点工作流编辑器,支持拖拽创建节点、连线编排流程。

核心子功能:

  • 节点创建: 创建不同类型的节点(来源、动作、质检、导出)
  • 节点连线: 拖拽连接节点,定义流程顺序
  • 画布导航: 缩放、平移画布
  • 节点配置: 双击节点配置参数

相关文件:

  • node-canvas.js

4.2 引导画布

功能描述: 新手引导流程,帮助用户快速上手工作台。

核心子功能:

  • 步骤引导: 逐步引导用户完成角色创建流程
  • 交互式提示: 在关键步骤提供提示和说明
  • 进度追踪: 追踪用户完成进度

相关文件:

  • guided-canvas.js

4.3 自然语言创建

功能描述: 通过自然语言描述快速创建角色,自动解析意图并生成角色包。

核心子功能:

  • 意图解析: 解析自然语言中的角色名、描述、风格、配色
  • 一键生成: 根据解析结果自动触发生成流程
  • 智能补全: 自动补全缺失的配置项

相关文件:

  • natural-creation.js
  • narrative-field.js

4.4 供应商会话控制器

功能描述: 管理 API 供应商的会话和凭据。

核心子功能:

  • 凭据输入: 用户输入 API Key
  • 凭据验证: 验证 API Key 有效性
  • 会话管理: 管理供应商会话状态
  • 配置切换: 切换不同供应商配置

相关文件:

  • provider-session-controller.js

4.5 抽屉控制器

功能描述: 管理侧边抽屉的打开、关闭和内容切换。

核心子功能:

  • 抽屉切换: 打开/关闭侧边抽屉
  • 内容切换: 在不同抽屉面板间切换
  • 动画过渡: 平滑的打开/关闭动画

相关文件:

  • drawer-controller.js

4.6 资产包预览

功能描述: 预览生成的角色资产包,查看各动作的帧序列。

核心子功能:

  • 动作预览: 播放各动作的动画序列
  • 帧查看: 查看单帧细节
  • 质量指标: 显示质量检测结果

相关文件:

  • asset-package-preview.js

4.7 工作流导航

功能描述: 管理工作流的导航和步骤切换。

核心子功能:

  • 步骤导航: 在不同工作流步骤间切换
  • 进度指示: 显示当前步骤和总步骤数
  • 步骤验证: 验证当前步骤是否完成

相关文件:

  • workflow-navigation.js

4.8 工作流步进器

功能描述: 工作流步骤的详细管理,支持分步执行和验证。

核心子功能:

  • 分步执行: 按步骤执行工作流
  • 步骤验证: 验证每步执行结果
  • 错误处理: 处理步骤执行失败

相关文件:

  • workflow-stepper.js

4.9 引导控制器

功能描述: 新用户引导和教程系统。

核心子功能:

  • 欢迎流程: 首次使用的欢迎引导
  • 功能介绍: 介绍工作台主要功能
  • 交互指引: 引导用户完成关键操作

相关文件:

  • onboarding-controller.js

4.10 品牌动画

功能描述: 品牌相关的动画效果和交互。

核心子功能:

  • Logo 动画: 品牌标识的动画效果
  • 角色展示: 示例角色的展示动画
  • 过渡效果: 页面切换的品牌风格动画

相关文件:

  • brand-wave.js
  • home-idle-cast.js

五、工作台页面模块

5.1 首页

功能描述: 工作台入口页面,展示品牌、示例角色和快速入口。

核心内容:

  • 品牌展示区
  • 示例角色展示
  • 快速创建入口
  • 工作流模板选择

相关文件:

  • index.html
  • app.js

5.2 角色列表页

功能描述: 展示已创建的角色列表,支持角色选择和管理。

核心内容:

  • 角色卡片列表
  • 角色搜索和筛选
  • 角色详情查看
  • 角色编辑和删除

相关文件:

  • characters.html
  • characters.js

5.3 角色创建页

功能描述: 创建新角色的表单页面,支持自然语言和表单两种创建方式。

核心内容:

  • 角色信息表单(名称、描述、风格、配色)
  • 自然语言输入区
  • 生成预览
  • 创建确认

相关文件:

  • create-character.html
  • create-character.js

5.4 生成页

功能描述: 生成任务的进度展示页面。

核心内容:

  • 生成进度展示
  • 生成日志
  • 中间结果预览
  • 生成完成后的操作选项

相关文件:

  • generate.html
  • generate.js

5.5 编辑器页

功能描述: 角色动画的详细编辑和审核页面。

核心内容:

  • 帧序列展示
  • 逐帧审核界面
  • 帧偏移调整工具
  • 锚点设置工具
  • 洋葱皮功能
  • 质量检测结果展示

相关文件:

  • review.html
  • editor.js
  • editor-view.js
  • editor-bindings.js
  • editor-elements.js

5.6 工作流页

功能描述: 可视化工作流设计和执行页面。

核心内容:

  • 节点画布
  • 工作流模板选择
  • 工作流执行控制
  • 执行结果展示

相关文件:

  • workflow-shell.js
  • workflow-app.js

六、工作台数据模块

6.1 角色目录

功能描述: 管理角色的元数据和资产引用。

核心内容:

  • 角色列表
  • 角色元数据(名称、描述、风格、配色)
  • 角色资产引用(各视角、各动作的帧列表)

相关文件:

  • character-catalog.js

6.2 默认演示角色

功能描述: 提供默认的演示角色数据。

核心内容:

  • 默认角色元数据
  • 默认角色资产
  • 演示用的帧序列

相关文件:

  • default-demo-character.js

6.3 生成契约

功能描述: 定义动作、视角、FPS 等核心规范的版本化契约。

契约内容:

  • 视图列表: side(侧视)、front(前视)、back(后视)
  • 动作定义: 包含动作键、名称、帧数、是否循环
  • FPS: 固定 8 FPS
  • 画布尺寸: 256×256

动作矩阵:

动作 名称 帧数 循环
idle 待机 8
walk 行走 8
run 奔跑 8
jump 跳跃 8
lantern 提灯 8

契约驱动开发:

  • contracts/windup.v1.json 是唯一的契约源
  • 通过工具自动生成前后端代码

相关文件:

  • generated-contract.js
  • generated-contract.d.ts

七、工作台样式模块

7.1 样式文件结构

样式加载顺序(固定顺序,不可随意变更):

  1. foundation.css - 基础样式和变量
  2. surface.css - 表面样式
  3. drawer.css - 抽屉样式
  4. workspace.css - 工作区样式
  5. components.css - 组件样式
  6. integrations.css - 集成样式
  7. motion.css - 动画样式

相关文件:

  • foundation.css
  • surface.css
  • drawer.css
  • workspace.css
  • components.css
  • integrations.css
  • motion.css

八、API 接口功能模块

8.1 角色生成 API

POST /api/characters/generations
  参数: name, description, model, starterActions (idle | walk)

POST /api/generations
  参数: character, view, action, mode (full | single), route (sheet | frames), frameIndex

POST /api/quick-start
  参数: prompt (12-800字自然语言), name (可选), starterActions (可选), style, palette, model (可选)

GET  /api/generations/{jobId}
POST /api/generations/{jobId}/promote

8.2 工作流 API

GET  /api/workflows
POST /api/workflows
  参数: name, description, project, pipeline, execution

POST /api/workflows/{templateId}/runs
  参数: name, description, style?, palette?, model?

8.3 供应商 API 封装

功能描述: 第三方 AI 服务的统一封装,包括鉴权、请求、重试和错误映射。

支持的服务: 七牛云 QnAIGC API

环境变量:

  • QNAIGC_KEY / SUFY_KEY: API 密钥
  • QNAIGC_BASE / SUFY_BASE: API 基础 URL
  • QNAIGC_IMAGE_MODEL / SUFY_IMAGE_MODEL: 图像生成模型
  • SUFY_VLM_MODEL: 视觉语言模型

九、功能依赖关系图

┌─────────────────────────────────────────────────────────────────┐
│                        用户层                                  │
│  首页  │  角色列表  │  角色创建  │  生成页  │  编辑器  │  工作流    │
└─────────────────────────────────────────────────────────────────┘
                              │
                              ▼
┌─────────────────────────────────────────────────────────────────┐
│                     功能组件层                                  │
│  节点画布  │  自然语言  │  质量检测  │  Sprite打包  │  导航步进   │
└─────────────────────────────────────────────────────────────────┘
                              │
                              ▼
┌─────────────────────────────────────────────────────────────────┐
│                     核心模块层                                  │
│  API客户端  │  编辑器会话  │  运动状态机  │  播放时钟  │  任务轮询  │
└─────────────────────────────────────────────────────────────────┘
                              │
          ┌───────────────────┼───────────────────┐
          ▼                   ▼                   ▼
┌─────────────────┐  ┌─────────────────┐  ┌─────────────────┐
│   数据层         │  │   API层         │  │   处理层         │
│ 角色目录        │  │ 角色生成API     │  │ 图像处理         │
│ 默认角色        │  │ 工作流API       │  │ Sprite Packer   │
│ 生成契约        │  │ 供应商API       │  │ 质量检测         │
└─────────────────┘  └─────────────────┘  └─────────────────┘

依赖方向规则:

  • 前端: pages → features → core/data
  • core 不能导入 pages 或 features
  • features 不能导入 pages
  • 所有浏览器 HTTP 必须通过 api-client.js
  • 所有编辑器动画间隔必须通过 PlaybackClock

十、安全机制汇总

安全特性 实现方式
API Key 隔离 仅保留在后端进程内存,按会话隔离,不写入前端、浏览器存储或 Git
候选资产隔离 候选资产与正式资产分离,采用前自动备份
凭据不落地 生成任务只接收凭据快照,不写入任务 JSON
环境变量注入 API 凭据通过环境变量或运行时配置注入,不硬编码
跨域白名单 通过 WINDUP_ALLOWED_ORIGINS 配置允许的前端 Origin

十一、工作台目录结构

asset-lab/
├── brand/                    # 品牌资源
│   ├── characters/           # 示例角色动画
│   ├── windup-logo.svg       # Logo
│   └── windup-mark.svg       # 标志
├── core/                     # 核心模块(7个)
│   ├── api-client.js         # API 客户端
│   ├── editor-session.js     # 编辑器会话
│   ├── job-poller.js         # 任务轮询器
│   ├── motion-state.js       # 运动状态机
│   ├── playback-clock.js     # 播放时钟
│   ├── review-store.js       # 审核存储
│   └── runtime-config.js     # 运行时配置
├── data/                     # 数据模块(5个)
│   ├── character-catalog.js  # 角色目录
│   ├── default-demo-character.js  # 默认演示角色
│   ├── generated-contract.d.ts     # TypeScript 契约
│   ├── generated-contract.js      # JavaScript 契约
│   └── workflow-routes.js    # 工作流路由
├── features/                 # 功能组件(18个)
│   ├── asset-library-model.js    # 资产库模型
│   ├── asset-package-preview.js  # 资产包预览
│   ├── brand-wave.js             # 品牌动画
│   ├── demo-production.js        # 演示生产
│   ├── drawer-controller.js      # 抽屉控制器
│   ├── game-bridge.js            # 游戏桥接(可忽略)
│   ├── guided-canvas.js          # 引导画布
│   ├── home-idle-cast.js         # 首页角色展示
│   ├── narrative-field.js        # 叙事字段
│   ├── natural-creation.js       # 自然语言创建
│   ├── node-canvas.js            # 自由节点画布
│   ├── onboarding-controller.js  # 引导控制器
│   ├── pointer-card-motion.js    # 指针卡片动画
│   ├── provider-session-controller.js  # 供应商会话
│   ├── quality-check.js          # 质量检测
│   ├── route-light-transition.js # 路由过渡
│   ├── scroll-bird.js            # 滚动动画
│   ├── sprite-packer.js          # Sprite 打包
│   ├── workflow-navigation.js    # 工作流导航
│   └── workflow-stepper.js       # 工作流步进
├── pages/                    # 页面模块(5个)
│   ├── editor-bindings.js    # 编辑器绑定
│   ├── editor-elements.js    # 编辑器元素
│   ├── editor-view.js        # 编辑器视图
│   ├── editor.js             # 编辑器主逻辑
│   └── workflow-shell.js     # 工作流壳
├── styles/                   # 样式模块(7个)
│   ├── components.css        # 组件样式
│   ├── drawer.css            # 抽屉样式
│   ├── foundation.css        # 基础样式
│   ├── integrations.css      # 集成样式
│   ├── motion.css            # 动画样式
│   ├── surface.css           # 表面样式
│   └── workspace.css         # 工作区样式
├── app.js                    # 应用入口
├── characters.html/js/css    # 角色列表页
├── create-character.html/js/css  # 角色创建页
├── generate.html/js/css      # 生成页
├── review.html               # 编辑器页
├── workflow-app.js           # 工作流应用
├── workflow-shell.css        # 工作流样式
└── package.json              # 项目配置

十二、废弃注意事项

本清单作为项目废弃前的知识沉淀与资产留存,记录了工作台所有已实现功能模块的完整信息。在项目废弃时,应注意:

  1. 功能资产可复用性: 上述功能模块均可独立于原项目环境运行,可根据需要迁移到其他项目
  2. 依赖关系: 迁移时需关注模块间的依赖关系,确保必要的依赖一同迁移
  3. 安全机制: API Key 等敏感信息未进入源码,废弃时无需额外清理
  4. 数据备份: 生成任务数据、审核状态、工作流模板存储在 generation-data/ 目录,废弃前应备份
  5. 契约文件: contracts/windup.v1.json 是功能规范的唯一来源,应妥善保存
  6. 样式顺序: 编辑器样式的加载顺序(foundation → surface → drawer → workspace → components → integrations → motion)是固定的,修改时需谨慎

Metadata

Metadata

Assignees

No one assigned

    Labels

    documentationImprovements or additions to documentationproposal该 Issue 是一个产品提案

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions