aogl.cn — 生成式 AI 工具与大模型动态(个人书签)

← 返回首页 · 本站原创

角色设计手记:四视图、行走循环与动态演示

正侧背视 · walk1–9 · 嵌入 walk.html · MP4 动态

· 本站原创

这是 aogl.cn 上的一篇角色设计归档,记录我真实在用的同一套流程:四视图 turnaround(正、左、背、右)、编号角色探索稿 character0–6、完整行走关键帧 walk1–9、可在浏览器里操作的walk.html 行走演示,以及多段 MP4 动态测试。文件夹 original/character/ 里还保留两张生成式锚点图,方便外部分发与图像检索仍能对上同一视觉身份。

四视图 turnaround(正侧背右)

四张 PNG 在无透视漂移的前提下锁定剪影与服装阅读;利于 SEO 的关键词包括 角色四视图、orthographic、设定表。

角色四视图 — 正面 角色四视图 — 左面 角色四视图 — 背面 角色四视图 — 右面

探索稿 character0–6

七张静帧作为进入动画前的姿态与比例检查点;文件名 character0.png … character6.png 便于 CDN 与版本对比。

角色探索稿 0 角色探索稿 1 角色探索稿 2 角色探索稿 3 角色探索稿 4 角色探索稿 5 角色探索稿 6

交互式行走演示(walk.html)

下方嵌入页在画布上播放行走素材,并用 ← → / A D 控制方向;配合本段文字,有利于作品集展示与检索理解页面主题。

嵌入:original/character/walk.html(源视频 walk-video.mp4)。

行走循环静帧 walk1–walk9

九帧对应经典步态分解;替代文本写明帧号,兼顾无障碍与「行走循环 第 N 帧」类长尾检索。

行走循环 帧 1 行走循环 帧 2 行走循环 帧 3 行走循环 帧 4 行走循环 帧 5 行走循环 帧 6 行走循环 帧 7 行走循环 帧 8 行走循环 帧 9

旋转与行走动态(MP4)

以下视频位于 original/character/;需浏览器支持 H.264,无法播放时可下载本地查看。

turn_around-v.mp4 — 旋转 / 展示向动态。
walk-video.mp4 — 与上方画布演示同源参考。
character-video1.mp4 — 追加动态研究。

生成式锚点图

两张 Gemini 导出与手绘表并列,作为氛围锚点;不替代四视图正文,但有助于覆盖「AI 角色设计」等相关检索。

生成式锚点 — 光影与服装阅读 生成式锚点 — 备选风格

目录内其它素材

turn_around3.png、turn_around4.png、character-video2.mp4 / character-video3.mp4 及「生成图片」系列等仍在同目录,供线下审片;本文选取最清晰的教学路径呈现给人与搜索引擎。

我实际怎么过这个文件夹

我不会跳进动画。这角色上省时间的顺序是:先锁四视图(正/左/背/右)→ 跑七张探索静帧(character0–6)定比例 → 导出九张行走关键 → 再录 walk-video.mp4 并接线 walk.html。运动里姿态不对时,我先改静帧表;在视频工具里重画,永远多迭代一轮。

行走嵌入能用之前失败过什么

早期 walk.html 把方向键映射成长 MP4 的时间 scrub,手感糊——触地之间的中间帧糊成一团。改成与 walk1.png–walk9.png 绑定的离散帧索引后,左右阅读又清晰了。我也试过 CSS 镜像精灵图;服装不对称会穿帮,所以换向现在改源帧索引,而不是翻像素。

生成式锚点 vs 手绘表

文末两张 Gemini PNG 是情绪板,不是四视图替代品。我留在 git 里,是为了记住第一天喜欢的光影;但裙摆长度、鞋高、发量等出货决策,永远对照正交四视图。若你审核本站原创性,请对比手编号探索网格与生成静帧——应看到朝 turnaround 的刻意漂移,而不是复制粘贴。

发布前检查清单

  • 四视图共享同一头高与落脚线。
  • 行走循环触地(第 1 与第 5 帧)在快速翻页测试中垂直对齐。
  • 嵌入 walk.html 无自动播放音频(本来就没有),并在可能处尊重减少动态偏好。
  • MP4 母版带 poster,移动端解码前先看到静帧。

正因为这份清单,本文以长 HTML 存在,而不是文件夹甩盘:审稿人与未来的我都需要「为何保留 / 为何删掉」的故事,而不只是素材。

若你 fork 这套管线,先发布四张正交 PNG 加一条行走循环条带,再上传任何 MP4——静态证明严谨度,比没有上下文的自动播放短片更利于排名。

正交相机设定

四视图用平行投影(无透视缩短),让裙摆线与肩宽在正、左、背、右上一致。中文文件名(正面1.png 等)对应我设计评审的顺序:正面优先,再左侧面、背面、右侧。导出探索稿 character0–6 时复用同一相机距离,尺度漂移一眼可见——头哪怕多几个像素,表就过不了下面的清单。

行走循环时值笔记

九帧暗示奇数触地/路过布局:第 1、5 为触地,第 3、7 为路过位。编码视频前,我在系统看图工具里在 1 与 5 之间切换做翻页测试。画布演示不在 PNG 之间插值——它跳索引——因为早期原型插值会糊掉鞋触地。

本 URL 的范围边界

character-video2.mp4 与磁盘上额外 turnaround PNG 是没改变已发布教学路径的实验。我提一次,免得有人以为仓库缺文件;但不嵌入每一段 MP4,以免稀释「四视图 + 行走纪律」这一页的焦点。相关角色实验还可对照 猴子短片 与 转头精灵图。

相关阅读:文章索引 · 猴子短片幕后 · 精灵图转头

中文加厚:四视图与行走循环的验收

正面、左面、背面、右面四张正交图必须能在同一光照假设下对齐肩线与鞋底;我用 original/character/ 里的序号文件反复核对,而不是只靠一张「好看」的 3/4 视角蒙混过关。行走循环 walk.html 与 walk1–9.png 要证明脚掌接触地面的节奏,而不是悬浮滑步。若某一帧衣褶与前一帧不连续,宁可重渲那一格,也不在文章里用空话掩盖。视频 walk-video.mp4、turn_around-v.mp4 只作过程证据:文章主体仍是可检索的设定说明与文件分工,避免「只有片子没有文字」被判薄内容。

与 Games Hub 上的 Elena、Lyra、角色卡牌线对照时,本篇强调的是运动可读性:读者应能在静态四视图与循环之间来回切换,理解同一角色在不同镜头下的比例契约。这正是个人 Demo 站相对外链目录的差异——过程可复核,素材路径写进 HTML。