UGUI是Unity官方推出的新一代交互系統，與傳統的GUI相比，它具有使用靈活、界面美觀、支持個性化定制的特點。本文將會進行UGUI使用的簡單介紹，與大家一起敲開UGUI開發的大門。

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

1 Canvas

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

2 Button

2.1 生成個性化按鈕

在Hierarchy中點擊Create——UI——Button，會在Canvas下生成一個Button。

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

假設我們在Assets目錄下已經有了一個圖片，名叫music.jpg，我們需要選中它，這時候看到Inspector中如下圖。我們需要把Texture Type類型改為Sprite(2D and UI)，然后點右下方的“Apply”。

將進過類型轉換的music圖片拖動到Button控件的Image組件的SourceImage變量上，并點擊SetNativeSize。

將Button的子物體Text置為空。

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

重新設置按鈕尺寸為width=100，height=100。

可以在Button組件中設置按鈕的顏色。如圖我們將高亮時設置為黃色，按下時設置為藍色，按鈕無效時設置為灰色。

運行效果如下圖。

2.2 為按鈕添加事件響應

創建一個腳本MusicButton.cs，并自己寫一個OnClick()函數。將腳本綁定在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("按鈕被按下了！");

}

}

點擊按鈕Button組件的OnClick區的“+”，并把已經綁定了MusicButton.cs腳本的Button對象拖動到如下圖的位置。

然后點擊NoFunction下拉按鈕，選擇MusicButton的OnClick即可。

然后運行游戲，點擊圖標，就能在控制臺輸出中看到相應的信息。

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

在上面腳本的基礎上添加程序集引用

using UnityEngine.UI;

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

也可以實現同樣的效果。

3 Image

在Hierarchy視圖中，點擊Create——UI——Image，就創建了Image。它也需要一個Sprite類型的圖片。

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