GUI学习笔记

一.概述

  IMGUI(即时模式游戏用户交互界面)一般简称GUI,是代码驱动的UI系统,主要作为程序员的调试工具、为脚本创建自定义检视面板、创建新的编辑器窗口和工具以拓展Unity等,不会用于制作与玩家交互的界面。在继承MonoBehaviour的脚本中调用调用GUI提供的方法,在OnGUI函数中书写GUI的相关代码。

二.GUI控件绘制的共同点

  1.都是GUI类提供的静态函数;

  2.参数都基本相同,常见参数如下:

    位置参数:Rect参数,x、y位置,w、h尺寸;

    显示文本:string参数;

    图片信息:Texture参数;

    综合信息:GUIContent参数;

    自定义样式:GUIStyle参数;

  3.每种空间都有多种重载,但是位置信息和显示信息是必备参数。

三.各种GUI控件

1.文本控件

GUI学习笔记

使用GUI的Label静态函数新建文本控件。Rect是一个代表GUI位置和大小的结构体,GUIContent是一个记录GUI内容的类,下面是它们的构造函数:

GUI学习笔记

Rect可以使用其他Rect构造,也可以传入两个分别代表位置和大小的Vector2结构体构造,也可以分开传入位置坐标x、y和大小w、h。

GUI学习笔记

 GUIContent的构造函数比较多,其中text代表其中包含的文本,image代表图片信息,tooltip是提示信息(鼠标选中后可以得到),但是GUIContent的内容较少,只有上面说的这3种属性,没有public的方法,下面是Texture的构造函数:

GUI学习笔记

这个类只有一个protected的无参构造,所以没有继承这个类是无法new的。我们一般采用声明Texture后拖动赋值或者使用代码寻找图片资源的方式获取资源。

 

文本控件的简单使用如下:

    private void OnGUI()
    {
        GUI.Label(new Rect(0, 0, 100, 20), "欢迎您");
    }

GUI学习笔记

可以看到Game视图中最左上角的位置坐标是(0,0),图中宽100像素,高20像素的文字以左上角为锚点。

一般在使用的过程中,我们可以提前将要使用到的Rect、Image等在OnGUI函数的外部声明为public类型,在Inspector面板灵活地调整。

    //位置大小信息rect
    public Rect rect;    //综合内容content
    public GUIContent content;    //图片texture
    public Texture texture;    //自定义style
    public GUIStyle style;    private void OnGUI()
    {
        GUI.Label(rect, texture);
    }


 2.按钮控件

GUI学习笔记

按钮控件和文本控件类似,重载函数的参数的意思也是相同的。按钮控件需要被监听。

    private void OnGUI()
    {        if (GUI.Button(rect, content))
        {
            Debug.Log("被点击");
        }
    }

Button函数的返回值是bool类型,代表是否被点击,这里的bool值为true的时刻是OnMouseButtonUp。同时GUI还提供了长按的按钮:

GUI学习笔记

这种按钮返回的bool值为true的时刻是OnMouseButton。

3.单选框控件

GUI学习笔记

单选框参数中都有一个bool值value,这代表默认是否选中,每次点击会返回一个bool值,代表点击后是否选中,因此这个控件的使用需要额外声明一个bool类型的变量,否则无法更改选中状态,如下:

    private bool isSelected;    private void OnGUI()
    {
        isSelected = GUI.Toggle(new Rect(0, 0, 100, 20), isSelected, "测试toggle");
    }

每次选中后返回值会被isSelected变量记录下来,下次根据这个变量渲染toggle,就改变了选中状态。

单选框的拓展:多选框。多选框是多个单选框合成,使用int标识当前选中的选项:

    private int selectIndex = 0;    private void OnGUI()
    {        if (GUI.Toggle(new Rect(0, 60, 100, 30), selectIndex == 0, "select 1"))
        {
            selectIndex = 0;
        }        if (GUI.Toggle(new Rect(0, 90, 100, 30), selectIndex == 1, "select 2"))
        {
            selectIndex = 1;
        }        if (GUI.Toggle(new Rect(0, 120, 100, 30), selectIndex == 2, "select 3"))
        {
            selectIndex = 2;
        }
    }

