創作內容

45 GP

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

作者:Jomo│2016-03-24 04:18:53│贊助:288│人氣:14754
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自動化的設置以及預設的範本,我們很快地完成了這些工作。在下節中,我們會教大家如何微調建出的模型,讓角色更流暢的運行。
      感謝你的參與,我們下次見!
      
    
引用網址:https://home.gamer.com.tw/TrackBack.php?sn=3137352
All rights reserved. 版權所有,保留一切權利

相關創作

同標籤作品搜尋:live2d|construct2

留言共 6 篇留言

美洲虎寶寶
謝謝你的教學~期待下一堂課XD[e5]

03-25 21:57

Jomo
Hi大家好,傅老師的Live2D課程要開課了,有興趣的朋友可以參考一下喔~
http://www.memoryabc.com/courses/live2d/

08-09 16:29

TRANCER
fgo也是live2d制作嗎?

11-11 12:16

hiro地球人
哇!好詳細喔,非常感謝~

11-18 11:31

夜名
請問一下,如果我想要將一張圖片,做成live2D,我應該要使用其他軟體來切割部位,還是Cubism Editor本身可以切割圖片呢?

04-02 18:40

逮蝦戶哀主冰西爾逼波
夜明,光一張圖是不夠的你必須切割部分圖片然後把空的補上顏色

05-09 11:01

我要留言提醒:您尚未登入,請先登入再留言

45喜歡★jomo0825 可決定是否刪除您的留言,請勿發表違反站規文字。

前一篇:[Construct 2... 後一篇:Unity collid...

追蹤私訊

作品資料夾

theni1343郭董
我想要錢看更多我要大聲說昨天15:16


face基於日前微軟官方表示 Internet Explorer 不再支援新的網路標準,可能無法使用新的應用程式來呈現網站內容,在瀏覽器支援度及網站安全性的雙重考量下,為了讓巴友們有更好的使用體驗,巴哈姆特即將於 2019年9月2日 停止支援 Internet Explorer 瀏覽器的頁面呈現和功能。
屆時建議您使用下述瀏覽器來瀏覽巴哈姆特:
。Google Chrome(推薦)
。Mozilla Firefox
。Microsoft Edge(Windows10以上的作業系統版本才可使用)

face我們了解您不想看到廣告的心情⋯ 若您願意支持巴哈姆特永續經營,請將 gamer.com.tw 加入廣告阻擋工具的白名單中,謝謝 !【教學】