Unity:GUI笔记(一)——文本、按钮、多选框和单选框、输入框和拖动条、图片绘制和框绘制

发布于:2025-08-13 ⋅ 阅读:(19) ⋅ 点赞:(0)

写在前面:

写本系列(自用)的目的是回顾已经学过的知识、记录新学习的知识或是记录心得理解,方便自己以后快速复习,减少遗忘。主要是唐老师的课程。

一、重要参数、文本、按钮

GUI相关代码需要写在private void OnGUI()中。该函数每帧执行,相当于是专门用于绘制GUI界面的函数,类似生命周期函数,一般只在其中执行GUI相关界面绘制和操作逻辑。该函数在onDisable之前,LateUpdate之后执行。

1、GUI控件绘制的共同点

都是GUI公共类中提供的静态函数,直接调用即可。

参数都大同小异:

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

2、显示文本:string参数

3、图片信息:Texture参数

4、综合信息:GUIContent参数

5、自定义样式:GUIStyle参数

每一种控件都有多种重载,是各个参数的排列组合。必备的参数内容:位置信息、显示信息

2、文本控件

文本控件可以在game界面输出文字或者图片。基本使用是:GUI.Label(new Rect(0, 0, 100, 20),"hello"),其中,Rect的四个参数分别为:x坐标、y坐标、长、宽。第public二个参数为显示信息,可以为文字也可以为图片。

综合信息content,可以声明public变量,在面板上修改:

其中text是文本信息,image是图片,Tooltip是提示信息。例如可以设置为鼠标悬停在显示信息时打印提示信息。

若是要自定义样式,可以在传入了位置信息、显示信息后再传入style。style信息也是在面板上编辑会更加方便:

这是示例:

public Texture tex;
public Rect rect1;
public GUIContent content;
public GUIStyle style;
private void OnGUI()
{
    //基本使用
    //自定义样式style
    GUI.Label(new Rect(0, 0, 100, 20),"hello",style);
    GUI.Label(new Rect(0, 30, 100, 50), tex);
    //综合使用
    GUI.Label(rect1, content);
    Debug.Log(GUI.tooltip);
}

game面板上:

3、按钮控件

按钮控件的使用与文本控件的使用大同小异。传入位置、显示信息等,即可在game屏幕中显示一个按钮。由于按钮控件的返回值是bool,因此可以接收返回值来进行一些逻辑处理。

public Rect buttonrect;
public GUIContent btnContent;
public GUIStyle btnStyle;

private void OnGUI()
{
    if(GUI.Button(buttonrect, btnContent, btnStyle))
    {
        Debug.Log("按钮被点击");
    }

    if(GUI.RepeatButton(buttonrect,btnContent))
    {
        Debug.Log("长按按钮被点击");
    }
}

这里说一下常用自定义按钮样式,可以在Inspector面板中进行样式修改:

自定义按钮常态样式与常态字体颜色:

修改后:

设置按钮点击样式与点击字体颜色:

设置鼠标悬停时按钮样式与字体颜色:

设置字体样式、大小:

二、多选框和单选框

1、多选框

(1)基础

多选框使用Unity提供的API:GUI.Toggle(),里面传入的参数与上一节的基本相同,只有第二个参数不同。

GUI.Toggle()返回的是bool值,假如此时多选框被点击,就返回true,如果没有被点击返回false。

第一个参数传入多选框的位置,第二个参数需要传入该多选框是否被选中,如果是true就代表该多选框被选中,false就代表没选中。为了动态控制多选框是否被选中,我们可以传入一个变量来决定当前是true还是false。结合GUI.Toggle()的返回值,我们可以直接将这一帧的返回值传入下一帧的GUI.Toggle()中,这样就可以保证下一帧传入的值为true,代码如下:

