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