Unity之UI

2023-11-11


在Unity中开发UI功能多样,UI工具包、UGUI、IMGUI等,这里主要介绍UGUI。

一、Canvas

画布 (Canvas) 是应该容纳所有 UI 元素的区域。画布是一种带有画布组件的游戏对象,所有 UI 元素都必须是此类画布的子项。

1.创建Canvas

在Unity编辑视图的Hierarchy中右键UI->Canvas创建:
在这里插入图片描述

2.Render Mode

渲染模式分为三种:

(1)Screen Space - Overlay

这种渲染模式将UI放置于在场景之上渲染的屏幕上,如果调整屏幕大小或更改分辨率,则画布将自动更改大小来适应此情况。
在这里插入图片描述
此模式下会出现Sort Order值,当场景中含有多个Canvas时可以通过设置此值来控制每个Canvas的遮挡顺序。

Target Display:用于覆盖模式,将显示 UI 画布的显示索引,该设置指示画布渲染到指定的显示中, 支持的最大辅助显示(例如显示器)数量为 8。

Additional Shader Channels:获取或设置创建Canvas网格时要使用的其他着色器通道的遮罩,在画布始终包含位置,颜色和着色UV0渠道产生了叠加的网格时画布,也将包括普通和正切为ScreenSpace.Camera和世界空间画布。这些是要复制的可选附加参数。
在这里插入图片描述

using UnityEngine;

public class SetCanvasShaderChannels : MonoBehaviour
{
    public Canvas canvas;

    void Start()
    {
        canvas.additionalShaderChannels |= AdditionalCanvasShaderChannels.Normal;
        canvas.additionalShaderChannels |= AdditionalCanvasShaderChannels.TexCoord1;
        canvas.additionalShaderChannels |= AdditionalCanvasShaderChannels.Tangent;
    }
}

(2)Screen Space - Camera

此渲染模式类似于 Screen Space - Overlay,但在此模式下,画布放置在指定摄像机前面的给定距离处。UI 元素由此摄像机渲染,这意味着摄像机设置会影响 UI 的外观。如果摄像机设置为正交视图,则 UI 元素将以透视图渲染,透视失真量可由摄像机视野控制。如果调整屏幕大小、更改分辨率或摄像机视锥体发生改变,则画布也将自动更改大小来适应此情况。
在这里插入图片描述
RenderCamera:渲染显示该画布的相机。

Plane Distance:到渲染相机的距离。

Sorting Layer:当场景中有多个Canvas时控制每个Canvas的遮挡关系,为Default时,按Canvas在Hierarchy中的顺序决定。

(3)World Space

在此渲染模式下,画布的行为与场景中的所有其他对象相同。画布大小可用矩形变换进行手动设置,而 UI 元素将基于 3D 位置在场景中的其他对象前面或后面渲染。
在这里插入图片描述

3.Pixel Perfect

只有RenderMode为Screen类型时才有的选项。重置元素大小和坐标,使贴图的像素完美对应到屏幕像素上,使UI元素像素对应,效果就是边缘清晰不模糊。但是,如果许多元素被缩放或旋转过,或者使用了微妙的动画位置或缩放,则禁用 pixelPerfect 可能比较好,这样可使移动更为平滑。

二、基本布局

1.矩形工具

出于布局目的,每个 UI 元素都表示为一个矩形。可以使用工具栏中的矩形工具在场景视图中操作此矩形。矩形工具既可用于 Unity 的 2D 功能,也可用于 UI,实际上甚至可以用于 3D 对象。
在这里插入图片描述

2.矩形变换(Rect Transform)

矩形变换与常规变换一样具有位置、旋转和缩放,但它也有宽度和高度,用于指定矩形的尺寸。

3.大小与缩放

当使用矩形工具改变对象的大小时,通常对于 2D 系统中的 Sprites 和 3D 对象,它会改变对象的局部比例。然而,当它用于一个带有 Rect Transform 的对象时,它会改变宽度和高度,保持局部比例不变。这种调整大小不会影响字体大小、切片图像的边框等。

4.枢(Pivot)

旋转、大小和缩放修改发生在枢轴周围,因此枢轴的位置会影响旋转、调整大小或缩放的结果。当工具栏的枢轴按钮设置为枢轴模式时,可以在场景视图中移动矩形变换的枢轴。
在这里插入图片描述

5.锚(Anchors)

Rect Transforms 包括一个称为anchors的布局概念。锚点在场景视图中显示为四个小三角形手柄,并且锚点信息也显示在检查器中。
如果 Rect Transform 的父级也是 Rect Transform,则可以通过各种方式将子 Rect Transform 锚定到父 Rect Transform。例如,孩子可以被锚定到父母的中心,或角落之一。
锚定还允许孩子与父母的宽度或高度一起伸展。矩形的每个角到其对应的锚点都有一个固定的偏移量,即矩形的左上角到左上角的锚点有一个固定的偏移量,等等。这样矩形的不同角可以锚定到不同的点上。父矩形。
锚点的位置以父矩形宽度和高度的分数(或百分比)定义。0.0 (0%) 对应左侧或底部,0.5 (50%) 对应中间,1.0 (100%) 对应右侧或顶部。但锚点不限于侧面和中间;它们可以锚定到父矩形内的任何点。
您可以单独拖动每个锚点,或者如果它们在一起,您可以通过单击它们之间的中间并拖动来将它们拖到一起。如果在拖动锚点时按住Shift键,矩形的相应角将与锚点一起移动。
锚点手柄的一个有用功能是它们会自动捕捉到同级矩形的锚点以实现精确定位。
锚定预设:
在这里插入图片描述
如果锚编号字段不可见,您可以单击锚扩展箭头以显示锚编号字段。Anchor Min对应于 Scene View 中左下角的锚点手柄,Anchor Max对应于右上角的手柄。
矩形的位置字段显示不同,具体取决于锚点是在一起(产生固定的宽度和高度)还是分开(这会导致矩形与父矩形一起拉伸)。
当所有锚点手柄都在一起时,显示的字段为 Pos X、Pos Y、宽度和高度。Pos X 和 Pos Y 值表示枢轴相对于锚点的位置。
当锚点分开时,字段可以部分或完全更改为“左”、“右”、“上”和“下”。这些字段定义了由锚定义的矩形内的填充。如果锚点水平分离,则使用 Left 和 Right 字段,如果它们垂直分离,则使用 Top 和 Bottom 字段。

三、视觉组件

1.Text

在这里插入图片描述
在这里插入图片描述

2.Image

Image Type:
在这里插入图片描述
Simple - 均匀缩放整个精灵。
Sliced - 使用 3x3 精灵分区,确保大小调整不会扭曲角点,而是仅拉伸中心部分。
Tiled - 类似于 Sliced,但平铺(重复)中心部分而不是对其进行拉伸。对于完全没有边框的精灵,整个精灵都是平铺的。
Filled - 按照与 Simple 相同的方式显示精灵,但不同之处是使用定义的方向、方法和数量从原点开始填充精灵。
在这里插入图片描述

3.Raw Image

原始图像控件向用户显示非交互式图像。此图像可用于装饰或图标之类的用途,还可以从脚本更改图像以便反映其他控件的更改。该控件类似于图像 (Image) 控件,但为动画化图像和准确填充控件矩形提供了更多选项。但是,图像控件要求其纹理为精灵,而原始图像可以接受任何纹理。
在这里插入图片描述
在这里插入图片描述

4.Mask

遮罩不是可见的 UI 控件,而是一种修改控件子元素外观的方法。遮罩将子元素限制(即“掩盖”)为父元素的形状。因此,如果子项比父项大,则子项仅包含在父项以内的部分才可见。
在这里插入图片描述

5.RectMask2D

RectMask2D 是一个类似于遮罩 (Mask)控件的遮罩控件。遮罩将子元素限制为父元素的矩形。与标准的遮罩控件不同,这种控件有一些限制,但也有许多性能优势。

6.Shadow

阴影组件为图形组件(如文本或图像)添加简单的轮廓效果。必须与图形组件位于同一游戏对象上。
在这里插入图片描述

7.Outline

轮廓组件为图形组件(如文本或图像)添加简单的轮廓效果。必须与图形组件位于同一游戏对象上。
在这里插入图片描述

8.Position as UV1

此组件为文本和图像图形添加简单的 UV1 位置效果。
在这里插入图片描述

四、交互组件

1.Button

按钮控件可响应用户的点击并用于启动或确认操作。

2.Toggle

开关控件是让用户打开或关闭某个选项的复选框。

3.Toggle Group

开关组不是可见的 UI 控件,而是一种修改一组开关的行为的方法。属于同一组的开关将受到约束,即一次只能打开其中一个开关:通过按下打开其中一个开关便会自动关闭其他开关。
在这里插入图片描述

4.Slider

滑动条控件允许用户通过拖动鼠标从预定范围中选择数值。请注意,类似的滚动条 (ScrollBar)控件用于滚动而不是选择数值。熟悉的示例包括游戏中的难度设置和图像编辑器中的亮度设置。
在这里插入图片描述
在这里插入图片描述

5.Dropdown

此控件会显示当前选择的选项。单击后,此控件会打开选项列表,以便选择新选项。选择新选项后,列表再次关闭,而控件将显示新选择的选项。如果用户单击控件本身或画布内的任何其他位置,列表也将关闭。
在这里插入图片描述

6.InputField

输入字段是一种使文本 (Text) 控件的文本可编辑的方法。与其他交互控件一样,输入字段本身不是可见的 UI 元素,必须与一个或多个可视 UI 元素组合才能显示。
在这里插入图片描述
在这里插入图片描述

7.Scroll View

当占用大量空间的内容需要在小区域中显示时,可使用滚动矩形。滚动矩形提供了滚动此内容的功能。

通常情况下,滚动矩形与遮罩 (Mask) 相结合来创建滚动视图,在产生的视图中只有滚动矩形内的可滚动内容为可见状态。此外,滚动矩形还可与一个或两个可拖动以便水平或垂直滚动的滚动条 (Scrollbar) 组合使用。
在这里插入图片描述

五、自动布局

1.布局元素

在这里插入图片描述

2.内容大小适配器(Content Size Fitter)

内容大小适配器充当布局控制器,可用于控制其自身布局元素的大小。大小由游戏对象上布局元素组件提供的最小大小或偏好大小确定。此类布局元素可以是图像或文本组件、布局组或布局元素组件。
在这里插入图片描述

3.宽高比适配器(Aspect Ratio Fitter)

宽高比适配器充当布局控制器,可用于控制其自身布局元素的大小。宽高比适配器可以调整高度来适应宽度或反之,也可以使元素在其父项内部适应或包裹其父项。宽高比适配器不考虑布局信息,例如最小大小和偏好大小。
在这里插入图片描述

4.水平布局组(Horizontal Layout)

在这里插入图片描述

5.垂直布局组(Vertical Layout)

在这里插入图片描述

6.网格布局组(Grid Layout)

在这里插入图片描述
在这里插入图片描述

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Unity之UI 的相关文章

随机推荐

  • Windows 10 和 Windows 11 有什么区别?

    Windows 10 和 Windows 11 有什么区别 Windows 11 具有 Windows 10 的全部功能和安全性 同时具有经重新设计而焕然一新的外观 它还自带一些新的工具 声音和应用 所有细节面面俱到 颜值 功能与安全性集于
  • Python字符串转为字典方法大全

    方法一 通过内置函数eval 1 2 3 4 5 6 7 8 9 10 11 12 13 str info name test age 18 dict info eval str info print string info type is
  • 【MYSQL】第一篇 Mysql如何处理百万级别的数据

    1 应尽量避免在 where子句中使用 或 lt gt 操作符 否则将引擎放弃使用索引而进行全表扫描 2 应尽量避免在 where子句中对字段进行 null值判断 否则将导致引擎放弃使用索引而进行全表扫描 3 尽量避免在 where子句中使
  • Jmeter性能测试 —— TPS拐点寻找

    寻找TPS性能拐点1 准备脚本 在本地电脑调试Jmeter压测脚本 上传到压测机Jmeter所在的服务器 2 执行压力测试 执行压测脚本 jmeter n t xianchengzuse jmx 记录业务压测数据 3 监控服务器性能指标 监
  • MySQL____高级查询、联合查询

    文章目录 一 聚合查询 1 count查询 总数统计 1 1count 用法1 1 2 count 用法2 1 3count 用法3 1 4 注意事项 2 SUM函数 总和统计 3 AVG函数 4 MAX函数 5 MIN函数 二 ifnul
  • 如何统计iOS产品不同渠道的下载量?

    一 前言 在开发过程中 Android可能会打出来很多的包 用于标识不同的商店下载量 原来觉得苹果只有一个商店 AppStore 如何做出不同来源的统计呢 本篇文章就是告诉大家如何做不同渠道来源统计 二 正文 先看一下苹果自家统计到的数据
  • unity局域网开关机步骤一-网络唤醒-设置电脑使允许局域网内其他电脑控制

    被控制端主机的设置 一 Bois界面网络唤醒的设置 外链图片转存失败 源站可能有防盗链机制 建议将图片保存下来直接上传 img TR2xwyAx 1593577482582 htts img blog csdnimg cn 20200701
  • 详细及易读懂的 大津法(OTSU)原理 和 比opencv自带更快的算法实现

    OTSU算法原理简述 最大类间方差是由日本学者大津 Nobuyuki Otsu 于1979年提出 是一种自适应的阈值确定方法 算法假设图像像素能够根据阈值 被分成背景 background 和目标 objects 两部分 然后 计算该最佳阈
  • C++之拷贝构造、拷贝赋值

    拷贝构造 class Stu public int no string name int age public Stu int no 10086 string name jin int age 18 no no name name age
  • springboot+mybatis-plus+双数据源

    springboot mybaits plus mybatis plus的双数据源和逆向工程的配置整合 废话不多说直接开始干 mybatis plus逆向工程的配置 public class CodeGenerator Project pa
  • JVM、GC和常用命令

    这是11月份的一个分享 借着组内分享的机会 重新梳理了一遍JVM的一些基本概念和学习资料 在这个PPT中 关于G1的部分比较粗略 最近正在恶补G1的知识 后面可能会单独整理一篇分享出来 需要原件的 可以在我的公众号 duqi Voice 后
  • 【头歌】Linux Linux从入门到精通

    https www educoder net paths 43 第1关 Linux初体验 bin bash 在以下部分写出完成任务的命令 begin cd ls a end 第2关 Linux常用命令 bin bash 在以下部分写出完成任
  • linux ping命令参数说明及使用

    一 参数说明 在控制台输入ping会有参数说明 BusyBox v1 22 1 2019 07 23 15 07 27 CST multi call binary Usage ping OPTIONS HOST Send ICMP ECHO
  • 2018 年,关于深度学习的 10 个预测

    我有一种预感 2018年 所有的事情都会发生巨变 我们在2017年看到的深度学习取得的惊人突破将会以一种强大的方式延续到2018年 2017年在深度学习领域的研究成果将会应用于日常的软件应用中 下面是我对2018年深度学习的10个预测 1
  • 抓取chrome所有版本密码

    文章首发先知社区 https xz aliyun com t 9752 工具已上传到github https github com SD XD Catch Browser 谷歌浏览器存储密码的方式 在使用谷歌浏览器时 如果我们输入某个网站的
  • python 无头模式 绕过检测_python爬虫反反爬虫有绝技,轻松绕开百度人机验证!...

    你可能已经了解到了无头浏览器的作用以及使用的方法 那么本篇文章就让我们一起用无头浏览器做点事情 是的你没有看错 我们要 搞 的对象就是百度指数这个网站 不知道你平时是否会应用到这里面的数据呢 今天的主要目标就是使用无头浏览器登录百度指数网站
  • 离散傅里叶变换MATLAB实现

    文章目录 要求 一 连续函数抽样 二 抽样长度确定 三 DFT 1 使用一次循环实现DFT 2 使用矩阵实现DFT 总结 要求 有一单频信号y t sin 2 ft 其中f 100Hz 和f 500Hz 分别用DFT求y t 的谱 抽样频率
  • 某中学校校园网络方案设计(课程设计)

    目录 一 绪论 1 1 中小学校园信息化应用的现状 1 2 中小学校园网络系统现状 二 需求分析 2 1 获取需求的途径 方法 过程等 2 2基本情况 2 3 建筑分布 2 4 信息点 需联网的设备 分布及数量 表格 三 设计 3 1 设计
  • cesium for ue5中actor的cesium georeference组件的改变(英文教程文档是更新了的)

    今天 重新回顾下cesium for ue的教程 actor添加cesium georeference组件 发现在ue5中 没有这个组件了 忍住卸载ue5 重新安装ue4 27的冲动 cesium的组件数量增多了 反而功能减少了 不可能 绝
  • Unity之UI

    Unity之UGUI 一 Canvas 1 创建Canvas 2 Render Mode 1 Screen Space Overlay 2 Screen Space Camera 3 World Space 3 Pixel Perfect