Work in progress

The content of this page was not yet updated for Godot 4.2 and may be outdated. If you know how to improve this page or you can confirm that it's up to date, feel free to open a pull request.

Benutzerdefinierte GUI-Controls

So viele Controls...

Doch es gibt nie genug. Das Erstellen eigener benutzerdefinierter Steuerelemente, die genau so funktionieren, wie Sie es möchten, ist eine Leidenschaft fast aller GUI-Programmierer. Godot bietet viele davon, aber sie funktionieren möglicherweise nicht genau so, wie Sie es möchten. Bevor Sie sich mit einem Pull-Request an die Entwickler wenden, um diagonale Scrollbars zu unterstützen, sollten Sie zumindest wissen, wie Sie diese Controls einfach aus einem Skript heraus erstellen können.

Zeichnen

Zum Zeichnen wird empfohlen, das Manuelles Zeichnen in 2D-Tutorial zu lesen. Einige Funktionen sind aufgrund ihrer Nützlichkeit beim Zeichnen erwähnenswert, daher werden sie als nächstes detailliert beschrieben:

Prüfen der Control-Größe

Im Gegensatz zu 2D-Nodes ist die "Größe" bei Controls wichtig, da sie hilft, sie in geeigneten Layouts zu organisieren. Hierfür gibt es die Property Control.size. Die Überprüfung dieser Property während _draw() ist wichtig, um sicherzustellen, dass alle Grenzen eingehalten werden.

Prüfen des Fokus

Einige Controls (z.B. Buttons oder Texteditoren) bieten möglicherweise einen Eingabefokus für die Tastatur- oder Joypad-Eingabe. Beispiele hierfür sind die Eingabe von Text oder das Drücken einer Taste. Dies wird mit der Property Control.focus_mode gesteuert. Beim Zeichnen (wenn das Control Eingabefokus unterstützt) ist es immer wünschenswert eine Art Indikator (Hervorhebung, Box, usw.) anzuzeigen, um das aktuell fokussierte Control zu erkennen. Um diesen Status zu überprüfen, ist die Methode Control.has_focus() vorhanden. Beispiel

func _draw():
    if has_focus():
         draw_selected()
    else:
         draw_normal()

Größenanpassung

Wie bereits erwähnt, ist die Größe für Controls wichtig. Dadurch können sie richtig angeordnet werden, wenn sie in Rastern, Containern organisiert oder verankert sind. Controls bieten in der Regel eine Mindestgröße, damit sie richtig angeordnet werden können. Wenn Controls zum Beispiel mit einem VBoxContainer vertikal übereinander platziert werden, sorgt die Mindestgröße dafür, dass Ihr benutzerdefiniertes Control nicht von den anderen Controls im Container gequetscht wird.

Um diesen Callback bereitzustellen, überschreiben Sie einfach Control._get_minimum_size(), zum Beispiel:

func _get_minimum_size():
    return Vector2(30, 30)

Alternativ können Sie es mit einer Funktion einstellen:

func _ready():
    set_custom_minimum_size(Vector2(30, 30))

Eingabe

Controls bieten einige Hilfsmittel, um die Verwaltung von Eingabeereignissen viel einfacher zu gestalten als bei normalen Nodes.

Eingabe-Events

Es gibt ein paar Tutorials über die Eingabe vor diesem, aber es ist erwähnenswert, dass Controls eine spezielle Eingabemethode haben, die nur funktioniert, wenn:

  • Der Mauszeiger sich über dem Control befindet.

  • Der Button über diesem Control gedrückt wurde (die Steuerung erfasst immer die Eingabe, bis der Button losgelassen wird)

  • Das Control stellt den Tastatur/Joypad-Fokus über Control.focus_mode zur Verfügung.

Diese Funktion ist Control._gui_input(). Überschreiben Sie sie einfach in Ihrem Control. Es muss keine Prozessierung eingestellt werden.

extends Control

func _gui_input(event):
   if event is InputEventMouseButton and event.button_index == MOUSE_BUTTON_LEFT and event.pressed:
       print("Left mouse button was pressed!")

Für weitere Informationen über Events, siehe das Verwendung von InputEvent-Tutorial.

Benachrichtigungen

Controls haben auch viele nützliche Benachrichtigungen, für die es keinen eigenen Callback gibt, die aber mit dem _notification-Callback überprüft werden können:

func _notification(what):
    match what:
        NOTIFICATION_MOUSE_ENTER:
            pass # Mouse entered the area of this control.
        NOTIFICATION_MOUSE_EXIT:
            pass # Mouse exited the area of this control.
        NOTIFICATION_FOCUS_ENTER:
            pass # Control gained focus.
        NOTIFICATION_FOCUS_EXIT:
            pass # Control lost focus.
        NOTIFICATION_THEME_CHANGED:
            pass # Theme used to draw the control changed;
            # update and redraw is recommended if using a theme.
        NOTIFICATION_VISIBILITY_CHANGED:
            pass # Control became visible/invisible;
            # check new status with is_visible().
        NOTIFICATION_RESIZED:
            pass # Control changed size; check new size
            # with get_size().
        NOTIFICATION_MODAL_CLOSE:
            pass # For modal pop-ups, notification
            # that the pop-up was closed.