UI的製作在遊戲開發中也佔據很重要的一環,而說到UI,當然不可少的是其動態的呈現。在Unity中,製作UI的動作有幾種方式
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的官網下載最新的版本後,直接將整個資料夾放入到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最好的好處就是它是建構在現有的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調整比起來,可謂有過之而無不及。今天就先在此打住。