第3章　Unity3D引擎的腳本編程-3.2圖形用戶(hù)界面UGUI

.Unity3D引擎的腳本編程

3.2圖形用戶(hù)界面UGUI

.目錄.7

.用腳本來(lái)控制UI元素的交互

.2.圖像Image

.3.文本Text

.4.按鈕Button

.5.開(kāi)關(guān)Toggle

.1

.畫(huà)布Canvas

.6.滑塊Slider

1.

畫(huà)布Canvas

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

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

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

圖像Image

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

操作步驟如下：

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

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

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

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

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

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

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

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

”）和Label（文本）。

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

1．在場(chǎng)景中添加背景音樂(lè)

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

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

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

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

Hierarchy面板中單擊鼠標(biāo)右鍵，選擇“UI”→“Toggle”，創(chuàng)建一個(gè)Toggle類(lèi)的對(duì)象，并將開(kāi)關(guān)改名為T(mén)oggle_sound；

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

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

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

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

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

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

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

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

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

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

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

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

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

Button、Toggle、Slider元素都是交互類(lèi)的UI元素?？赏ㄟ^(guò)組件自帶的腳本控制交互操作，也可編寫(xiě)腳本來(lái)靈活控制UI元素的交互。

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

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

Hierarchy面板中單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“CreateEmpty”，創(chuàng)建一個(gè)空物體，將其改名為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個(gè)圖像對(duì)象，分別對(duì)應(yīng)icon冷卻圖標(biāo)、buffer蒙版和frame圖標(biāo)邊框。將準(zhǔn)備好的3張圖像拖曳到對(duì)應(yīng)的“SourceImage”中，并按順序疊放，技能冷卻圖標(biāo)界面如圖所示。設(shè)置buffer的Image屬性，將圖像類(lèi)型設(shè)置成Filled，選擇360度填充，從頂部開(kāi)始。將frame對(duì)象設(shè)置為不可見(jiàn)：在其Inspector面板中，將取消其名字前的復(fù)選框。7. 用腳本來(lái)控制UI元素的交互

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

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

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