乐趣区

关于c#:Unity-UGUI的Canvas画布组件的介绍及使用

jiezi

Unity UGUI 的 Canvas（画布）组件的介绍及应用

1. 什么是 Canvas 组件？

Canvas（画布）是 Unity UGUI 零碎中的一个重要组件，用于在屏幕上绘制 UI 元素。它是 UI 元素的容器，能够蕴含各种 UI 元素，如按钮、文本、图像等。Canvas 组件提供了一种不便的形式来治理和渲染 UI 元素。

2. Canvas 组件的工作原理

Canvas 组件通过渲染器将 UI 元素绘制到屏幕上。它应用层级构造来治理 UI 元素的显示程序，能够通过设置 UI 元素的层级来管制它们的显示程序。Canvas 组件还能够设置渲染模式，包含屏幕空间、世界空间和摄像机空间等。

3. Canvas 组件的罕用属性

  • Render Mode（渲染模式）：设置 Canvas 的渲染模式，包含屏幕空间、世界空间和摄像机空间等。
  • Sorting Layer（排序层级）：设置 Canvas 的排序层级，用于管制 UI 元素的显示程序。
  • Order in Layer（层级程序）：设置 UI 元素在排序层级中的显示程序。
  • Pixel Perfect（像素完满）：启用像素完满模式，能够确保 UI 元素在不同分辨率下的显示成果统一。
  • Reference Pixels Per Unit（参考像素单位）：设置参考像素单位，用于计算 UI 元素的大小和地位。

4. Canvas 组件的罕用函数

  • SetRenderMode(RenderMode mode)：设置 Canvas 的渲染模式。
  • SetSortingLayerName(string name)：设置 Canvas 的排序层级名称。
  • SetOrderInLayer(int order)：设置 UI 元素在排序层级中的显示程序。
  • SetPixelPerfect(bool pixelPerfect)：设置是否启用像素完满模式。
  • SetReferencePixelsPerUnit(float pixelsPerUnit)：设置参考像素单位。

5. 示例代码

示例 1：创立一个屏幕空间的 Canvas

using UnityEngine;
using UnityEngine.UI;

public class CanvasExample : MonoBehaviour
{void Start()
    {
        // 创立一个屏幕空间的 Canvas
        GameObject canvasObject = new GameObject("Canvas");
        Canvas canvas = canvasObject.AddComponent<Canvas>();
        canvas.renderMode = RenderMode.ScreenSpaceOverlay;

        // 创立一个 UI 元素
        GameObject textObject = new GameObject("Text");
        textObject.transform.SetParent(canvas.transform);
        Text text = textObject.AddComponent<Text>();
        text.text = "Hello World!";
    }
}

操作步骤：

  1. 创立一个空的 GameObject，并将脚本挂载到该 GameObject 上。
  2. 在 Start 函数中，创立一个屏幕空间的 Canvas。
  3. 创立一个 UI 元素，并将其设置为 Canvas 的子物体。
  4. 设置 UI 元素的文本内容为 ”Hello World!”。

示例 2：创立一个世界空间的 Canvas

using UnityEngine;
using UnityEngine.UI;

public class CanvasExample : MonoBehaviour
{void Start()
    {
        // 创立一个世界空间的 Canvas
        GameObject canvasObject = new GameObject("Canvas");
        Canvas canvas = canvasObject.AddComponent<Canvas>();
        canvas.renderMode = RenderMode.WorldSpace;

        // 创立一个 UI 元素
        GameObject textObject = new GameObject("Text");
        textObject.transform.SetParent(canvas.transform);
        Text text = textObject.AddComponent<Text>();
        text.text = "Hello World!";
    }
}

操作步骤：

  1. 创立一个空的 GameObject，并将脚本挂载到该 GameObject 上。
  2. 在 Start 函数中，创立一个世界空间的 Canvas。
  3. 创立一个 UI 元素，并将其设置为 Canvas 的子物体。
  4. 设置 UI 元素的文本内容为 ”Hello World!”。

示例 3：设置 Canvas 的排序层级和层级程序 

