Unity UGUI使用手册

概述

UGUI(Unity Graphical User Interface)  :Unity 图像用户界面

在游戏开发中，我们经常需要搭建一些图形用户界面。Unity内置的UGUI可以帮助开发者可视化地拼接界面，提高开发效率。UGUI提供不同样式的UI组件，并且封装了对应功能的API，可以满足绝大多数的UI界面开发需求。

组件

使用频率

Text

⭐⭐⭐⭐⭐

Button

⭐⭐⭐⭐⭐

Image

⭐⭐⭐⭐⭐

Scrollview

⭐⭐⭐⭐⭐

布局组件

⭐⭐⭐⭐⭐

InputField

⭐⭐⭐⭐

Slider

⭐⭐⭐⭐

Toggle

⭐⭐⭐

ToggleGroup

⭐⭐

Mask/RectMask 2D

⭐⭐⭐

Outline

⭐⭐⭐

Shadow

⭐⭐⭐

Dropdown

⭐⭐

Raw Image

⭐⭐

ScrollBar

⭐⭐

UI组件

Canvas

Canvas 是所有 UI 元素都应该位于其中的区域。Canvas 是带有 Canvas 组件的游戏对象，所有 UI 元素都必须是此类 Canvas 的子项。

如果场景中还没有 Canvas，则使用菜单 GameObject > UI > Image 创建新的 UI 元素（例如图像）会自动创建一个 Canvas。UI 元素将创建为此 Canvas 的子元素。

Canvas 中的 UI 元素的绘制顺序与它们在 Hierarchy 中的显示顺序相同。首先绘制第一个子项，然后绘制第二个子项，依此类推。如果两个 UI 元素重叠，则后一个 UI 元素将出现在前一个 UI 元素的顶部。

要更改哪个元素显示在其他元素之上，只需通过拖动元素来重新排序 Hierarchy 中的元素即可。还可以通过在 Transform 组件上使用以下方法从脚本中控制顺序：SetAsFirstSibling、SetAsLastSirbling 和 SetSiblingIndex。

Render Mode 渲染模式

Screen Space-Overlay：所有UI元素都渲染在场景中的最上层
Screen Space-Camera：画布放置在指定摄像机前面的给定距离处。场景中的物体可以显示在UI前面
World Space：应用：让Canvas更像一个游戏对象，可以在场景中移动，常用于制作跟随角色的血

Text

Text 控件向用户显示一段非交互式文本。这可用于在界面显示标题或标签，或者显示说明文本等。

属性功能
Text 控件显示的文本
Font  字体字体资源
Font Style  字形应用于文本的样式。选项包括 Normal（普通）、Bold（粗体）、Italic（斜体） 和 Bold And Italic（粗体+斜体）
Font Size  字体大小显示文本的大小
Line Spacing  行距文本行之间的垂直分隔
Rich Text  富文本是否使用富文本
Alignment  对准文本的水平和垂直对齐方式
Align by Geometry  按几何图形对齐不勾选的时候，内容和rect上边会由一点距离，勾选之后就没有了
Horizontal Overflow 

水平超框处理

Wrap：超框部分换行显示

Overflow：直接超框显示，不换行

Vertical Overflow 

垂直超框处理

Truncate ：超过文本框高度部分直接截断不显示

Overflow：超过文本框高度部分超框显示

Best Fit 文本适配，根据文本内容大小调整字体尺寸，可以用于处理多语言文本
Color 

设置文本的颜色

Material 用于渲染文本的材质（目前开发中暂未用到）
Raycast Target需要和组件进行交互时使用，未用到时建议取消勾选
Raycast Padding调整可点击交互的区域大小
Maskable用于控制UI元素是否受到父级遮罩组件的影响

Text和Text Mesh Pro的区别

1、Text字体放大过后会模糊失真，Text Mesh Pro字体放大后依然清晰

2、Text本身可以支持不同语言文本显示（包括中文），TextMeshPro需要创建对应语言的字体资源才能使用。

Image

用于显示图标或图像，只能使用Sprite精灵贴图类型

属性功能
Source Image  源图片表示要显示的图像的 Texture（必须作为Sprite导入）
Color  颜色要应用于图像的颜色。
Material  材料用于渲染图像的材质，一般用来处理图像置灰
Raycast Target  需要和组件进行交互时使用，未用到时建议取消勾选
Raycast Padding调整可点击交互的区域大小
Maskable用于控制UI元素是否受到父级遮罩组件的影响
Image Type(重要属性)

  • Simple - 均匀缩放整个 sprite。

  • Sliced - 在图片被九宫格切割后，可以进行填充拉伸

  • Tiled -  类似于瓦片平铺，但平铺（重复）中心部分，而不是拉伸它。

  • Filled - 填充类型，可以用来实现进度条、血条效果

Set Native Size将图像框的尺寸设置为 Texture 的原始像素大小。

 Button

用于响应玩家的点击操作

Button组件一般与Image（或者Raw Image）组件同时使用，并且Image的Raycast Target需要勾选（用于响应玩家的交互）。

属性功能
Interactable  可交互如果取消勾选，按钮就不可点击交互
Transition  过渡

对用户不同交互状态的显示

处理五种状态：普通、高亮（鼠标进入按钮区域）、按下、选中（点击后）、禁用

共有四种过渡模式

None:没有效果

Color Tine:颜色切换过渡，不同状态显示不同颜色

Sprite Swap:图片切换过渡，不同状态显示不同图片

Animation:动画切换过渡，不同状态播放不同Animation动画

点击Auto Generate Aniamtion，Unity会自动生成动画控制器和动画片段并且为目标添加Animator组件，通过Animation窗口对动画片段进行设计，通过Animator对动画进行控制。

按钮绑定点击响应逻辑

1、直接拖拽

2、代码设置

btnConnect.onClick.AddListener(() =>
{Debug.Log("Hello World!");
});

 Scrollview/ScrollRect

滚动视图：当需要在小区域中显示占用大量空间的内容时，可以使用 Scroll Rect。Scroll Rect 提供滚动此内容的功能。

属性功能

Content

这是对要滚动的UI元素的Rect Transform的引用

Horizontal

可以水平滚动

Vertical

可以垂直滚动

Movement Type

Unrestricted 不受限制

Elastic 弹性

Clamped 夹紧

使用Elastic或Clamped强制内容保持在滚动矩形的范围内。当内容到达滚动矩形的边缘时，弹性模式会弹起内容

Elasticity

弹力，这是弹性模式中弹力大小，数值越大，反弹速度就越慢

Inertia

惯性 ，当设置惯性时，当指针在拖动后释放时，内容将继续移动。当没有设置惯性时，内容只会在拖动时移动。

Deceleration Rate

减速速率，当惯性设置时，减速速率决定内容停止移动的速度。速率为0将立即停止移动。值为1意味着移动永远不会减慢。

Scroll Sensitivity

滚动灵敏度

Viewport

视窗，引用视图端口的矩形变换，它是矩形变换内容的父视图。

1、自动适配Content

一般在Content节点上挂载Content Size Fitter和Vertical Layout Group，这样组件可以自动根据子物体多少进行尺寸适配，这样就可以比较好的显示滑动效果了。

2、滑动到列表头或者列表尾部。

以垂直滑动列表来说

//滑到列表头部
ScrollRect.normalizedPosition = new Vector2(0, 1);//滑倒列表尾部
ScrollRect.normalizedPosition = new Vector2(0, 0);

InputField

文本输入框

属性功能

Character Limit

可输入的最大字符数的值

Content Type

Standard允许所有输入
Autocorrected允许所有输入并在支持它的平台上执行自动校正
IntegerNumber允许使用整数值（正或负）
DecimalNumber允许使用小数（正数或负数）
Alphanumeric允许使用字母 A-Z、a-z 和数字 0-9

Name		InputField 用于输入名称，并且每个单词的首字母强制采用大写形式。请注意，用户可以通过删除自动采用大写形式的字母来规避首字母大写规则
EmailAddress用于输入电子邮件地址的输入
Password允许所有输入，并通过将其显示为星号字符来隐藏输入的字符
Pin允许使用整数，并通过将其显示为星号字符来隐藏输入的字符
Custom允许用户定义的设置的自定义类型

Line Type

Single Line：单行文本框，可以输入单行文本

Multi Line Submit：多行文本框，可以输入多行文本。当用户按下Enter键时，输入文本会被提交

Multi Line Newline：多行文本框，可以输入多行文本。当用户按下Enter键时，会插入一个换行符

Caret Blink Rate
 

调节光标闪烁的频率，数值越大，闪烁的越快

Caret Width

调节光标的宽度，数值越大，光标越宽
Custom Caret Color
 		光标默认为深灰色，勾选后会弹出Caret Color属性，可以修改光标的颜色
Selection Color选择文本时的颜色（就是输入完再选择时的底色），默认为浅蓝
Hide Mobile Input
 		在移动设备上隐藏虚拟键盘（官方此属性适用于ios）
Read only是否只读，如果勾选，次输入框就不接受输入

交互事件绑定

​

