# 宠物素材制作说明

---

## 1. 制作目标

这次想做一套精品宠物素材资产包。个人画师这边专注角色、动画和源文件即可，我们内部会负责素材配置和后续工程处理。

整体希望达到：

- 角色统一：造型、比例、颜色、表情和道具保持一致。
- 动作清晰：每个动作能让用户快速理解触发场景。
- 精品尺寸：按 `768 x 768 px` 动画画布制作，适合高品质桌面展示。
- 透明交付：WebM 动画和 PNG 图片均保留透明通道。
- 文件规范：按固定目录、固定文件名、固定时长提交。
- 协作清晰：个人画师专注创作表达，我们负责后续工程处理。

---

## 2. 交付文件夹格式

每个角色提交一个独立文件夹即可，目录名使用英文小写、数字和下划线。

```text
pet_<角色英文名>/
├── preview.png
├── contact_sheet.png
├── videos/
│   ├── anim_idle.webm
│   ├── anim_mouse_near.webm
│   ├── anim_single_click.webm
│   └── ...
├── first_frames/
│   ├── anim_idle.png
│   ├── anim_mouse_near.png
│   ├── anim_single_click.png
│   └── ...
├── source/
│   ├── character_design.psd
│   ├── expression_sheet.psd
│   ├── animation_source/
│   └── export_notes.md
```

最终打包成一个压缩包：

```text
pet_<角色英文名>_assets_v1.0.0.zip
```

压缩包解压后应直接看到 `pet_<角色英文名>/` 文件夹。

---

## 3. 素材规格

### 3.1 WebM 动画规格

| 规格 | 固定值 | 说明 |
|---|---:|---|
| 动画数量 | `24` 个 | 每个角色固定提交 24 个 WebM |
| 动画格式 | `webm` | VP9 WebM with alpha |
| 动画尺寸 | `768 x 768 px` | 所有动画统一画布 |
| 视频帧率 | `30 fps` | 所有动画统一帧率 |
| 背景 | 透明 | 保留干净透明通道 |
| 色彩模式 | sRGB | 面向 Windows 桌面显示 |
| 参考显示尺寸 | `220 x 220 px` | 我们内部按该尺寸接入 |
| 角色主体占比 | 画布高度 `70%-85%` | 体现精品宠物体量 |
| 安全边距 | `48-96 px` | 方便动作伸展和缩放展示 |

制作建议：

- 每个动画保持统一基准点，脚底、身体中心或核心受力点稳定。
- 动作幅度和画布边距配合良好，角色完整呈现。
- 透明边缘清爽，浅色和深色桌面上都保持干净观感。
- `anim_idle.webm`、`anim_pomodoro_running.webm` 和 `anim_rest_mode_running.webm` 支持自然循环。
- 其余动画包含清晰的开始、主要动作和收束姿态，方便我们衔接播放。

### 3.2 PNG 图片规格

| 文件 | 数量 | 尺寸 | 要求 |
|---|---:|---:|---|
| `preview.png` | 1 | `512 x 512 px` | 角色最有辨识度的站姿或头像 |
| `contact_sheet.png` | 1 | 横向或网格图 | 展示 24 个动画首帧和文件名 |
| `first_frames/*.png` | 24 | `768 x 768 px` | 与 WebM 文件名一一对应 |

`first_frames/` 文件名示例：

```text
first_frames/anim_idle.png
first_frames/anim_single_click.png
first_frames/anim_app_chrome.png
```

---

## 4. 动画清单

本次每个角色固定提交 24 个 WebM 动画。文件名按下表制作，方便我们后续直接处理。
`DIY Key` 一列是后台配置用的判定标识，画师无需关心，仅供我们内部接入核对。

