Live2D教學-第1節
HJ Online Learning Center
APP開發線上教學
  • Register

Live2D基礎教學#第1節-新增人物模型

Live2D基礎教學#第1節-新增人物模型

 

大家好!我是傅老師。歡迎來到我的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>。本篇教學將通篇使用英文版,若讀者較為熟悉日文,亦可下載日文版。

<日文版>
http://www.live2d.com/download

<英文版>
http://www.live2d.com/en/download

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自動決定圖層z高度(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內,即可搭配預設動畫組預覽,自己玩玩看囉~

我們在本節中很快的將自製的範例PSD匯入到了Live2D中,使用範本協助拆件,並完成了建模。透過Live2D自動化的設置以及預設的範本,我們很快地完成了這些工作。在下節中,我們會教大家如何微調建出的模型,讓角色更流暢的運行。
感謝你的參與,我們下次見!