【MotionDesign】凱比機器人動態設計(上)AE角色綁定/用parent搞定Lottie

前言

Hi 大家好

接續前面凱比機器人角色設計的教學
這次分享的專案是要在手機介面上,讓角色表現狀態。
考量到效能等等因素,當時打算嘗試使用Lottie這套Airbnb開發的工具來實現介面上動畫的表現。

Lottie簡介

Lottie的優勢:過去通常是動態設計師先在動畫軟體裡面設計好動態,再交由工程師用程式重現設計師設計的動畫。使用這個工具的話,可以直接將動畫轉成程式碼,就省去了工程師重現動態設計的工程。
Lottie的缺點:AE特效幾乎不能使用,設計師只能使用最基礎的shape、solid、mask ⋯⋯等等設計動態,非常考驗設計師能力。這裡需特別注意的是,務必確認自己正在執行的專案是要放上什麼平台的(web、Android、iOS),每個平台支援的AE動畫元素也不一樣,務必小心!
詳細的內容Airbnb官方都有做說明:Lottie Docs

專案前情提要

如前一篇有提到,我們要在介面上呈現角色。UI的部分主要是由設計師Vic所設計,我這邊主要承接角色表現的部分。

面臨的挑戰

  1. 與UI設計和工程師的配合
  2. 在Lottie的使用限制下做角色動畫(下集分享)

要開始囉!

針對挑戰1的部份,我和UI設計師討論的結果,考量到整個畫面構圖,避免角色太靠螢幕邊緣,有特別設定一個規範(下圖藍線部分),設計動態的時候避免做超出範圍的動作。而為了避免每次製作動畫,角色大小不統一,在顯示時會很奇怪,我們也設定了在這個範圍內角色究竟是多高(紅色方框的高度)。另一方面也方便工程師放置圖檔,不用一個一個對位,只要將整個範圍內的動畫直接置中即可。

我使用的AI轉AE向量圖的工具是overlord
購買overlord前我都是使用另一套外掛Explode Shape Layers 3
也很好用,如果都沒有,那就是使用AE內建的 Create Shapes from Vector Layer即可

我會推薦大家有能力的話還是購買上面兩個工具,內建的 Create Shapes from Vector Layer轉出來的shape常常還會有什麼中心點和一些奇怪的問題,使用工具的話他很快就幫你處理好了,非常省時間!

不管今天是3D或是2D,綁定角色的大原則就是

  • 身體的重心會是整個骨架層級的最上層,這個在3D動畫領域稱為root(如果其他產業也有其他說法或是一樣的說法,歡迎告訴我喔!)
  • 注意每個部位的圖片中心點一定要放在該部位的重心或是關節處
  • 這個專案沒有腳。如果有腳的話,一般較常使用的rigging方式是IK(Inverse Kinematics),這部分通常是為了走路的時候腳不會滑步。
  • 手臂的話通常會使用FK(Forward Kinematics)。大部分時候是因為手常常會跟著身體擺動,如果使用IK的話,在Key那些跟隨(Follow through)動作的時候動畫師會非常痛苦。
  • 延續前兩點,手和腳在少部分時間也會使用相反的系統。例如手的話,在製作揮擊或是手指寫字這類主要動作以手掌為主導的動畫,動畫師通常會選擇使用IK來製作。所以如果綁定(rigging)的時候兩種形式都能提供的話,對於動畫師是很方便的事。對於Motion的使用情境到底需不需要兩種都準備,就是看整個動畫這個角色出場表演的內容而決定。

如果想更了解IK與FK,可以參考這個影片:

靠parent搞定一切!

如前所述,因Lottie本身的限制,我連rubberhose 2這個綁定角色的好用工具都無法使用,一切從簡啊!

前面已經有列出一定要注意的原則了。
我會建議大家把AI裡面的向量圖轉進來的時候,務必好好的把圖層命名好。

開始Parent前請注意每一個身體部位中心點是不是都在適當的位置喔!
不在對的位置,就算後面層級跟我放一樣,Key出來的動態也會看起來不夠自然。

如果你不太懂中心點到底怎麼放,我會建議從人體解剖學來學習。
你不用學得非常深入,在這個專案裡,你只要了解骨架是從哪裡接到哪裡,他的支點在哪裡比較適當等等,這對於角色動畫是非常重要的。我常常可以從這裡看出一個角色動畫師的功力到底好不好,魔鬼藏在細節中啊!

相關的書籍非常多,只要找到適合自己的就可以囉!

層數的多寡會依據角色的設計而改變,這個案例的大分類的話分為「頭、身體、手臂」3種

頭:黃色
手臂:紅色
身體:藍色

可以看到手臂的部分有分上下層,這裡是因為角色的設計是站面對觀眾的45度角方向,勢必會有一支手臂在身體下方,所以就要用圖層的方式去做出透視。

這一隻角色我通常的層級關係會是

  • All(null):方便整隻角色的移動特別加一層null
    • body:這裡因為我想對身體做軟Q果凍效果,所以我先comp起來,裡面包含了身體下半部的灰色(喇叭)與胸口的Led。動畫需要的話就直接進去comp裡面調製。
      • head:上圖我是放在All的下方,這個專案因為All只會左右平移所以不影響。若製作其他角色的話建議還是想清楚怎麼放比較好喔!
        • screen
          • Reye:這幾層是表情,所以放在螢幕screen的下層
          • Leye
          • mouth
        • face
        • face matte:如前一篇所說,臉頰有特別針對Motion來設計,所以需要一個遮罩把多餘的部分遮起來。
        • head line:頭部外圍的白色框
      • Rshoulder
        • RArm
          • Rhand:設計角色的時候,為了避免手臂因為是Path而讓整個造型狀態變得不好,這邊我有特別加一個類似拳頭的手掌。不過在Lottie中並不容易使用,也很難tracking到手臂的擺動動態,必要的時候會拿掉這個手掌。
      • Lshoulder
        • LArm
          • Lhand

綁定完工!

一切順利的話,
綁定就完成囉!

如果有哪裡說明不清楚的,很歡迎留言告訴我喔~

下一次分享終於就要來到動態的部分了,敬請期待!



如果喜歡我的分享,請幫忙按一下下面或是右邊的Google廣告以支持我~
會讓我更有動力繼續往下寫喔!留言支持與討論我也會很開心的!


被動收入課程推薦!

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *