CanvasLayer Node

CanvasLayer w Godot 4 to specjalny węzeł przeznaczony do zarządzania rysowaniem elementów 2D w osobnych warstwach, niezależnych od głównej kamery. Jest szczególnie przydatny do tworzenia interfejsów użytkownika (UI), efektów 2D nałożonych na ekran, takich jak elementy HUD (Heads-Up Display) oraz ekranów startowych, map czy elementów dekoracyjnych, które powinny pozostać statyczne lub mieć niezależną od sceny pozycję.

Typowe zastosowania CanvasLayer

1. Interfejs użytkownika (UI): Idealny do wyświetlania elementów takich jak punkty życia, liczniki punktów, mini-mapy, przyciski, które powinny być widoczne niezależnie od ruchu kamery.
2. Efekty ekranowe: Możesz umieścić efekty ekranowe (np. winiety, rozmycia, filtry) na górze głównej sceny, które będą renderowane w tej samej pozycji względem ekranu.
3. Elementy interaktywne na stałej pozycji: Elementy, które powinny być zawsze widoczne, np. wskaźnik gracza, celowniki lub kompas, mogą być umieszczone w CanvasLayer.

Jak używać CanvasLayer w Godot 4:

1. Dodanie CanvasLayer do sceny

1. W drzewie scen kliknij „Dodaj węzeł”.
2. Wyszukaj CanvasLayer i dodaj go do swojej sceny.
3. Dodaj elementy 2D, takie jak Control, Label, Sprite2D, TextureRect jako dzieci CanvasLayer. Wszystkie te elementy będą renderowane w jednej warstwie, niezależnie od ruchu kamery głównej.

Przykład struktury sceny:

MainScene
├── Camera2D
└── CanvasLayer (warstwa UI)
    ├── Label (np. punkty życia)
    └── TextureRect (np. tło HUD)

2. Ustawienia warstwy CanvasLayer

W inspektorze dla CanvasLayer możesz dostosować następujące ustawienia:

1. Layer:

• Określa numer warstwy CanvasLayer. Im wyższa wartość, tym wyżej CanvasLayer zostanie wyrenderowany w stosunku do innych CanvasLayer w scenie. Jest to przydatne, gdy masz kilka nakładających się warstw.

   $CanvasLayer.layer = 1  # Ustawia wyższy numer warstwy, aby wyświetlać na wierzchu

1. Offset:

• Możesz ustawić przesunięcie warstwy względem głównego widoku kamery, co pozwala na przesuwanie całej zawartości CanvasLayer.

1. Rotation i Scale:

• Dostosowanie obrotu i skali pozwala na tworzenie specjalnych efektów, np. przesuwanie lub obracanie całego interfejsu w określonych sytuacjach.

Przykład skryptu: Dynamiczna zmiana zawartości w CanvasLayer

Poniższy skrypt tworzy dynamiczny licznik punktów wyświetlany jako część UI w CanvasLayer:

extends CanvasLayer
var score = 0
func _ready():

# Dodaj label do CanvasLayer jako licznik punktów

var score_label = Label.new()

score_label.text = "Score: " + str(score)

add_child(score_label)
func increase_score():

score += 10

$Label.text = "Score: " + str(score)
W tym przykładzie:

CanvasLayer działa jako stały licznik punktów, który nie porusza się razem z kamerą.
increase_score() aktualizuje wartość wyświetlaną na ekranie po zdobyciu punktów.

3. Tworzenie złożonego UI z CanvasLayer

Dodanie mapy lub mini-mapki:

Dodaj CanvasLayer do sceny i przypisz do niego elementy mapy.
Dodaj TextureRect, który będzie wyświetlał teksturę mini-mapki, np. z ViewportTexture, jeśli korzystasz z osobnego Viewport do renderowania mini-mapy.

4. Przykłady zastosowania CanvasLayer w grach


HUD (Heads-Up Display):


CanvasLayer jest idealny do tworzenia stałego HUD-u z licznikiem życia, amunicji, poziomu energii i innych wskaźników, które pozostają widoczne na ekranie.


Stałe elementy UI:


Elementy, które zawsze mają pozostać w stałej pozycji na ekranie, jak przyciski menu, wskaźniki kierunku czy kompas, mogą być umieszczone w CanvasLayer, aby nie zmieniały swojego położenia przy ruchu kamery.


Efekty specjalne nałożone na ekran:


CanvasLayer można wykorzystać do wyświetlania efektów ekranowych, takich jak winiety, filtry kolorów, rozmycia lub inne efekty, które są renderowane na górze sceny gry.


Menu i ekran startowy:


Możesz umieścić menu lub ekran startowy w CanvasLayer, aby pojawiały się na stałym miejscu ekranu. Jest to przydatne do tworzenia statycznych lub dynamicznych interfejsów, które nie zmieniają pozycji w zależności od ruchu kamery w grze.

Dostosowanie CanvasLayer do różnych scen

Możesz mieć wiele CanvasLayer w jednej scenie i przypisywać im różne wartości warstw, aby kontrolować ich kolejność wyświetlania. W zależności od potrzeb gry możesz na przykład stworzyć CanvasLayer dla HUD, drugi dla mini-mapki, a trzeci dla efektów ekranowych.
$HUDCanvasLayer.layer = 1  # Wyższa warstwa dla HUD
$EffectsCanvasLayer.layer = 0  # Niższa warstwa dla efektów
Podsumowanie:

CanvasLayer w Godot 4 to nieoceniony węzeł do tworzenia interfejsów użytkownika i elementów, które powinny być niezależne od ruchu kamery. Dzięki możliwości ustalania warstw, dostosowywania pozycji, skali i obrotu, CanvasLayer oferuje pełną kontrolę nad elementami UI i efektami ekranowymi. Jest to węzeł idealny do stałego wyświetlania elementów HUD, map, kompasów, wskaźników i innych elementów interaktywnych.

Published using WordPress Blurt Publisher from https://godot.com.pl.