Einführung und Verwendung der Canvas-Komponente (Canvas) von Unity UGUI

1. Was ist die Canvas-Komponente?

Canvas (Leinwand) ist eine wichtige Komponente im Unity UGUI-System, die zum Zeichnen von UI-Elementen auf dem Bildschirm verwendet wird. Es ist ein Container für UI-Elemente und kann verschiedene UI-Elemente wie Schaltflächen, Text, Bilder usw. enthalten. Die Canvas-Komponente bietet eine praktische Möglichkeit zum Verwalten und Rendern von UI-Elementen.

2. Funktionsweise der Canvas-Komponente

Die Canvas-Komponente zeichnet UI-Elemente über einen Renderer auf dem Bildschirm. Es verwendet eine hierarchische Struktur, um die Anzeigereihenfolge von UI-Elementen zu verwalten, und Sie können ihre Anzeigereihenfolge steuern, indem Sie die Hierarchie der UI-Elemente festlegen. Die Canvas-Komponente kann auch den Rendering-Modus festlegen, einschließlich Bildschirmraum, Weltraum und Kameraraum.

3. Gemeinsame Eigenschaften von Canvas-Komponenten

Rendermodus : Legen Sie den Rendermodus von Canvas fest, einschließlich Bildschirmraum, Weltraum und Kameraraum.
Sortierebene : Legen Sie die Sortierebene von Canvas fest, um die Anzeigereihenfolge von UI-Elementen zu steuern.
Reihenfolge in Ebene : Legt die Anzeigereihenfolge von UI-Elementen in der Sortierhierarchie fest.
Pixel Perfect : Aktivieren Sie den Pixel Perfect-Modus, um sicherzustellen, dass Benutzeroberflächenelemente in verschiedenen Auflösungen konsistent angezeigt werden.
Referenzpixel pro Einheit : Legen Sie die Referenzpixeleinheit für die Berechnung der Größe und Position von UI-Elementen fest.

4. Häufig verwendete Funktionen der Canvas-Komponente

SetRenderMode(RenderMode-Modus) : Legen Sie den Rendering-Modus von Canvas fest.
SetSortingLayerName(string name) : Legen Sie den Sortierebenennamen von Canvas fest.
SetOrderInLayer(int order) : Legen Sie die Anzeigereihenfolge von UI-Elementen in der Sortierhierarchie fest.
SetPixelPerfect(bool pixelPerfect) : Legt fest, ob der Pixel-Perfect-Modus aktiviert werden soll.
SetReferencePixelsPerUnit(float pixelsPerUnit) : Legen Sie die Referenzpixeleinheit fest.

5. Beispielcode

Beispiel 1: Erstellen einer Screen Space-Leinwand

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

Schritte:

Erstellen Sie ein leeres GameObject und hängen Sie das Skript an das GameObject an.
Erstellen Sie in der Startfunktion eine Leinwand im Bildschirmbereich.
Erstellen Sie ein UI-Element und legen Sie es als untergeordnetes Element des Canvas fest.
Setzen Sie den Textinhalt des UI-Elements auf „Hello World!“.

Beispiel 2: Erstellen einer Weltraum-Leinwand

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

Schritte:

Erstellen Sie ein leeres GameObject und hängen Sie das Skript an das GameObject an.
Erstellen Sie in der Startfunktion eine Leinwand im Weltraum.
Erstellen Sie ein UI-Element und legen Sie es als untergeordnetes Element des Canvas fest.
Setzen Sie den Textinhalt des UI-Elements auf „Hello World!“.

Beispiel 3: Legen Sie die Sortierebene und die hierarchische Reihenfolge von Canvas fest

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

Schritte:

Erstellen Sie ein leeres GameObject und hängen Sie das Skript an das GameObject an.
Erstellen Sie in der Startfunktion eine Leinwand im Bildschirmbereich.
Erstellen Sie zwei UI-Elemente und legen Sie sie als untergeordnete Elemente des Canvas fest.
Legen Sie die Sortierebene des ersten UI-Elements auf „UI“ und die Ebenenreihenfolge auf 1 fest.
Legen Sie die Sortierebene des zweiten UI-Elements auf „UI“ und die Ebenenreihenfolge auf 2 fest.

Beispiel 4: Aktivieren Sie den Pixel Perfect-Modus

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

Schritte:

Erstellen Sie ein leeres GameObject und hängen Sie das Skript an das GameObject an.
Erstellen Sie in der Startfunktion eine Leinwand im Bildschirmbereich.
Aktivieren Sie den Pixel-Perfect-Modus.
Erstellen Sie ein UI-Element und legen Sie es als untergeordnetes Element des Canvas fest.
Setzen Sie den Textinhalt des UI-Elements auf „Hello World!“.

Beispiel 5: Referenzpixeleinheiten festlegen

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

Schritte:

Erstellen Sie ein leeres GameObject und hängen Sie das Skript an das GameObject an.
Erstellen Sie in der Startfunktion eine Leinwand im Bildschirmbereich.
Stellen Sie die Referenzpixeleinheit auf 100 ein.
Erstellen Sie ein UI-Element und legen Sie es als untergeordnetes Element des Canvas fest.
Setzen Sie den Textinhalt des UI-Elements auf „Hello World!“.

Vorsichtsmaßnahmen

Canvas-Komponenten können nur auf der UI-Ebene verwendet werden und können nicht in 3D-Szenen verwendet werden.
Der Rendering-Modus und die Sortierebene der Canvas-Komponente müssen entsprechend den tatsächlichen Anforderungen eingestellt werden.
Bei der Verwendung der Canvas-Komponente müssen Sie auf die hierarchische Reihenfolge der UI-Elemente achten, um sicherzustellen, dass diese korrekt angezeigt werden.