1. 程式人生 > >Unity 2D獨立開發手記(外篇):Anima2D動畫製作

Unity 2D獨立開發手記(外篇):Anima2D動畫製作

角色全都是用手機的dotpict這款畫素畫APP一點一點畫出來的,沒啥藝術細胞也不懂什麼解剖學,人體比例什麼的,先亂畫了一個角色練練手吧,製作動畫要用的。雖說也是畫素風的,跟其他現有的畫素風遊戲差得不是一點半點_(:з」∠)_

動畫製作我使用的是Assets Store裡面的Anima2D外掛,真心好用,不過僅僅合適於兩朝向的動畫,例如《饑荒》,而想要製作四朝向動畫,例如GBA上《塞爾達傳說》那種前後左右四面,這樣的動畫用2D骨骼來弄限制就太多了,最終還是要老老實實逐幀手繪動作分解。因此我在開始我就打算做成饑荒那樣的朝向,偏向左和偏向右,因為現階段也只好如此。

那麼Anima2D怎麼使用呢?為了以後便於複習,暫且在這裡記錄一下用法。

先建立工程吧,選2D 遊戲製作。


1、第一步當然是去store下載並匯入Anima 2D外掛了


2、匯入png精靈圖片並新建一個資料夾準備用來裝轉換的mesh檔案,我命名為mesh,很多人都不建議用中文檔名,那我在這裡也提醒一下寄幾吧,雖然我的素材資料夾建立的時候也使用了中文,現在暫時不改了


3、選擇角色肢體,右鍵建立anima2d精靈網格


之後會生成很多asset格式的檔案,顯示為png圖片的內容,把它們拖入mesh資料夾以便後期方便整理。


4、接下來在場景中新建一個空的遊戲物件,我命名為Lee Xiao,然後再在這個物件下面建立兩個空的子物件,我命名為body和bones,顧名思義了


5、好了,把肢體的mesh依次拖入body,不要多選拖進去,沒用的,因為只會拖進第一個。


6、整理一下肢體位置,並排序一下顯示次序。怎麼排次序呢,首先得新建一個圖層

隨便選中一個場景中的mesh物件在inspector檢視如此操作


我新建一個character層用於角色吧


返回把所有mesh物件的sorting layer改成character,然後調整該項成為合適的值


最後效果是這樣的,看起來not  too bad,原諒我這粗魯的美工和肢體比例,因為只是練手先隨便畫咯


6、好了,重頭戲,繪製骨骼。選擇空的bones物件,加個骨骼吧。

我命名為hips,作為所有骨骼的起始

調整骨骼的位置和旋轉、長度等到合適的值,點住骨骼根部的方框以調整位置,點方框以外的骨骼部位旋轉。


從hips伸展出身體的骨骼,我命名為torso,並做出調整。


然後從torso再伸展出頭部的骨骼,調整。

回到torso,為右手臂建立新的骨骼,調整好後Ctrl+D拷貝一份給左臂。

為了方便,返回右手骨骼,新建一個子骨骼作為武器骨骼,並把武器mesh或者png拖到這個骨骼去作為它的子物件,然後調整武器的位置旋轉縮放等至合適的值。


返回hips,給右腿新增骨骼,調整好後拷貝一份給左腿。


到此,骨骼的建立就告一段落了。

7、接下來就是骨骼蒙皮了。

把hips骨骼物件拖到body的inspector中的set bones框

會生成一個骨骼列表,選中最下面的多餘骨骼往上依次點兩次右下方的“-”按鈕刪掉,只留下關鍵骨骼


然後,在選中body物件的前提下,開啟mesh 編輯器,如下


出現以下類似介面,由於我的mesh尺寸太小了,導致只有十個不到的原始頂點,點選slice,調整outline detail外緣細節來細化我的邊緣頂點,然後點apply應用,可以看到最終效果還可以。


然後用滑鼠雙擊,給關鍵部分新增更多的內部頂點,這樣才能保證蒙皮效果不會太差。


