Unity3D学习之UI系统——UGUI

文章目录

  • 1. 前言
  • 2 六大基础组件概述
  • 3 Canvas——渲染模式的控制
    • 3.1 Canvas作用
    • 3.2 Canvas的渲染模式
      • 3.2.1 Screen Space -Overlay 覆盖模式
      • 3.2.2 Screen Space - Camera 摄像机模式
      • 3.2.3 World Space
  • 4 CanvasScaler ——画布缩放控制器
    • 4.1 Constant Pixel Size 恒定像素模式
    • 4.2 Scale With Screen Size 缩放模式
    • 4.3 Constant Physical Size 恒定物理模式
    • 4.4 3D模式
  • 5 Graphic Raycaster图形射线投射器
  • 6 EventSystem和Standalone Input Module
  • 7 RectTransform
  • 8 三大基础控件
    • 8.1 Image 图像控件
    • 8.2 Text 文本控件
    • 8.3 RawImage 原始图像控件
  • 9 组合控件
    • 9.1 Button 按钮
      • 9.1.1 代码控制
      • 9.1.2 监听点击事件的两种方式
    • 9.2 Toggle 开关控件
      • 9.2.1 代码控制
      • 9.2.2 监听事件
    • 9.3 InputField 文本输入控件
      • 9.3.1 代码控制
      • 9.3.2 事件监听
    • 9.4 Slider 滑动条控件
      • 9.4.1 代码控制
      • 9.4.2 事件监听
    • 9.5 ScrollBar 滚动条
    • 9.6 ScrollView 滚动视图
      • 9.6.1 代码控制
    • 9.7 Dropdown 下拉列表控件
  • 10 图集制作
  • 11 UI事件监听接口
    • 11.1 继承接口和函数
    • 11.2 事件监听父类
    • 11.3 练习题
  • 12 EventTrigger 事件触发器
    • 12.1 练习题
  • 13 屏幕坐标转UI相对坐标
    • 13.1 练习题
  • 14 Mask遮罩
  • 15 模型和粒子显示在UI之前
    • 15.1 3D模型在UI之前
    • 15.2 粒子特效在UI之前
  • 16 异形按钮
  • 17 自动布局组件
    • 17.1 布局属性
    • 17.2 水平垂直布局组件
    • 17.3 水平布局组件
    • 17.4 网格布局组件
    • 17.5 内容大小适配器
    • 17.6 宽高比适配器
  • 18 画布组Canvas Group
  • 19 UGUI源代码


1. 前言

Unity3D学习之UI系统——UGUI_第1张图片
Unity3D学习之UI系统——UGUI_第2张图片

2 六大基础组件概述

Unity3D学习之UI系统——UGUI_第3张图片
Unity3D学习之UI系统——UGUI_第4张图片

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

3 Canvas——渲染模式的控制

3.1 Canvas作用

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

3.2 Canvas的渲染模式

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

3.2.1 Screen Space -Overlay 覆盖模式

Unity3D学习之UI系统——UGUI_第9张图片

3.2.2 Screen Space - Camera 摄像机模式

Unity3D学习之UI系统——UGUI_第10张图片
创建专门的摄像机渲染UI
并让主摄像机不渲染UI层

3.2.3 World Space

Unity3D学习之UI系统——UGUI_第11张图片

4 CanvasScaler ——画布缩放控制器

Unity3D学习之UI系统——UGUI_第12张图片

Unity3D学习之UI系统——UGUI_第13张图片
宽高 * 缩放系数 = UI界面大小

Unity3D学习之UI系统——UGUI_第14张图片
参考分辨率

Unity3D学习之UI系统——UGUI_第15张图片

4.1 Constant Pixel Size 恒定像素模式

Unity3D学习之UI系统——UGUI_第16张图片
图片格式要改为Sprite
Unity3D学习之UI系统——UGUI_第17张图片

恒定像素模式计算公式
Unity3D学习之UI系统——UGUI_第18张图片

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

4.2 Scale With Screen Size 缩放模式

Unity3D学习之UI系统——UGUI_第20张图片
Unity3D学习之UI系统——UGUI_第21张图片
会根据当前分辨率 和 参考分辨率的比率自动计算UI的缩放量
Unity3D学习之UI系统——UGUI_第22张图片
Unity3D学习之UI系统——UGUI_第23张图片
Unity3D学习之UI系统——UGUI_第24张图片
Unity3D学习之UI系统——UGUI_第25张图片
Unity3D学习之UI系统——UGUI_第26张图片
Unity3D学习之UI系统——UGUI_第27张图片
Unity3D学习之UI系统——UGUI_第28张图片

4.3 Constant Physical Size 恒定物理模式

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

4.4 3D模式

Unity3D学习之UI系统——UGUI_第31张图片

5 Graphic Raycaster图形射线投射器

Unity3D学习之UI系统——UGUI_第32张图片
Unity3D学习之UI系统——UGUI_第33张图片

6 EventSystem和Standalone Input Module

