前往
大廳
主題

Unity 與 Live2D Cubism3 SDK初階教學 02-自製模型匯入、圖層關係與照相機映射

Pyramide | 2021-06-07 02:57:56 | 巴幣 4036 | 人氣 1743

註:此系列是統合一些我之前使用Live2D SDK的經驗,一些更深入的東西可能還要去研究,若有敘述錯誤的部分還請不吝指教。

這次的教學主要是如何把自製(或是美術幫你做好)非官方的模型匯入,以及關於模型與遊戲物件、UI的圖層關係教學。

Unity使用版本:Unity 2019.4.21f1 (64-bit)、Live2D SDK版本:CubismSdkForUnity-4-r.2

如果電腦版圖看不清楚,可以用滑鼠點開,會放大。
建議使用電腦版閱讀,也建議分段閱讀,一次啃完應該蠻累的

目錄

1.匯入自己的模型

1-if.處理Fade檔

2.模型放大的方法(攝影機與直接放大)

3.圖層關係
 -先放點背景物件圖吧
 -圖層關係-Order In Layer
 -新增母Layer,Sorting Layer
 -修改Sorting Layer

4.UI圖層關係

5.照相機映射
 -設置新相機
 -創建與指定映射目標RenderTexture
 -將RenderTexture映射於UI上
 -去背
 -細修

結語

宣傳


開始瞜。


1.匯入自己的模型


一開始一樣把做好的模型資料夾整包丟進去

然後之後的設定操作基本上跟我上一篇文章一樣,沒看過的可以去看看


1-if.處理Fade檔

這個對我來說是我之前沒啥碰到的東西,還記得我在上一篇文章說的,「我不確定有哪些多餘檔案可以刪除」對吧? 現在確定那些.Fade不能亂刪了==

會有這項是因為我在配置模型運行時,發現有報錯說缺少物件,我才發現到在模型Prefab有個Script的物件我沒有填上,就是CubismFadeController這個物件,等等我會把上一篇的教學再做更新。

可以看到在匯入模型後會產生一個FadeList,它主要處理動畫在變換時的淡入淡出,有興趣可以看這篇
其他細項就太深入了

把這個檔案拖到該Script中接上即可

至於各動畫的淡入淡出可以在動畫資料夾中找到並且作詳細設定,這裡就不贅述了。

到這裡就處理好Fade檔的問題了。

2.模型放大的方法(攝影機與直接放大)

還記得我們在上一篇中提到剛匯入的模型通常都有過小之問題,所以我們必須把它放大讓使用者能看得清楚。

其中最簡易直白的方法便是透過調整物件的Scale直接放大

(直接放大,輕鬆易用)


而另一個方法則是調整攝影機與模型的相對位置,雖然我們目前都是透過點擊Scene視窗的2D按鈕把三維空間變成平面操作,但專案本身是3D的,因此照相機與模型存在著空間關係

這裡我們調整了模型的Z軸『縱深值』,但因為我們目前顯示用2D模式,所以看不太出來。

這裡我們轉換到3D視角,可以看到物件與攝影機相對位置的變化,模型越靠近攝影機,也就越大了。

個人建議放大時,如果能不要動攝影機就不要動攝影機,萬一亂動攝影機的Z軸可能會導致你原本擺好的物件大小也跟著改變,弄起來會很麻煩的。

3.圖層關係-先放點背景物件圖吧

一個遊戲總不能只有模型,一定還要有背景物件等等才行。
這裡我選一張艾米莉可和巧達的截圖放進來做示範。
記得把Type調成Sprite並按下Apply,如此一台圖片才能直接放入場景中或運用於UI上。

3-1.圖層關係-Order In Layer

但當我們把圖都放進去以後,卻發現一件很奇怪的現象
這是怎樣,物件在場景中與在遊戲中不同。

這是因為三個物件的圖層分類都在同一層 Default-0
 
正常來說我們會更改Order In Layer的值,改越高越前面,也就是說2可以蓋住1,1可以蓋住0

但當我照做時
嘿,巧達明明就在D-2層,應該會比模型的D-1層高,能蓋住才對啊! 怎麼只蓋住她的小腿?

這裡我再增加一個模型,並將他的層級改至D-3
結果D-3的模型也不能蓋住D-1的模型,天啊!

這可能是因為模型Sorting Mode造成的,但我們只要更改母Layer便能解決這個問題。

3-2.圖層關係-新增母Layer,Sorting Layer

之前我們修改的都是Order In Layer,那就像是在修改一棟樓中其中一樓房間裡的上下舖。

要解決模型
Sorting Mode造成的問題,我們需要更暴力的方法,那就是直接往上蓋一層樓了。
可以看到我選擇Add New Layer來新增新的Sorting Layer。

注意,在這個列表中,越底下的層級越高,因為每次加蓋一樓都會堆在最底下

有點像我們討論區的蓋樓,往下蓋是2樓,但它比1樓高,對吧?

現在我們新增了3個圖層,讓我們來修改吧。

3-3.圖層關係-修改Sorting Layer

既然已經建好新樓,那我們先把巧達的圖片移到最高層Top2D,透過更改SortingLayer的下拉選單即可
可以看到巧達成功遮住Live2D模型的其他物件了


