2012年2月3日 星期五

Unity 3D : 利用 Animation View 製作動態的 GUI


在【Unity 3D : OnGUI 的視覺化編輯】一文中提到將可能調整到的值提出到 Inspector 調整,不難想到,如果要使 GUI 動態產生位移、縮放等動態變化,我們只要依時間改變去計算它們的值就可以做到,這使人想到又要宣告變數並寫程式,但是如果善用 Unity 的 Animation View,可能不需要多寫任何程式碼就能完成更棒的效果。


如果想使一個按鈕從左向右移,我們可能會這樣寫程式...

//啟始 x 座標
public float from;
//目標 x 座標
public float to;
//速度
public float speed = 1;

//大小位置
public Rect position = new Rect(0,0,50,25);

void Start(){

position.x = from;
}

void Update(){

if(position.x < to) position.x += Time.deltaTime * speed;
}

void OnGUI(){

GUI.Button(position , "test");
}

這樣雖然達到目的,但無法控制幾秒內完成這個動作,那麼可以利用 Unity 的 Mathf Struct 改成這樣...

//啟始 x 座標
public float from;
//目標 x 座標
public float to;
//減緩
public float delay = 1;

//大小位置
public Rect position = new Rect(0,0,50,25);

void Update(){

if(position.x < to){
position.x = Mathf.Lerp(from , to , t);
t += Time.deltaTime * delay;
}
}

void OnGUI(){

GUI.Button(position , "test");
}

這樣改變數值的位移是屬於線性變化,移動起來好像有點死版,所以也可以把 Mathf.Lerp 改成使用 Mathf.SmoothDamp,那麼數值變化會變得更圓滑一些。

如果會使用 iTween 的人可能會覺得 iTween 的 EaseType 呈現的動態效果曲線更好,所以可能會寫這個樣子...

//啟始 x 座標
public float from;
//目標 x 座標
public float to;
//完成動作秒數
public float sec = 1;
//大小位置
public Rect position = new Rect(0,0,50,25);

void OnGUI(){

if(GUI.Button(position , "test")){
iTween.ValueTo(gameObject,
iTween.Hash(
"from" , from ,
"to" , to ,
"onupdate" , "UpdateX" ,
"easetype" , "easeinoutback",
"time" , speed
)
);
}
}

private void UpdateX(float x){

position.x = x;
}

以上,只要點擊按鈕就可以依指定的 EaseType 效果位移。

但是如果善用 Unity 的 Animation View 的話,這些計算都可以省下來,只要在需要動作的時候讓 Animation View 執行 Play 即可,而數值調整只要在 Animation View 中調整就好了,那麼程式可能改成這樣...

//大小位置
public Rect position = new Rect(0,0,50,25);

void OnGUI(){

if(GUI.Button(position , "start")){
animation.Play();
}
}

而 Animation View 中只是對這個 GUI script 的 position.x 設定兩個 key 所連接的直線。


如果想要像 iTween 的 EaseType 的曲線那樣變化值的話,只要為 Animation View 的直線添加幾個 key 調整成類似的曲線,那麼就能獲得類似的動態;而且也可以依照自己的喜好拉出特別的動作曲線,而不用受限於他人的定義。


另外 Animation View 也可以設置事件,所以也可以在程式碼中添加功能,然後在 Animation 進行到某時間點時執行該功能,此部份可能有製作 Flash 的人會感到有點熟悉;有關 Animation View 的使用可參考官方資料 Animation View Guide

2 則留言:

  1. 看到新文章在 2/3 裡 一日三發(篇)~~

    版大 你實在太強了,謝謝你,你的每一篇文章內容都好豐富,每次都讓我受益良多,感謝您!!
    (我會常來支持你的 >.^)

    回覆刪除
    回覆
    1. 謝謝你的支援~
      大家一起互相學習^^

      刪除