using UnityEngine;
using UnityEngine.UI;

public class CanvasExample : MonoBehaviour
{void Start()
    {
        // 创立一个屏幕空间的 Canvas
        GameObject canvasObject = new GameObject("Canvas");
        Canvas canvas = canvasObject.AddComponent<Canvas>();
        canvas.renderMode = RenderMode.ScreenSpaceOverlay;

        // 创立两个 UI 元素
        GameObject textObject1 = new GameObject("Text1");
        textObject1.transform.SetParent(canvas.transform);
        Text text1 = textObject1.AddComponent<Text>();
        text1.text = "Text 1";
        text1.canvas.sortingLayerName = "UI";
        text1.canvas.sortingOrder = 1;

        GameObject textObject2 = new GameObject("Text2");
        textObject2.transform.SetParent(canvas.transform);
        Text text2 = textObject2.AddComponent<Text>();
        text2.text = "Text 2";
        text2.canvas.sortingLayerName = "UI";
        text2.canvas.sortingOrder = 2;
    }
}

操作步骤：

  1. 创立一个空的 GameObject，并将脚本挂载到该 GameObject 上。
  2. 在 Start 函数中，创立一个屏幕空间的 Canvas。
  3. 创立两个 UI 元素，并将它们设置为 Canvas 的子物体。
  4. 设置第一个 UI 元素的排序层级为 ”UI”，层级程序为 1。
  5. 设置第二个 UI 元素的排序层级为 ”UI”，层级程序为 2。

示例 4：启用像素完满模式 

using UnityEngine;
using UnityEngine.UI;

public class CanvasExample : MonoBehaviour
{void Start()
    {
        // 创立一个屏幕空间的 Canvas
        GameObject canvasObject = new GameObject("Canvas");
        Canvas canvas = canvasObject.AddComponent<Canvas>();
        canvas.renderMode = RenderMode.ScreenSpaceOverlay;
        canvas.pixelPerfect = true;

        // 创立一个 UI 元素
        GameObject textObject = new GameObject("Text");
        textObject.transform.SetParent(canvas.transform);
        Text text = textObject.AddComponent<Text>();
        text.text = "Hello World!";
    }
}

操作步骤：

  1. 创立一个空的 GameObject，并将脚本挂载到该 GameObject 上。
  2. 在 Start 函数中，创立一个屏幕空间的 Canvas。
  3. 启用像素完满模式。
  4. 创立一个 UI 元素，并将其设置为 Canvas 的子物体。
  5. 设置 UI 元素的文本内容为 ”Hello World!”。

示例 5：设置参考像素单位 

using UnityEngine;
using UnityEngine.UI;

public class CanvasExample : MonoBehaviour
{void Start()
    {
        // 创立一个屏幕空间的 Canvas
        GameObject canvasObject = new GameObject("Canvas");
        Canvas canvas = canvasObject.AddComponent<Canvas>();
        canvas.renderMode = RenderMode.ScreenSpaceOverlay;
        canvas.referencePixelsPerUnit = 100;

        // 创立一个 UI 元素
        GameObject textObject = new GameObject("Text");
        textObject.transform.SetParent(canvas.transform);
        Text text = textObject.AddComponent<Text>();
        text.text = "Hello World!";
    }
}

操作步骤：

  1. 创立一个空的 GameObject，并将脚本挂载到该 GameObject 上。
  2. 在 Start 函数中，创立一个屏幕空间的 Canvas。
  3. 设置参考像素单位为 100。
  4. 创立一个 UI 元素，并将其设置为 Canvas 的子物体。
  5. 设置 UI 元素的文本内容为 ”Hello World!”。

注意事项

  • Canvas 组件只能在 UI 层级下应用，不能用于 3D 场景中。
  • Canvas 组件的渲染模式和排序层级须要依据理论需要进行设置。
  • 在应用 Canvas 组件时，须要留神 UI 元素的层级程序，以确保它们的显示成果正确。

参考资料

  • Unity 官网文档 – Canvas
  • Unity 官网教程 – UI
  • Unity 官方论坛 – UI
退出移动版