制作按鈕(Button)


按鈕的核心作用

  1.按鈕能接收單擊並觸發響應事件。

  2.按鈕被單擊時能同時觸發多個響應事件。

  3.按鈕可以有普通、懸停、單擊、禁用等多個狀態的不同表現。

  4.廣泛的說,按鈕的核心在於接收事件,任何可以接收用戶操作事件的,都可以稱之為按鈕。

 

創建按鈕

  1.創建一個Sprite,這個Sprite將會是按鈕的外形。

  2.選中創建的這個Sprite,然后在Unity頂部菜單中選擇NGUI->Attach->Collider。

  3.選中創建的這個Sprite,然后在Unity頂部菜單中選擇NGUI->Attach->ButtonScript。

  可以用Label、Texture等其他控件來代替Sprite去制作一個按鈕,方法一模一樣。

  如果需要在創建好的這個按鈕上寫上文字,例如,"確定"、"取消"等,只需要選中這個按鈕,然后再它下面創建一個Label,並寫上"確定"即可,注意,Label的深度要高於這個按鈕的深度,這樣就完成一個"確定"的按鈕。

  小提示,創建出來的Sprite記得單擊Snap,讓它回歸到原尺寸大小,然后再去等比例調整它的大小,這樣可以盡量減少圖片的形變。

 

核心組件BoxCollider

  BoxCollider是一個屋里組件,准確地說是一個物體碰撞盒,所有的需要接收外部輸入事件的(如單擊、拖動等)UI,都需要擁有一個BoxCollider,這個BoxCollider代表的是響應事件的范圍。如果沒有BoxCollider,那么這個控件無論如何都無法接收到外部事件,這是NGUI的一個底層原則。

  既然BoxCollider代表的是接收事件的響應范圍,那么,如果將一個按鈕的BoxCollider大小設為全憑,則單擊屏幕上任何一個地方,都相當於單擊了這個按鈕。

  可以通過Attach方法自動生成一個BoxCollider,也可以通過Inspector面板中單擊AddComponent手動附加一個BoxCollider,區別在於:通過NGUI菜單Attach的BoxCollider的大下坡,會自動剛好包圍控件的范圍,而手動創建的BoxCollider,大小需要手動去調整。

  BoxCollider的包圍框是個綠框。只要在Inspector面板中展開BoxCollider的組件,就能看到這個綠框,如果Inspector面板中BoxCollider組件的設置菜單被收起來了,則不會出現這個綠框。

  BoxCollider設置:

    1.Is Trigger

      是否打開觸發器,這個設置對於NGUI沒什么用,它打開的作用是可以通過物理碰撞觸發事件(如相撞爆炸等)。

    2.Material

      材質設定,這里設定的是物理材質,對於NGUI也沒有什么用,它的作用是為這個碰撞盒包圍的物體設定一個物理的表面,例如,一塊地面時草地、還是木板、還是金屬。

    3.Center

      中心位置的偏移。BoxCollider都有一個中心點,這里的Center就是設置它的中心點相對於控件的中心點的偏移,是一個相對量,所以需要注意一點:BoxCollider的這個Center會受到控件本身的Pivot中心點設置的影響。

    4.Size

      尺寸設置。經常配合Center設置一起使用,以此來調用控件響應區域的大小和位置。例如,做一款手機游戲,在屏幕中有一個很小的關閉按鈕,經常導致玩家點不中它,就可以依靠設置Size來將它的響應區域變大,這樣玩家只要單擊到關閉按鈕周圍的區域,都能觸發關閉按鈕的響應時間。值得注意的是,這里Size的Z軸在UI中是幾乎沒有用的,X和Y的值都是以像素為單位。

      需要注意的是,BoxCollider一般需要依賴於一個非空的、實質的物體,例如,如果這個BoxCollider物體身上沒有控件(Sprite、Label、Texture等),只有一個BoxCollider,那么在大部分情況下,這個BoxCollider是無法接收事件的。

 

