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

Live2D基礎教學#第2節-人物模型調整

Live2D基礎教學#第2節-人物模型調整

 

大家好!我是傅老師。歡迎來到我的Live2D教學~
在上一節的課程中,我們很快的將一套素材圖紙(texture)匯入成為了一套模型(model)。在本節中,我們要教大家如何去微調這個模型,讓她的動作更為流暢。讀者可以點擊此處下載前節完工的cmox模型檔。

 

 


 

2-1 觀察問題

上一節在套用Epsilon對件範本後,我們的模型jiin很快地動起來了。但是我們發現了一個很明顯的問題:jiin的眼部在闔眼時動作不自然,嘴部在開口笑時也出現了縫隙。請開啟前節存檔,至參數區(Parameters)將參數設為下圖數據,觀察人物的變化:

 

在這裡我們要先介紹一下眼部與嘴部的動作參數。以左眼開闔為例(左眼在畫面右方),相關的參數有<EyeL Open>以及<Left eye smile>這兩個。<EyeL Open>控制眼瞼的開闔;<Left eye smile>控制眼睛微笑的程度。而當角色眼瞼闔上,並將微笑程度調到右側最大值,就是本角色眼部最開心的表達;相反的,若將眼瞼打開,並將微笑程度調到左側最小,這就是本角色眼部的平常狀態。再來我們看到嘴部,嘴部的<Mouth Deform>控制著嘴型的大小,感覺上就像是控制酒窩位置的肌肉;<Mouth Open>則控制著上下唇的開闔。兩者都調至最大值時,就是本角色嘴部最開心的表達;相反的,若兩者調至最小值,則是本角色嘴部的平常狀態

我們在調動作參數的時候,一般來說只會針對動作的極端狀況去做調整,只要極端狀況能正常顯示,則99%的動作即能能正常運作。接下來我們先來調整眼部參數。



 

2-2 調整眼部

在進行調整前,我們要先理解眼部的拆件。jiin的眼部(除了眼球之外)分作為5件部件,如下圖所示:

在上圖中,5個部件均位於眼球(eye ball)之上層,因此這5個部件若與眼球位置重疊即可擋住眼球,我們就是要利用這樣的遮擋關係做出眨眼效果(如果讀者使用過Adobe Flash製作人物動畫,想必這招對您必定不陌生)。

在眼部進行闔上動作時,Live2D會將模型的上眼瞼(lid up)與上睫毛(lash up)兩件向下拉+變形處理(deform)。下圖左是闔眼時選中眼瞼的截圖,下圖右則時開眼時選中眼瞼的截圖。我們從下圖左中可以看到,變形後的左眼瞼變大了,並且蓋住了左眼球;而下拉後的睫毛遮蓋了眼瞼下緣,並且睫毛曲度變緩,營造出曲面闔上的感覺。

現在我們理解了眨眼的技術邏輯。並且在仔細觀察左眼後,我們認為以下幾點要修正:

1. 上眼瞼的下緣有肉色突出,此處應調整眼瞼變形
2. 下睫毛的顯示似乎有誤,看起來像是被下眼瞼蓋住了,此處應調整圖層順序
3. 眼珠露出,此處應調整下睫毛與下眼瞼的位置與變形

好,開始動工。

2-2-1 調整上眼瞼

 

首先是一個很重要的操作:上鎖不須編輯的圖層
看到左上角組件視窗,點選上方工具列的大鎖圖示,將所有圖層上鎖;再點擊<Eye>層前方的大鎖圖示,將<Eye>層解鎖。如此一來我們就不會誤改到其他部件。(ps: 練習至熟練之後請改用--> <Eye>右鍵子選單-><Select part only>-><Unlock>)

依2-1節中的指示設置<EyeL Open>及<Left eye smile>,讓角色眼部呈現最大笑容。展開組件視窗中的<Eye>層,盤點出左眼的5個部件,此5部件的名稱後綴應均為"_L"。選中<eyeLidUp_L>上眼瞼部件進行修改,選中後可看到右方編輯區中出現灰色的選擇範圍,此時按住<shift>鍵並以滑鼠左鍵拉框選取,即可一次選中左下緣的數個頂點。

 

將滑鼠游移在紅色選取範圍內,可看到游標變為移動十字。此時按住滑鼠左鍵,將選取部位向上拖曳至適當位置,直到不當露出的上眼瞼消失為止。

