.Unity3D引擎的腳本編程

3.2圖形用戶界面UGUI

.目錄.7

.用腳本來控制UI元素的交互

.2.圖像Image

.3.文本Text

.4.按鈕Button

.5.開關Toggle

.1

.畫布Canvas

.6.滑塊Slider

1.

畫布Canvas

圖形用戶界面（GraphicalUserInterface，GUI）是游戲中重要的組成部分之一。

Canvas是所有GUI的根節點，是承載所有UI元素的區域，所有UI元素都是Canvas的子對象。在菜單中選擇“GameObject”→“UI”→“Canvas”，即可在場景中創建一個Canvas。若場景中沒有EventSystem物體，這時系統會自動創建一個EventSystem。

創建畫布如圖所示，Scene面板中的白色矩形就是畫布。2.

圖像Image

以添加背景圖像為例，講解Image的使用方法。

操作步驟如下：

（1）在Hierarchy面板中單擊鼠標右鍵，選擇“UI”→“Image”，創建一個Image類的對象，其會被自動添加到Canvas下，與Canvas形成父子關系；將其改名為Background。；（2）添加背景圖像：將準備好的背景圖像拖曳到Inspector面板下Background中的Image組件的SourceImage字段中；將圖像的PosX、PosY、PosZ值均設為0，圖像出現在畫布的中心位置；（3）調整背景圖像，使圖像平鋪滿整個畫布；可在Inspector面板的Background中單擊“SetNativeSize”按鈕，調整圖像和Canvas屬性，將圖像的大小設置為1920×548。修改Canvas的CanvasScaler組件，將縮放模式設置成ScaleWithScreenSize，參考尺寸設置為1920×548。3.文本Text

文本是UI中很常見的組件，在Hierarchy面板中單擊鼠標右鍵，選擇“UI”→“Text”，創建一個Text類的對象，其會被自動添加到Canvas下。Text組件如圖所示，在Inspector面板中的Text中，可輸入需要顯示的文字，設置字體、大小、對齊方式、顏色等。4.按鈕Button

在圖形用戶界面中，按鈕是交互性很強的控件，按鈕響應單擊事件，如常用的確定按鈕和取消按鈕。在Hierarchy面板中單擊鼠標右鍵，選擇“UI”>“Button”，創建一個Button類的對象，其自動添加到Canvas之下。Button控件默認包括一個文本控件Text，用來顯示按鈕上的文字，Text元素是可選的，若按鈕是以圖像的形式呈現，則可刪除此Text元素。例如，在背景中添加一個“確定”按鈕，通過圖像切換呈現按鈕的不同狀態。

具體操作步驟如下：（1）在Hierarchy面板中單擊鼠標右鍵，選擇“UI”→“Button”，創建一個Button類的對象，將按鈕改名為ComformBt，并調整按鈕的大小和位置。（2）將已準備好的圖像導入到Assets文件夾下，精靈圖像的處理如圖所示。將TextureType設置成Sprite(2DandUI)、SpriteMode設置成Multiple后，單擊“SpriteEditor”按鈕，再單擊“Slice”按鈕，將圖像分割成多張獨立的圖像，并將分割后的圖像應用在按鈕上。4.按鈕Button

例如，在背景中添加一個“確定”按鈕，通過圖像切換呈現按鈕的不同狀態。

具體操作步驟如下：（3）如圖所示，將4種狀態的按鈕圖像分別拖曳到Button組件對應位置。

按鈕不同狀態下的貼圖效果如圖所示，可以看到按鈕未單擊、鼠標指針經過按鈕、單擊按鈕會呈現出不同的圖像樣式。5.Toggle開關

Toggle（開關）是一個復選框，用于實現選項的勾選/不勾選操作，適合制作開關類按鈕。默認的Toggle由4個游戲對象組成，如圖所示，包含Toggle（開關）本體、Background（背景圖像）、Checkmark（勾選圖，默認為“

”）和Label（文本）。

例如，在場景中添加音樂開關，控制背景音樂的播放與停止，具體操作步驟如下：

1．在場景中添加背景音樂

Hierarchy面板中選中“MainCamera”，Inspector面板中單擊“AddComponent”按鈕，添加AudioSource和AudioListener組件；

Project面板中，將Assets中的音樂拖曳到Inspector面板中的“AudioClip”處，勾選“PlayOnAwake”復選框，如圖所示。5.Toggle開關

例如，在場景中添加音樂開關，控制背景音樂的播放與停止，具體操作步驟如下：

2．添加音效控制開關

Hierarchy面板中單擊鼠標右鍵，選擇“UI”→“Toggle”，創建一個Toggle類的對象，并將開關改名為Toggle_sound；

調整開關大小和位置。本例中使用圖像來制作開關，不需要文本組件，因此刪除開關下的Label對象。