核心組件UI Button

  首先要明確的是,UI Button並不是一個按鈕的必須組件,也就是說,沒有UI Button時,也能完成一個按鈕。只要這個按鈕上有BoxCollider,就可以在腳本中通過OnClick()、OnHover()等事件監聽函數去觸發一個響應事件。

  UI Button有以下一些重要的用途:

    1.可以設置不同狀態下的顏色。

    2.可以設置不同狀態下的圖片。

    3.可以很方便地被動態賦予響應時間並分發事件。也就是說,可以臨時地在A物體上的腳本里動態讓B按鈕擁有一個或者多個完全不同的響應事件。

  UI Button的設置:

    1.TweenTarget

      動畫目標,默認為按鈕自己。按鈕在光標懸停時變色、被單擊時變換圖片等,都是動畫。絕大部分情況下,這個設置都需要設為自己(默認就是按鈕自己)。

    2.DragOver

      拖動結束事件,默認為Do Nothing。這里有兩個選項:DoNothing和Press。之所以有這個選項,是因為按鈕在被拖動時,有一個事件的交叉:如果拖動一個按鈕,那么不僅僅拖動了它,同時也按下了它。這個設置的目的就是,定義它被拖動結束后,是否還執行按下事件。

    3.Transition

      過渡時間。這里是動畫過渡的時間。例如,設定按鈕在鼠標光標滑過時,要變黑,這個設置就是設置它在光標滑過時由正常到變黑的時間。

    4.Colors模塊

      這里是改變顏色,可以設置在不同狀態下按鈕的顏色和透明度。一共提供了4中狀態可設置:普通狀態、按鈕被鼠標光標滑過時的狀態、按鈕被按下的狀態、按鈕不可單擊時(BoxCollider被禁用)的狀態。

    5.Sprites模塊

      這里是精靈設置模塊。值得注意的是,如果制作按鈕時不時使用一個精靈控件作為基礎制作的,那么將不會有這個模塊。

      在這里可以設置按鈕在不同的狀態下顯示什么樣的圖片。一共支持4中狀態:普通狀態、按鈕被鼠標光標滑過時的狀態、按鈕被按下的狀態、按鈕不可單擊時(BoxCollider被禁用)的狀態。

      當通過Sprite制作一個按鈕時,創建的Sprite會默認出現在Normal設置中,然后任何狀態下,按鈕圖片都是這個精靈不會再改變。

      如果需要按鈕在不同狀態下進行變化,可以分別對每個狀態需要顯示的精靈進行設置,設置的方法為單擊狀態名稱的按鈕,會彈出圖集中所有精靈的預覽(圖集是Normal狀態顯示的精靈所屬的圖集)。

      如果要取消一個狀態下顯示精靈的設置,可以單擊該狀態后面的小減號。但是,普通狀態下的精靈無法被取消,當其他狀態沒有設置精靈時,將會默認顯示普通狀態的精靈。

      PixelSnap是指保持原像素尺寸,當設置了不同狀態下顯示不同的Sprite時,只有勾選了這個框,才會讓顯示的不同的Sprite都以原像素尺寸顯示。如果不勾選,則所有狀態下的Sprite都會統一以這個按鈕控件(制作按鈕時所用的Sprite)的尺寸大小進行顯示。

    6.OnClick

      這是設置按鈕響應單擊事件的地方。設置按鈕響應事件時可以通過以下操作。

      將該按鈕要響應的事件函數的腳本所在的物體拖入到Notify中,然后該物體的名稱就會出現在Notify的設置框中,會自動出現該物體下所有腳本中的Public函數,然后選擇要按鈕響應的那個函數即可。

      也就是說,在這里可以讓按鈕響應任何一個物體身上的、任何一個腳本的、任何一個Public函數。

      在這里當你設置了第一個響應事件之后,會自動彈出第二個響應事件的設定,也就是說,通過這里的設置,可以讓按鈕被單擊之后響應任何多個事件。

 

制作按鈕的縮放動畫

  如果希望單擊按鈕時,按鈕會有一個縮放動畫,可以單擊AddComponent、選擇NGUI->Interaction,在里面找到ButtonScale腳本,附加到按鈕物體上。

  ButtonScale的核心作用就是控制按鈕的縮放動畫,它的設置:

    1.Script

      這個是它所調用的腳本,我們不用管,它會自動定位好。

    2.TweenTarget

      這個是它所控制的動畫作用的目標物體,我們不用管。在運行時,它會自動設定為當前所屬的按鈕物體。

    3.Hover

      當鼠標光標划過時,按鈕控件的大小變化。

    4.Pressed

      當按鈕按下時,按鈕控件的大小變化。

    5.Duration

      完成縮放動畫的時間,以秒為單位,默認為0.2秒完成。

    需要注意的是,這個組件一般只用於按鈕。

 

制作按鈕的偏移動畫

  如果希望按鈕有一個偏移動畫,例如,單擊按鈕時按鈕會向右下方蹦一下,可以為按鈕制作一個偏移動畫。選擇NGUI->Interaction->ButtonOffset,附加到按鈕上。

  ButtonOffset的設置:

    1.Hover

      按鈕在鼠標光標滑過時的位置偏移,這里偏移的是相對坐標。

    2.Pressed

      按鈕在按下時的位置偏移,這里也是相對坐標。

    3.Duration

      持續時間。

 

制作按鈕的旋轉動畫

  如果希望按鈕在被單擊時能旋轉一下,就可以為按鈕制作一個旋轉動畫,選擇NGUI->Interaction->ButtonRotation。

 

添加按鈕單擊音效

  在AddComponent中,選擇NGUI->Interaction->PlaySound附加到按鈕上。

  PlaySound的設置:

    1.AudioClicp

      音效的源文件,將音效文件拖到此處即可。

    2.Trigger

      觸發模式,就是在什么情況下觸發音效,默認為OnClick。這里給了以下幾種模式:OnClick(單擊)、OnMouseOver(鼠標光標移上來)、OnMouseOut(鼠標光標移開觸發)、OnPress(按下觸發)、OnRelease(釋放觸發)、Custom(自定義觸發,即腳本中控制觸發)。

    3.Volume

      音量大小,為0到1之間的一個浮點數。

    4.Pitch

      音調,也為0到1之前的一個浮點數。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM