Unity 3D UGUI實例演示

在前面的幾節我們從整體上對圖形用戶界面下的各個控件進行詳細講解，使我們對新版的圖形用戶界面 UGUI 有了更深的瞭解，新版的 UGUI 系統比 OnGUI 系統相比有了很大提升，使用起來方便，控件更加美觀，接下來我們使用 UGUI 控件開發一個完整的遊戲界面。

實踐案例：遊戲界面開發

案例構思

Unity 3D 新增的圖形用戶界面系統 UGUI 與舊版的 GUI 系統相比更加人性化，而且是一個開源的系統。本案例旨在利用 UGUI 控件開發完整的遊戲界面。

案例設計

本案例基於 UGUI 技術實現一套完整的遊戲界面，其中包括界面背景、文字標題、進入按鈕、設置頁面等內容，效果如下圖所示。

案例實施

步驟 1)：導入 Menu and Fonts 資源包，這個包包含背景圖片、按鈕、圖標或者其他的遊戲元素，如下圖所示。

步驟 2)：在菜單中執行 GameObject→UI→Image 命令，在場景中添加一個 Image，用來顯示 Sprite texture，它繼承 Canvas。同時加載 EventSystem 負責處理場景中的輸入、映射和事件。

步驟 3)：在項目瀏覽器中打開 Menu 文件，找到 menu_background 圖片，把它拖到 Source Image 區域中，並調整合適大小，屬性面板和添加效果如下圖所示

步驟 4)：按照同樣的方法在 Menu 文件中搜索 header_label 圖片，然後在菜單中執行 GameObject→UI→Image 命令，將 header_label 拖到 Source Image 區域中，並調整合適大小，如下圖所示。

步驟 5)：在菜單中執行 GameObject→UI→Button 命令，在場景中加入一個按鈕，然後選中嵌入的 Text 元素，設置文本爲 Start Game，並設定字體樣式以及字體大小，如下圖所示。

步驟 6)：選中 Button，在 Inspector 面板中找到 Source Image，並賦予圖片，效果如下圖所示。

步驟 7)：創建腳本 NewBehaviourScript，編寫代碼如下：

using UnityEngine;using System.Collections;public class NewBehaviourScript:MonoBehaviour{    public void StartGame(){        Application.LoadLevel("RocketMouse");    }}

步驟 8)：腳本鏈接。創建空物體，將腳本鏈接到空物體上，然後在 Hierarchy 視圖中選擇創建好的按鈕，向下滑到 On Click 列表中，單擊加號，接下來拖動 Hierarchy 視圖中的空物體，把它添加到 Inspector 列表中，在下拉框中把它的功能設置爲 No Function，最後在打開的菜單中選擇 UIManagerScript\StartGame()，如下圖所示。

步驟 9)：創建一個新的 Button 控件，並將齒輪圖片賦予它，如下圖所示。

步驟 10)：新建 C# 腳本，將其命名爲 setting，編寫代碼，並鏈接到空物體上，代碼如下：

using UnityEngine;using System.Collections;public class setting:MonoBehaviour{    public GameObject panel;    private bool isclick=false;    void playRenwu(bool isnotclick){        panel.gameObject.SetActive(isnotclick);    }    public void Onclickbutton(){        if(isclick==false){            isclick=true;            playRenwu(true);        }else{            isclick=false;            playRenwu(false);        }    }}

步驟 11)：在菜單中執行 GameObject→UI→Panel 命令，賦予背景圖片，並在其上添加 Button 控件，效果如下圖所示。

步驟 12)：將創建好的 panel 賦予 setting 腳本，如下圖所示。

步驟 13)：修改 NewBehaviourScript 腳本。

using UnityEngine;using System.Collections;public class NewBehaviourScript:MonoBehaviour{    public void StartGame(){        Application.LoadLevel("RocketMouse");    }    public void Back(){        Application.LoadLevel("menu");    }}

步驟 14)：隱藏 panel，然後設置 panel 下的 button 腳本鏈接，將 Back 界面跳轉函數賦予 Button，實現界面跳轉功能。

步驟 15)：保存場景，並執行 build 命令發佈，最終測試效果如下圖所示。