//输入内容变化
inputField.onValueChanged.AddListener((str) =>
{Debug.Log(str);
});//完成输入后点击回车键
inputField.onEndEdit.AddListener((str) =>
{Debug.Log(str);
});

Slider

滑动条

​

​

属性功能
Interactable  是否可交互，用作进度条时一般取消勾选，用作设置调整数值时一般要勾选
Fill Rect  用于控件填充区域的图形。
Handle Rect用于控件的滑动“手柄”部分的图形
Direction 拖动手柄时滑块值增加的方向。选项包括 Left To Right、Right To Left、Bottom To Top 和 Top To Bottom
Min Value 滑动条的最小值
Max Value 滑动条的最大值
Whole Numbers  滑块是否应限制为整数值？
Value [0,1]

交互事件绑定

 Slider.onValueChanged.AddListener((value) =>
{Debug.Log($"进度值：{value}");
});

Toggle

单选开关

//isOn bool
Toggle.onValueChanged.AddListener((isOn) =>
{Debug.Log($"开关状态：{isOn}");
});

ToggleGroup

开关组

一般实现单选开关的作用（选中组中一个开关，取消选中其他开关）,必须保证其中一个被勾选。如果勾选Allow Switch Off，所有的开关都可以被关闭。

Mask/Rect Mask 2D

遮罩组件需要挂载到显示图像的父节点上

Rect Mask 2D 进行矩形裁剪

还可进行边缘虚化

Mask和Rect Mask 2D的区别：
1、Mask主要处理不规则图形遮罩效果，RectMask2D只能做矩形遮罩。

2、Mask需要一个Image来当作遮罩区域,子节点在Image[渲染区域]才会显示，RectMask2D以自身RectTransform为裁剪区域，可以不挂载Image组件,子节点在[RectTransform区域]内显示。

3、Rect Mask 2D比Mask性能好，(例如常见于scrollview的情况下,创建scrollview默认是Mask,可以选择手动替换成RectMask2D,大多数情况都适用,会有些许性能提升)

Outline

文本轮廓组件

Shadow

文本阴影组件

下拉列表可用于让用户从选项列表中选择单个选项。该控件显示当前选择的选项。单击后，它会打开选项列表，以便可以选择新选项。选择新选项后，列表将再次关闭，并且控件显示新的选定选项。如果用户单击控件本身或 Canvas 中的其他任何位置，则列表也会关闭。

属性功能
Template  模板下拉列表的模板的 Rect Transform。
Caption Text  字幕文本用于保存当前所选选项的文本。（可选）
Caption Image  标题图像用于保存当前所选选项的图像。（可选）
Item Text  用于保存项目的文本。（可选）
Item Image  用于保存项目的图像。（可选）
Value  当前所选选项的索引。0 是第一个选项，1 是第二个选项，依此类推。
Options  可能的选项列表。可以为每个选项指定文本字符串和图像。
//参数index是int类型，代表选中项的索引
Dropdown.onValueChanged.AddListener((index) =>
{Debug.Log($"选中{index}");
});

Raw Image

原始图像组件

RawImage可以结合Render Texture显示相机视野图片，结合video player播放视频

Image只能使用Sprite精灵贴图，Raw Image可以使用任何纹理

Image比Raw Image更消耗性能

ScrollBar

滚动条

布局组件

Content Size Fitter

内容尺寸适配器

​

属性功能

Horizontal Fit

Unconstrained

不要根据布局元素驱动宽度

Min Size

根据布局元素的最小宽度驱动宽度

Preferred Size

宽度适配

Vertical Fit

Unconstrained

不要根据布局元素驱动高度

Min Size

基于布局元素的最小高度驱动高度

Preferred Size

高度适配

Horizontal Layout Group

水平布局组

Property:  财产：Function:  功能：
Padding  填充调整上下左右边距
Spacing  间距布局元素之间的间距。
Child Alignment  子对齐

Control Child Size  控制子项大小Layout Group 是否控制其子布局元素的宽度和高度。
Use Child Scale  使用子比例布局组在调整元素大小和布局元素时是否考虑其子布局元素的比例。
Child Force Expand  Child Force 扩展是否强制子布局元素展开以填充额外的可用空间。

Vertical Layout Group

垂直布局组

Grid Layout Group

网格布局组

1、Flexible:根据宽和高适配最大可以显示的数量

2、Fixed Column Count：指定最大显示列数

3、Fixed Column Count：指定最大显示行数

事件系统

可以参考我的另一篇文章

Unity 事件触发类型_unity event=debug.log-CSDN博客

参考文章

Unity 3D - Mask和RectMask2D区别-CSDN博客

Unity UI: Unity User Interface | Unity UI | 1.0.0

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/diannao/77364.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Python web程序在服务器上面部署详细步骤