Unity3D学习之UI系统——UGUI_第34张图片
Unity3D学习之UI系统——UGUI_第35张图片
Unity3D学习之UI系统——UGUI_第36张图片
Unity3D学习之UI系统——UGUI_第37张图片

7 RectTransform

在这里插入图片描述

Unity3D学习之UI系统——UGUI_第38张图片
在这里插入图片描述
Unity3D学习之UI系统——UGUI_第39张图片
获得参数
Unity3D学习之UI系统——UGUI_第40张图片

8 三大基础控件

8.1 Image 图像控件

Unity3D学习之UI系统——UGUI_第41张图片
Unity3D学习之UI系统——UGUI_第42张图片
Unity3D学习之UI系统——UGUI_第43张图片
在这里插入图片描述

8.2 Text 文本控件

Unity3D学习之UI系统——UGUI_第44张图片
Unity3D学习之UI系统——UGUI_第45张图片
富文本
Unity3D学习之UI系统——UGUI_第46张图片
Unity3D学习之UI系统——UGUI_第47张图片

8.3 RawImage 原始图像控件

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

9 组合控件

Unity3D学习之UI系统——UGUI_第51张图片

9.1 Button 按钮

Unity3D学习之UI系统——UGUI_第52张图片
Unity3D学习之UI系统——UGUI_第53张图片
Unity3D学习之UI系统——UGUI_第54张图片
Unity3D学习之UI系统——UGUI_第55张图片

9.1.1 代码控制

Unity3D学习之UI系统——UGUI_第56张图片

9.1.2 监听点击事件的两种方式

1) 托脚本
Unity3D学习之UI系统——UGUI_第57张图片
2) 代码监控
Unity3D学习之UI系统——UGUI_第58张图片

9.2 Toggle 开关控件

Unity3D学习之UI系统——UGUI_第59张图片
Unity3D学习之UI系统——UGUI_第60张图片
只要三个的toggle group属于同一个Group,就变成了单选框

9.2.1 代码控制

Unity3D学习之UI系统——UGUI_第61张图片

9.2.2 监听事件

Unity3D学习之UI系统——UGUI_第62张图片

Unity3D学习之UI系统——UGUI_第63张图片
Unity3D学习之UI系统——UGUI_第64张图片

9.3 InputField 文本输入控件

Unity3D学习之UI系统——UGUI_第65张图片
Unity3D学习之UI系统——UGUI_第66张图片
Unity3D学习之UI系统——UGUI_第67张图片
Unity3D学习之UI系统——UGUI_第68张图片

9.3.1 代码控制

Unity3D学习之UI系统——UGUI_第69张图片

9.3.2 事件监听

Unity3D学习之UI系统——UGUI_第70张图片
Unity3D学习之UI系统——UGUI_第71张图片
Unity3D学习之UI系统——UGUI_第72张图片

9.4 Slider 滑动条控件

Unity3D学习之UI系统——UGUI_第73张图片
Unity3D学习之UI系统——UGUI_第74张图片
Unity3D学习之UI系统——UGUI_第75张图片

9.4.1 代码控制

Unity3D学习之UI系统——UGUI_第76张图片

9.4.2 事件监听

Unity3D学习之UI系统——UGUI_第77张图片

Unity3D学习之UI系统——UGUI_第78张图片

9.5 ScrollBar 滚动条

Unity3D学习之UI系统——UGUI_第79张图片
Unity3D学习之UI系统——UGUI_第80张图片

Unity3D学习之UI系统——UGUI_第81张图片

9.6 ScrollView 滚动视图

Unity3D学习之UI系统——UGUI_第82张图片

9.6.1 代码控制

Unity3D学习之UI系统——UGUI_第83张图片

9.7 Dropdown 下拉列表控件

Unity3D学习之UI系统——UGUI_第84张图片
在这里插入图片描述
Unity3D学习之UI系统——UGUI_第85张图片
Unity3D学习之UI系统——UGUI_第86张图片

10 图集制作

Unity3D学习之UI系统——UGUI_第87张图片
Unity3D学习之UI系统——UGUI_第88张图片
Unity3D学习之UI系统——UGUI_第89张图片
UGUI查看DrawCall
Unity3D学习之UI系统——UGUI_第90张图片
Unity3D学习之UI系统——UGUI_第91张图片

11 UI事件监听接口

Unity3D学习之UI系统——UGUI_第92张图片
Unity3D学习之UI系统——UGUI_第93张图片
在这里插入图片描述

11.1 继承接口和函数

在这里插入图片描述

Unity3D学习之UI系统——UGUI_第94张图片
拖入相关的
Unity3D学习之UI系统——UGUI_第95张图片

11.2 事件监听父类

Unity3D学习之UI系统——UGUI_第96张图片

11.3 练习题

Unity3D学习之UI系统——UGUI_第97张图片
长按按钮脚本,提供两个事件给外部,让外部进行处理
Unity3D学习之UI系统——UGUI_第98张图片
Unity3D学习之UI系统——UGUI_第99张图片
Unity3D学习之UI系统——UGUI_第100张图片Unity3D学习之UI系统——UGUI_第101张图片
Unity3D学习之UI系统——UGUI_第102张图片
Unity3D学习之UI系统——UGUI_第103张图片

