UGUI笔记,拿出来与大家分享

### 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); //滑动条的值不断减小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设计的标准选择。