开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> 游戏开发 -> Unity UGUI系统 -> 正文阅读

[游戏开发]Unity UGUI系统

UI系统对比

对 UI 系统的选择取决于是为 Unity 编辑器开发 UI，还是为游戏或应用程序开发运行时 UI。

UI 的类型	UI 工具包	Unity UI(uGUI)	IMGUI	注意事项
运行时（调试）	? *	?	?	这指用于调试用途的临时运行时 UI。
运行时（游戏内）	? *	?	不推荐	出于性能原因，Unity 不推荐将 IMGUI 用于游戏内运行时 UI。
Unity Editor	?	?	?	不能使用 Unity UI 为 Unity 编辑器创建 UI。

当然对于我来说，那必然是选择UGUI

基本布局

UI是为了什么？当然是美观，不美观的UI就是摆在厕所的满汉全席

画布组件（Canvas）

Canvas是进行 UI 布局和渲染的抽象空间。所有 UI 元素都必须是附加了画布组件的游戏对象的子对象。

Render Mode

Screen Space - Overlay

在此模式下，画布会进行缩放来适应屏幕，然后直接渲染而不参考场景或摄像机（即使场景中根本没有摄像机，也会渲染 UI）。UI 将绘制在所有其他图形（例如摄像机视图）上。请添加图片描述

Screen Space - Camera

在此模式下，画布的渲染效果就好像是在摄像机前面一定距离的平面对象上绘制的效果。如果更改屏幕的大小或分辨率或更改摄像机视锥体，则 UI 将自动重新缩放进行适应，UI 的大小不随距离而变化。场景中比 UI 平面更靠近摄像机的所有 3D 对象都将在 UI 前面渲染，而平面后的对象将被遮挡。请添加图片描述

World Space

此模式将 UI 视为场景中的平面对象进行渲染，可以根据喜好任意定向。画布的大小可以使用矩形变换来设置，但画布在屏幕上的大小将取决于摄像机的视角和距离。其他场景对象可以位于画布后面、穿透画布或位于画布前面。

请添加图片描述

工具栏按钮

在这里插入图片描述

工具栏按钮

Local：是以物体自身为参照的坐标系。
Global：是游戏场景中的方向。在游戏场景中世界坐标系是不会随物体的改变而改变
Center： Unity自己根据模型的mesh来计算的中心位置，与模型真实中心点没关系。
Pivot： 该物体的真正中心点。

注意：
?①当要改变的是模型的坐标、角度、大小，指的是相对于 Pivot 进行的操作，（选择 Pivot 工具）
?②若操作的是多个物体。选择 Center 工具后旋转，全部所选物体hi围绕着 Center 中心点旋转。而旋转 Pivot 工具后旋转，每一个所选物体会围绕着自己的真正中心点旋转。
?③Transform 组件的 position 属性指的就是 Pivot 中心点。

使用 UI 时，通常最好将这些设置保持为 Pivot 和 Local。

矩形变换

轴心

旋转、大小和缩放修改都是围绕轴心进行的，因此轴心的位置会影响旋转、大小调整或缩放的结果。工具栏 Pivot 按钮设置为轴心模式时，可在 Rect Tool中在移动矩形变换的轴心。

旋转好理解，缩放怎么回事呢。假如你的轴心设置在左边中心，那么缩小就是从右侧向左边挤压。而非原本的左右向中间挤压。

锚点

锚点的作用是当父物体拖动，变换时，该物体会相对于锚点做相应的运动

如果矩形变换的父项也是矩形变换，则子矩形变换还可通过各种方式锚定到父矩形变换。

在这里插入图片描述

Anchor Presets按钮中可以将锚点直接设置在一些常用位置，同时可以设置轴心和物体位置
在这里插入图片描述

适应多种分辨率

使用锚点适应不同宽高比：

将对应位置的UI组件锚定在对应角，例如将左上角按钮的锚点设置为左上角。

随屏幕大小缩放：

将画布缩放器组件中的UI Scale Mode 设置为 Scale With Screen Size