12 EventTrigger 事件触发器

在这里插入图片描述
Unity3D学习之UI系统——UGUI_第104张图片
Unity3D学习之UI系统——UGUI_第105张图片
Unity3D学习之UI系统——UGUI_第106张图片
Unity3D学习之UI系统——UGUI_第107张图片

12.1 练习题

在这里插入图片描述
Unity3D学习之UI系统——UGUI_第108张图片
在这里插入图片描述
Unity3D学习之UI系统——UGUI_第109张图片

Unity3D学习之UI系统——UGUI_第110张图片
关联函数

设置向量长度为遥感能移动的长度

Unity3D学习之UI系统——UGUI_第111张图片

Unity3D学习之UI系统——UGUI_第112张图片Unity3D学习之UI系统——UGUI_第113张图片

在这里插入图片描述
Unity3D学习之UI系统——UGUI_第114张图片
Unity3D学习之UI系统——UGUI_第115张图片

13 屏幕坐标转UI相对坐标

Unity3D学习之UI系统——UGUI_第116张图片

Unity3D学习之UI系统——UGUI_第117张图片

13.1 练习题

Unity3D学习之UI系统——UGUI_第118张图片
Unity3D学习之UI系统——UGUI_第119张图片

14 Mask遮罩

Unity3D学习之UI系统——UGUI_第120张图片
Unity3D学习之UI系统——UGUI_第121张图片
Unity3D学习之UI系统——UGUI_第122张图片
maskable要钩勾上
Unity3D学习之UI系统——UGUI_第123张图片
是否显示遮罩的图
在这里插入图片描述

15 模型和粒子显示在UI之前

15.1 3D模型在UI之前

Unity3D学习之UI系统——UGUI_第124张图片
这部分在Camere前面有
还有另一个方法
通过图片显示
使用一个单独的摄像机渲染该层,然后转化成照片
Unity3D学习之UI系统——UGUI_第125张图片
Unity3D学习之UI系统——UGUI_第126张图片
拖入到taget camera
Unity3D学习之UI系统——UGUI_第127张图片
在UI里创建RawImage
Unity3D学习之UI系统——UGUI_第128张图片

15.2 粒子特效在UI之前

Unity3D学习之UI系统——UGUI_第129张图片
粒子特效和3D物体基本一致

16 异形按钮

点击图片按钮的空白区域也会响应,所以要设置异性按钮
Unity3D学习之UI系统——UGUI_第130张图片
Unity3D学习之UI系统——UGUI_第131张图片
在这里插入图片描述
改变点击后影响的控件 target Graphic
Unity3D学习之UI系统——UGUI_第132张图片
Unity3D学习之UI系统——UGUI_第133张图片

通过代码改变图片的透明度
Unity3D学习之UI系统——UGUI_第134张图片
在这里插入图片描述

17 自动布局组件

Unity3D学习之UI系统——UGUI_第135张图片

17.1 布局属性

Unity3D学习之UI系统——UGUI_第136张图片

Unity3D学习之UI系统——UGUI_第137张图片
Unity3D学习之UI系统——UGUI_第138张图片

17.2 水平垂直布局组件

Unity3D学习之UI系统——UGUI_第139张图片
给父对象添加
Unity3D学习之UI系统——UGUI_第140张图片
Unity3D学习之UI系统——UGUI_第141张图片
在这里插入图片描述
设置之后会自动调节子对象的大小
Unity3D学习之UI系统——UGUI_第142张图片
在这里插入图片描述
会是否强制扩展子对象

添加 Layout Element 组件,规则会按布局元素进行设置,
Unity3D学习之UI系统——UGUI_第143张图片
父对象最小后,会按子对象的大小显示
Unity3D学习之UI系统——UGUI_第144张图片
父对象变大后,会出现上图情景

17.3 水平布局组件

和垂直布局差不多
Unity3D学习之UI系统——UGUI_第145张图片

17.4 网格布局组件

Unity3D学习之UI系统——UGUI_第146张图片Unity3D学习之UI系统——UGUI_第147张图片
添加后
Unity3D学习之UI系统——UGUI_第148张图片
Unity3D学习之UI系统——UGUI_第149张图片
Unity3D学习之UI系统——UGUI_第150张图片

17.5 内容大小适配器

Unity3D学习之UI系统——UGUI_第151张图片
Unity3D学习之UI系统——UGUI_第152张图片
Unity3D学习之UI系统——UGUI_第153张图片
和ScrollView配合使用
Unity3D学习之UI系统——UGUI_第154张图片

Unity3D学习之UI系统——UGUI_第155张图片

17.6 宽高比适配器

Unity3D学习之UI系统——UGUI_第156张图片

Unity3D学习之UI系统——UGUI_第157张图片

18 画布组Canvas Group

在panel 组件 添加,管理画布中所有的组件
Unity3D学习之UI系统——UGUI_第158张图片
Unity3D学习之UI系统——UGUI_第159张图片

19 UGUI源代码

在这里插入图片描述

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