CHARACTER / MOTION / STORY
从立绘到 Live2D虚拟角色视频制作记
让角色动起来，
也让她把故事讲清楚。
从一段自我介绍，到跟着时间轴表演、换装的 Live2D 展示片。我把三条成片放在这里，也把素材、动作、声音与代码是怎样接起来的记录下来。
- 成片记录
- 3 条，从介绍到展示
- 两条动画路线
- 序列帧 / Live2D 参数
- 最新影片规格
- 1080p · 30 fps · 60 秒
先看结果，再拆开过程
三条影片保留了不同阶段的尝试。点击播放即可观看，视频中已有中文字幕；播放器也提供可选字幕轨道。
每一面，都很可爱 · Live2D 展示片
下载视频使用真实 MOC3 模型，展示挥手、双手叉腰、欢呼、害羞和歪头，以及女仆装与冬装的切换。最新版本更新动作和手臂表现，声音沿用上一版。
同一个角色，两条动画路线
第一条影片主要播放已有动作帧，后来的影片开始驱动角色模型。两种方法需要解决的问题也不同。
把动作素材按时间播出来
- 动作视频 / 透明 PNG 帧
- 抽帧、抠图检查与脚底对齐
- 按帧选择姿态，另行控制走位
- Remotion 合成场景与字幕
适合沿用已经做好的动作。增加一个新动作，通常要补对应的素材；素材里的步态与屏幕上的移动速度还要配合。
用参数让分层立绘表演
- 分层 PSD / 角色部件
- 网格、变形器、参数与动作曲线
- Cubism 运行模型 + 物理与外观状态
- 按时间采样，交给 Remotion 出片
可以独立控制转头、眨眼、手臂和衣装。自由度增加后，更要检查变形连接、图层遮挡与动作之间的衔接。
我是怎样把这些部分接起来的
先把每一部分做成可修改的素材，再让它们围绕同一段内容和时间工作。
分层，是独立控制的起点
让头发可以跟随头部，让五官可以做表情，让袖子可以抬起来，前提是给这些部件留下独立的素材与控制关系。
图为工程中的早期局部拆件示例，用来说明素材组织方式；不是最新角色的完整分层清单。
- 01素材整理
先让角色保持一致
早期自我介绍从正式六动作素材包开始，整理 822 帧素材，并补入专门的向左行走素材，避免直接镜像把配饰翻到另一边。对齐人物比例与脚底锚点，检查透明边缘和动作衔接；素材帧负责姿态，画面中的位置另由代码控制。
- 02PSD → PSD2Live
把一张图，拆成可控制的部分
进入 Live2D 阶段后，把头发、脸、五官、身体、服饰与手臂分开处理。在 PSD2Live 中建立网格、变形层级和参数，让转头、眨眼、抬手能够分别调整，再组合成完整动作。
- 03动作与外观
给每个动作一个完整的起落
将肩、肘、腕与身体姿态写入动作曲线，检查抬手、停留和放下的连续过程。女仆装、冬装使用独立的服饰参数；表情与手型也保留自己的控制通道，避免换装时把动作重新播放一遍。
- 04声音与字幕
用真实音频确定节奏
先确定文案和配音，再根据音频安排字幕与表演。早期自我介绍用 MiniMax 生成八段口播；展示片原版使用已选声线的三句口播，配上由 Python 合成的背景乐《蓝色小潮汐》。10 月 31 日更新只改画面，沿用完整音轨。
- 05Remotion
把所有内容放到同一条时间轴
角色、标题、内容卡、字幕和声音分别组织。最新展示片由 timeline.json 的 chapters 安排动作章节，由 outfits 安排换装；Remotion 依据当前帧发送对应时间，等角色画面渲染完成后再收集这一帧。
- 06FFmpeg 与复核
导出之后，仍要回到画面里检查
以 1920×1080、30 fps 输出画面，用 FFmpeg 封装 MP4。最新展示片直接复制上一版 AAC 音轨；完成后进行完整解码、关键时刻抽帧，并检查动作起落、衣装遮挡和字幕时间。
真正花时间的，是这些细节
能动只是开始。要让预览、导出和不同服饰里的表现一致，还需要逐项修正。
抬手时，袖子和手掌会穿过身体
围绕肩、肘、腕做局部绑定与连续权重调整，将袖子按肩根后层与前臂前层组织。分别检查两套服饰中的抬手与放下，而不是只确认正面待机好看。最新版本继续修正了手臂形变与手势。
拖回时间轴，同一帧却长得不一样
物理按固定 60 Hz 推进，视频按 30 fps 取画面；重复请求同一帧时只重绘，向后定位时重置状态并做 90 步预热。这样 Remotion 调整渲染顺序时，角色仍能回到对应时刻。
换装时出现半套衣服叠在一起
换装时间独立于动作时间。服饰、手型与虹膜样式按离散状态切换，避免把两个素材状态插值混在一起；只改变衣装参数，不重启动作，换装后继续当前表演。
有背景音乐，嘴巴就一直在动
从单独口播音轨提取 RMS 音量包络，平滑张嘴与闭嘴的响应；背景音乐不参与嘴型计算。它表现说话的强弱与停顿，并不等同于按每个音素匹配嘴型。
让下一次修改，有地方落笔
下面是实际工程中各类文件的分工。这篇文章公开成片与制作方法，未打包发布完整编辑工程。
character_arm_gestures.psd2live- 可编辑角色工程：分层、网格、变形器、参数、动作与物理设置。
model3.json / moc3 / motion3.json- 运行资源：模型入口、编译后的角色、贴图引用和动作曲线，供浏览器中的 Cubism 播放。
timeline.json- 表演安排：章节、动作和换装时间，让预览与视频使用同一份编排。
renderer.js / Live2DShowcase.tsx- 渲染衔接：浏览器绘制真实角色模型，Remotion 按帧号驱动并等待完成。
render-showcase.cjs- 导出入口：渲染更新画面，再调用 FFmpeg 复用已有音轨。