UNITY x Puppet2D(一){2D骨架、蒙皮、動畫插件介紹}


相信製作3D遊戲或者動畫的創作者們對於3DMAX中的BONE、RIGGING、SKIN、ANIMATION一定很熟悉,但在2D世界中的遊戲經常要透過繪製大量的動作圖檔,利用串聯的方式達到動畫的效果,時間的門檻相對高出了許多(如圖)。sonic

雖然UNITY開發2D遊戲的能力還是很不錯,但依舊沒有骨骼動畫編輯功能,因此Jamie Niman.團隊就開發了這款Puppet2D來輔助這方面的功能,而且非常簡單強大。接下來我們就來看看有多方便吧。


BONE:

  1. 首先要介紹的是Skeleton這部分,當然要先匯入套件。可以在UNITY的ASSET STORE找到,或者直接到http://www.puppet2d.com/的網站連結購買。
  2. 匯入套件後,在WINDOW選單下可以找到Puppet2D的功能面版,開啟後會看到一個像這樣的視窗。
    unet-hit-040
    上面四個標籤相當於前面提到的BONE、RIGGING、SKIN、ANIMATION功能。
  3. 開始之前我們先按一下Scene面板下的2D按鈕,讓場景鎖定為2D模式,為了編輯方便接下來要新增專門放置骨架的圖層,點擊UNITY介面右上角的Layers下拉選單中的EditLayers…
    unet-hit-041
    展開SortingLayers按下+號打上BONE,新增圖層完畢。
    unet-hit-042
  4. 接著回到Puppet2D的面板Skeleton中把預設圖層設為剛剛創建的BONE圖層下。
    unet-hit-043
    按下CreateBoneTool按鈕(亮起綠燈)即可開始創建骨架。
  5. 在畫面上點擊左鍵創建起始點,按住CTRL可以移動該點的位置以及相關聯的子骨架,按住SHIFT移動則不帶動子骨架只移動點本身,點擊第二個位置便可以拉出一根骨頭,再點選其餘元點就可以在原點間切換控制的目標點對象,右鍵可以取消選取,DEL刪除選取的原點。
    unet-hit-044
    創建完畢後按下FinishBone可以結束編輯。

SPLINE:

  1. 另一種骨骼的創建法,用同樣的方法創立一個SPLINE的圖層並設定後,點亮CreateSplineTool(亮起綠色),下方的滑感可以決定兩個控制物件之間要有幾節骨骼,這種骨骼建立法是用曲線的創建方式來運作,跟前面的骨棒比較不同感覺較柔軟。
  2. 連續建立多個控件後,點擊FinishSpline骨骼會自動在控件之間連接。
    unet-hit-045
    點擊結束後 ↓↓↓
    unet-hit-046
  3. 透過空件的旋轉、位移就可以帶動骨骼的曲線變化
    unet-hit-047
  4. 這中間的骨棒依然可以使用CreateBoneTool增加骨頭,增加組合變化。
    unet-hit-048

Rigging:

  1. Rigging頁面首先講到的是IK(反向動力學),我們可以選取其中一個建立好的原點(這通常會是肢體末端),然後點下Create IK Control在原點套上一個IK控制器,拖拉看看就知道效果就如同使用3D軟體的IK功能一樣,可以擠壓延伸讓肢體做出反向對應的動態表現。
    unet-hit-049
    unet-hit-050
  2. 另外在掛有IK控件的原點上會有一個IK腳本在物件上,透過腳本可以設定一些參數功能,例如擠壓時運動的反向。
    unet-hit-051
    unet-hit-052
    或者拉撐時延伸
    unet-hit-053
    unet-hit-054
  3. 接下來兩個功能是合併應用的,首先選取起始原點點下CreateParentControl創造父控件,接下來試著旋轉父控件會發現相關骨骼會跟著旋轉。
    unet-hit-055 unet-hit-056
  4. 接著在中間的原點加上一個OrientControl,再試著旋轉父控件會發現接下來的骨頭會受到Orient的控件方向控制
    unet-hit-057 unet-hit-058
    unet-hit-059

Skinning:

  1. 要開始2D蒙皮之前我們可以先準備一張圖檔來測試,隨意用PS畫了一筆,將圖轉為Sprite丟入場景。
    unet-hit-061
  2. 複製一次並重疊一部份擺放(這部分是重點)
    unet-hit-062
  3. 接著用先前的方式在有影像處創建骨骼,從起點到重疊處轉折再到結尾。
    unet-hit-063
  4. 接下來全選全部物體,包含骨骼以及影像全部。按下ParentObjectToBone按鈕,綁定物件。
    unet-hit-065
    ↓↓↓自動按照階層擺放完畢
    unet-hit-064
  5. 試著轉動關節得到綁定骨骼後的動畫操作功能
    unet-hit-066
  6. 另外ConvertSpriteToMesh的功能則是用來把2D圖片轉換為Mesh網格用的,點選圖片按下按鈕可以依照設定的Type切分不同細緻度的網面。(圖為:TypeOfMesh 3)
    unet-hit-067
  7. 轉換為網格的圖檔便可以用封套的方式來綁定骨架,不需要拆分零件。一樣建立一個兩截的骨骼然後放置吻合Mesh的位置,全選骨骼與Mesh按下BindSmoothSkin綁定。
    unet-hit-068
    ↓↓↓獲得以下效果
    unet-hit-069
    若要解除此狀態一樣保持全選狀態,再次點下BindSmoothSkin系統會詢問是否要解除。
  8. 這個區塊的功能幾乎都必須保持全選狀態,接著按下PaintWeights畫權重工具就可以用筆刷的方式決定骨骼影響Mesh的比重。
    unet-hit-070
    按住CTRL刷筆畫可以逆向操作減少權重。
  9. 在PaintWeights點亮狀態下按鈕會轉為MuanuallyEditWeight再次按下可以切換為另一種權重調整模式。
    unet-hit-071
    用網格點來調整,這時候選中任何一點都可以看到面板有關於每個骨骼的權重比參數,進而調整權重比例。
    unet-hit-072
    最後按下FinishEditSkinWeight便可以結束權重的編輯。
  10. 最後一種FFD封套變形工具,選取圖片點下CreateFFDTool後,開始圍繞圖片影像周圍建立外框。
    unet-hit-073
    連接最後一點前停止,按下FinishFFD封套會自動封閉
    unet-hit-075
  11. 透過移動封套點來變形圖片。
    unet-hit-076
    當然透過結合應用其他功能,可以做到更多噁心的變化!!!
    unet-hit-077

熟悉這些工具後,我們就可以進行動畫的製作了,下次見!!

Leave a Reply