首页 > 其他分享 >【Unity3D】GUI控件

【Unity3D】GUI控件

时间:2023-03-20 20:59:43浏览次数:56  
标签:控件 Unity3D GUIStyle GUI static 绘制 public Rect

1 前言

​ Unity 3D 提供了 GUI、NGUI、UGUI 等图形系统,以增强玩家与游戏的交互性。GUI 在编译时不能可视化,在运行时才能可视化。GUI 代码需要在 OnGUI 函数中调用才能绘制,布局分为手动布局(GUI)和自动布局(GUILayout)。

  • 手动布局:需要传人Rect 参数来指定屏幕绘制区域,通过 GUI 调用控件
  • 自动布局:不需要传入 Rect 参数,自动在屏幕中布局,通过 GUILayout 调用控件

​ 注意:屏幕坐标系以左上角为原点。

​ GUI 中主要包含以下控件:

  • Label:绘制文本和图片
  • Box:绘制一个图形框
  • Button:绘制按钮,响应单击事件
  • RepeatButton:绘制一个处理持续按下事件的按钮
  • TextField:绘制一个单行文本输入框
  • PasswordField:绘制一个秘密输入框
  • TextArea:绘制一个多行文本输入框
  • Toggle:绘制一个开关
  • Toolbar:绘制工具条
  • SelectionGrid:绘制一组网格按钮
  • HorizontalSlider:绘制一个水平方向的滑动条
  • VerticalSlider:绘制一个垂直方向的滑动条
  • HorizontalScrollbar:绘制一个水平方向的滚动条
  • VerticalScrollbar:绘制一个垂直方向的滚动条
  • Window:绘制一个窗口,可以用于放置控件

2 GUI 控件

1)Label:绘制文本和图片

// 绘制文本
public static void Label(Rect position, string text, GUIStyle style)
// 绘制图片
public static void Label(Rect position, Texture image, GUIStyle style)
// 应用
GUI.Label(new Rect (10, 10, 100, 20), "Hello World!");
GUI.Label(new Rect (100, 100, texture.width, texture.height), texture);

img

2)Box:绘制一个图形框

// 绘制带边框的文本
public static void Box(Rect position, string text, GUIStyle style)
// 绘制带边框图片
public static void Box(Rect position, Texture image, GUIStyle style)

img

3)****Button:绘制按钮,响应单击事件

// 绘制带文本的按钮,单击抬起时返回true
public static bool Button(Rect position, string text, GUIStyle style)
// 绘制带图片的按钮,单击抬起时返回true
public static bool Button(Rect position, Texture image, GUIStyle style)

img

4)RepeatButton:绘制一个处理持续按下事件的按钮

// 绘制带文本的按钮,按住时持续返回true
public static bool RepeatButton(Rect position, string text, GUIStyle style)
// 绘制带图片的按钮,按住时持续返回true
public static bool RepeatButton(Rect position, Texture image, GUIStyle style)

5)TextField:绘制一个单行文本输入框

// 绘制单行文本框
public static string TextField(Rect position, string text, int maxLength, GUIStyle style)
// 应用
private string str = "Hello World!";
private void OnGUI() {
    str = GUI.TextField(new Rect (10, 10, 100, 20), str);
	Debug.Log(str);
}

img

6)PasswordField:绘制一个秘密输入框

// 绘制密码框,maskChar为显示的符号,通常为"*"号
public static string PasswordField(Rect position, string password, char maskChar, int maxLength, GUIStyle style)

img

7)TextArea:绘制一个多行文本输入框

// 绘制多行文本输入框
public static string TextArea(Rect position, string text, int maxLength, GUIStyle style)

img

8)Toggle:绘制一个开关

// 绘制带文本的开关
public static bool Toggle(Rect position, bool value, string text, GUIStyle style)
// 绘制带图片的开关
public static bool Toggle(Rect position, bool value, Texture image, GUIStyle style)

img

9)Toolbar:绘制工具条

// 绘制文本工具条
public static int Toolbar(Rect position, int selected, string[] texts, GUIStyle style)
// 绘制图片工具条
public static int Toolbar(Rect position, int selected, Texture[] images, GUIStyle style)
// 应用
int selected = GUI.Toolbar(new Rect (10, 10, 300, 50), 1, new string[]{"first", "second", "third", "four"});

img

10)SelectionGrid:绘制一组网格按钮

// 绘制文本网格按钮, xCount为水平按钮数
public static int SelectionGrid(Rect position, int selected, string[] texts, int xCount, GUIStyle style)
// 绘制图片网格按钮, xCount为水平按钮数
public static int SelectionGrid(Rect position, int selected, Texture[] images, int xCount, GUIStyle style)
// 应用
int selected = GUI.SelectionGrid(new Rect (10, 10, 100, 50), 1, new string[]{"first", "second", "third", "four"}, 2);

img

11)HorizontalSlider:绘制一个水平方向的滑动条

// 绘制水平滑动条, value: 滑动条显示值, leftValue: 滑动条左值, rightValue: 滑动条右值
public static float HorizontalSlider(Rect position, float value, float leftValue, float rightValue, GUIStyle slider, GUIStyle thumb)
// 应用
float process = GUI.HorizontalSlider(new Rect (10, 10, 100, 50), 9f, 5f, 10f);

img

12)VerticalSlider:绘制一个垂直方向的滑动条

