当前位置：首页 > article >正文

Unity(2022.3.41LTS) - UI详细介绍-画布

article 2024/9/22 5:28:27

零. 简介

一、画布的作用

二、画布的组件

Canvas Scaler（画布缩放器）：

Constant Pixel Size模式更改分辨率

Scale With Screen Size 模式更改分辨率

Constant Physical Size模式更改分辨率

Graphic Raycaster（图形射线投射器）：

三、创建和编辑画布

四、代码控制画布

五、优化和注意事项

六. UI自适应,适配

零. 简介

在 Unity 中，画布（Canvas）是构建用户界面（UI）的基础组件。

一、画布的作用

容器：画布是所有 UI 元素的根容器。所有的 UI 组件，如文本、按钮、图像等，都必须是画布的子对象才能在游戏中显示。
渲染模式：决定了 UI 元素在屏幕上的渲染方式。Unity 提供了三种主要的画布渲染模式：
- Screen Space - Overlay：UI 元素直接渲染在屏幕上，无视场景中的相机。这种模式下，UI 始终在最前面，并且大小与屏幕分辨率直接相关。
- Screen Space - Camera：UI 元素通过一个指定的相机进行渲染。可以设置相机的距离和视角，使 UI 看起来像是在 3D 场景中的一个平面上。这种模式对于创建与场景深度相关的 UI 效果很有用。专门做一个UI摄像机用来渲染.和主摄像机设置好深度.
- World Space：画布被视为一个普通的 3D 游戏对象，可以在场景中进行定位、旋转和缩放。UI 元素会根据世界坐标进行渲染，适合创建与场景交互的 3D UI。

二、画布的组件

Canvas Scaler（画布缩放器）：
- 用于控制画布的缩放方式，以适应不同的屏幕尺寸和分辨率。
- 提供了三种缩放模式：
  - Constant Pixel Size：UI 元素的大小以像素为单位固定，不会随屏幕分辨率变化而缩放。在不同分辨率下，UI 可能会出现裁剪或显示不全的情况。
  - Scale With Screen Size：根据屏幕的尺寸和分辨率进行缩放。可以设置参考分辨率，当屏幕尺寸与参考分辨率不同时，UI 会自动进行缩放以保持相对比例。
  - Constant Physical Size：根据物理尺寸进行缩放，例如毫米或英寸。这种模式适用于需要在不同设备上保持实际物理大小一致的 UI。

Constant Pixel Size模式更改分辨率

1920*1080

3686*2460

Scale With Screen Size 模式更改分辨率

1920*1080

3686*2460

Constant Physical Size模式更改分辨率

1920*1080

3840*2160

所以一般做UI适配推荐Scale With Screen Size 模式

Graphic Raycaster（图形射线投射器）：

负责处理 UI 元素的交互事件，如鼠标点击、触摸等。
当用户与 UI 进行交互时，图形射线投射器会检测是否有 UI 元素被点击，并将事件传递给相应的组件进行处理。

三、创建和编辑画布

在 Unity 编辑器中，可以通过 GameObject -> UI -> Canvas 菜单创建一个新的画布。
可以在 Inspector 窗口中调整画布的属性，如渲染模式、缩放器设置等。
可以通过添加子对象来创建 UI 元素，如文本、按钮、图像等。可以使用 Unity 的 UI 工具或手动编写脚本来创建和布局 UI。

四、代码控制画布

通过脚本可以动态地创建、修改和删除画布及其子对象。
可以获取画布的引用，并通过代码修改其属性和子对象的状态。
可以响应 UI 事件，如按钮点击、滑动条变化等，通过代码执行相应的逻辑。

例如：

using UnityEngine;
using UnityEngine.UI;

public class UIController : MonoBehaviour
{
    public Canvas myCanvas;

    void Start()
    {
        // 修改画布的渲染模式
        myCanvas.renderMode = RenderMode.ScreenSpaceCamera;

        // 获取画布上的一个按钮组件并添加点击事件
        Button myButton = myCanvas.GetComponentInChildren<Button>();
        myButton.onClick.AddListener(OnButtonClick);
    }

    void OnButtonClick()
    {
        Debug.Log("Button clicked!");
    }
}

在这个示例中，通过代码获取了一个画布的引用，并修改了其渲染模式。然后，获取了画布上的一个按钮组件，并为其点击事件添加了一个处理函数。

五、优化和注意事项

性能优化：画布上的 UI 元素过多可能会影响性能。可以使用合批技术来减少绘制调用次数，优化 UI 的渲染性能。
适配不同屏幕尺寸：根据不同的游戏平台和目标设备，合理设置画布的缩放器，以确保 UI 在各种屏幕尺寸下都能正常显示。
层级管理：注意 UI 元素的层级关系，避免出现遮挡或显示异常的情况。可以使用 Rect Transform 的 Z 轴位置或 UI 元素的 Order in Layer 属性来调整层级。
事件处理：确保正确地处理 UI 事件，避免出现误触发或漏触发的情况。可以使用图形射线投射器的设置和事件系统的回调函数来管理 UI 交互。

六. UI自适应,适配

在 Unity 中，Canvas Scaler（画布缩放器）的 “Scale With Screen Size”（随屏幕尺寸缩放）模式是一种常用的 UI 适配方式。

一、模式特点

动态适配：此模式会根据不同的屏幕尺寸和分辨率自动调整 UI 的大小和布局，以保持相对一致的视觉效果。
参考分辨率：可以设置一个参考分辨率，当实际屏幕尺寸与参考分辨率不同时，UI 会按照一定的比例进行缩放。例如，如果参考分辨率为 1920x1080，而实际屏幕分辨率为 1280x720，UI 会相应地缩小。

二、主要设置参数

Reference Resolution（参考分辨率）：决定了 UI 在设计时的基准尺寸。通常根据目标平台和设计需求来设置。例如，如果你的游戏主要面向 PC 平台，可能会设置一个较高的参考分辨率，如 1920x1080；如果是移动平台，可以根据不同设备的常见分辨率进行设置。
Match Width Or Height（匹配宽度或高度）：用于确定在不同屏幕尺寸下，UI 缩放是基于宽度还是高度进行优先匹配。取值范围为 0 到 1，表示从完全基于宽度匹配到完全基于高度匹配。例如，如果设置为 0.5，表示宽度和高度的影响各占一半。看游戏是横屏还是竖屏来做修改.
Screen Match Mode（屏幕匹配模式）：有三种选项：
Match Width Or Height：根据 “Match Width Or Height” 参数的值进行宽度或高度的匹配。
Expand：在保持 UI 比例不变的情况下，尽可能地填满整个屏幕。如果屏幕尺寸大于参考分辨率，UI 会放大；如果屏幕尺寸小于参考分辨率，UI 会缩小，但不会出现黑边。
Shrink：与 “Expand” 相反，确保 UI 始终完整显示在屏幕上，即使会出现黑边。如果屏幕尺寸大于参考分辨率，UI 会缩小以适应屏幕；如果屏幕尺寸小于参考分辨率，UI 会保持原大小，周围出现黑边。