Live2D基礎教學#第１節－新增人物模型
![]()
大家好！我是傅老師。歡迎來到我的
Live2D教學～
今天要為大家介紹的是鼎鼎大名的---Live2D 動畫製作軟體。Live2D是一款製作2D動畫的工具軟體，由日本Live2D公司所開發。Live2D具有極強的Deformation功能，專門用來製作
高細緻度的2D人物動畫，可基於2D素材模擬出3D旋轉的功能，非常地強大。此外Live2D也引入了建模(model)的概念，可讓角色設計與動畫設計拆開，讓動畫能夠重複使用於不同的模型上，真是2D遊戲開發者的一大福音！下面讓我們來看一個Live2D的demo，請點擊螢幕上的不同位置，人物就會出現不同的反應喔~(
注意！點擊下去角色會發出聲音～～)
如何，神奇吧？現在就讓我們一起來安裝Live2D吧！
1-1 簡介與安裝
好消息～Live2D提供免費試用，所以我們可以直接從官網下載正版的軟體來學習。首先連至Live2D官網下載區，下載＜Cubism Editor＞。這套軟體包含Live2D的兩個主程式：建模工具＜Live2D Modeler＞以及動畫編輯器＜Live2D Animator＞。本篇教學將通篇使用英文版，若讀者較為熟悉日文，亦可下載日文版。
Live2D的免費Free版與個人Pro版是同一份程式，請直接點擊下方＜ダウンロードページへ＞。最後填寫個人或是企業資料，如下表所示。
Live2D Cubism Editor安裝檔大概為130MB，我們要安裝的英文版其後綴為<en>，雙擊這個檔案就開始安裝。
安裝過程非常簡單，唯一需要使用者介入的就是選擇安裝資料夾，其餘部分與一般軟體安裝一樣。順利安裝完畢後請開啟<Live2D Cubism Modeler>，這是Live2D的建模軟體，也是我們前幾節要講的重點功能。開啟時請注意：Cubism系列的軟體有分為32bit與64bit雙版本，請依照你的CPU bit數來決定使用哪個版本。如果真的毫無頭緒的話，你可以先執行32bit版，待釐清CPU規格後再切換版本。
點開後Modeler會問我們要開啟甚麼版本，請選擇最底下的開啟免費版＜Start as FREE version＞。
首先看到左上角的視窗，這個視窗是組件視窗（parts），我們可以看到Live2D預設的組件都與人體部位相關，這是因為Live2D聚焦於人體的動畫製作。Live2D的工作原理是將一張2D平面的素材圖紙（texture）匯入，再將這張圖紙拆解為人體的各個部位，以利後續組合成為動畫。本節我們先教大家如何將一張PSD圖紙匯入到Live2D中，並且對應上這些預設組件。
點選＜File＞/＜PSD import＞，將範例中的＜jiin_psd_sample.psd＞檔案匯入。
下載範例請按此。
在匯入工作視窗中，我們在右側可以看到PSD檔內的圖層，中央是Live2D將圖層平坦化（flatterned）後生成的圖紙，左側是匯入參數。
Live2D會自動嘗試為每個圖形建立多邊形框架，以詮釋出這個圖形幾何上的性質。原則上多邊形的頂點越密集，未來在變形做動畫時就會較細緻，但過多的頂點會造成工作上的負擔，適量就好。
［Texture］素材圖紙
| 項目 |
預設值 |
說明 |
| Texture size |
2048 |
生成圖紙的長寬大小，可從512到4096。免費版只能達到2048。 |
［Layout］佈局
| 項目 |
預設值 |
說明 |
| Margin between layers |
10 |
將圖層平坦化時，個圖層間的最小間距。 |
| Allow layer rotation |
取消 |
允許圖層旋轉 |
［Polygon］多邊形
| 項目 |
預設值 |
說明 |
| Boundary margin（outside） |
10 |
外層多邊形頂點距離圖形邊緣之間距。 |
| Boundary margin（inside） |
3 |
第二層多邊形頂點距離圖形邊緣之間距。本層頂點及上層頂點應會將圖形之邊緣包夾住。 |
| Minimum boundary margin |
2 |
包夾間距的最小值。 |
| Interval of points |
30 |
兩兩頂點的間距。 |
| Interval adjustment by size |
8 |
以上的設置，當碰到小部件時可能會詮釋出過於粗糙的多邊形，提升此值可將小部件詮釋為更細緻多邊形。 |
| Minimum number of points |
5 |
部件外緣頂點的最少點數。 |
| Alpha value determined as... |
0 |
是否將不透明值忽略。此值為0時，不透明值在詮釋多邊形時會完全被忽略，全部圖點都視為不透明；此值越大，原圖的不透明值列入計算的成分會越重。 |
［Object］
| 項目 |
預設值 |
說明 |
| Set draw order automatically |
勾選 |
讓Live2D自動決定圖層ｚ高度（drawing order）。 |
［Information］
| 項目 |
說明 |
| Resize ration |
此值顯示生成圖紙相較於原圖的縮放尺寸。須留意若此值太小，則表示Live2D生成的圖紙在解析度上遭受大幅的降低。 |
第一次練習使用預設值即可。確認後按下OK，噹噹噹～我們匯入的角色成功匯入了。角色會顯示在右方，左方的部件列表的＜PSD＞層中則放置著Live2D自動詮釋出的部件多邊形。
現在問題來了，我們的圖層跟Live2D預設的圖層有些出入。比如說我們的睫毛（lash）由Up、Side、Down三層所構成，但Live2D只有一層Eye，這樣要怎麼對準呢？答案非常簡單！Live2D提供了對件範本（Template），我們可以很輕鬆地就將這些四散的圖層對上預設的組件。點選＜File＞/＜Apply template＞，我們可以看到有幾個範本可以幫我們很快地對件的：
這裡選擇左上角的Epsion美眉，她跟我們要對的角色身形比較接近。進入對件畫面後，可以看到兩個角色會重疊在一起。預設是交錯閃爍的，如果覺得眼花撩亂就切換到＜Fix transparency＞模式。我們的目標就是盡可能地讓她們各個身體部位都重疊到。首先從雙肩對齊開始，再從左邊的列表中從上至下逐一調整。
兩個角色不可能完全一模一樣，所以對到差不多就可以了。
對好後按下＜Apply template Preview＞，就可以搶先預覽角色動起來的畫面了！太棒啦～～～別高興得太早，雖然Live2D很聰明，但還是有些部件對錯了喔～將滑鼠滾輪向前滾，看到自製角色眼珠的部分。我們可以看到我們的眼珠對應到Epsilon的眼白了。
接下來我們進行人工對件。在右側視窗選中選中自製角色的左眼球（右手邊那顆），再到左側視窗選中Epsilon的左眼球，確認對件後按下＜Link matching components＞即可修改對件。同樣的問題還可能發生在其他組件上，請逐一確認。還有我們的自製角色有一件是頭髮陰影，這件Epsilon沒有，所以對到其他件是不要緊的。完工後按下OK。
現在回到Live2D組件視窗，我們看到原本＜PSD＞層內的組件全部自動對齊到Live2D預設組件了！Bingo～這實在太方便了。
現在你可以拖動正下方的動畫參數條，你可以試試看滑動＜Angle X＞參數，就可以看到自製角色臉蛋轉向。但是。。現在大致上看起來是對的，不過少數地方錯的有點讓人不寒而慄。。最典型的問題就是微笑的眼睛。將下圖中的四個參數依圖設置，自製角色的眼角笑容會張到最大，此時應該很容易看到一些詭異的現象，比如說下圖中的左眼眼珠露出來了。除此之外，應該還有一些動作在進行到最大幅度時會出問題，比如張嘴、轉身、轉頭，這些我們都會在後續章節教大家如何微調的。
在本節的最後，我們要趕快存檔準備下課囉～點選＜File＞/＜Save as＞，將檔名設為＜jiin.cmox＞檔。.cmox是Live2D模型的單一檔案格式，未來在實際已Live2D SDK套入遊戲中時，我們才會輸出成.moc檔。各位在本文開頭看到的範例，就是將Live2D模型以Rexrainbow C2 ＜Live2D＞插件匯入至C2內做的。
什麼？你說你真的等不及想看角色動起來？恩恩。。。那這樣吧～請你先到剛剛的Live2D官網下載頁面，下載Live2D Viewer並且安裝（需搭配Adobe Air，沒裝的話安裝器會幫你裝）。再回到Cubism Modeler中點選＜File＞/＜Export .moc file＞輸出為.moc檔。打開Live2D Viewer，將輸出的.moc檔拖曳入Viewer內，即可搭配預設動畫組預覽，自己玩玩看囉～
創作內容
Live2D教學#第１節－新增人物模型
大家好！我是傅老師。歡迎來到我的Live2D教學～
遊戲發佈 (1)