| 序号 | 场景类别 | 支持功能 | 文件名 | DIY Key | 固定时长 | 表现方向 |
|---:|---|---|---|---|---:|---|
| 1 | 待机 | 常驻陪伴 | `anim_idle.webm` | idle_interaction.idle | 4.0s | 温柔陪伴感，角色以呼吸、眨眼和轻摆体现稳定在场感 |
| 2 | 鼠标互动 | 鼠标靠近 | `anim_mouse_near.webm` | mouse_interaction.mouse_near | 2.0s | 注意到用户靠近，眼神或身体朝向鼠标，传达亲近感 |
| 3 | 鼠标互动 | 单击反馈 | `anim_single_click.webm` | mouse_interaction.single_click | 2.0s | 主动回应用户，轻快问候、点头或小动作，形成正向反馈 |
| 4 | 鼠标互动 | 双击反馈 | `anim_double_click.webm` | mouse_interaction.double_click | 2.5s | 更强烈的亲密回应，惊喜、撒娇或元气互动，体现角色个性 |
| 5 | 桌面边缘 | 任务栏上方播放 | `anim_taskbar_top_edge.webm` | idle_interaction.taskbar_top_edge | 3.0s | 播放位置：任务栏上方；支持任务栏边缘互动 |
| 6 | 桌面边缘 | 桌面上边缘播放 | `anim_desktop_top_edge.webm` | idle_interaction.desktop_top_edge | 3.0s | 播放位置：桌面上边缘；支持屏幕边界互动 |
| 7 | 桌面边缘 | 桌面左边缘播放 | `anim_desktop_left_edge.webm` | idle_interaction.desktop_left_edge | 3.0s | 播放位置：桌面左边缘；支持屏幕边界互动 |
| 8 | 桌面边缘 | 桌面右边缘播放 | `anim_desktop_right_edge.webm` | idle_interaction.desktop_right_edge | 3.0s | 播放位置：桌面右边缘；支持屏幕边界互动 |
| 9 | 窗口边缘 | 窗口上边缘播放 | `anim_window_top_edge.webm` | idle_interaction.window_top_edge | 3.5s | 播放位置：窗口上边缘；支持窗口边界互动 |
| 10 | 窗口边缘 | 窗口左边缘播放 | `anim_window_left_edge.webm` | idle_interaction.window_left_edge | 3.5s | 播放位置：窗口左边缘；支持窗口边界互动 |
| 11 | 窗口边缘 | 窗口右边缘播放 | `anim_window_right_edge.webm` | idle_interaction.window_right_edge | 3.5s | 播放位置：窗口右边缘；支持窗口边界互动 |
| 12 | 应用场景 | 浏览器场景 | `anim_app_chrome.webm` | application_interaction.chrome | 4.0s | 浏览场景正向反馈，体现探索、阅读或搜索灵感 |
| 13 | 应用场景 | 创作软件场景 | `anim_app_photoshop.webm` | application_interaction.photoshop | 4.0s | 创作场景正向反馈，体现绘制、调色或灵感陪伴 |
| 14 | 应用场景 | 游戏平台场景 | `anim_app_steam.webm` | application_interaction.steam | 4.0s | 游戏平台场景正向反馈，体现轻松、兴奋、娱乐陪伴 |
| 15 | 应用场景 | 编码场景 | `anim_app_vscode.webm` | application_interaction.vscode | 4.0s | 编码场景正向反馈，体现专注、思考、敲键盘陪伴 |
| 16 | 应用场景 | 视频场景 | `anim_app_bilibili.webm` | application_interaction.bilibili | 4.0s | 视频场景正向反馈，体现观看、追番、轻松陪伴 |
| 17 | 应用场景 | 摄像头/会议场景 | `anim_app_camera.webm` | camera_on | 4.0s | 摄像头开启时的反馈，体现整理仪态、打招呼或镜头前互动 |
| 18 | 应用场景 | 语音聊天场景 | `anim_app_voice.webm` | voice_chat | 4.0s | 语音聊天时的陪伴反馈，体现倾听、点头或轻声附和 |
| 19 | 番茄钟 | 专注开始 | `anim_pomodoro_start.webm` | pomodoro_interaction.pomodoro_start | 2.5s | 专注开始的鼓励反馈，传达陪伴进入工作状态 |
| 20 | 番茄钟 | 专注进行 | `anim_pomodoro_running.webm` | pomodoro_interaction.pomodoro_running | 6.0s | 专注进行中的安静陪伴，可无缝循环，动作克制稳定 |
| 21 | 番茄钟 | 专注完成 | `anim_pomodoro_finish.webm` | pomodoro_interaction.pomodoro_finish | 3.0s | 专注完成的庆祝反馈，传达完成感和休息提醒 |
| 22 | 休息模式 | 进入休息 | `anim_rest_mode_enter.webm` | rest_mode_interaction.rest_mode_enter | 2.5s | 进入休息模式的入场动作，传达放松、伸懒腰或准备休息 |
| 23 | 休息模式 | 休息进行 | `anim_rest_mode_running.webm` | rest_mode_interaction.rest_mode_running | 6.0s | 休息进行中的安静陪伴，可无缝循环，体现慵懒放松状态 |
| 24 | 休息模式 | 退出休息 | `anim_rest_mode_exit.webm` | rest_mode_interaction.rest_mode_exit | 2.5s | 退出休息模式的出场动作，传达恢复精神、重新出发 |