组件

可视组件

图像

可以将Sprite应用在图像组件，Image Type 字段可定义应用的精灵的显示方式，提供的选项包括：

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

属性：	功能：
Source Image	表示要显示的图像的纹理（必须作为精灵导入）。
Raycast Target	如果希望 Unity 将图像视为射线投射的目标，请启用 Raycast Target。
Preserve Aspect	确保图像保持其现有尺寸

原始图像（Raw Image）

图像组件采用精灵，但原始图像采用纹理（无边框等）。只有在必要时才应使用原始图像，否则大多数情况都适合使用图像。

UI效果组件

阴影与轮廓
在这里插入图片描述

交互组件

交互组件至少有一个 UnityEvent，当用户以特定方式与组件交互时将调用该 UnityEvent。

按钮与开关

可以各自添加更改当前值时响应的事件，并且算是过渡选项最常应用的组件。

过渡选项

不同的状态包括正常、突出显示、按下和禁用。可以根据不同的状态来改变颜色，显示不同的精灵，产生动画。如果需要使用动画过渡的话，将Button组件中的Transition选择为Animation，单击“Auto Generate Animation”可自动创建带有四个状态的Animator。通过共享动画控制器，多个按钮可共享相同的行为。**UI 动画过渡模式与 Unity 的旧版动画系统不兼容。**仅应使用Animator组件。

开关组

当用户必须从互斥的一组选项进行选择时，便可使用开关组。常见示例包括选择玩家角色类型、预设颜色和一周中的日期。

值得注意的是，如果在加载场景或实例化组时，开关组中的多个开关为打开状态，则开关组不会立即执行其约束。只有当新开关打开时，其他开关才会关闭。这意味着需要确保在开始时只打开一个开关。

滑动条与滚动条（Slider、Scrollbar）

滑动条控件用于用户通过拖动鼠标从预定范围中选择数值，

滚动条控件用于用户滚动由于太大而无法完全看到的图像或其他视图（比如小地图，一封很长的书信）

自动布局

布局控制器按以下顺序为布局元素分配宽度或高度：

首先，布局控制器将分配最小大小属性（Min Width、Min Height）。
如果有足够的可用空间，布局控制器将分配偏好大小属性（Preferred Width、Preferred Height）。
如果有额外的可用空间，布局控制器将分配灵活大小属性（Flexible Width、Flexible Height）。

适配器

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

属性：	功能：
Horizontal Fit	如何控制宽度。
Unconstrained	不根据布局元素伸展宽度。
Min Size	根据布局元素的最小宽度来伸展宽度。
Preferred Size	根据布局元素的偏好宽度来伸展宽度

控制高度同理

当调整矩形变换的大小时（无论是通过内容大小适配器还是其他工具），大小调整是围绕轴心进行的。这意味着可使用轴心来控制大小调整的方向。

例如，当轴心位于中心位置时，内容大小适配器将在所有方向朝外均匀扩展矩形变换。当轴心位于左上角时，内容大小适配器将向右下方向扩展矩形变换。

宽高比适配器 (Aspect Ratio Fitter)

宽高比适配器可以调整高度来适应宽度或反之，也可以使元素在其父项内部适应或包裹其父项。宽高比适配器不考虑布局信息，例如最小大小和偏好大小。

属性：	功能：
Aspect Mode	如何调整矩形的大小来强制实施宽高比。
None	不让矩形适应宽高比。
Width Controls Height	根据宽度自动调整高度。
Height Controls Width	根据高度自动调整宽度。
Fit In Parent	自动调整宽度、高度、位置和锚点，使矩形适应父项的矩形，同时保持宽高比。父矩形中可能有一些空间不会由此矩形覆盖。
Envelope Parent	自动调整宽度、高度、位置和锚点，使矩形覆盖父项的整个区域，同时保持宽高比。此矩形可能比父矩形延伸更广。
Aspect Ratio	要强制实施的宽高比。这是宽度除以高度的比值。