UI系统-GUI

概述

什么是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);
        //禁止

总结

优点:简单快捷,代码控制

缺点:重复工作量繁多,控件绘制相关代码很多

最大缺点:必须运行时才能去查看结果,不支持分辨率自适应

主要用处:用于进行unity内置编辑器、调试工具、编辑工具等等相关开发,一般不用来做游戏UI

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值