Live2D Lab

從一張圖,到能被驗證的模型

這裡整理我學 Live2D 的長期筆記。不是把工作台原封不動公開,而是把可以重複使用的判斷方式拆出來: 怎麼分層、怎麼處理接縫、怎麼建立 Cubism 結構、怎麼做小步 motion test,以及怎麼確認 runtime 端真的可用。

小秋 Live2D 分層後的整體預覽
目前的核心認知:Live2D 不是讓圖「會動」,而是讓圖被拆成能控制、能回退、能驗證的結構。

分類地圖

素材與分層

PSD

把插畫拆成可控制的零件,先處理命名、bbox、透明區與 hidden fill。

  • ・圖層責任要清楚
  • ・接縫區域獨立出 under / cover / shadow
  • ・先檢查素材,再進 Cubism

接縫與遮擋

Seam

脖子、衣領、袖口、髮線是最容易露破綻的地方,需要結構與光影一起設計。

  • ・Base / Under 防露空
  • ・AO / Soft Shadow 保體積
  • ・Cover 層壓住前後關係

Cubism 結構

Model

匯入後先確認 ArtMesh、Texture Atlas、物件範圍與 deformer hierarchy。

  • ・避免全畫布 bbox
  • ・每個物件要能被正確抓住
  • ・不要太早開始做表情

參數與 Keyform

Motion

每個動作都要能說明由哪個參數控制,以及它應該影響哪些部位。

  • ・Blink / Mouth / Angle 分開驗證
  • ・預設姿勢不能被改壞
  • ・一次只做一個 smoke test

Physics 與微動

Physics

髮、袖口、內容物晃動適合用小幅、可預測的物理,不追求一次到位。

  • ・先小幅度
  • ・先證明保存與輸出
  • ・不要把 physics 當成修圖工具

Runtime QA

QA

Cubism 裡正常只是第一步,viewer / SDK 端可見且可控才算真的能用。

  • ・model3.json 指向正確
  • ・Texture 不空白
  • ・參數矩陣能在 runtime 端通過

教學文章路線

之後的 Live2D 內容會分成四條線:先能讀懂全局,再看具體分層案例,接著把實驗整理成研究筆記,最後把功能組合成可見效果。 這樣分類比較適合長期累積,也比較不會把單篇文章寫成一本無法維護的小書。

入門教學

給第一次接觸 Live2D 的人,先建立從 PSD 到 runtime 的整體地圖。

PSD 怎麼拆 Cubism 匯入後先看什麼 第一個 blink smoke test

分層案例

用自有素材拆解具體問題:脖子、袖口、髮線、透明容器、內容物晃動。

接縫補層 bbox 檢查 layer order 與遮罩

研究筆記

整理每次實驗的假設、驗收方式與失敗原因,讓後續 rigging 不靠感覺。

逐幀影片分析 參數矩陣 runtime viewer QA

效果設計

把功能模組組合成可見效果,例如呼吸、髮絲跟隨、袖口 inertia、液體 slosh。

idle loop physics motion recipe

研究功能可以怎麼用

功能 研究問題 帶來的效果
PSD preflight 檢查命名、透明區、bbox、hidden fill 降低匯入後才發現素材不能動的機率
接縫分層 把 under / cover / AO / soft shadow 拆開 頭轉、低頭、呼吸時比較不露硬邊
Deformer map 把 ArtMesh 放進明確 hierarchy 控制哪些部位一起動、哪些部位保持穩定
Parameter matrix 列出每個參數的極端、中間、預設 pose 眨眼、嘴型、Angle、Breath 可以逐項驗收
Physics probe 用小幅輸入檢查髮、袖口、內容物的延遲 做出柔軟但不失控的微動
Video proxy analysis 從展示影片量 silhouette、區域能量與變形曲線 把看到的動作拆回可實作的 deformer / parameter 假設
Runtime smoke test 在 viewer 端檢查 texture、model3、physics、參數觸發 避免模型只在 Cubism 內看起來正常

可做出的效果組合

安靜呼吸

WRP_Body ParamBreath 胸口 soft shadow

衣服和陰影有很小的同步起伏,角色不會像整張圖被縮放。

頭部微轉

WRP_Head Angle X/Y 髮線 under fill

臉、脖子、前髮有方向感,接縫不會在轉頭時裂開。

髮絲跟隨

WRP_Hair ParamHairFront/Side physics 小幅輸出

頭動後髮稍微延遲回位,增加活著的感覺,但不搶主動作。

袖口慣性

袖口 cover inner shadow Body Angle / physics

寬鬆袖口跟身體動作有一點落後,手臂邊界仍被遮住。

透明容器晃動

Contents_* group sloshing deformer 外殼 static group

史萊姆內容物左右晃,容器外壁保持穩定,效果清楚又容易驗證。

待機小循環

Breath Hair physics 少量表情變化

不用大動作也能讓角色有存在感,適合網站展示或 VTS idle。

圖解重點

脖子與衣領接縫補層預覽
脖子與衣領:先防露空,再處理體積感。

接縫區域要拆成幾種責任:底色延伸、遮片、接觸陰影、柔邊陰影。這些層如果全部畫死在同一張圖上,頭轉或呼吸時就沒有調整空間。

我現在會把這類區域視為模型穩定度問題,而不是單純美術修圖。看起來漂亮但不能跟著動,最後還是會破。

透明容器史萊姆的分層圖
小型素材適合練習 bbox、遮罩、layer order 與晃動群組。

透明容器史萊姆是較小的練習題。它比人形角色簡單,但剛好包含外殼、內容物、臉、泡泡、高光與遮罩,足以練習 Live2D 的核心問題。

對這類素材,我會先把內容物集中成同一個可晃動群組,外殼與臉保持穩定。這讓 motion test 的責任更清楚,也比較容易判斷哪一層壞了。

透明容器史萊姆中立、左晃、右晃三格預覽

長期 Roadmap

01

整理素材標準

把角色與小型練習素材都整理成同一套 preflight:命名、bbox、透明區、接縫補層。

02

建立 Cubism smoke test

每次只驗一個能力:texture atlas、眨眼、嘴型、Angle、Breath、Hair physics。

03

累積圖文案例

把每個學到的觀念整理成可公開的小節,避免把私有工程紀錄直接搬出來。

04

做 Runtime 檢查表

建立 viewer 端的 pose / parameter matrix,確認模型離開 Cubism 後仍能正常顯示。

公開邊界

會公開

自有素材、可重複的方法、圖文示意、學習路線、失敗後整理出的通用判斷。

不公開

私有工程檔、完整物件樹、內部自動化探針、第三方模型拆解、會暴露環境或授權邊界的細節。

相關入口