UGUI是Unity官方推出的新一代交互系統(tǒng)，與傳統(tǒng)的GUI相比，它具有使用靈活、界面美觀、支持個(gè)性化定制的特點(diǎn)。本文將會(huì)進(jìn)行UGUI使用的簡(jiǎn)單介紹，與大家一起敲開UGUI開發(fā)的大門。

說到底，UGUI還是一種UI系統(tǒng)，目的就是幫助用戶更好地與軟件進(jìn)行交互。本文將介紹canvas、image、button等。當(dāng)學(xué)會(huì)了使用button和image等控件后，其他的也就可以舉一反三地進(jìn)行自學(xué)了。

1 Canvas

Canvas是畫布的意思，通俗來講，UGUI的所有控件如button等都要擺放在畫布上。在Hierarchy中，button、image等控件都是Canvas的子物體。在Hierarchy中點(diǎn)擊Create——UI——Canvas，會(huì)生成一個(gè)畫布，同時(shí)生成一個(gè)EventSystem。

2 Button

2.1 生成個(gè)性化按鈕

在Hierarchy中點(diǎn)擊Create——UI——Button，會(huì)在Canvas下生成一個(gè)Button。

該Button有一個(gè)image組件和一個(gè)Button組件，改變Image組件的Source Image可以改變Button的外觀。而我們需要為其選擇一個(gè)UISprite型圖片。

假設(shè)我們?cè)贏ssets目錄下已經(jīng)有了一個(gè)圖片，名叫music.jpg，我們需要選中它，這時(shí)候看到Inspector中如下圖。我們需要把Texture Type類型改為Sprite(2D and UI)，然后點(diǎn)右下方的“Apply”。

將進(jìn)過類型轉(zhuǎn)換的music圖片拖動(dòng)到Button控件的Image組件的SourceImage變量上，并點(diǎn)擊SetNativeSize。

將Button的子物體Text置為空。

然后就可以看到游戲中如下的按鈕了。

重新設(shè)置按鈕尺寸為width=100，height=100。

可以在Button組件中設(shè)置按鈕的顏色。如圖我們將高亮?xí)r設(shè)置為黃色，按下時(shí)設(shè)置為藍(lán)色，按鈕無效時(shí)設(shè)置為灰色。

運(yùn)行效果如下圖。

2.2 為按鈕添加事件響應(yīng)

創(chuàng)建一個(gè)腳本MusicButton.cs，并自己寫一個(gè)OnClick()函數(shù)。將腳本綁定在Button上。

using UnityEngine;

using System.Collections;

public class MusicButton : MonoBehaviour {

// Use this for initialization
void Start () {

}

// Update is called once per frame
void Update () {

}

public void OnClick()

{

Debug.Log("按鈕被按下了！");

}

}

點(diǎn)擊按鈕Button組件的OnClick區(qū)的“+”，并把已經(jīng)綁定了MusicButton.cs腳本的Button對(duì)象拖動(dòng)到如下圖的位置。

然后點(diǎn)擊NoFunction下拉按鈕，選擇MusicButton的OnClick即可。

然后運(yùn)行游戲，點(diǎn)擊圖標(biāo)，就能在控制臺(tái)輸出中看到相應(yīng)的信息。

另一種為按鈕添加事件響應(yīng)的方法是僅僅使用腳本，不使用拖拽的方式。

在上面腳本的基礎(chǔ)上添加程序集引用

using UnityEngine.UI;

在Start()函數(shù)中添加
transform.GetComponent().onClick.AddListener(OnClick);

也可以實(shí)現(xiàn)同樣的效果。

3 Image

在Hierarchy視圖中，點(diǎn)擊Create——UI——Image，就創(chuàng)建了Image。它也需要一個(gè)Sprite類型的圖片。

它有一個(gè)比較重要的參數(shù)是ImageType，其中有四種，最常用的是Simple和Filled。所以，我們以Filled為例，展示image的使用效果。