接著我們把右邊的模型移到2樓(Live2DMLayer)
模型的選項沒有下拉選單,要自己手打,名稱要完全一樣
可以看到右邊的模型成功遮住左邊位於D-0層的模型了。

這裡補充一個動畫演示,可以看到2樓模型已經能完全覆蓋1樓模型,3樓巧達能完全覆蓋兩個模型。

呼,有點累對吧,到這裡就完全解決物件間的圖層關係了,但有個更頭痛的問題。
那UI哩。


4.UI圖層關係-UI置放

遊戲裡UI當然也是不可或缺的,我們先建立一個簡單的UI畫布吧!

當我們創建UI物件時,UNITY系統會自動幫我們創建Canvas畫布。
可以看到畫布超大一個,而且覆蓋了所有物件。

我們通常UI模式都是Overlay,它就像最高圖層一樣。

不論你遊戲物件Sorting Layer再怎麼蓋,都高不過它。

這樣就尬了,有些人就是想讓模型蓋過UI阿!

這時候就輪到照相機映射的方式登場了。

照相機映射是以截取相機一部份畫面,將其放到一個材質上,在將材質至入UI圖片中來達到以UI物件同步顯示遊戲物件的做法。(不過我不確定這方法是不是真的叫照相機映射就是了==)


5.照相機映射-設置新相機

首先我們需要一台負責對焦模型的新相機(我把UI照片的Sprite換成NENE了,這樣比較明顯)
把它的Target設置為2,這樣在GameView才不會跟主相機產生衝突


5-1.照相機映射-創建與指定映射目標RenderTexture

接下來便輪到主角登場了,RenderTexture。
我們先把GameView的顯示先定位到另一台攝影機所在的顯示2。
然後調整模型位置(看起來像在自拍)

然後創建主角,RenderTexture。
(在素材視窗右鍵->Create->RenderTexture)
剛創建時它就像一片黑色的底片,接著我們要更改它的大小

把它改成600*800

然後把RenderTexture放進去,這時候你會發現畫面跑掉了,變成一小塊。

如此一來我們便成功將照相機所拍到的物件依據底片比例映射於底片上了。

把GameView改回顯示1,然後繼續操作。

5-2.照相機映射-將RenderTexture映射於UI上

接著我們要把拍到的東西嫁接到UI上好讓我們的模型蓋過其他UI

首先先創建一個RawImage(對Canvas按右鍵->UI->RawImage)

(這裡選RawImage是因為能直接將RenderTexture貼上去,不用再額外製作材質球)

貼上去後,我們要先按Set Native Size,這按鈕能自動把UI照片轉成我們指定的RenderTexture大小。

我們能發現底片依據它的大小轉成UI照片了,還可以蓋過其他UI。

關於UI與UI圖層間的關係,跟SortingLayer是一樣的,在Canvas中,排越底下的越高。
最底下能蓋過上面所有UI。

接著讓我們測試一下
看起來還不錯,動作一致。

但是我不想要背景也被截到,而且只想要一個模型在畫面上,那該怎麼辦呢??

5-3.照相機映射-去背

既然不想要背景那就先把模型物件與映射照相機一起移到外面去(抱歉我這裡動圖丟失了)
結果發現還是有藍天白雲的背景==


把相機ClearFlags改成單色(SolidLayer),然後把顏色透明度調成0即可達到去背效果

如此一來,就能成功地把遊戲模型完美映射到UI上了。

5-4.照相機映射-細修

透過調整人物與映射照相機之間的關係,我們可以更改映射出來的樣子
就像我們一開始匯入時調整模型與照相機的方式一樣,只是換成映射照相機了。


成果展示
人物就像在右下角的解說員一樣動作了。


結語

在這篇文章中敘述了很多關於圖層關係的教學,可能你們會看得有點混亂,歹勢。

希望這篇文章能為大家排解Live2D模型與各平面物件間的圖層關係,不管是遊戲物件,還是UI

日後的教學會提到關於程式碼、UI按紐、事件等對模型動畫的操控。

如果我的描述有錯誤還請指出,希望大家開發過程一路順風。


宣傳

在教學中我所使用的是我目前和朋友們的工作室正在開發的遊戲『The Circus』的主角『娜迦爾』的Live2D模型,我在開發中擔任的職位是其中一位程式設計師:D。

是免費的恐怖RPG遊戲,但目前還在製作中,之前跟畢製一起衝超硬的。

這是團隊的推特,以及遊戲的官網

也感謝團隊的Live2D作者提供模型用作教學(雖然我平常開發整天都在亂搞模型ㄏㄏ)。


下次見瞜

創作回應

柯柯柯
感謝教學 受用無窮 <3
但我慘 我得重新撰寫圖層系統 = = Image的Component沒支援圖層 QAQ
2023-02-20 23:47:01
Pyramide
照理來說用IMAGE,在同一個CANVAS底下,排越下面的圖層就越高喔。
2023-02-21 00:06:03
Pyramide
如果是多個CANVAS,可以看看他元件裡的sortingOrderhttps://truth.bahamut.com.tw/s01/202302/837d19fc9671d020d745d1c642b82338.PNG
2023-02-21 00:07:08
柯柯柯
嗯!? 那我不用改耶 我有把圖層陣列化排序 感謝
2023-02-21 00:12:31

更多創作