Unity3D学习之UI系统——GUI

文章目录

  • 1. 前言
  • 2. 工作原理和主要作用
  • 3. 基础控件
    • 3.1 重要参数及文本和按钮
      • 3.1.1 GUI 共同点
      • 3.1.2 文本控件
      • 3.1.3 按钮控件
    • 3.2 多选框和单选框
      • 3.2.1 多选框
      • 3.2.2 单选框
      • 3.2.3 输入框
      • 3.2.4 拖动条
    • 3.3 图片绘制和框
      • 3.3.1 图片
      • 3.3.2 框绘制
  • 4 工具栏和选择网格
    • 4.1 工具栏
    • 4.2 选择网格
  • 5 滚动列表和分组
    • 5.1 分组
    • 5.2 滚动列表
  • 6 窗口
    • 6.1 模态窗口
    • 6.2 拖动窗口
  • 7 自定义皮肤样式
    • 7.1 全局颜色
    • 7.2 整体皮肤样式
  • 8 GUILayout自动布局
    • 8.1 自动布局
    • 8.2 布局选项
  • 9 必备知识点
  • 10 九宫格布局概念


1. 前言

Unity3D学习之UI系统——GUI_第1张图片Unity3D学习之UI系统——GUI_第2张图片
设置Screen Type和Center Type

最终实现效果:
Unity3D学习之UI系统——GUI_第3张图片

2. 工作原理和主要作用

Unity3D学习之UI系统——GUI_第4张图片
Unity3D学习之UI系统——GUI_第5张图片

3. 基础控件

3.1 重要参数及文本和按钮

3.1.1 GUI 共同点

Unity3D学习之UI系统——GUI_第6张图片

3.1.2 文本控件

Unity3D学习之UI系统——GUI_第7张图片
Unity3D学习之UI系统——GUI_第8张图片

可以传图片
Unity3D学习之UI系统——GUI_第9张图片
在这里插入图片描述

在unity中拖入图片
在这里插入图片描述
可以把Rect 设置成public 的变量,在控件中设置
Unity3D学习之UI系统——GUI_第10张图片

在这里插入图片描述
文字和图片均显示
在这里插入图片描述
Unity3D学习之UI系统——GUI_第11张图片

toolTip 获取当前选中的空间的附带信息
Unity3D学习之UI系统——GUI_第12张图片
GUI Style 控制样式
Unity3D学习之UI系统——GUI_第13张图片

3.1.3 按钮控件

在这里插入图片描述

在这里插入图片描述
Unity3D学习之UI系统——GUI_第14张图片在这里插入图片描述
Unity3D学习之UI系统——GUI_第15张图片
必须要按下并抬起才算被点击

Unity3D学习之UI系统——GUI_第16张图片
长按按钮

3.2 多选框和单选框

3.2.1 多选框

在这里插入图片描述
Toggle因为返回的是bool值,所以一定要在OnGUI外面生成bool值
在这里插入图片描述
变成这样
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
false时显示Normal
在这里插入图片描述
在这里插入图片描述

true时显示On Normal
Unity3D学习之UI系统——GUI_第17张图片
在这里插入图片描述

3.2.2 单选框

Unity3D学习之UI系统——GUI_第18张图片
通过一个int 标识表示是否显示

Unity3D学习之UI系统——GUI_第19张图片

3.2.3 输入框

在这里插入图片描述

在这里插入图片描述

3.2.4 拖动条

在这里插入图片描述

在这里插入图片描述

3.3 图片绘制和框

3.3.1 图片

Unity3D学习之UI系统——GUI_第20张图片

Unity3D学习之UI系统——GUI_第21张图片

3.3.2 框绘制

Unity3D学习之UI系统——GUI_第22张图片
在这里插入图片描述

4 工具栏和选择网格

4.1 工具栏

在这里插入图片描述

这种类似的
Unity3D学习之UI系统——GUI_第23张图片

Unity3D学习之UI系统——GUI_第24张图片
可以根据返回索引处理不同的逻辑
Unity3D学习之UI系统——GUI_第25张图片

4.2 选择网格

在这里插入图片描述

Unity3D学习之UI系统——GUI_第26张图片

在这里插入图片描述

在这里插入图片描述

5 滚动列表和分组

5.1 分组

Unity3D学习之UI系统——GUI_第27张图片
包裹着他的所有控件的位置,只要移动Group的位置,包裹的所有控件的位置就会改变
包裹只Begin到End之间的所有控件
在这里插入图片描述

Unity3D学习之UI系统——GUI_第28张图片
移动groupPos

Unity3D学习之UI系统——GUI_第29张图片

5.2 滚动列表

Unity3D学习之UI系统——GUI_第30张图片
拖动列表条

Unity3D学习之UI系统——GUI_第31张图片
Unity3D学习之UI系统——GUI_第32张图片
在这里插入图片描述

scPos是这个滚动组件的位置
nowPos是滚动条的变量
showPos 组件内容的尺寸
如果里面内容的宽高小于组件内容的尺寸,则不会出现滚动条,如果大于了就会出现
Unity3D学习之UI系统——GUI_第33张图片
Unity3D学习之UI系统——GUI_第34张图片

6 窗口

Unity3D学习之UI系统——GUI_第35张图片

Unity3D学习之UI系统——GUI_第36张图片
在函数里添加配件
Unity3D学习之UI系统——GUI_第37张图片

Unity3D学习之UI系统——GUI_第38张图片
在这里插入图片描述
Unity3D学习之UI系统——GUI_第39张图片

6.1 模态窗口

Unity3D学习之UI系统——GUI_第40张图片
相当于警告窗口,这个窗口一出来点其他按钮都没有用了

6.2 拖动窗口

在这里插入图片描述

Unity3D学习之UI系统——GUI_第41张图片
函数如果填了,就是只能拖这部分才能拖动

7 自定义皮肤样式

7.1 全局颜色

自定义的style也会受影响

Unity3D学习之UI系统——GUI_第42张图片
Unity3D学习之UI系统——GUI_第43张图片

7.2 整体皮肤样式

Unity3D学习之UI系统——GUI_第44张图片

Skin就是多个GUI的Style的综合体

可以自己创建skin文件,然后编辑赋值给GUI.skin

8 GUILayout自动布局

8.1 自动布局

Unity3D学习之UI系统——GUI_第45张图片

Unity3D学习之UI系统——GUI_第46张图片
Unity3D学习之UI系统——GUI_第47张图片
在这里插入图片描述

Unity3D学习之UI系统——GUI_第48张图片
Unity3D学习之UI系统——GUI_第49张图片
Unity3D学习之UI系统——GUI_第50张图片Unity3D学习之UI系统——GUI_第51张图片

8.2 布局选项

Unity3D学习之UI系统——GUI_第52张图片

9 必备知识点

编辑模式下让指定代码执行
加上[ExecuteAlways]

Unity3D学习之UI系统——GUI_第53张图片

10 九宫格布局概念

Unity3D学习之UI系统——GUI_第54张图片

Unity3D学习之UI系统——GUI_第55张图片

你可能感兴趣的:(学习,ui,unity)