Unity UGUI的Canvas画布组件使用示例详解

 更新时间:2023年07月11日 08:46:58   作者:AlianBlank  
这篇文章主要介绍了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!";
    }
}

操作步骤:

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

注意事项

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

参考资料

以上就是Unity UGUI的Canvas画布组件使用示例详解的详细内容,更多关于Unity UGUI Canvas画布组件的资料请关注脚本之家其它相关文章!

相关文章

  • Unity摄像机移至某物体附近观察此物体

    Unity摄像机移至某物体附近观察此物体

    这篇文章主要为大家详细介绍了Unity摄像机移至某物体附近,观察此物体,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-09-09
  • 深入浅析C#中的var和dynamic

    深入浅析C#中的var和dynamic

    这篇文章给大家介绍了C#中的var和dynamic的相关知识,var和dynamic的本质区别是类型判断的时间不同,前者是编译时,后者是运行时。具体内容详情大家通过本文学习下吧
    2018-05-05
  • C# TSC打印二维码和条形码的实现方法

    C# TSC打印二维码和条形码的实现方法

    下面小编就为大家分享一篇C# TSC打印二维码和条形码的实现方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-01-01
  • C#实现关机功能

    C#实现关机功能

    这篇文章介绍了C#实现关机功能的方法,文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-06-06
  • 解析C#中的装箱与拆箱的详解

    解析C#中的装箱与拆箱的详解

    本篇文章是对C#中的装箱与拆箱进行了详细的分析介绍,需要的朋友参考下
    2013-05-05
  • 同步调用和异步调用WebService

    同步调用和异步调用WebService

    本文给大家介绍webservice同步调用和异步调用,同步调用就是一个同步操作会阻塞整个当前的进程,直到这个操作完成才能执行下一段代码,异步调用不会阻塞启动操作的调用线程,调用程序必须通过轮流检测,或者等待完成信号来发现调用的完成。小伙伴们跟着小编一起学习
    2015-09-09
  • C#设计模式之建造者模式

    C#设计模式之建造者模式

    这篇文章介绍了C#设计模式之建造者模式,文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-07-07
  • C#的this关键字的2种用法

    C#的this关键字的2种用法

    这篇文章主要给大家分享的是C#的this关键字的2种用法,在使用C#的过程中,发现this关键是比较少用的,但是在下面这二个场合下是必须要使用的,不使用它是解决不了问题。下面我们就来看看文章的具体内容吧
    2021-10-10
  • C#获取视频某一帧的缩略图的方法

    C#获取视频某一帧的缩略图的方法

    这篇文章主要介绍了C#获取视频某一帧的缩略图的方法,涉及执行CMD命令及针对视频文件操作的技巧,具有一定的实用价值,需要的朋友可以参考下
    2014-11-11
  • C# WPF自制简单的批注工具

    C# WPF自制简单的批注工具

    在教学和演示中,我们通常需要对重点进行批注,下载安装第三方工具批注显得很麻烦,本文将使用WPF开发了一个批注工具,感兴趣的可以了解下
    2024-11-11

最新评论