作者：zzlyw
前言
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的使用效果。
上述功能非常適合做進度條、血條、時間軸等動態對象。
小結
本文詳細介紹了UGUI的Button的使用方法，並簡略說明了Image、Canvas等的基本用途，相信讀者可以舉一反三，進行後續的學習。
關於 Imagination微信號
權威發布有關Imagination公司CPU,GPU以及連接IP、無線IP最新資訊，提供有關物聯網、可穿戴、通信、汽車電子、醫療電子等應用信息，每日更新大量信息，讓你緊跟技術發展，歡迎關注！伸出小手按一下二維碼我們就是好朋友！