iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 12
0
自我挑戰組

探索Unity中的視覺化製作工具系列 第 12

用Doozy讓UI動作變得更加容易

  • 分享至 

  • xImage
  •  

UI的製作在遊戲開發中也佔據很重要的一環,而說到UI,當然不可少的是其動態的呈現。在Unity中,製作UI的動作有幾種方式

  • Animator
  • Timeline
  • Spine
  • Tween

Animator是用來製作不論是2D或是3D動態角色的首選,用它來做UI也是許多專案中預設的選項。Timeline倒是比較少見,前年推出了Timeline後,多數的團隊多半是拿它來處理過場劇情和動畫的呈現,不過它既然能夠依照時間調出過場劇情,拿它來呈現UI也不是不可。不過Timeline比起Animator畢竟是較新的功能,普及呈度不高。

Spine可稱為骨架式2D調整工具中非常強大的,所以用它來進行UI的製作也是很好的選擇。不過在它是外部的工具,價位也有些高昂,除非遊戲本體就已經是用Spine進行骨架的調整,要不然特地為了UI而購入,不一定是經濟的選擇。而另一點則是它的功能強大相對來說就是比較複雜,學習上也很花時間。

而Tween,有時會稱為Ease等,在網頁上的動畫也時常用到,就是今天要討論的重點。

動畫簡白一些就是對動的方式進行呈現,也就是一個點、一個物件在二軸或是三軸上在一定的時間內如何從A點移動到B點。撇開動畫這種花俏的描述,從A點到B點最容易理解的動法,就是線性移動,也就是國中時就上過的移動方式。但線性移動雖然看起來有在動,但死板無趣,進而延伸了一段時間內二點之間多種不同的方式,將線性的呈現改成波形的呈現。

前面三種的動作多為手動調整,能產生不規律的波形,也就是用數學函式無法或很不容易呈現的波形。而Tween,則是用單個至多個數學函式組合而成的波形。比方說三角函數裡Sin或是Cos波形。各有其優缺點,看當下的需求決定,故不在此定奪。但多數時間調人物動作時不規則比較適合,而UI等則規則呈現也無妨。

可以參考以下的文章來解解Tween的波形目前常用的有哪些。

既然是數學函式,必有相對應的程式函式庫可以使用。Unity中不少的Tween可供選擇,但這幾年來隨著HOTween的作者調整發佈了DOTween後,已成為Unity中相當具代表性的Twewn函式庫,多數的開發者會選擇以DOTween當做優先的選擇。而Doozy的核心就是建構在DOTween上而擴充的,故在了解Doozy前,先來了解DOTween為何。

實際用DOTween

要了解DOTween,就從如何使用此從函式庫出發。先至DOTween的官網下載最新的版本後,直接將整個資料夾放入到Unity中。記得要先完成它自身的設定。

接下來就是產生一個簡易UI後,直接套用現有的Tween。程式碼片段為

if (_viewOnscreen)
{
    view.DOAnchorPos(Vector2.zero, 2.0f, true);
}
else
{
    view.DOAnchorPos(_startingPos, 2.0f, true);
}

直接使用而不設定Tween的種類,預設就是用線性移動的方式進行。於其後加上Tween種類則可以嘗試不同Tween的呈現。

if (_viewOnscreen)
{
    view
        .DOAnchorPos(Vector2.zero, 2.0f, true)
        .SetEase(_currentEase);
}
else
{
    view.DOAnchorPos(_startingPos, 2.0f, true)
        .SetEase(_currentEase);
}

詳細執行差異可從範例中了解。範例專案放罝在Git Repo中的doozy-tween目錄裡。

用程式碼撰寫對程式設計師來說不是問題,但要用何種Tween,數值怎麼給,對程式人員來說是一件很傷腦筋的事。所以Tween的調整,最好還是交付給UI設計師,這是讓他們大展身手的時機。但一碰到寫程式碼,還是折騰了UI設計師。

如果用之前提及的Bolt,或許可以大幅度降低困難度,不過這裡要引薦的是Doozy,一個專門為了UI而生的外掛,可說讓UI製作的難度一下子就打了三折的概念。它怎麼處理Tween就是接下來要介紹的。

Doozy基本概念

Doozy最好的好處就是它是建構在現有的uGui上,如果用了之後覺得不適用,或是想要客製化某些部份,都不用擔心Doozy的元件會干擾,直接移除就可以,而本來uGui部份也不會受到干擾。

既然是用uGui,Canvas的設定仍是最主要的。一但Canvas產生後,再來就是View,而這個View並不限於一整個畫面的大小,它可以大到全畫面,或小到只是一個清單中的物件。雖然被稱為View,不過用會動的載具來形容會更加貼切。這個元件是實值對應到Tween的主要元件。

右邊的Show View、Hide View和View Loop就是調整Tween的位置。基於展的方便性,調整View Loop的Tween。在Animation那調整Rotate Loop,而Ease選項那含有DOTween各種定義好的數學函式。

看到這些Tween用這麼直覺的方式進行編撰,相信UI設計人員可以自行處理UI最佳的呈現。

除了讚嘆Doozy的簡易操作外,真不知道還有沒有比這更方便的工具?但這只是其中一部份,它另一部份的功能和直覺的Tween調整比起來,可謂有過之而無不及。今天就先在此打住。


上一篇
FlowGraph其它的選擇
下一篇
Doozy讓狀態機的概念發揮到極致
系列文
探索Unity中的視覺化製作工具30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言