private bool isSel;
private bool isSel2;
private void OnGUI()
{
    isSel = GUI.Toggle(new Rect(0, 0, 100, 30), isSel, "效果开关");

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

(2)自定义样式

此外需要说明的是,也可以传入style,这里传入style的处理方式和之前不同:

首先需要导入按键图片,也就是可选项的哪个白色小圈。传入的图片可能过大,单独修改图片大小而不碰字体,需要修改:

才会只修改图片的大小,将宽高均修改为20后:

接下来需要单独移动字体而不动图片,需要修改:

修改完成后:

接下来需要修改点击时图片变化,需要在on Normal中传入图片。

再修改一下汉字颜色和字体,自定义样式就完成了:

2、单选框

单选框的实现是基于多选框的。只需要实现,当一个按钮按下后亮起,其他按钮都自动取消按下就可以,可以通过以下代码逻辑实现:

private int nowSelIndex = 1;
private void OnGUI()
{
    if(GUI.Toggle(new Rect(0, 80, 100, 30), nowSelIndex == 1, "选项一"))
    {
        nowSelIndex = 1;
    }
    else if(GUI.Toggle(new Rect(0, 120, 100, 30), nowSelIndex == 2, "选项二"))
    {
        nowSelIndex = 2;
    }
    else if(GUI.Toggle(new Rect(0, 160, 100, 30), nowSelIndex == 3, "选项三"))
    {
        nowSelIndex = 3;
    }       
}

三、输入框和拖动条

1、输入框

(1)普通输入

普通的输入框使用的API是:GUI.TextField(),里面必须要传入的参数有两个:位置信息和显示信息。位置信息表示的是输入框的位置,为Rect类型,显示信息是输入框中显示的内容,为string类型。

同之前一样,显示的内容需要实时返回,因此与之前一样,我们可以设置一个变量表示显示信息,第二个参数传入这个变量,GUI.TextField()的返回值也是这个变量接收,这样就可以保证显示信息实时变化。

可以再传入第三个参数,表示最大长度,例如当设置为5时,最多输入5个字符。也可以继续传入输入框样式等。

private string inputStr;

private void OnGUI()
{
    inputStr = GUI.TextField(new Rect(0, 0, 100, 30), inputStr,5);
}

(2)密码输入

密码输入框使用的API是:GUI.PasswordField,里面必须要传入的参数有三个:位置信息、显示信息、密码的覆盖字符。位置信息表示的是输入框的位置,为Rect类型,显示信息是输入框中显示的内容,为string类型。覆盖字符自己可选,例如可以传入字符‘*’,用户输入的内容就会自动变为*

同之前一样,显示的内容需要实时返回,不再解释,同样可以再传入第四个参数,表示最大长度。

private string inputPW;

private void OnGUI()
{
    inputPW = GUI.PasswordField(new Rect(0, 50, 100, 30), inputPW, '*');
}

2、拖动条 

(1)水平拖动条

水平拖动条使用的API是:GUI.HorizontalSlider(),里面必须要传入的参数有四个:位置信息、当前值、最小值、最大值。位置信息表示的是输入框的位置,为Rect类型,当前值是当前拖动条所处的位置,最小值是拖动条最小数值,最大值是拖动条最大数值。

同之前一样,当前值需要实时返回,不再解释,同样可以继续传入样式信息,这里不演示。

private float nowValue = 0.5f;

private void OnGUI()
{
    nowValue = GUI.HorizontalSlider(new Rect(0, 100, 100, 50), nowValue, 0, 1);
}

(2)竖直拖动条

竖直拖动条使用的API是:GUI.VerticalSlider(),除了显示的拖动条是竖向的,其余用法与水平拖动条没有区别

private float nowValue = 0.5f;

private void OnGUI()
{
    nowValue = GUI.VerticalSlider(new Rect(0, 150, 50, 100), nowValue, 0, 1);
}

四、图片绘制和框

1、图片绘制

绘制图片使用的API是:GUI.DrawTexture(),其中必须要传入的参数有两个:图片的位置信息和显示的图片。图片位置信息是Rect型,图片为Texture型。

此外,还有三个较为重要的参数:

1、ScaleMode,有三种:

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

2、alpha:控制图片是否开启透明通道,默认为true开启,false不开启

3、imageAspect:自定义宽高比,如果不填默认为0,就会使用图片原始宽高

public Rect texPos;
public Texture tex;
public ScaleMode mode = ScaleMode.StretchToFill;
public bool alpha = true;
public float wh = 0;

private void OnGUI()
{
    GUI.DrawTexture(texPos, tex, mode, alpha, wh);
}

如果alpha为false:

alpha为true:

2、框绘制

框绘制用的比较少,使用API:GUI.Box(),必须传入位置信息,显示信息,显示信息可以为空。也可以传入可选参数样式等。

public Rect texPos;

private void OnGUI()
{
    GUI.Box(texPos, "");
}


网站公告

今日签到

点亮在社区的每一天
去签到