.Unity3D引擎的腳本編程

3.2圖形用戶界面UGUI

.目錄.7

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

.2.圖像Image

.3.文本Text

.4.按鈕Button

.5.開關(guān)Toggle

.1

.畫布Canvas

.6.滑塊Slider

1.

畫布Canvas

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

Canvas是所有GUI的根節(jié)點(diǎn)，是承載所有UI元素的區(qū)域，所有UI元素都是Canvas的子對象。在菜單中選擇“GameObject”→“UI”→“Canvas”，即可在場景中創(chuàng)建一個Canvas。若場景中沒有EventSystem物體，這時系統(tǒng)會自動創(chuàng)建一個EventSystem。

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

圖像Image

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

操作步驟如下：

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

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

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

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

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

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

按鈕不同狀態(tài)下的貼圖效果如圖所示，可以看到按鈕未單擊、鼠標(biāo)指針經(jīng)過按鈕、單擊按鈕會呈現(xiàn)出不同的圖像樣式。5.Toggle開關(guān)

Toggle（開關(guān)）是一個復(fù)選框，用于實(shí)現(xiàn)選項的勾選/不勾選操作，適合制作開關(guān)類按鈕。默認(rèn)的Toggle由4個游戲?qū)ο蠼M成，如圖所示，包含Toggle（開關(guān)）本體、Background（背景圖像）、Checkmark（勾選圖，默認(rèn)為“

”）和Label（文本）。

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

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

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

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

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

2．添加音效控制開關(guān)

Hierarchy面板中單擊鼠標(biāo)右鍵，選擇“UI”→“Toggle”，創(chuàng)建一個Toggle類的對象，并將開關(guān)改名為Toggle_sound；

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

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

將準(zhǔn)備好的兩張圖像導(dǎo)入Assets文件夾下，并將圖像轉(zhuǎn)換成Sprite(2DandUI)貼圖類型，分別將其拖曳到對應(yīng)的“SourceImage”中，設(shè)置開關(guān)圖像如圖所示。5.Toggle開關(guān)

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

3．將MainCamera的AudioSource組件的mute（靜音）和Toggle關(guān)聯(lián)

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

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

默認(rèn)的Slider由4個游戲?qū)ο蠼M成，Slider組件如圖3-39所示，包括Slider（滑塊）本體、Background（背景圖像）、Fill（填充）和Handle（滑動柄）。

例如，在音樂開關(guān)旁邊增加一個滑塊來調(diào)節(jié)音量大小，具體操作步驟如下：

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

2．將MainCamera的AudioSource組件的volume（音量）和Slider關(guān)聯(lián)

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

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

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

制作一組技能冷卻圖標(biāo)，來講解用腳本監(jiān)聽和觸發(fā)UI交互事件。通過腳本實(shí)現(xiàn)監(jiān)聽鼠標(biāo)指針經(jīng)過、鼠標(biāo)指針離開和鼠標(biāo)單擊事件，具體操作步驟如下：

1．技能冷卻圖標(biāo)界面

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

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

通過腳本實(shí)現(xiàn)監(jiān)聽鼠標(biāo)指針經(jīng)過、鼠標(biāo)指針離開和鼠標(biāo)單擊事件，具體操作步驟如下：2.編寫腳本：實(shí)現(xiàn)鼠標(biāo)指針經(jīng)過技能冷卻圖標(biāo)時顯示綠色邊框，鼠標(biāo)指針離開時綠色邊框消失的效果。

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

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