Unity3D – Beautiful Transition (Basic)

簡介

這篇是要介紹我們最近的介面案子所需要用到的功能,在無需重新發明輪子的情況下,偶爾當一下台幣戰士也是不錯的,我們就買了這套Unity套件,讓大家可以快速上手。這篇將提到最基本的UI的移動行為,內容包含,先設置前置作業,接著可以新增UI的『位移、淡入淡出、旋轉、變色、放大縮小』以上的Trainsition。

設定Trigger

大家可以先有一個概念,這套件就是在控制物件的『TransitionIN & OUT』,所以有三個元素大家可以先了解後再把它串起來。

第一個是控制作動物件的『TestController.cs』,該程式碼就是要把你想Trainsition的物件放在一個空容器內,此程式會驅動該容器內的所有物件有掛載Transition的程式。上圖的第二個底線就是要放置第三個元素的。

第二個就是觸發器,通常就是按鈕囉,將剛剛第一個控制作動物件放在按鈕『onClick』中,並且可以設定該按鈕是要控制『TransitionIN or OUT』。如上圖。

第三個就是容器啦,容器裡面可以放很多物件,假使按鈕觸發了TransitionIN or OUT該容器內物件有掛載相關Transition程式的,都會開始作動,前提就是你要設定好參數囉,在下面就一個一個介紹。

位移

位移可說是最常使用的效果,所以在這段落我們會講多一點參數設定,由於Transition這套件好處就是不同的模式要設定的參數大概百分之90都差不多,所以在這區塊講完整一點即可。

我們從上到下分作三個部分講解:

第一全局設定,Init For Transition In:代表該物件開始作動時會做個初始化的動作。Auto Run:就是不用觸發器他就會自己作動,建議這邊不要打勾。Repeat When Enabled:重複作動,建議也不要打勾。Target:假使你該程式是掛載在你正好要作動的物件,play時,程式會自動將該物件變成Target,所以這邊也不用特別設定,除非你所有Transition script是放在一個統整的空物件中。Move Mode:有Globel , Local , Anchored Position,而在UI世界當然是選第三個。

第二部分就是設定TransitionIn & OUT部分,在位移部分最重要的就是位移座標,In所顯示就是Start座標,Out是設定結束時的座標。接著你要設定Delay跟During,分別是要過多久才開始做動與做動續時間。而這套軟體不錯的地方就是可以讓你選擇位移的Tween曲線,如上圖的List,選定好之後可以再下方看到曲線圖,就可以大概知道他位移軌跡配合時間的樣子。最後Loop Mode最好先不要設定,因為位移當然就是要就定位,不可能一直在那邊Loop或是更怪異的Ping Pong模式。

淡入淡出

淡入淡出最重要的就是他的Alpha值,如上圖畫紅色底線處就是調整Start & End的Alpha值,而其他的就像我剛剛講的90%都相似。

旋轉

旋轉也是調整畫紅色底線的Start & End的x , y , z的選轉值,在設定前你可以先自己轉動一下目標物件的RectTransform中的Rotation,這樣比較知道你要怎樣轉。

變色

顏色的Transition他預設是讓你可以有漸層的漸變效果,假如你不想要就把上圖箭頭處拉掉,就跟Photoshop設定漸層相同方式。而一樣有Start & End要做設定,要注意的是,顏色這邊最好Duration設定時間長一點,不然可能你設定的效果就稍縱即逝了。

放大縮小

放大縮小的設定欄位也是Start & End,跟Rotate Transition一樣。而在最後想要補充說明的是Event這塊,你假如會自己寫一些程式,在這邊就可以派上用場,套件在這些Script中有提供3個Event模式,從一開始的Transition Start 到 Update 運行中,最後到Complete,都可以安插,例如你想要再Transition Complete時做一些事情,又或是在Transition Update時可以用UI的Text顯示他還要Transition多久的時間顯示等等,都可以透過Event來做應用。

在Advanced中的選項,我測試起來,Transition Children應該是只將該物件的子物件作位移。Must Trigger Direct,就是屏蔽當下的Transition項目。Time Update Method就是看你的Duration是要依照Game Time,還是Unscaled Game Time,但基本就使用預設即可。

小結

其實熟悉Unity的人,大概自己摸個10幾分鐘就大概知道怎樣使用了,本篇趕鴨子上架先介紹最基本的Transition的功能,應該足以套用在我們最近的案子中,而這個不僅僅只能用在uGUI,連3D物件等都可以使用上,在未來有機會再來介紹該套件的進階功能。

發佈留言

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