調整完畢後我們來檢查一下,回到動畫參數條,左右拉動<EyeL Open>與<Left eye smile>參數,確認上眼瞼的不當露出問題已消除。

2-2-2 調整下睫毛

接下來我們調整下睫毛的圖層順序。

其實啊。。這個錯誤是傅老師粗心造成的,想知道這個圖層順序問題的人請打開前節教學的PDF檔。依照我們5件式的拆件,左右眼的上下睫毛層(lash)應蓋住對應的眼瞼層(lid),但是在我的PDF檔裡犯了一個錯誤:我的左右眼下眼瞼圖層放錯順序了,也就是說原圖中下睫毛就已經錯誤配置,當然匯入Live2D後也就配置不出正確的圖層順序。不過也好~大家順便來練習一下圖層順序的設置吧~(笑)

言歸正傳,我們來看看這該怎麼改。至部件視窗選中<eyeLashDown_L>,看到中央部件參數區內有個<Draw Order>目前為460,這個數值就是下睫毛<eyelashDown_L>的圖層高度。此值越大,就越接近看電腦的玩家。切換到<eyeLidDown_L>,則可發現眼瞼的高度是480。因此我們的修改目標,就是把睫毛的圖層高度改為在任何時刻都得大於480,令睫毛蓋在眼瞼上。

 

調整動畫參數,將<EyeL Open>與<Left eye smile>先回歸至最左側,讓左眼回歸至一般狀態再開始修改。準備好之後選中<eyelashDown_L>,直接將Draw Order改為490,即可看到睫毛出現了。但是!如果我們將眼睛打開,也就是將<EyeL Open>滑桿滑至右側,則下睫毛又消失了!

 

這是怎麼回事呢?我們不是已經把圖層高度提升到490了嗎?且讓我用一個動作說明之。請讀者至部件視窗選中整個<Eye>圖層群組後,再次回來拉動<EyeL Open>滑桿,便可知道問題所在。

在影像編輯區的左側,有一個紅色箭頭以及數個藍色箭頭。紅色箭頭代表整個<Eye>圖層群組;而各個藍色箭頭則代表其內的子圖層。在滑動的過程中,我們會看到有一個藍箭頭上下擺動於490及460之間,這就是我們剛剛設置的<eyelashDown_L>圖層。我們只針對滑桿在左方時設置了<eyelashDown_L>,而滑桿在右方時我們則尚未做出任何調整。於是乎,這樣的設置讓滑桿位於左側時圖層高度為490,而滑桿在右側時圖層高度為460,Live2D在中間值位置自動幫我們做了補間。解決問題的方式就是將滑桿拉至右側,選中<eyelashDown_L>層後再次將圖層高度設為490。

設置完後我們再來滑動確認試試。選中<Eye>圖層群組再次滑動,觀察紅色與藍色箭頭,便可發現圖層高度穩定下來了。

等一下~還沒結束!我們知道左眼還有一個滑桿<Left eye smile>是用來控制笑容的。讓我們滑看看。。。哎呀呀。。。怎麼又出問題了?我們發現當<Left eye smile>滑至右側時,圖層又掉回460了。是的,這是因為這兩組動畫參數都會去調變下睫毛,而我們目前只針對了其中一個動畫參數調整了部件,尚未針對<Left eye smile>參數做調整。現在請看下表,我們稱呼滑桿左端位置為0,滑桿右端位置為1,兩隻滑桿的排列組合與應進行的設置如下表:

<EyeL Open>滑桿位置 <Left eye smile>滑桿位置 <eyelashDown_L>圖層高度設置
0 0 490
1 0 490
1 1 490
0 1 490

兩隻滑桿的排列組合一共有四種,而我們剛剛只針對其中兩種組合進行了設置。請為表中剩餘兩個滑桿組合進行<eyelashDown_L>圖層高度設置,完工! 

2-2-3 修復眼珠露出

在經過了前小節困難重重的歷練後,我們現在知道一件事:調整一個部件,需要完整跑過一遍所有關鍵幀的排列組合。什麼是關鍵幀呢(key frame)?請看下圖:

