UGUI 實(shí)踐案例

2020-07-11 17:34 更新

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

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

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

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

案例實(shí)施

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

  1. 在菜單中執(zhí)行 GameObjectUIImage 命令,在場景中添加一個 Image,用來顯示 Sprite texture,它繼承 Canvas。同時(shí)加載 EventSystem 負(fù)責(zé)處理場景中的輸入、映射和事件。

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

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

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

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

  1. 創(chuàng)建腳本 NewBehaviourScript,編寫代碼如下:

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

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

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

  1. 新建 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);
            }
        }
    }

  1. 在菜單中執(zhí)行 GameObjectUIPanel 命令,賦予背景圖片,并在其上添加 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. 保存場景,并執(zhí)行 build 命令發(fā)布,就可以自行測試了。
以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號