每次进行3个if判断时会渲染出相应的单选框,单选框是否选中根据int标识决定,当选中当前标识后会返回true,这样进入if语句将选中标识作出相应修改,下次渲染其他两个单选框就不会是选中状态,之后选中其他单选框也会进入相应的if语句作出相应的修改。

4.输入框控件

GUI学习笔记

使用TextField函数添加输入框控件,其中text参数的意思是默认的输入内容。和toggle的思路类似,TextField的返回值为string类型,就是刚才输入的内容,也需要使用一个额外的变量记录这个值,每次进入OnGUI函数渲染时将这个变量作为text参数传入,这样输入了内容后输入框中的内容才会发生改变。maxLength代表最大输入长度,超过这个长度的字符会被自动删除。

输入框进化版:密码输入框。

GUI学习笔记

密码输入框不会显示刚才输入的内容,会使用maskChar替换掉刚才输入的内容。

5.拖动条控件

GUI学习笔记

水平拖动条控件,拖动条的值在leftValue和rightValue之间变化,返回值代表当前拖动后的值。按照使用套路,这里还是需要额外声明一个float变量,每次将返回值保存,并在下一次渲染时设置为value参数。

GUI学习笔记

竖直拖动条控件,和水平拖动条的使用方法相同。

6.图片控件

GUI学习笔记

使用DrawTexture函数显示图片,参数scaleMode是一个枚举类型,指缩放模式,alphaBlend是混合透明参数,控制图片是否开启透明通道,borderRadius指宽高比,不设置使用图片本身宽高比,设置后根据设置的宽高比显示图片。

7.框控件

GUI学习笔记

使用Box函数添加一个框,这个框不可被选中,可以用于绘制背景图片或者区分区域。

四.复合控件

1.工具栏控件

GUI学习笔记

工具栏一般有多个按钮,选中一个按钮其他按钮会变为未选中状态,可以理解为对多选框实现的封装,参数中数组的值是每个按钮的显示(文本或图片)。控件的返回值是int,可以配合switch...case...使用这个控件。

2.选择网格控件

GUI学习笔记

这个控件相对toolbar多了一个水平方向最多按钮数量的xCount属性,返回值和其他参数类型的作用相同。可以使用SelectionGrid将水平方向最多控件设置为1,实现竖向的工具栏。

3.分组控件

GUI学习笔记

GUI学习笔记

一般只使用倒数第3个函数重载,可以理解为为控件增加一个父对象,这个对象的Rect信息会控制被包裹的控件的位置和显示(如果包裹控件太小,会导致被包裹控件显示不全)。

4.滚动列表

GUI学习笔记

GUI学习笔记

参数意思:position:整个滚动条的位置和大小信息,scrollPosition:显示的位置,viewRect:显示内容框的位置和大小信息。使用Toolbar(工具栏)为滚动列表添加文本或者图片信息。

5.窗口绘制

GUI学习笔记

绘制窗口需要为窗口指定编号id,clientRect是窗口的位置和大小等信息,func参数是一个用于绘制窗口内容的委托函数。窗口的返回值为Rect类型,是移动后的窗口位置,但是要想实现窗口拖动,除了窗口位置重新赋值为上一帧的返回值外,还需要在func中调用DragWindow函数:

GUI学习笔记

重载函数的position参数表示窗口能拖动的范围。

GUI学习笔记

模态窗口和窗口的区别在于模态窗口处于最上层,当此窗口显示时,其他的UI控件会失效。

五.自定义整体样式

GUI学习笔记

 

 在GUI类中提供了一些属性,其中的某些public的属性对应了GUI的全局设置:

color:全局颜色;backgroundColor:背景颜色;contentColor:文本颜色;skin:皮肤(在project窗口中可以右键创建GUISkin文件,在这个文件中设置GUI中的所有样式设置,相当于创建了一个GUI样式模板)(GUI控件的样式首先找每个GUI具体每个控件单独的GUIStyle,再看GUISkin进行整体设置);

六.GUILayout类

GUILayout中的方法几乎和GUI相同,相当于拓展了GUI,这个类提供了自动布局的功能。这个类主要用于编辑器开发,用于制作游戏UI不合适。

上一篇:理顺 JavaScript (15) - 类的继承手段: prototype


下一篇:2021.3.4 python实战——小游戏(续)