【UnityUGUI】UGUI六大组件和三大基本控件详解

news2025/1/4 6:32:34

在这里插入图片描述

👨‍💻个人主页：@元宇宙-秩沅

👨‍💻 hallo 欢迎点赞👍 收藏⭐ 留言📝 加关注✅!

👨‍💻 本文由秩沅原创

👨‍💻 收录于专栏：UI_Unity专栏

在这里插入图片描述

⭐习题总结专题篇⭐

文章目录

- ⭐习题总结专题篇⭐
- 🎶前言
- ⭐UGUI专题篇⭐
- 🎶前言
🎶UGUI的六大组件图示
- 🎶（==1==）1.Canvas-画布组件
- - 👽 ScreenSpace —overlay（覆盖模式）
  - 👽 ScreenSpace—Camera 摄像机模式
  - 👽 World Space —AR VR
- 🎶（==2==）2.CanvasScaler—画布缩放控制器
- - 👽 前言——了解参数
  - 👽 三种适配模式
  - 👽 Constant Pixel Size（恒定像素模式）
  - <font color=red>👽Scale with screen Size（缩放模式）
  - 👽 Constant Physical Size（恒定物理模式）
  - 👽 3D特殊模式
- 🎶（==3==）3.Graphic Raycaster—图形射线投射器
- 🎶（==4==）4.EventSystem组件—UI事件的检查官
- 🎶（==5==）5.Standalone Input Module—独立输出模块
- 🎶（==6==）6.RectTransform—矩阵变换
🎶 UGUI基础控件
- 🎶（==1==）UGUI_image参数
- - 普通模式
  - 切片模式——节约资源
  - 填充模式——适合血条和CD缓冲的制作
  - 平铺模式——适合纹理的制作大面积的纹理。
- 🪶Image代码相关
- 🎶（==2==）UGUI_Text参数
- - 字体的自动裁剪和自动换行
  - BestFit_字体的自动适应
  - Rich Text富文本
  - 边缘线和阴影的效果添加
  - 代码控制
- 🎶（==3==）UGUI_RawImage参数
- 脑图
- 代码相关

🎶前言

素材来自唐老狮

🅰️

在这里插入图片描述

👨‍💻个人主页：@元宇宙-秩沅

👨‍💻 hallo 欢迎点赞👍 收藏⭐ 留言📝 加关注✅!

👨‍💻 本文由秩沅原创

👨‍💻 收录于专栏：unity常用API
在这里插入图片描述

⭐UGUI专题篇⭐

文章目录

- ⭐习题总结专题篇⭐
- 🎶前言
- ⭐UGUI专题篇⭐
- 🎶前言
🎶UGUI的六大组件图示
- 🎶（==1==）1.Canvas-画布组件
- - 👽 ScreenSpace —overlay（覆盖模式）
  - 👽 ScreenSpace—Camera 摄像机模式
  - 👽 World Space —AR VR
- 🎶（==2==）2.CanvasScaler—画布缩放控制器
- - 👽 前言——了解参数
  - 👽 三种适配模式
  - 👽 Constant Pixel Size（恒定像素模式）
  - <font color=red>👽Scale with screen Size（缩放模式）
  - 👽 Constant Physical Size（恒定物理模式）
  - 👽 3D特殊模式
- 🎶（==3==）3.Graphic Raycaster—图形射线投射器
- 🎶（==4==）4.EventSystem组件—UI事件的检查官
- 🎶（==5==）5.Standalone Input Module—独立输出模块
- 🎶（==6==）6.RectTransform—矩阵变换
🎶 UGUI基础控件
- 🎶（==1==）UGUI_image参数
- - 普通模式
  - 切片模式——节约资源
  - 填充模式——适合血条和CD缓冲的制作
  - 平铺模式——适合纹理的制作大面积的纹理。
- 🪶Image代码相关
- 🎶（==2==）UGUI_Text参数
- - 字体的自动裁剪和自动换行
  - BestFit_字体的自动适应
  - Rich Text富文本
  - 边缘线和阴影的效果添加
  - 代码控制
- 🎶（==3==）UGUI_RawImage参数
- 脑图
- 代码相关

🎶前言

🎶UGUI的六大组件图示

在这里插入图片描述

🎶（1）1.Canvas-画布组件

在这里插入图片描述

👽 ScreenSpace —overlay（覆盖模式）

UI组件一直显示在屏幕前，覆盖所有

对应图示：

在这里插入图片描述

👽 ScreenSpace—Camera 摄像机模式

摄像机不为主相机
主摄像机比UI摄像机的层级要低
使得3D物体可出现在面板前的步骤

参数对应图示

在这里插入图片描述

👽 World Space —AR VR

在这里插入图片描述

🎶（2）2.CanvasScaler—画布缩放控制器

👽 前言——了解参数

屏幕分辨率计算公式 = 画布尺寸 * 缩放系数

在这里插入图片描述

像素单位转存储单位：尺寸 x 16 位 / 8字节 /1024 = ？ kb

Cnvasscaler——画布缩放控制器：
在这里插入图片描述

👽 三种适配模式

在这里插入图片描述

👽 Constant Pixel Size（恒定像素模式）

在这里插入图片描述

👽Scale with screen Size（缩放模式）

在这里插入图片描述

👽 Constant Physical Size（恒定物理模式）

在这里插入图片描述

单位种类	1英寸
centimeter（厘米）	2.54cm =1 In
Millimeter（毫米）	25.4mm = 1 In
Points（点）	72P = 1 In
Picas（皮卡）	6 皮卡 = 1In
Inches（英寸）	1

👽 3D特殊模式

在这里插入图片描述

🎶（3）3.Graphic Raycaster—图形射线投射器

在这里插入图片描述

🎶（4）4.EventSystem组件—UI事件的检查官

在这里插入图片描述

🎶（5）5.Standalone Input Module—独立输出模块

在这里插入图片描述

🎶（6）6.RectTransform—矩阵变换

在这里插入图片描述

矩阵九宫格

单点是一键操作锚点的位置，shift+点击是连带操作轴心点的位置

锚点的重合和成矩阵的区别

重合时，子对象不会随着父对象变化而变化

在这里插入图片描述

变矩阵时会随着父对象的大小变化而变化

在这里插入图片描述

代码调用对应参数

(this.transform as Rectionsform).xx

🎶 UGUI基础控件

🎶（1）UGUI_image参数

在这里插入图片描述

普通模式

切片模式——节约资源

需要下载package manager。中的Sprite 2D资源包。
[外链图片转存失败,源站可能有防盗在这里插入!链机制,建描述]议将图片上https://传(imblog.csdnimg.cn/kfqayV95b67bfb4d0e9616cdde18d8f.pngb27(https://img-3blog.csdnimg.cn/8eaf95b67bfb4d0e9612b46cdde18d8f.png)]