// 绘制垂直滑动条, value: 滑动条显示值, leftValue: 滑动条左值, rightValue: 滑动条右值
public static float VerticalSlider(Rect position, float value, float leftValue, float rightValue, GUIStyle slider, GUIStyle thumb)
// 应用
float process = GUI.VerticalSlider(new Rect (10, 10, 50, 100), 9f, 5f, 10f);

img

13)HorizontalScrollbar:绘制一个水平方向的滚动条

// 绘制水平滚动条, value: 滑动条显示值, size: 活塞大小, leftValue: 滑动条左值, rightValue: 滑动条右值
public static float HorizontalScrollbar(Rect position, float value, float size, float leftValue, float rightValue, GUIStyle style)
// 应用
float process = GUI.HorizontalScrollbar(new Rect (10, 10, 100, 50), 7f, 3f, 5f, 10f);

img

14)VerticalScrollbar:绘制一个垂直方向的滚动条

// 绘制垂直滚动条, value: 滑动条显示值, size: 活塞大小, leftValue: 滑动条左值, rightValue: 滑动条右值
public static float VerticalScrollbar(Rect position, float value, float size, float leftValue, float rightValue, GUIStyle style)
// 应用
float process = GUI.VerticalScrollbar(new Rect (10, 10, 100, 50), 7f, 3f, 5f, 10f);

img

15)Window:绘制一个窗口,可以用于放置控件

// 绘制窗口
public static Rect Window(int id, Rect clientRect, WindowFunction func, Texture image, GUIStyle style)
public static Rect Window(int id, Rect clientRect, WindowFunction func, string text)
public static Rect Window(int id, Rect clientRect, WindowFunction func, Texture image)
public static Rect Window(int id, Rect clientRect, WindowFunction func, GUIContent content)
public static Rect Window(int id, Rect clientRect, WindowFunction func, string text, GUIStyle style)
public static Rect Window(int id, Rect clientRect, WindowFunction func, GUIContent title, GUIStyle style)

3 GUILayout 控件

​ GUILayout 中也有 1) ~ 15) 中控件,但是不需要传入Rect 属性,以下列举部分控件的例子:

GUILayout.Label("Hello world");
GUILayout.Button("您好");

img

4 GUISkin

​ 在 Assets 窗口右键,选择【Create → GUI Skin】,创建 GUISkin 资源,定制 GUI 控件的属性。

img

​ 在代码中定义和使用 GUISkin 如下:

public GUISkin skin;

private void Awake() {
    GUI.skin = skin;
}

​ 将编辑后的 GUISkin 资源文件拖拽到如下红框中,以实现自定义 GUI 控件显示效果。

img

​ 声明:本文转自【Unity3D】GUI控件

标签:控件,Unity3D,GUIStyle,GUI,static,绘制,public,Rect
From: https://www.cnblogs.com/zhyan8/p/17234880.html

相关文章

  • 【Unity3D】相机跟随
    1前言​相机跟随是相机指始终跟随特定游戏对象,有以下2种跟随效果:位置跟随:相机指向目标游戏对象的向量始终不变位置和姿态跟随:相机在目标游戏对象的坐标系下的坐......
  • 【Unity3D】UGUI之Text
    1Text简介​UGUI概述中介绍了Canvas渲染模式、RectTransform组件、锚点(Anchor)等,本文将介绍UGUI中的Text控件。​在Hierarchy窗口右键,选择UI列表里......
  • 【Unity3D】UGUI概述
    1UGUI与GUI区别​GUI控件在编译时不能可视化,并且界面不太美观,在实际应用中使用的较少。UGUI在编译时可视化,界面美观,实际应用较广泛。2Canvas渲染模式(Render......
  • 【Unity3D】UGUI之Button
    1Button属性面板​在Hierarchy窗口右键,选择UI列表里的Button控件,即可创建Button控件,选中创建的Button控件,按键盘【T】键,可以调整Button控件的大小和位置......
  • 【Unity3D】UGUI之Image和RawImage
    1纹理(Texture)​Image控件和RawImage控件都是承载渲染图片的控件,都需要指定一个纹理(Texture)图片。在Assets窗口选中一张图片,在Inspector窗口的参数设置面板可......
  • 【Unity3D】UGUI之Slider
    1Slider属性面板​在Hierarchy窗口右键,选择UI列表里的Slider控件,即可创建Slider控件,选中创建的Slider控件,按键盘【T】键,可以调整Slider控件的大小和位置......
  • 【Unity3D】UGUI之Toggle
    1Toggle属性面板​在Hierarchy窗口右键,选择UI列表里的Toggle控件,即可创建Toggle控件,选中创建的Toggle控件,按键盘【T】键,可以调整Toggle控件的大小和位置......
  • The Art of ChatGPT Prompting: A Guide to Crafting Clear and Effective Prompts
    AboutWhenChatGPTfirstlaunchedlastmonth,Iwasimmediatelycaptivatedbyitscapabilities.Iexperimentedwiththetoolinavarietyofwaysandwascons......
  • UI(一) - NGUI和UGUI比较
    UI是游戏项目中重要的组成部分,面对一个从零开始的项目,首先要确立的就是选用哪个UI系统作为主框架。===现在主流项目中基本上都是NGUI和UGUI,那么到底选哪个。我们先来做个比......
  • 实现点击 WebView 中的图片,调用原生控件展示图片
    现在有很多时候,我们的App都进行了混合开发,而最简单,最常用的就是有些网页采用了WebView进行展示,这就需要我们了解和懂得如何实现WebView和JS进......