---

## 5. 每类素材数量和时长

| 类别 | 固定数量 | 单条时长 | 小计时长 |
|---|---:|---:|---:|
| 待机 | 1 | 4.0s | 4.0s |
| 鼠标互动 | 3 | 2.0s / 2.5s | 6.5s |
| 桌面边缘 | 4 | 3.0s | 12.0s |
| 窗口边缘 | 3 | 3.5s | 10.5s |
| 应用场景 | 7 | 4.0s | 28.0s |
| 番茄钟 | 3 | 2.5s / 6.0s / 3.0s | 11.5s |
| 休息模式 | 3 | 2.5s / 6.0s / 2.5s | 11.0s |
| 合计 | 24 | - | 83.5s |

时长说明：

- 每个 WebM 的实际时长按第 4 节固定值制作。
- 单条动画时长允许目标时长的 `±30%` 导出误差。
- 待机、番茄钟进行中、休息进行中动画支持循环播放。

桌面边缘移动参考：

- 桌面边缘类动画主要参考播放位置和移动距离，具体动作表现可以按角色个性发挥。
- 移动距离建议使用屏幕可用边长的黄金分割短段，即 `边长 x 0.382`。
- 上边缘、任务栏上方：参考横向移动距离。
- 左边缘、右边缘：参考纵向移动距离。

| 常用桌面尺寸 | 横向移动参考 | 纵向移动参考 |
|---|---:|---:|
| `1920 x 1080` | 约 `734 px` | 约 `413 px` |
| `2560 x 1440` | 约 `978 px` | 约 `550 px` |
| `3840 x 2160` | 约 `1467 px` | 约 `825 px` |

---

## 6. 动画命名规则

动画文件名统一使用下面的规则，方便后续整理：

- 文件名统一为 `anim_<场景名>.webm`。
- 应用场景统一为 `anim_app_<应用名>.webm`。
- 文件名全部小写，使用英文、数字、下划线。
- `videos/` 与 `first_frames/` 中同名文件一一对应。

示例：

| 场景 | WebM 文件 | 首帧文件 |
|---|---|---|
| 待机 | `videos/anim_idle.webm` | `first_frames/anim_idle.png` |
| 单击 | `videos/anim_single_click.webm` | `first_frames/anim_single_click.png` |
| 窗口上边缘 | `videos/anim_window_top_edge.webm` | `first_frames/anim_window_top_edge.png` |
| 浏览器 | `videos/anim_app_chrome.webm` | `first_frames/anim_app_chrome.png` |
| 休息进行 | `videos/anim_rest_mode_running.webm` | `first_frames/anim_rest_mode_running.png` |

---

## 7. 源文件交付

源文件主要用于后续扩展、返修和版本迭代。推荐交付：

| 类型 | 推荐源文件 |
|---|---|
| 角色设定 | `.psd`、`.ai`、`.kra` |
| 表情设定 | `.psd`、`.ai`、`.kra` |
| 像素动画 | `.aseprite`、`.psd`、`.kra` |
| 插画动画 | `.psd`、`.ai`、`.fla`、`.spine` 或可编辑工程 |
| 视频动画 | 原始工程和导出设置说明 |

源文件建议：

- 角色、表情、道具、阴影分层清晰。
- 图层或帧标签与动画文件名对应。
- `source/export_notes.md` 写明帧率、画布、导出路径、插件和字体依赖。
- 角色设定图包含正面、侧面、背面或等效视角说明。
- 表情设定表包含常驻表情、互动表情和专注场景表情。
- 个人画师可按自己的创作习惯组织源工程，只需保证我们能够理解文件结构和导出方式。

---

## 8. 最终交付内容

每个角色交付这些内容即可：

```text
[ ] 1 个 pet_<角色英文名>/ 文件夹
[ ] 1 张 preview.png，512x512，透明背景
[ ] 1 张 contact_sheet.png，展示 24 个动画首帧和文件名
[ ] 24 个 WebM 动画，放入 videos/
[ ] 24 张首帧 PNG，放入 first_frames/
[ ] 角色设定源文件，放入 source/
[ ] 表情设定源文件，放入 source/
[ ] 动画源文件或可编辑工程，放入 source/
[ ] 1 个 source/export_notes.md
[ ] 1 个 pet_<角色英文名>_assets_v1.0.0.zip
```