選中下睫毛<eyelashDown_L>,看到動畫參數的滑桿。其中,與這個部件相關的動畫,其滑桿上會出現綠色的原點,這個原點就是關鍵幀。如果我們將動畫參數移至"非關鍵幀"的位置,則我們將無法改變下睫毛<eyelashDown_L>的任何設置!因為在這些幀上,部件的位置與變形是Live2D運算出來的。若讀者在設計上確實需要新增一個關鍵幀,可以滑至所欲位置後點選跳出選單上的"+"號,即可新增關鍵幀。

好,在解說完關鍵幀後,我們再次看到與眼珠露出相關的動畫關鍵幀:

修改項目 <EyeL Open>滑桿位置 <Left eye smile>滑桿位置 修改方針
#A 0 0 修改下睫毛位置
修改下眼瞼變形
  1 0  
  1 1  
#B 0 1 修改下睫毛位置
修改下眼瞼變形

由於眼珠露出的時機只限於閉眼狀況,所以不需要針對開眼狀況進行部件調整,上表中開眼狀況列為灰色代表不需修改。

將<EyeL Open>與<Left eye smile>滑桿均滑至0(左側),先行調整下睫毛位置:將下睫毛向上拉,直至沒入上睫毛內,完全被遮蓋為止。再來修改下眼瞼變形:按住<shift>選中下眼瞼上緣3~5個左右之頂點,將其向上拖曳。修改項目#A完工,如下圖右所示。

接著進行修改項目#B。將<Left eye smile>滑桿拉至最右側,依同樣的方針調整下睫毛與下眼瞼。項目#B完工後如下圖所示:

好了,現在讓雙眼閉上,雙眼微笑值調到最大,jiin可以正常微笑囉~

2-3 調整嘴部

經過一番學習以後,我們現在知道了調整動畫的步驟。一,找出動畫不合理之處,通常發生在動畫參數設為最大值之時。二、思考調整哪些部件的位置與變形可解決問題。三、切換至要修改的關鍵幀,每個關鍵幀都要處理。接下來我們依照這三個步驟來處理嘴部。

經過觀察後,發現嘴部的問題有二:

1. 張嘴時,嘴唇位置接合不佳,不當露出了膚色。
2. 張嘴時,上唇膚色色塊上拉過大,遮住了部分鼻子。

我們還是先來看一下嘴部的拆件:

jiin的嘴部由4件構成:中心為代表口腔內部的<mouth middle>部件,上下唇為<mouth up>/<mouth down>部件,剩餘一件<mouth line>是用來做出下唇陰影的。
瞭解原理後思考要動哪些關鍵幀,此問題只發生在張嘴時,故我們只修改<Mouth Open>為1時的參數組合。

修改項目 <Mouth Deform>滑桿位置 <Mouth Open>滑桿位置 修改方針
  0 0  
  1 0  
#A 1 1 調整上下唇
#B 0 1 調整上下唇

針對#A#B兩個組合分別進行調整,調整目標:將上下嘴唇接至無縫,上唇肉色不可蓋住鼻子(在經歷過2-2的大改後,這些應該都是非常簡單的修改,對吧?!)。

完工!jiin終於可以露出正常人的笑容了。

2-4 預覽動畫

上一節傅老師請大家自己研究一下Viewer,不知道有沒有人去研究啊?(我猜你沒有。。。哈哈~)沒關係,這節我們來說明如何使用Live2D Viewer快速檢視我們做出的model。在進行本節前請先自行安裝好Live2D Viewer

首先看到上方工具列,選擇<Tool>-<Preview Model with Live2D Viewer>,Live2D會幫我們把model輸出至暫存資料夾內,並且自動開啟Live2D Viewer。

如果Viewer沒有自動開啟,請自行使用工具列搜尋<Live2D Viewer>將之開啟,再自行拖入<PreviewModel.moc>檔。

再Viewer內選擇<Project>-<Sample>-<Motion: All>,將預設的動作讀入。

以滑鼠雙擊<Motions>資料夾內的動畫名稱,即可將預設的動作套用在jiin身上了~!

在今天的教學裡面,我們學到了微調模型的方式,修整掉了眼部及嘴部不合理之處,並且學會了使用Live2D Viewer預覽模型的方法。由於時間的關係,我們無法一一修改jiin模型的其他細節,在下一節中我們將會介紹Live2D最強大的功能--<Deformer>,並且再對jiin的肩部與頭髮進行調整。
感謝你的參與,我們下次見!