Hierarchy面板中選中“Toggle_sound”，取消選中Toggle組件中的“IsOn”復選框。

將準備好的兩張圖像導入Assets文件夾下，并將圖像轉換成Sprite(2DandUI)貼圖類型，分別將其拖曳到對應的“SourceImage”中，設置開關圖像如圖所示。5.Toggle開關

例如，在場景中添加音樂開關，控制背景音樂的播放與停止，具體操作步驟如下：

3．將MainCamera的AudioSource組件的mute（靜音）和Toggle關聯

Hierarchy面板中選中“Toggle_sound”，在Inspector面板中Toggle組件的OnValueChanged(Boolean)下面單擊“+”按鈕添加新事件。

將MainCamera對象拖曳到RuntimeOnly下方，然后在NoFunction下拉列表中選擇“AudioSource”→“(Dynamicbool)mute”。創建并關聯事件如圖所示。運行游戲，單擊開關按鈕并嘗試打開和關閉音樂。添加了音樂控制開關按鈕的場景圖狀態如圖所示。6.滑塊Slider

默認的Slider由4個游戲對象組成，Slider組件如圖3-39所示，包括Slider（滑塊）本體、Background（背景圖像）、Fill（填充）和Handle（滑動柄）。

例如，在音樂開關旁邊增加一個滑塊來調節音量大小，具體操作步驟如下：

1．設置Slider將Slider改名為Slider_volume，并調整其位置及大小，將滑塊移動到音樂開關按鈕右側。為滑塊的每個部分設置相應的圖像：分別選擇Background、Fill、Handle，將準備的3張圖像拖曳到對應的“SourceImage”屬性框中。

2．將MainCamera的AudioSource組件的volume（音量）和Slider關聯

Hierarchy面板中選中“Slider_volume”，在Inspector面板中Slider組件的OnValueChanged(Single)下面單擊“+”按鈕添加新事件。

將MainCamera對象拖曳到RuntimeOnly下方，然后在NoFunction下拉列表中選擇“AudioSource”→“(Dynamicbool)volume”。創建并關聯事件如圖所示。7. 用腳本來控制UI元素的交互

Button、Toggle、Slider元素都是交互類的UI元素。可通過組件自帶的腳本控制交互操作，也可編寫腳本來靈活控制UI元素的交互。

制作一組技能冷卻圖標，來講解用腳本監聽和觸發UI交互事件。通過腳本實現監聽鼠標指針經過、鼠標指針離開和鼠標單擊事件，具體操作步驟如下：

1．技能冷卻圖標界面

Hierarchy面板中單擊鼠標右鍵，在彈出的快捷菜單中選擇“CreateEmpty”，創建一個空物體，將其改名為Bar。選中“Bar”，單擊鼠標右鍵，在彈出的快捷菜單中選擇“UI”→“Image”，創建圖像，將其改名為Background并添加到Bar之下；將準備好的圖像拖曳到Background的“SourceImage”中，作為背景圖像；調整Background的大小和位置。選中“Bar”，單擊鼠標右鍵，在彈出的快捷菜單中選擇“CreateEmpty”，創建空物體，將其改名為item；

在item之下，新建3個圖像對象，分別對應icon冷卻圖標、buffer蒙版和frame圖標邊框。將準備好的3張圖像拖曳到對應的“SourceImage”中，并按順序疊放，技能冷卻圖標界面如圖所示。設置buffer的Image屬性，將圖像類型設置成Filled，選擇360度填充，從頂部開始。將frame對象設置為不可見：在其Inspector面板中，將取消其名字前的復選框。7. 用腳本來控制UI元素的交互

通過腳本實現監聽鼠標指針經過、鼠標指針離開和鼠標單擊事件，具體操作步驟如下：2.編寫腳本：實現鼠標指針經過技能冷卻圖標時顯示綠色邊框，鼠標指針離開時綠色邊框消失的效果。

Project面板中，選擇“Assets”→“Scripts”文件夾，單擊鼠標右鍵，在彈出的快捷菜單中選擇“Create”→“C#Script”，新建腳本文件BarCtrl.cs。。本實例要監聽鼠標指針經過、鼠標指針離開和鼠標單擊事件，腳本需繼承對應的事件監聽接口IPointerEnterHandler、IPointerExitHandler、IPointerClickHandler

。腳本中需要重寫接口中的事件處理函數OnPointerEnter、OnPointerExit、OnPointerClick。3．實現技能冷卻效果技能冷卻就是用腳本控制buffer對象，當單擊圖標時，將buffer對象中的FillAmount屬性值從1逐漸減到0。腳本中增加變量speed，用于控制圖像填充的速度；變量img用來存放將要修改屬性的圖像對象。動態修改buffer對象中的FillAmount值，此段代碼放在Update()函數中。游戲每運行一幀，FillAmount值遞減一次，直到FillAmount值為0