UGUI 實(shí)踐案例

在前面的幾節(jié)我們從整體上對(duì)圖形用戶界面下的各個(gè)控件進(jìn)行了詳細(xì)講解，增加了對(duì)新版的圖形用戶界面 UGUI 的了解。

新版的 UGUI 系統(tǒng)比 OnGUI 系統(tǒng)相比有了很大提升，使用起來(lái)方便，控件更加美觀，接下來(lái)我們使用 UGUI 控件開(kāi)發(fā)一個(gè)完整的游戲界面。

案例設(shè)計(jì)

本案例基于 UGUI 技術(shù)實(shí)現(xiàn)一套完整的游戲界面，該游戲界面包括界面背景、文字標(biāo)題、進(jìn)入按鈕、設(shè)置頁(yè)面等內(nèi)容，效果如下所示。

案例實(shí)施

1. 導(dǎo)入 Menu and Fonts 資源包，該資源包包含了背景圖片、按鈕、圖標(biāo)及其他游戲元素。

1. 在菜單中執(zhí)行 GameObject → UI → Image 命令，在場(chǎng)景中添加一個(gè) Image，用來(lái)顯示 Sprite texture，它繼承 Canvas。同時(shí)加載 EventSystem 負(fù)責(zé)處理場(chǎng)景中的輸入、映射和事件。

1. 在項(xiàng)目瀏覽器中打開(kāi) Menu 文件，找到 munu_background 圖片，把它拖到 Source Image 區(qū)域中，并調(diào)整大小。

1. 按照同樣的昂發(fā)在 Menu 文件中搜索 header_label 圖片，然后在菜單中執(zhí)行 GameObject → UI → Image 命令，將 header_label 拖到 Source Image 區(qū)域中，同樣對(duì)大小進(jìn)行調(diào)整。

1. 在菜單中執(zhí)行 GameObject → UI → Button 命令，在場(chǎng)景中加入一個(gè)按鈕，然后選中嵌入的 Text 元素，設(shè)置文本為 Start Game，并設(shè)定字體樣式以及字體大小。

1. 選中 Button，在 Inspector 面板中找到 Source Image，并賦予圖片，效果如下圖所示。

1. 創(chuàng)建腳本 NewBehaviourScript，編寫(xiě)代碼如下：

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

1. 腳本鏈接。創(chuàng)建空物體，將腳本鏈接到空物體上，然后在 Hierarchy 視圖中選擇創(chuàng)建好的按鈕，向下滑到 On Click 列表中，單擊加號(hào)，接下來(lái)拖動(dòng) Hierarchy 視圖中的空物體，把它添加到 Inspector 列表中，在下拉框中把它的功能設(shè)置為 No Function，最后在打開(kāi)的菜單中選擇 UIManagerScript\StartGame()，如下圖所示。

1. 創(chuàng)建一個(gè)新的 Button 控件，并將齒輪圖片賦予它，如下圖所示。

1. 新建 C# 腳本，將其命名為 setting，編寫(xiě)代碼，并鏈接到空物體上，代碼如下：

    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);
            }
        }
    }

1. 在菜單中執(zhí)行 GameObject → UI → Panel 命令，賦予背景圖片，并在其上添加 Button 控件，效果如下圖所示。

1. 將創(chuàng)建好的 panel 賦予 setting 腳本，如下圖所示。

1. 修改 NewBehaviourScript 腳本。

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

1. 隱藏 panel，然后設(shè)置 panel 下的 button 腳本鏈接，將 Back 界面跳轉(zhuǎn)函數(shù)賦予 Button，實(shí)現(xiàn)界面跳轉(zhuǎn)功能。

1. 保存場(chǎng)景，并執(zhí)行 build 命令發(fā)布，就可以自行測(cè)試了。