深入理解Unity GUI图形用户界面

本博客通过脚本实现创建GUI控件、实例化、定位、输出。

一、设置场景

1、File-〉New Scene，创建一个新场景，保存命名为Menu

2、主菜单-〉Assets-〉Create-〉C#，创建一个脚本文件，重命名为Menu。

3、在Project面板中双击该脚本文件，打开Microsoft Visual Studio编辑环境，输入代码

public class Menu : MonoBehaviour 
 {   void OnGUI()
    {   if (GUI.Button(new Rect(10, 10, 150, 100),"I am a button"))
                     print("You clicked the button!");
     }
 }

4、在Project-〉Assets中选择Menu脚本对象，将其拖拽到Hierarchy面板中的Main Camera摄像机对象上，使脚本对象与游戏对象关联。

如果失败，检查脚本文件名与cs中的主函数名是否一致，创建cs文件时默认的主文件名会与脚本文件名一致，但后面可能会修改脚本文件名，此时要相应修改主文件名；cs文件如果有错误，也不能建立关联，此时查看console中的错误提示信息。

5、运行，Game视图中出现了一个标题为“I am a button”的按钮组件，单击该按钮，在底部工具栏Console控制台面板输出“You clicked the botton!”结果

6、使用Rect()函数添加背景盒子

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class Menu : MonoBehaviour
{
    void OnGUI()
    {
        if (GUI.Button(new Rect(10, 10, 150, 100), "I am a button"))
        {
            print("You clicked the button!");
        }
        GUI.Box(new Rect(200, 0, 100, 200), "背景盒子");
        if (GUI.Button(new Rect(210, 40, 80, 20), "按钮1"))
        {
            print("button1");
        }
        if (GUI.Button(new Rect(210, 80, 80, 20), "按钮2"))
        {
            print("button2");
        }
        if (GUI.Button(new Rect(210, 120, 80, 20), "按钮n"))
        {
            print("button N");
        }
    }

}

7、设置屏幕的宽度和高度

Rect（）定义了4个 对应屏幕空间像素单位的Integer值属性，分别对应左、顶、宽、高

二、GUI Style的设置

GUIStyle，包含了许多属性，都是对控件（control）的风格定义，添加GUISkin类

1、在Project视图中Assets所在行点击create->GUI Skin 。创建一个GUI Skin，命名为skin1。在Inspector视图中设置每个控件的Style的各参数。

2、在public class Menu_simple: MonoBehaviour中加入：public GUISkin skin; （必须在函数中的第一行，运行时自动编译，在该脚本关联的Main Camera的Inspector下方出现skin选取按钮。）

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class Menu : MonoBehaviour
{

    public GUISkin skin;

    void OnGUI()
    {
        GUI.skin = skin;
        if (GUI.Button(new Rect(10, 10, 150, 100), "I am a button"))
        {
            print("You clicked the button!");
        }
        GUI.Box(new Rect(200, 0, 100, 200), "背景盒子");
        if (GUI.Button(new Rect(210, 40, 80, 20), "按钮1"))
        {
            print("button1");
        }
        if (GUI.Button(new Rect(210, 80, 80, 20), "按钮2"))
        {
            print("button2");
        }
        if (GUI.Button(new Rect(210, 120, 80, 20), "按钮n"))
        {
            print("button N");
        }
        GUI.Button(new Rect(0, 0, 80, 20), "左上");
        GUI.Button(new Rect(0, Screen.height - 20, 80, 20), "左下");
        GUI.Button(new Rect(Screen.width - 80, 0, 80, 20), "右上");
        GUI.Button(new Rect(Screen.width - 80, Screen.height - 20, 80, 20), "右下");

        
    }

}

2、在 void OnGUI()中加入：GUI.skin = skin;此时，出现GUI Skin控件

在前面Menu_simple.cs已经关联的Main Camera摄像机对象上，Inspetor视窗的下方的Menu（Script）的参数设置中就出现skin。

3、导入Unity自带的Skin包

导入Techno_Blue_GUI_Skin.unitypackage、Modern_GUI_Skin.unitypackage、Black_Metal_GUI_skin.unitypackage

3、导入后，在Assets中生成4个目录

BlackMetal UI、Scenes（都由 Black Metal GUI skin.unitypackage生成 ）Modern_GUI_Skin、Techno Blue UI

一定记得删掉每个目录下的Demo子目录，否则多个Demo冲突

4、更改GUI的样式

点击右下角skin右边的多选框最右边的圆圈，在左上角会出现“Select GUI Skin”窗口，增加了BlackMetal_GUISkin_black、BlackMetal_GUISkin_red、Modern GUISkin、Techno Blue GUI Skin四个选项。分别点击，看看各按钮的样式的变化。

5、在脚本中自定义一个GUIStyle

		GUIStyle style = new GUIStyle();
        style.fontSize = 50;
        style.fontStyle = FontStyle.Bold;
        style.alignment = TextAnchor.UpperLeft;
        GUILayout.Label("字符串出现在左上角",style);//显示出来在左上角，字体大小为50，粗体

三、总结

用OnGUI（）函数来调用UnityGUI控件

• OnGUI（）包含在脚本组件中，和同样包含在其中的Update（）函数一样，当脚本组件被激活时，在运行的每一帧中都会被调用
• GUI控件的声明需要包含三个必要的关键信息：
  Type（Position，Content）
• Type类型为GUI的函数，完成各种功能。常见类型有：
  Botton按钮、Label标签、RepeatButton重复按钮、TextFeld文本域、TextArea文本区域、Taggle开关、Toolbar工具栏等
• Position定位，定位参数由Rect（）函数生成。Rect（）定义了4个 对应屏幕空间像素单位的Integer值属性，分别对应左、顶、宽、高
• Content内容，在空间中实际显示的内容