### UGUI概述
UGUI（Unity Graphical User Interface）是Unity引擎从4.6版本开始引入的一个全新的图形用户界面系统，由Unity官方自主开发完成。UGUI相较于之前的GUI系统（如OnGUI或NGUI），提供了更为高效且现代化的UI解决方案。
### UGUI与OnGUI、NGUI的区别
#### 1. **Canvas**
- **UGUI** 的 Canvas 支持两种坐标模式：世界坐标和屏幕坐标，这使得开发者可以根据具体需求选择最合适的坐标系统。
- **OnGUI** 和 **NGUI** 并没有明确区分这两种坐标模式。
#### 2. **Image 组件**
- **UGUI** 的 Image 组件可以使用 Material，这意味着可以通过着色器来实现更复杂的视觉效果。
- **NGUI** 的 Image 组件通常仅限于使用纹理资源。
#### 3. **裁剪方式**
- **UGUI** 使用 Mask 来实现裁剪功能，这种方式更加直观和灵活。
- **NGUI** 通过 Panel 的 Clip 属性来进行裁剪，操作相对复杂。
#### 4. **渲染顺序**
- **UGUI** 的渲染顺序取决于 Hierarchy 面板中的排序，越靠后的元素会渲染在前面。
- **NGUI** 的渲染顺序则通过 Widget 的 Depth 值来控制。
#### 5. **事件处理**
- **UGUI** 的事件系统较为简洁，无需绑定 Collider，UI 元素可以自动拦截事件。
- **NGUI** 在事件处理上需要额外的配置，如绑定 Collider 等。
#### 6. **导航系统**
- **UGUI** 提供了可视化的 Navigation 编辑工具，方便调整 UI 元素之间的导航关系。
- **NGUI** 没有这样的可视化工具，需要手动编写脚本来实现导航功能。
#### 7. **图集管理**
- **UGUI** 采用 Sprite Packer 来管理图集，能够有效减少内存占用并提高渲染效率。
- **NGUI** 保留了传统的图集管理方式，这可能会导致资源管理上的不便。
#### 8. **图文混排**
- **UGUI** 不支持直接的图文混排功能。
- **NGUI** 支持直接的图文混排功能，这对于创建复杂界面布局非常有用。
#### 9. **Scrollview 功能**
- **UGUI** 暂时不支持 UIWrap 来循环 Scrollview 内容。
- **NGUI** 支持 UIWrap 功能，可以轻松实现列表滚动。
#### 10. **动画组件**
- **UGUI** 目前还不包含 Tween 组件，这意味着开发者可能需要借助第三方库或自行编写脚本来实现动画效果。
- **NGUI** 包含 Tween 组件，简化了动画的实现过程。
### RectTransform 详解
#### 1. **定义**
`RectTransform` 是 `Transform` 的子类，用于描述一个可以容纳 UI 元素的矩形。它在 UGUI 中替代了原有的变换组件，提供了更多针对 UI 元素的功能。
#### 2. **关键属性**
- **Position** (`Pos`)：控件轴心点相对于自身锚点的位置。
- **Anchor 锚点**：UI 元素的四个顶点与锚点的间距保持不变。锚点总是相对于父级，不能超越父物体范围。
- **Pivot 轴心点**：移动、旋转与缩放都围绕轴心点发生变化。坐标范围从 (0,0) 左下顶点到 (1,1) 右上顶点。
#### 3. **代码示例**
```csharp
using UnityEngine;
using UnityEngine.UI;
public class RectTest : MonoBehaviour
{
private RectTransform rect;
public Slider slider;
void Start()
{
rect = transform as RectTransform;
rect.SetAsFirstSibling(); // 设置为第一个组件，此时该图片会被放置在最底层。
}
void Update()
{
// UI元素在界面移动
rect.localPosition += new Vector3(1, 0, 0);
// 滑动条的值不断减小
slider.value -= Time.deltaTime;
}
}
```
### Canvas（画布）
#### 1. **定义**
Canvas 是绘制 UI 元素的载体，所有的 UI 元素必须位于 Canvas 下方。UI 元素的绘制顺序取决于层次面板中的顺序。
#### 2. **Image 图片组件**
- **ImageType**：UGUI 的 Image 组件支持多种类型的图片显示，包括 Simple（简单）、PreserveAspect（保持贴图原始比例）、SetNativeSize（将贴图设置为原始尺寸）、Sliced（切割）、FillCenter（填充中部区域）、Tiled（平铺）以及 Filled（填充）等。
- **RawImage**：可以显示任意类型的图片数据，不仅仅局限于精灵图片。
通过上述对比和详细介绍，我们可以看到 UGUI 在 Unity UI 开发中提供了许多优势，尤其是在灵活性、性能优化以及易用性方面。这些特点使得 UGUI 成为了当前 Unity 游戏和应用程序 UI 设计的标准选择。
