UI系统-GUI

最新推荐文章于 2024-04-22 21:05:34 发布

Hypocrisy...

最新推荐文章于 2024-04-22 21:05:34 发布

阅读量1.1k

点赞数 31

文章标签： ui

本文链接：https://blog.csdn.net/qq_62622514/article/details/136282409

版权

概述

什么是UI？

UI是User Interface（用户界面）的简称，例如游戏中的登录注册背包小地图人物等等功能面板，游戏中最多的逻辑功能就是和UI相关的功能。Unity中的UI系统可以理解成他给我们提供的制作UI功能的手段

主要内容

UI控件的使用

UI控件的事件响应

UI的分辨率自适应

工作原理和主要作用

GUI是什么

全称即时模式游戏用户交互界面(IMGUI)
在Unity中一般简称为GUI
它是一个代码驱动的UI系统

GUI主要作用

1.作为程序员的调试工具，创建游戏内调试工具
2.为脚本组件创建自定义检视面板
3.创建新的编辑器窗口和工具以拓展Unity本身(一般用作内置游戏工具）

注意：一般不用GUI来为玩家制作UI功能（若为玩家制作UI在，运行游戏才能看到UI面板，开发效率低，因为他是代码驱动的UI系统）

GUI工作原理

在继承于MonoBehavior的脚本中的特殊函数里，调用GUI提供的方法，类似于生命周期函数：

OnGUI

在其中写GUI相关的代码就可以显示GUI内容，

注意：

该函数是每帧执行的，相当于专门用于绘制GUI界面的函数

一般只在其中执行GUI相关界面的绘制和操作逻辑

该函数在Ondisable之前，LateUpdate之后执行

只要继承了Mono脚本都可以在OnGUI中绘制GUI

重要参数和文本及按钮

GUI控件绘制的共同特点

1.他们都是GUI公共类中提供的静态函数直接调用即可
2.他们的参数都大同小异
位置参数:Rect参数：xy位置 w h尺寸
显示文本:string参数
图片信息:Texture参数
综合信息:GUIContent参数
自定义样式:GUIstyle参数
3.每一种控件都有多种重载，都是各个参数的排列组合
必备的参数内容是位置信息和显示信息

文本控件（Label）

GUIContent中可以存放图片文字等信息（其中Tooltip不显示，为隐藏的提示信息），可以作为第二个参数，同时显示文字和图片（图片在左文字在右）

    public Texture tex;
    public Rect rect;
    public Rect rect1;
    public GUIContent content;
    public GUIStyle style;
    private void OnGUI()
    {
        //基本显示
        GUI.Label(new Rect(0, 0, 100, 20),"GUI", style);
        GUI.Label(rect, tex);
        //综合使用
        GUI.Label(rect1, content);
        //通过当前鼠标选中的GUI控件获取对应的 tooltip信息
        Debug.Log(GUI.tooltip);
    }

自定义样式：

加上第三个参数GUIStyle，具体功能如下：

按钮控件（Button）

    public Rect bntRect;
    public GUIContent bntcontent;
    public GUIStyle bntstyle;
    private void OnGUI()
    {
        //按下再抬起算一次点击
        if (GUI.Button(bntRect, bntcontent, bntstyle)) 
        {
            Debug.Log("Click");
        }
        //长按按钮，按下就算点击
        if (GUI.RepeatButton(bntRect, bntcontent))
        {
            Debug.Log("Long Click");
        }
    }

多选框和单选框

单选框

多个选项只能选一个，选一个其他就取消选中
实现方法：加入一个Private int 用来表示哪个选项被选中了：

private int nowSelIndex = 1;
...

if(GUI.Toggle(new Rect(0, 100, 100, 30), nowSelIndex == 1, "选项一"))
{
    nowSelIndex = 1;
}
if(GUI.Toggle(new Rect(0, 140, 100, 30), nowSelIndex == 2, "选项一"))
{
    nowSelIndex = 2;
}
if(GUI.Toggle(new Rect(0, 180, 100, 30), nowSelIndex == 3, "选项一"))
{
    nowSelIndex = 3;
}

多选框

style中normal表示未选中状态图标，on normal表示选中状态下的图标

isSel1 = GUI.Toggle(new Rect(0, 0, 100, 30), isSel1, "效果开关");
isSel2 = GUI.Toggle(new Rect(0, 40, 100, 30), isSel2, "音效开关", style);

输入框和拖动条

输入框

普通输入

private string inputStr = "";
...
inputStr = GUI.TextField(new Rect(0, 0, 100, 30), inputStr);

密码输入

最后一个参数为输入后变成的字符

private string inputPW = "";
...
inputPW = GUI.PasswordField(new Rect(0, 50, 100, 30), inputPW, '*');

拖动条

水平拖动条

最后三个参数分别是：当前值，最小值，最大值，再后面的三个参数是调整拖动条样式用的

private float nowValue = 0.5f;
...
nowValue = GUI.HorizontalSlider(new Rect(0, 100, 100, 50), nowValue, 0, 1);

竖直拖动条

private float nowValue1 = 0.5f;
...
nowValue1 = GUI.VerticalSlider(new Rect(0,150,50,100),nowValue1, 0, 1);

图片绘制和框

图片绘制

参数1：位置，参数2：图片，参数3：拉伸方式，参数4：是否透明，参数5：自定义宽高比（一般不改，保持原图宽高比，默认为0）

其中拉伸方式有三种

ScaleAndcrop:保持图片宽高比但会进行裁剪
StretchToFill:始终填充满你传入的 Rect范围，图片会变形
ScaleToFit:会自动根据宽高比进行计算不会拉变形会一直保持图片完全显示的状态

public Rect texPos;
public Texture tex;
public ScaleMode mode = ScaleMode.StretchToFill ;
public bool alpha;
public float wh = 0;
private void OnGUI()
{
    GUI.DrawTexture(texPos, tex,mode,alpha,wh);
}

框

半透明的框

GUI.Box(texPos, "123");

工具栏和选择网格

工具栏

    private int toolbarIndex = 0;
    private string[] toolbarInfos = new string[] { "选项一", "选项二", "选项三" };
    private void OnGUI()
    {
        toolbarIndex = GUI.Toolbar(new Rect(0, 0, 200, 30), toolbarIndex, toolbarInfos);
        switch (toolbarIndex)
        {
            case 0:
                break;
            case 1:
                break;
            case 2:
                break;
            default:
                break;
        }
    }

选择网格

相比于工具栏多了一个参数，表示水平方向最多显示的按钮数量

selGrindIndex = GUI.SelectionGrid(new Rect(0, 50, 200, 60), selGrindIndex, toolbarInfos,2);

滚动列表和分组

    public Rect groupPos;

    public Rect scPos;//显示框的大小
    public Rect showPos;//总的内容范围大小

    private Vector2 nowPos;//当前显示框所在的位置
    private string[] strs = new string[]{ "123","234","222","111"};
    private void OnGUI()
    {
        //分组
        GUI.BeginGroup(groupPos);
        GUI.Button(new Rect(0, 0, 100, 50), "Test");
        GUI.Label(new Rect(0, 60, 100, 20), "Label");
        GUI.EndGroup();
        //滚动列表
        nowPos = GUI.BeginScrollView(scPos, nowPos, showPos);
        GUI.Toolbar(new Rect(0, 0, 300, 50), 0, strs);
        GUI.Toolbar(new Rect(0, 60, 300, 50), 0, strs);
        GUI.Toolbar(new Rect(0, 120, 300, 50), 0, strs);
        GUI.Toolbar(new Rect(0, 180, 300, 50), 0, strs);
        GUI.EndScrollView();
    }

窗口

第一个参数表示窗口id，id可以区分不同窗口，在委托函数中可以通过id来区分不同窗口做出不同响应，第二个参数位置大小，第三个参数是委托函数，第四个参数是标题

    private void OnGUI()
    {
        GUI.Window(1, new Rect(100, 100, 200, 150), DrawWindow, "TestWindow1");
        GUI.Window(2, new Rect(100, 100, 200, 150), DrawWindow, "TestWindow2");
    }
    private void DrawWindow(int id)
    {
        switch(id)
        {
            case 1:
                GUI.Button(new Rect(0, 0, 100, 50),"b1");
                break;
            case 2:
                GUI.Button(new Rect(0, 0, 100, 50), "b2");
                break;

        }
    }

模态窗口：

GUI.ModalWindow(3, new Rect(300, 100, 200, 150), DrawWindow, "TestWindow3");

模态窗口出现后会将其他所有窗口都失效，无法点击

拖动窗口：

dragWindowPos = GUI.Window(4, dragWindowPos, DrawWindow, "TestWindow4");

注意要在委托函数中加入

GUI.DragWindow();

才能拖动，GUI.DragWindow()中可以填入参数，参数为鼠标选中哪些范围才能被拖动，不填则默认无参点击窗口任意位置都能拖动窗口

自定义皮肤

全局颜色

全局颜色设置

相当于颜色叠加，不需要之前改成GUI.color = Color.white

        GUI.color = Color.red;
        GUI.Label(new Rect(0, 0, 100, 50), "Label");
        GUI.Button(new Rect(50, 50, 100, 50), "Button");
        GUI.color= Color.white;
        GUI.Button(new Rect(100, 100, 100, 50), "Button",bntStyle);

文字颜色设置（会和全局颜色相乘）

GUI.contentColor = Color.yellow;

背景颜色设置（会和全局颜色相乘）

GUI.backgroundColor = Color.red;

整体皮肤样式

skin可以设置整套GUIStyle，比单个设置样式方便，但是假如使用了skin但是还在控件上加上了style还是会按照加上的style来显示

在资源管理器中可以右键新建GUIskin，在其中可以设置各种控件的样式，可以在类中声明一个public的GUIskin后将需要的skin拖入既使用

GUI.skin = null;//不显示

GUILayout自动布局

主要用于进行编辑器开发，如果用它来做游戏UI不太合适

        GUILayout.BeginArea(new Rect(100, 100, 100, 100));//可见范围
        GUILayout.BeginHorizontal();//水平布局，不设置默认为竖直
        GUILayout.Button("123",GUILayout.Width(200));
        GUILayout.Button("1234");
        GUILayout.Button("12345", GUILayout.ExpandWidth(false));
        GUILayout.EndHorizontal();
        GUILayout.EndArea();

        //控件的固定宽高
        GUILayout.Width(300);
        GUILayout.Height(200);
        //允许控件的最小宽高
        GUILayout .MinWidth(50);
        GUILayout.MinHeight(50);
        //允许控件的最大宽高
        GUILayout.MaxWidth(100);
        GUILayout.MaxHeight(100);
        //允许或禁止水平拓展
        GUILayout.ExpandWidth(true);
        //允许
        GUILayout.ExpandHeight(false);
        //禁上
        GUILayout.ExpandHeight(true);
        //允许
        GUILayout.ExpandWidth(false);
        //禁止