把一张婚纱照变成 Codex 宠物：Kinga 的生成全过程

发表于 分类于 ，

欢迎转载，原文链接：https://corningsun.github.io/Create-Codex-Pet-Kinga/

最近我用一张婚纱照，在 Codex 里生成了一个叫 kinga 的宠物。这里的 “宠物” 并不是一张静态头像，而是一套会跟着 Codex 工作状态变化的动画角色：空闲时会呼吸和眨眼，工作时会进入专注状态，需要我确认时会等待，任务失败时也会露出沮丧的表情。

这是最终的待机效果：

kinga 待机动画

Codex 宠物是什么

从用户视角看，Codex 宠物就是出现在应用里的一个小型动画伙伴。它不是独立运行的软件，也不会替代 Codex 的功能，而是把一些原本比较抽象的状态变得直观：

  • Codex 正在空闲，宠物会播放待机动画。
  • Codex 正在执行任务，宠物会表现出专注工作的状态。
  • Codex 需要用户确认或补充信息，宠物会进入等待状态。
  • Codex 正在检查结果，宠物会播放审阅动画。
  • 任务成功、失败或状态切换时，也可以使用不同动作表达。

在文件层面，一个完整的 v2 宠物主要由两个文件组成：

1
2
3
~/.codex/pets/kinga/
├── pet.json
└── spritesheet.webp

pet.json 描述宠物名称和图集版本，spritesheet.webp 则保存全部动作帧。这次生成的图集是 1536 × 2288，由 8 列、11 行组成，每个单元格是 192 × 208。

我提供了什么

实际操作时，我只提供了两样东西：

  1. 一张人物照片。
  2. 宠物名字：kinga。

我的请求也很简单：

1
用这张照片生成一个宠物，名字叫 kinga。

我没有要求 AI 把照片直接缩小，也没有手工描述几十个动作。生成流程先从照片里提取稳定的视觉特征，再把这些特征转成适合小尺寸动画的卡通角色。

这次保留下来的特征包括黑色盘发、温暖的笑容、白色蕾丝婚纱、头纱和枝晶形王冠。整体则改成大头小身的 3D 软陶玩偶风，让人物在 192 × 208 的显示尺寸下仍然容易辨认。

需要注意的是，人物照片属于敏感素材。生成前应确认本人同意，并了解图片会提交给图像生成服务处理。本文只展示卡通化后的结果，没有上传或公开原始婚纱照。

生成并不是只画一张图

如果只需要静态头像，生成一张主图就结束了。但 Codex 宠物需要响应不同状态，因此真正的工作是先确定主形象，再围绕它生成完整的动画图集。

整个过程可以分成四步。

第一步：确定主形象

系统先根据照片生成一张居中的全身角色图。这张图相当于后续所有动作的“身份证”：脸型、发型、服装、王冠、头纱、身体比例和材质都要以它为准。

这一步最重要的不是动作有多丰富，而是让角色简单、稳定、容易重复。过细的首饰、飘散的亮片和复杂背景都会给后续切帧制造麻烦，因此主形象使用纯色背景，也没有添加阴影、文字或悬浮装饰。

第二步：生成 9 种标准状态

确认主形象后，系统分别生成 9 行动画：

行 状态 动画含义
0 idle 空闲时呼吸、眨眼和轻微摆动
1 running-right 向屏幕右侧移动
2 running-left 向屏幕左侧移动
3 waving 挥手打招呼
4 jumping 起跳、腾空、下降和落稳
5 failed 任务失败或执行受阻
6 waiting 等待用户确认、帮助或输入
7 running 正在处理任务，不是字面上的跑步
8 review 专注检查结果

挥手和跳跃的实际效果如下：

kinga 挥手动画

kinga 跳跃动画

方向移动不是简单把整张图片平移，而是让脚步、裙摆和头纱形成连续的动作节奏：

kinga 向右移动动画

running 和 running-right 很容易混淆。前者代表 Codex 正在工作，所以动作重点是思考、处理和专注；后者才是真正向右移动。这样宠物的动作才能准确对应应用状态，而不是一忙起来就在原地狂奔。

第三步：补齐 16 个观察方向

v2 宠物除了标准状态，还需要 16 个顺时针观察方向，每次递进 22.5°。其中四个基准方向必须清楚：

  • 000：向上看。
  • 090：向屏幕右侧看。
  • 180：向下看。
  • 270：向屏幕左侧看。

