這是 aogl.cn 上的一篇角色設計歸檔,記錄我真實在用的同一套流程:四視圖 turnaround(正、左、背、右)、編號角色探索稿 character0–6、完整行走關鍵幀 walk1–9、可在瀏覽器裡操作的walk.html 行走演示,以及多段 MP4 動態測試。文件夾 original/character/ 裡還保留兩張生成式錨點圖,方便外部分發與圖像檢索仍能對上同一視覺身份。
四視圖 turnaround(正側背右)
四張 PNG 在無透視漂移的前提下鎖定剪影與服裝閱讀;利於 SEO 的關鍵詞包括 角色四視圖、orthographic、設定表。
探索稿 character0–6
七張靜幀作為進入動畫前的姿態與比例檢查點;文件名 character0.png … character6.png 便於 CDN 與版本對比。
交互式行走演示(walk.html)
下方嵌入頁在畫布上播放行走素材,並用 ← → / A D 控制方向;配合本段文字,有利於作品集展示與檢索理解頁面主題。
original/character/walk.html(源視頻 walk-video.mp4)。行走循環靜幀 walk1–walk9
九幀對應經典步態分解;替代文本寫明幀號,兼顧無障礙與「行走循環 第 N 幀」類長尾檢索。
旋轉與行走動態(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。