Python web程序在服务器上面部署详细步骤

在服务器上部署Python web程序通常涉及以下步骤： 设置服务器环境: 选择合适的服务器，如AWS EC2、DigitalOcean Droplet等。配置服务器操作系统，例如Ubuntu、CentOS等。安装必要的软件，如Python、pip、git等。 准备Python web程序…
阅读更多...
条件生成对抗网络(Conditional GAN, CGAN)原理及实现（pytorch版）

条件生成对抗网络(Conditional GAN, CGAN)原理及实现（pytorch版）

CGAN 原理及实现 一、CGAN 原理1.1 基本概念1.2 与传统GAN的区别1.3 目标函数1.4 损失函数1.5 条件信息的融合方式1.6 与其他GAN变体的对比1.7 CGAN的应用1.8 改进与变体 二、CGAN 实现2.1 导包2.2 数据加载和处理2.3 构建生成器2.4 构建判别器2.5 训练和保存模型2.6 绘制训练损…
阅读更多...
Go语言比较递归和循环执行效率

Go语言比较递归和循环执行效率

一、概念 1.递归 递归是指一个函数在其定义中直接或间接调用自身的编程方法 。简单来说，就是函数自己调用自己。递归主要用于将复杂的问题分解为较小的、相同类型的子问题，通过不断缩小问题的规模，直到遇到一个最简单、最基础的情况&#x…
阅读更多...
keepalived高可用介绍

keepalived高可用介绍

keepalived 是 Linux 一个轻量级的高可用解决方案，提供了心跳检测和资源接管、检测集群中的系统服务，在集群节点间转移共享IP 地址的所有者等。 工作原理 keepalived 通过 VRRP（virtual router redundancy protocol）虚拟路由冗余…
阅读更多...
数据分享：汽车测评数据

数据分享：汽车测评数据

说明：如需数据可以直接到文章最后关注获取。 1.数据背景 Car Evaluation汽车测评数据集是一个经典的机器学习数据集，最初由 Marko Bohanec 和 Blaz Zupan 创建，并在 1997 年发表于论文 "Classifier learning from examples: Common …
阅读更多...
NLP简介及其发展历史

NLP简介及其发展历史

自然语言处理（Natural Language Processing，简称NLP）是人工智能和计算机科学领域中的一个重要分支，致力于实现人与计算机之间自然、高效的语言交流。本文将介绍NLP的基本概念以及其发展历史。 一、什么是自然语言处理&#xff1f…
阅读更多...
HOOPS Visualize：跨平台、高性能的三维图形渲染技术解析

HOOPS Visualize：跨平台、高性能的三维图形渲染技术解析

在当今数字化时代，三维可视化技术已成为众多行业的核心竞争力。HOOPS Visualize作为一款功能强大的三维图形渲染引擎，凭借其卓越的渲染能力、跨平台支持、丰富的交互功能、高度定制化以及快速部署等特性，为开发人员提供了构建高质量、高性能3…
阅读更多...
蓝桥杯速成刷题清单（上）

蓝桥杯速成刷题清单（上）

一、1.排序 - 蓝桥云课 &#xff08;快速排序&#xff09;算法代码&#xff1a; #include <bits/stdc.h> using namespace std; const int N 5e5 10; int a[N];int main() {int n;cin >> n;for (int i 0; i < n; i) {cin >> a[i];}sort(a, a n);for …
阅读更多...
Java面试黄金宝典44

Java面试黄金宝典44

1. 查看进程的运行堆栈信息命令 gstack gstack 是 Linux 系统下用于查看指定进程运行时堆栈信息的工具。当程序出现崩溃、死锁或者性能瓶颈等问题时，借助 gstack 可以查看进程中各个线程的调用栈，从而辅助开发人员定位问题。 定义 gstack 本质上是一个封装了底层 ptrace 系统…
阅读更多...
嵌入式硬件篇---TOF陀螺仪SPI液晶屏

嵌入式硬件篇---TOF陀螺仪SPI液晶屏

文章目录 前言1. TOF传感器&#xff08;Time of Flight&#xff09;原理STM32使用方法硬件连接SDASCLVCC\GND 软件配置初始化I2C外设库函数驱动&#xff1a;读取数据 2. 陀螺仪&#xff08;如MPU6050&#xff09;原理STM32使用方法硬件连接SDA/SCLINTVCC/GND 软件配置初始化I2C…
阅读更多...
【scikit-learn基础】--『预处理』之 正则化

【scikit-learn基础】--『预处理』之 正则化

数据的预处理是数据分析&#xff0c;或者机器学习训练前的重要步骤。 通过数据预处理&#xff0c;可以 提高数据质量&#xff0c;处理数据的缺失值、异常值和重复值等问题&#xff0c;增加数据的准确性和可靠性整合不同数据&#xff0c;数据的来源和结构可能多种多样&#xff…
阅读更多...
LeetCode Hot100 刷题笔记（2）—— 子串、普通数组、矩阵

LeetCode Hot100 刷题笔记（2）—— 子串、普通数组、矩阵

目录 前言 一、子串 1. 和为 K 的子数组 2. 滑动窗口最大值 3. 最小覆盖子串 二、普通数组 4. 最大子数组和 5. 合并区间 6. 轮转数组 7. 除自身以外数组的乘积 8. 缺失的第一个正数 三、矩阵 9. 矩阵置零 10. 螺旋矩阵 11. 旋转图像 12. 搜索二维矩阵 II 前言 一、子串&#…
阅读更多...
【Git 常用操作指令指南】

【Git 常用操作指令指南】

一、初始化与配置 1. 设置全局账户信息 git config --global user.name "用户名" # 设置全局用户名 git config --global user.email "邮箱" # 设置全局邮箱 --global 表示全局生效&#xff0c;若需针对单个仓库配置&#xff0c;可省略该参数 2.…
阅读更多...
教培行业创建自己品牌的重要意义——教育培训小程序

教培行业创建自己品牌的重要意义——教育培训小程序

在竞争激烈的教培行业&#xff0c;创建自身品牌意义重大。 拥有独特品牌能显著提升机构竞争力与辨识度。如今教培市场同质化严重&#xff0c;一个亮眼的品牌小程序可使机构从众多竞争者中脱颖而出&#xff0c;让学员和家长快速识别并记住。 品牌小程序有助于增强信任度和口碑。…
阅读更多...
Docker 介绍 · 安装详细教程

Docker 介绍 · 安装详细教程

为什么选择 Docker&#xff1f; ✅ 环境一致性 – 告别“在我机器上能跑”的问题&#xff0c;确保开发、测试、生产环境一致。 ✅ 高效轻量 – 秒级启动&#xff0c;资源占用远低于传统虚拟机。 ✅ 跨平台支持 – 可在任何支持 Docker 的环境中运行&#xff0c;包括云服务器、…
阅读更多...
GitHub 上开源一个小项目的完整指南

GitHub 上开源一个小项目的完整指南

GitHub 上开源一个小项目的完整指南 &#x1f680; 第一步&#xff1a;准备你的项目 在开源之前&#xff0c;确保项目是可用且有一定结构的&#xff1a; ✅ 最低要求 项目文件清晰、结构合理&#xff08;比如&#xff1a;src/、README.md、LICENSE&#xff09;项目能在本地正…
阅读更多...
React 第三十节 使用 useState 和 useEffect Hook实现购物车

React 第三十节 使用 useState 和 useEffect Hook实现购物车

不使用 redux 实现 购物车案例 使用 React 自带的 useState 和 useEffect Hook 即可实现购物车 export default function ShoppingCar() {// 要结算的商品 总数 以及总价const [totalNum, setTotalNum] useState(0)const [totalPerice, setTotalPerice] useState(0)// 商品…
阅读更多...
蓝桥杯第十一届省赛C++B组真题解析

蓝桥杯第十一届省赛C++B组真题解析

蓝桥杯第十一届省赛CB组真题解析 八、回文日期https://www.lanqiao.cn/problems/348/learning 方法一&#xff1a;暴力枚举所有的日期&#xff0c;记录有多少个回文日期。 #include <bits/stdc.h> using namespace std; int month[13]{0,31,28,31,30,31,30,31,31,30,31…
阅读更多...
Python和MicroPython的解释器区别

Python和MicroPython的解释器区别

Python和MicroPython的解释器不是同一个&#xff0c;它们在设计目标、实现方式和运行环境上都有显著的区别。以下是它们的主要区别&#xff1a; 1. 底层实现 Python解释器&#xff08;CPython&#xff09;&#xff1a; Python的标准解释器是CPython&#xff08;C语言实现的Pyt…
阅读更多...
Cython加密多层目录中的Python脚本方案

Cython加密多层目录中的Python脚本方案

近期有一个VueJavaDocker项目中需要加密Python脚本的需求&#xff0c;调研后决定采用Cython。 使用Cython编译为二进制 步骤&#xff1a; 安装Cython&#xff1a;pip install cython创建setup.py&#xff1a; from distutils.core import setup from Cython.Build import c…
阅读更多...
最新文章

Copyright @ 2022~2023