【Unity 3D】图形界面GUI的讲解及在C#中实现用户登录界面的实战（附源码）

逃离我推掉我的手 2023-09-30 18:26 3阅读 0赞

> **需要源码请点赞关注收藏后评论区留言并且私信~~~**

在游戏开发过程中，游戏界面占据了非常重要的地位，玩家启动游戏的时候，首先看到的就是游戏的UI，其中包含图片、按钮和高级控件等等，UGUI和GUI是Unity 3D中最常用的两个UI系统。

## 一、GUI简介 ##

GUI是Graphical User Interface的缩写，Unity的图形界面系统能容易的快速创建出各种交互界面。游戏界面是游戏作品中不可或缺的部分，它可以为游戏提供导航，也可以为游戏内容提供重要的信息，同时是美化游戏的一种重要手段，Unity 3D内置了一套完整的GUI系统，提供了从布局、空间到皮肤的一整套GUI解决方案，可以做出各种风格和样式的GUI界面，目前Unity 3D没有提供内置的GUI可视化编辑器，因此GUI界面的制作需要全部通过编写脚本代码实现

写GUI脚本，必须注意两个重要特性

1：GUI脚本控件必须定义在脚本文件的OnGUI事件函数中

2：GUI每一帧都会调用

## 二、常用基本控件使用 ##

GUI基本控件及其含义如下

> Label 绘制文本和图片
> 
> TextField 绘制一个单行文本输入框
> 
> TextArea 绘制一个多行文本输入框
> 
> PasswordField 绘制一个密码输入框
> 
> Button 绘制一个按钮
> 
> ToolBar 创建工具栏
> 
> ToolTip 用于显示提示信息
> 
> Toggle 绘制一个开关按钮
> 
> Box 绘制一个图形框
> 
> ScrollView 绘制一个滚动视图组件
> 
> Color 渲染GUI颜色
> 
> Slider 包含水平和垂直滚动条
> 
> DragWindow 用于实现屏幕内的可拖曳窗口
> 
> Window 窗口组件 在窗口中可以添加任意组件

下面使用GUI基本控件实现一个建议的用户登录界面

效果如下 点击上方按钮可以进行颜色的切换

![69e589e954bf448589b9080bc2cc7b10.png][]

![ce903a7b991145d4a4c745e0f722d0e8.png][]

![fe689816d84445569dc0a2c87fc19951.png][]

部分代码如下

using System.Collections;
    using System.Collections.Generic;
    using UnityEngine;
    
    public class Test_16_8 : MonoBehaviour
    {
        private string userName = "";
        private string password = "";
        private string info = "";
        private bool manSex = false;
        private bool womanSex = false;
    
        Vector2 scrollPosition = Vector2.zero;
    
        int toolbarInt = 0;
        string[] toolbarStrings = { "红色", "绿色", "蓝色" };
    
        void OnGUI()
        {
            //Box组件 下面的内容放到Box组件里面
            GUI.Box(new Rect(290, 260, 300, 300), "");
            //Toolbar组件创建工具栏
            toolbarInt = GUI.Toolbar(new Rect(310, 270, 250, 30), toolbarInt, toolbarStrings);
            switch (toolbarInt)
            {
                case 0:
                    GUI.color = Color.red;
                    break;
                case 1:
                    GUI.color = Color.green;
                    break;
                case 2:
                    GUI.color = Color.blue;
                    break;
                default:
                    break;
            }
            //Label组件绘制文本
            GUI.Label(new Rect(310, 310, 70, 20), new GUIContent("用户名：", "Label组件"));
            //TextArea组件绘制输入框
            userName = GUI.TextField(new Rect(380, 310, 200, 20), userName);
            GUI.Label(new Rect(310, 330, 70, 20), new GUIContent("密码：", "Label组件"));
            //PasswordField组件绘制密码输入框
            password = GUI.PasswordField(new Rect(380, 330, 200, 20), password, '*');
            //Toggle组件绘制开关按钮
            manSex = GUI.Toggle(new Rect(310, 370, 50, 20), manSex, "男");
            womanSex = GUI.Toggle(new Rect(350, 370, 50, 20), womanSex, "女");
            GUI.Label(new Rect(310, 420, 70, 20), new GUIContent("个人简介：", "Label组件"));
            //ScrollView组件
            scrollPosition = GUI.BeginScrollView(new Rect(380, 420, 200, 100), scrollPosition, new Rect(0, 0, 200, 300));
            info = GUI.TextArea(new Rect(0, 0, 200, 300), info);
            GUI.EndScrollView();
            //Button绘制按钮
            GUI.Button(new Rect(400, 530, 50, 20), new GUIContent("保存", "Button组件"));
            //ToolTip用户显示提示信息
            GUI.Label(new Rect(480, 530, 200, 40), GUI.tooltip);
    
            //Window组件和DragWindow组件
            Rect windowRect0 = new Rect(300, 600, 120, 50);
            Rect windowRectwRect1, DoMyWindow, "Green Window");
        }
    
        private void DoMyWindow(int id)
        {
            if (GUI.Button(new Rect(10, 20, 100, 20), "可拖动窗口"))
            {
                Debug.Log("color" + GUI.color);
            }
            GUI.DragWindow(new Rect(0, 0, 10000, 10000));
        }
    }

## 三、GUILayout自动布局 ##

使用GUILayout自动布局，让每个组件的宽度和高度按照一些字体的大小进行统一计算，采取靠左对齐或者靠右对齐，一个空间占据一行的原则进行布局

下面使用默认Rect定位方式排列Label

代码如下

using System.Collections;
    using System.Collections.Generic;
    using UnityEngine;
    
    public class Test_16_9 : MonoBehaviour
    {
        void OnGUI()
        {
            GUI.Label(new Rect(0, 0, 70, 20), "你好");
            GUI.Label(new Rect(0, 20, 70, 20), "世界");
            GUI.Label(new Rect(0, 40, 70, 20), "Hello");
            GUI.Label(new Rect(0, 60, 70, 20), "World");
        }
    }

这时输出文字都是靠左对齐 不够美观

下面使用GUILayout进行自动布局

using System.Collections;
    using System.Collections.Generic;
    using UnityEngine;
    
    public class Test_16_10 : MonoBehaviour
    {
        void OnGUI()
        {
            GUILayout.BeginArea(new Rect(400, 200, 300, 400));
            GUILayout.Label("你好");
            GUILayout.Label("世界");
            GUILayout.Label("Hello");
            GUILayout.Label("World");
            GUILayout.EndArea();
        }
    }

这时输出文字会居中对齐 更加美观

**创作不易 觉得有帮助请点赞关注收藏~~~**

[69e589e954bf448589b9080bc2cc7b10.png]: https://img-blog.csdnimg.cn/69e589e954bf448589b9080bc2cc7b10.png
[ce903a7b991145d4a4c745e0f722d0e8.png]: https://img-blog.csdnimg.cn/ce903a7b991145d4a4c745e0f722d0e8.png
[fe689816d84445569dc0a2c87fc19951.png]: https://img-blog.csdnimg.cn/fe689816d84445569dc0a2c87fc19951.png