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

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions