Unity之UI_unity ui

作者：Gausst松鼠会 | 2024-02-18 23:03:06

踩

unity ui

在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;
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13

（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 相同的方式显示精灵，但不同之处是使用定义的方向、方法和数量从原点开始填充精灵。
在这里插入图片描述