換裝的建模技巧

對應版本:Cubism 2.0以上 (本單元使用Cubism Editor 2.0進行解說,因此跟外觀與操作可能會跟最新版的軟體有所不同。)

    製作能更換服裝的Live2D角色!





教學作者:kutata  (URL:blog.naver.com/kutata0415 )

Team Sinsiroad的遊戲製作人
手機遊戲【藥水製造師】製作人
iOS: iTunes Store    Android: Google Play




 

 
大家好。我是這次跟大家一起接受教學的「蒂雅」
這裡將說明製作可更換服裝之角色模型的訣竅
因此這是針對已經對基本的模型製作方法,有一定程度了解的使用者所進行的說明

這個教學由
 ・ Step1.準備
 ・ Step2.使用邊界框製作模型
 ・ Step3.去除邊界框
 ・ Step4.更換服裝
所構成。

那麼,現在就開始進行教學



    Step1. 準備

【1】畫草稿

首先畫出想要製作之角色的草稿




【2】拆解圖層

準備將各部位拆解成圖層的角色



盡可能將在表現角色表情變化時,也會使用到的部份(包含臉頰的顏色)也拆成圖層,就能夠製作出順暢且自然的動作
因為這次用到的蒂雅是面向正面,
因此耳朵、翅膀、雙馬尾、眼睛的形狀等左右對稱的部位,都為了減少材質圖的尺寸,而只製作一邊
如果圖層已經拆解完成,在匯入Live2D時,就能夠自動的以便利的方式配置材質圖,
所以psd的圖層,要配置在實際要使用到的位置上
拆解圖層的步驟完成後,請務必備份檔案



【3】讀取模型

將於Step1-【2】所準備的psd檔案,拖曳至Live2D Modeler,即可製作模型


在這個畫面中,可以編輯材質圖
如果圖層之間(材質圖之間)的距離太近,就不容易變更成比現在的形狀更大的服裝
①  在左邊的設定中,將「圖層間的邊界」(Margin between layers)之數值調整得稍微大一點, psd圖層之間的距離就會變得較大
但是睫毛、瞳孔等比較小的部位,有時候並不需要將距離設定得太遠
在製作遊戲時,圖層的尺寸會影響到遊戲的運作,因此接下來就介紹只更改必要部位之距離的方法



    Step2. 使用邊界框製作模型

【1】何謂邊界框

回到psd檔案上
將Step1-【2】所準備的檔案複製一份後,就開始進行設定材質圖距離的步驟
這次以蒂雅的帽子來做示範



就如同這裡所看到的,「帽子的邊界」必須設定得比原本的帽子還要大
顯示邊界的方法有很多種,請各位以假設將該部位放大到最大尺寸的方式,來製作足夠的邊界
接下來以這個藍色四角形,來顯示部位邊界的方式,就寫為「邊界框」
以蒂雅這個例子來說,因為預定要更換帽子、頭髮的各個部位、髮飾、衣服,因此分別替這些東西製作邊界框
請將每一個部位與對應的邊界框,放進相同的圖層中



【2】確認已確保的空間

將Step2-【1】的psd檔案拖曳至Live2D後,材質圖就會配置成下圖的樣子
必要的部位之邊界框會被顯示出來,在這裡就能夠確認已經確保完成的空間




這是讀取完成的畫面
就如同Step1-【2】的說明,對稱的部份都已經以複製、反轉的方式製作完成


以這種方式進行製作,只需要畫一隻耳朵,就能夠當做兩隻耳朵使用
而且還能夠節省材質圖的空間



【3】設定多邊形

胸部、眼瞼等需要做出細緻動作的部份,請稍微下點功夫設定多邊形,並調整配置。



【4】配置圖層

各部位的所屬以及圖層的位置關係(前後關係),都已經設定完成


但現在還是能在畫面上看到藍色的邊界框,因此不能直接使用
接下來就去除藍色的框框



    Step3. 去除邊界框

【1】匯出材質圖

從Live2D Modeler匯出材質圖




【2】編輯psd檔案

回到Photoshop。
將於Step1-【2】製作的psd檔案,與完成Step2-【1】之步驟的psd檔案,及於Step3-【1】匯出的檔案一起開啟
將於Step1-【2】製作的psd檔案,與完成Step2-【1】之步驟的psd檔案重疊
(※在這個階段請不要將圖層重疊。)




【3】編輯psd檔案 2

將有邊界框的圖片與沒有邊界框的圖片,重疊到於Step2-【1】所製作的材質圖上




將移動到材質圖上的兩個圖層之尺寸一起進行調整,
以下圖的方式,將尺寸調整成與材質圖的邊界框相同




將有邊界框的圖片圖層刪除,讓原有的材質圖之帽子的邊界框去除,就完成了這個步驟
以下圖的方式,用同樣的方法將剩下的邊界框去除




【4】儲存材質圖

刪除所有的邊界框後,就能夠像這樣看到沒有任何外框的材質圖
將此材質圖,儲存成不同的檔案。
於Step2-【1】所製作的有邊界框之材質圖,則是個別備份
-


【5】更換材質圖

回到Live2D Modeler。更換成於Step3-【4】製作完成的無邊界框之材質圖




作成了沒有邊界框的模型了


接下來只要將變形工具設定完成,模型製作的步驟就完成了
接下來就將蒂雅的衣服,更換成不同的圖片,順便複習上述的步驟



    Step4. 更換服裝

【1】畫新的服裝

接下來就更換蒂雅的服裝吧
首先請在新的圖層上,畫新的服裝
(※請勿放入有邊界框的圖層中。)
請注意不要超出邊界框的範圍



【2】更換材質圖

重複在Step3-【3】所進行的步驟
同時選取有邊界框的服裝,以及新服裝的圖層後,匯入材質圖

要將自己畫的圖片使用在 Live2D 上時,這個步驟可以作為圖層構成與拆解素材的參考




將匯入的兩個圖層之尺寸,調整得與材質圖的邊界框尺寸相同




請刪除有邊界框的圖層
這樣更換服裝的步驟就完成了




其他的部位也以相同的方法進行更換

回到Live2D Modeler中,並更換為新的圖層,就能夠立刻套用
透過這個方法,就能夠以只更換材質圖的方式,來更換角色的服裝




【3】完成


這個教學就到此為止
希望能夠對製作遊戲用模型的人士有所幫助

非常謝謝大家

Article copyright © 2015 kutata