Unity3d中的UI

1. 概述

  • UI: User Interface(用户界面)的简称。
  • GUI: Graphical User Interface(图形用户界面)的简称,是指采用图形方式显示的计算机操作用户界面。
  • NGUI: 以前在Unity中广泛来做2D的,是第三方的包,需要安装.
  • UGUI: Unity4.6以后,Unity找到NGUI的作者,用了一年开发了UGUI,变成内置于Unity中的包,官方主推。

2. UGUI与NGUI的对比差别

2.1 主要概率的对比

NGUI UGUI
根节点 UIRoot Canvas
UI面板 Panel Canvas
UI容器 uiWidget Panel
事件交互 Collider EventSystem
锚点 Anchor RectTransform Anchor
图片 Sprite Image
文字 Label Text
单张贴图 Texture RawImage
UI相机 camera + UICamera camera + EventSystem

2.2 主要组件的对比

NGUI UGUI
Button
Toggle
Scroll Bar
Progress Bar
Input Field
Popup List x
Localization x
Play Sound x
Scroll View

总体来说,对于基本的UI元素, NGUI与UGUI都有;在组件的丰富度上,UGUI略逊于NGUI。例如,UGUI没有Localization、Play Sound组件;NGUI的Label是支持静态图文混排跟文字URL超链接的,而UGUI不支持。所以使用UGUI的时候需要自行开发以上缺失的组件及功能。

3. UGUI 的Canvas

UGUI的UI根目录为canvas(画布),是一个控制一组被渲染UI元素的组件,所有的UI元素必须是Canvas的子物体,
在Hierarchy中点击Create——UI——Text,系统会自动帮我们创建一个父Canvas节点和EventSystem节点。EventSystem节点,用来专门接受管理事件。

Canvas Canvas属性一览:

  • Render Mode 定义UI如何渲染于屏幕之上,可选项包括:
    • Screen Space - Overlay
    • Screen Space - Camera
    • World Space
  • Pixel Perfect 是否抗锯齿,仅适用于Screen Space Overlay/Camera模式。
  • Render Camera 定义用于渲染UI的摄像机,仅适用于Screen Space - Camera模式。
  • Plane Distance 定义UI平面摆放在摄像机的前方距离,仅适用于Screen Space - Camera模式。
  • Event Camera 定义处理UI事件的摄像机,仅适用于World Space模式。

通常一个Scene只需Canvas足矣,但多个Canvas也是支持的。为了优化目的,也支持Canvas嵌套,也即将某个Canvas作为另一个Canvas子节点。子Canvas跟父Canvas的Rander Mode保持一致。

Canvas组件三种模式的区别:

  • Screen Space - Overlay

    此模式下,Canvas会被缩放以适应屏幕,然后直接渲染到屏幕上,无需任何摄像机(即使当前Scene中没有任何摄像机)。若屏幕尺寸或者分辨率变更了,则UI会自动缩放来适应。UI会覆盖所有其他摄像机所见的画面。

  • Screen Space - Camera

    此模式下,Canvas会渲染于摄像机前面指定距离的一个平面上。UI在屏幕上的大小并不随此距离变化而变化,因为UI总是被缩放来准确适配Camera Frustum。若Camera Frustum或屏幕尺寸或分辨率发生变化,UI会自动缩放来适应。Scene中任何比UI平面距离摄像机更近的3D物件,都将先于UI被渲染。相反位于UI平面后面的物件就会被遮挡。

  • World Space

    此模式下,UI被看作是Scene中的一个平面物件。不像Screen Space - Camera模式,此时UI平面并不需要面向摄像机,而是可以面向任意一个方向。通过RectTransform可以设置Canvas尺寸,但他的屏幕大小将取决于摄像机的视角以及距离。其他场景中物件可能位于Canvas背面,或穿透Canvas,或位于Canvas前面。