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

最新推荐文章于 2024-05-26 23:32:44 发布

showswoller

最新推荐文章于 2024-05-26 23:32:44 发布

阅读量2.5k

点赞数 5

分类专栏： Unity 3D 文章标签： unity c# 3d 游戏引擎 ui

本文链接：https://blog.csdn.net/jiebaoshayebuhui/article/details/128559013

版权

Unity 3D 专栏收录该内容

33 篇文章 37 订阅

订阅专栏

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

在游戏开发过程中，游戏界面占据了非常重要的地位，玩家启动游戏的时候，首先看到的就是游戏的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基本控件实现一个建议的用户登录界面

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

部分代码如下

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

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

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