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

这篇具有很好参考价值的文章主要介绍了Unity UGUI的Canvas（画布）组件的介绍及使用。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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!";
    }
}

操作步骤：

创建一个空的GameObject，并将脚本挂载到该GameObject上。
在Start函数中，创建一个屏幕空间的Canvas。
创建一个UI元素，并将其设置为Canvas的子物体。
设置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!";
    }
}

操作步骤：

创建一个空的GameObject，并将脚本挂载到该GameObject上。
在Start函数中，创建一个世界空间的Canvas。
创建一个UI元素，并将其设置为Canvas的子物体。
设置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;
    }
}

操作步骤：

创建一个空的GameObject，并将脚本挂载到该GameObject上。
在Start函数中，创建一个屏幕空间的Canvas。
创建两个UI元素，并将它们设置为Canvas的子物体。
设置第一个UI元素的排序层级为"UI"，层级顺序为1。
设置第二个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!";
    }
}

操作步骤：

创建一个空的GameObject，并将脚本挂载到该GameObject上。
在Start函数中，创建一个屏幕空间的Canvas。
启用像素完美模式。
创建一个UI元素，并将其设置为Canvas的子物体。
设置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!";
    }
}

操作步骤：文章来源地址https://www.toymoban.com/news/detail-715061.html

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

注意事项

Canvas组件只能在UI层级下使用，不能用于3D场景中。
Canvas组件的渲染模式和排序层级需要根据实际需求进行设置。
在使用Canvas组件时，需要注意UI元素的层级顺序，以确保它们的显示效果正确。

参考资料

Unity官方文档 - Canvas
Unity官方教程 - UI
Unity官方论坛 - UI

到了这里，关于Unity UGUI的Canvas（画布）组件的介绍及使用的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

Toy模板网

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