然後,點選bind按鈕,右下方會彈出一個浮窗,勾上overlay,會出現下圖的效果,可以點選smooth和auto鍵來選擇想要的效果,還可以勾上piex來手動給各個頂點賦值,以細化蒙皮權重,不過我這裡暫時不需要了,效果已經令我滿意。


最後,點選視窗右上RGB圖示左邊的apply來應用蒙皮效果,回到scene旋轉身體骨骼,可以發現身體的mesh也跟著動了


以此類推,把其餘肢體依次蒙皮,記得給關節處多加點頂點。這裡說一下,我的武器貼圖是骨骼的子物體,並不會受到蒙皮與否的影響,如果跟身體一樣蒙皮了,那麼武器的位置就會固定住,不能進行形變,例如移位,比如說下一招式需要握住長矛的中部,如果蒙皮了,那貼圖就不能隨意在手中移動位置了,反之則可以調整長矛在手中的位置。

8、為了便於錄製動畫,給骨骼新增IK關節以方便調整骨骼

給bones再新增一個空的子物件,命名為IK


選中IK,右鍵新增一個IK Limb物件


把IK Limb物件重新命名為arm_r IK,並移動到手腕的位置


把前臂的骨骼拖拽到IK物件的Inspector中的Target框中,並去掉Orient Child的勾勾,拋開字面意思,我覺得這個的意思是是否不允許子骨骼的自由變換,當然要允許了,要不然手和武器怎麼自由變動


返回場景檢視中移動IK物件看看效果,可以發現,手臂的骨骼會隨它而進行關節性的變化,圈圈變成了藍色,而且骨骼根部的小黑點也變成了藍色,表示綁定了關節


以此類推,給左臂和兩條腿也都繫結關節,注意關節的繫結物件都是前臂或者小腿,不是手和腳。其中可能會出現腿部骨骼的彎曲方向不正確的情況,把這個Flip選項勾上就行


最終的效果應該是這樣的


9、動畫製作

開啟windows選單中的Animation視窗,拖動到合適的位置


然後選中Lee Xiao,也就是角色的整個物體,在animation視窗中為它create一個動畫


按個人習慣,我新建了一個animation資料夾來儲存動畫,然後把要儲存的動畫片段命名為spear_idle,顧名思義


然後再資源檢視中可以看到,unity自動添加了一個動畫控制器,名稱為動畫物體的名字。隨後我改名為Lee Xiao_Spear


重新選中Lee Xiao,回到animation視窗,點選左上方的小紅點開始錄製動畫


會發現,時間軸和其他一些地方變成了紅色的,表示正在進行動畫錄製


好了,廢話不多說,可以開工了,為了精度,先把Samples的值從60改成10(其實這騷操作無所謂的),然後點時間軸上的0.05幀把白線弄到這個位置,接著返回角色骨骼,選擇hips調整一下它的高度為比原來稍微低一些,再調整手臂、武器等其他骨骼的形變使得動作自然一些,然後隨時都可以點選Animation視窗左上方的播放按鈕來檢視錄製效果。隨著調整,可以看到時間軸下方的區域生成了一些稜形,它們稱作關鍵幀,關鍵幀還可以完成形變之外的很多事情,比如進行某些數值、mesh顯示層次的變化等


也就是一個待機動作,我不用給它製作很長的動畫,接著滑鼠框選第0幀的關鍵幀,Ctrl+C複製,然後去到0.1幀貼上,這樣就完成了一個簡單的迴圈動畫


最終待機動畫的效果是這樣的,上傳的gif不知怎麼就變快了1倍,實際畫面會慢成0.5倍,更自然一些


好了,有了個好的開頭,相信我們都能輕易的錄製其他的動畫了吧,那麼今天就先更新到這裡吧。

工程檔案我打包放在了https://pan.baidu.com/s/1oAaEDtS,需要的可以參考一下,雖然是很早的版本,並不是最終效果