对于 kinga 这种人形宠物，比较自然的方式不是把整个人偶像转盘一样旋转，而是让眼睛先带动视线，头颈和上半身轻微跟随，同时保持脚和裙摆底部稳定。王冠跟随头部，头纱可以略有滞后，但不能突然换边或与身体断开。

下面是中立姿势与 16 个观察方向的对照：

kinga 16 个观察方向

第四步：切帧、去背景和打包

图像生成模型擅长画角色，却不适合负责精确的图集几何。因此生成出来的横向动作条还需要经过确定性处理：

  1. 从纯色背景中识别每个完整姿势。
  2. 把姿势缩放并对齐到 192 × 208 单元格。
  3. 保持同一行的比例和基线稳定。
  4. 清除背景和角色边缘的残留色。
  5. 组装成 8 列、11 行的 v2 图集。
  6. 生成预览 GIF、动作总览和方向检查图。
  7. 校验尺寸、透明度、空帧、裁切和方向语义。

最后生成的配置类似这样：

1
2
3
4
5
6
7
{
  "id": "kinga",
  "displayName": "kinga",
  "description": "以婚纱照为灵感、笑容温暖的迷你新娘精灵宠物.",
  "spriteVersionNumber": 2,
  "spritesheetPath": "spritesheet.webp"
}

spriteVersionNumber: 2 不能省略，否则应用会按旧版 9 行格式读取，无法正确识别新增的观察方向。

这次生成中遇到的两个问题

AI 生成动画最容易出现的问题，不一定是“画得不好看”，而是“看起来没问题，但无法稳定切成帧”。

相邻头纱连在了一起

第一版待机和向右移动动作里，人物造型本身没有问题，但相邻姿势的头纱边缘碰到了一起。自动切帧时，多个角色因此被识别成同一个连通区域，结果只有中间单元格有完整内容，其他单元格几乎是空的。

修复方法不是手工把图切开，而是重新生成整行动画，并明确要求：

  • 每个姿势之间保留贯穿画布的纯色竖向空隙。
  • 头纱、王冠枝条、裙摆和手臂不能跨到相邻槽位。
  • 角色整体略微缩小，给左右边缘留下安全距离。

重新生成后，6 帧待机和 8 帧向右移动都通过了组件检查。

镜像后的头纱出现了碎片

最初的向左移动是由向右移动逐帧镜像得到的。结构校验虽然通过，但最终独立视觉检查发现其中两帧旁边各有一小块脱离身体的三角形头纱碎片。

这种问题不能因为 “很小” 就留下，也不应该只把最终图集中的两个单元格擦掉。为保证整行动作风格和节奏一致，我重新生成了完整的向左移动行，并再次执行切帧、预览、图集组装和最终检查。

这个过程让我感觉，宠物生成更像制作一组微型动画，而不是一次性的 AI 绘图。

最终效果如何

kinga 最终包含：

  • 9 组标准状态动画。
  • 16 个顺时针观察方向。
  • 透明背景的 1536 × 2288 WebP 图集。
  • 用于安装的 v2 配置文件。

最终校验没有发现空帧、尺寸错误、透明背景残留或错误的基准方向。三组独立的无标签方向检查也正确区分了向上、向下、向左和向右。

审阅状态在应用里会表现得更专注，而不只是重复待机动作：

kinga 审阅动画

从体验上看，最有意思的并不是把照片“变成卡通”，而是让照片中的人物特征变成一个会呼吸、移动、等待和专注工作的角色。静态头像只能告诉我“它长什么样”，完整的宠物动画则开始表现“它现在正在做什么”。

如果你也想生成一个

对普通用户来说，不需要自己准备图集，也不需要手工计算每一帧的位置。比较实用的输入方式是：

1
2
用这张参考图生成一个 Codex 宠物。
名字叫 <宠物名>，希望保留 <关键特征>，整体使用 <视觉风格>。

参考图越清楚，角色身份越容易保持一致。最好再补充三类信息：

  • 必须保留的特征，例如发型、眼镜、服装或配色。
  • 希望采用的风格，例如像素、毛绒、软陶、贴纸或 3D 玩具。
  • 不希望出现的内容，例如文字、复杂背景、阴影或额外道具。

剩下的动作拆分、方向生成、图集组装和校验，可以交给宠物生成流程处理。真正需要用户决定的，主要是这个角色应该保留什么，以及最终看起来是否仍然像自己想要的那个“它”。