Cave: Game-Benutzeroberfläche (Game UI) System

In dieser Lektion lernst du, wie man Benutzerinteraktionen mit UI-Elementen in Cave Engine erkennt.

Wir werden sehen, wie man erkennt, wann der Mauszeiger über einem UI-Element schwebt und wann das Element angeklickt wird. Mit diesen Ereignissen kannst du deine Benutzeroberfläche während des Spiels an den Spieler anpassen.

Diese Interaktionen sind wichtig für die Erstellung von Schaltflächen, Menüs, Einstellungsbildschirmen, Inventaroberflächen, Pausmenüs, Dialogoptionen und vielen anderen UI-Systemen.

Von diesen Ereignissen aus kannst du Python-Logik ausführen, interaktive Verhaltensweisen erstellen, Menüs öffnen, UI-Elemente ändern, Sounds abspielen, das Spiel starten, Fenster schließen oder jede andere Funktionalität auslösen, die deine Benutzeroberfläche benötigt.

1. Hover erlauben

Um zu erkennen, wann der Mauszeiger über einem UI-Element schwebt, wähle das gewünschte UI-Element aus und aktiviere im Tab Verhalten die Option Hover erlauben.

Im Vorschau-Bereich kannst du das Erscheinungsbild des UI-Elements visualisieren, ohne das Spiel ausführen zu müssen.

Nachdem du Hover erlauben aktiviert hast, bewege den Mauszeiger über den Vorschau-Bereich, um den visuellen Unterschied zwischen dem normalen Zustand und dem Hover-Zustand zu beobachten.

Dies ist sehr nützlich beim Entwickeln der Benutzeroberfläche, da du schnell testen kannst, ob das Element visuell wie erwartet reagiert.

Zum Beispiel kannst du den Hover-Zustand verwenden, um eine Schaltfläche heller zu machen, ihre Farbe zu ändern, ihre Opazität zu erhöhen oder dem Spieler deutlich zu signalisieren, dass das Element interaktiv ist.

2. Klick erlauben

Aktiviere die Option Klick erlauben, um das UI-Element zu ermöglichen, zu erkennen, wann der Benutzer darauf klickt.

So wie bei Hover erlauben kann das Verhalten von Klick erlauben auch direkt im Vorschau getestet werden.

Auf diese Weise kannst du überprüfen, wie das Element aussieht, wenn es gedrückt wird, ohne das Spiel ständig auszuführen, nur um kleine visuelle Anpassungen zu testen.

3. Logik ausführen

Um Logik aus UI-Interaktionen auszuführen, klicke auf das Pfeilsymbol links neben den Optionen Hover erlauben und Klick erlauben.

Hier können wir die Callbacks verwenden.

Callbacks ermöglichen den Zugriff auf die Ereignisse, die mit den Interaktionen des UI-Elements verbunden sind, sodass es möglich wird, benutzerdefiniertes Verhalten hinzuzufügen, wenn der Cursor das Element betritt, es verlässt, darauf klickt oder den Klick loslässt.

Um die Logik zu bearbeiten, die in diesen Ereignissen ausgeführt wird, klicke auf das Stiftsymbol.

Um die Hover-Callbacks zu testen, fügen wir eine einfache Drucknachricht in jedes Ereignis ein.

Im On Hover In Callback, das ausgeführt wird, sobald der Cursor über dem UI-Element erkannt wird, füge eine Drucknachricht hinzu, um zu bestätigen, dass die Interaktion erkannt wurde.

Dann, im On Hover Out Callback, das aufgerufen wird, wenn der Cursor das Element verlässt, füge eine weitere Drucknachricht hinzu, um zu überprüfen, wann dieses Austrittsereignis erkannt wird.

Auf diese Weise können wir im Konsolenfenster genau sehen, wann der Cursor in den Bereich des UI-Elements eintritt und ihn verlässt.

Jetzt führe das Spiel aus und interagiere mit dem UI-Element, indem du den Mauszeiger darüber bewegst und dann wegbewegst.

Beobachte die Konsole, um zu überprüfen, wann die Drucknachrichten angezeigt werden.

Dies ist eine der einfachsten Methoden, um die Logik der UI-Interaktion zu debuggen, da es bestätigt, dass das Ereignis korrekt aufgerufen wird.

Das rote Symbol neben dem Callback zeigt an, dass es nicht leer ist. Mit anderen Worten, es gibt Logik oder ein Skript, das ausgeführt werden soll, wenn dieses Ereignis eintritt.

Dieser Indikator erleichtert es erheblich, visuell zu erkennen, welche Ereignisse bereits mit Verhalten verknüpft sind.

Wenn deine Benutzeroberfläche wächst, wird dies sehr nützlich, da du schnell sehen kannst, welche UI-Elemente bereits Interaktionslogik konfiguriert haben.

Jetzt wollen wir Drucknachrichten hinzufügen, um die Klickereignisse des UI-Elements zu überprüfen.

Im On Click In Callback, füge eine Drucknachricht hinzu, um den Zeitpunkt zu identifizieren, an dem der Klick über dem Element erkannt wird.

Verwende dann den On Click Out Callback, um eine weitere Drucknachricht hinzuzufügen, die dir ermöglicht zu überprüfen, wann der Klick beendet ist, also wann die Maustaste losgelassen wird.

Diese Unterscheidung ist wichtig, weil einige UI-Verhalten stattfinden sollten, wenn der Knopf zuerst gedrückt wird, während andere nur beim Loslassen des Klicks geschehen sollten.

Zum Beispiel möchtest du vielleicht, dass der Knopf im Click In-Zustand visuell gedrückt wird, aber die Aktion erst im Click Out-Zustand bestätigt wird.

Führe das Spiel aus und beobachte die Konsole, während du mit dem Element interagierst.

Wenn du hoverst, klickst, loslässt und den Mauszeiger vom UI-Element wegbewegst, sollten die entsprechenden Callbacks ausgeführt werden und ihre Drucknachrichten sollten in der Konsole erscheinen.

An diesem Punkt weißt du bereits, wie man die grundlegendsten UI-Interaktionen in Cave Engine erkennt.

Durch die Kombination von Hover erlauben, Klick erlauben und Callbacks kannst du beginnen, echte interaktive Benutzeroberflächen zu erstellen, wie Schaltflächen, die Menüs öffnen, Einstellungsschieber, Bestätigungsfenster, Pausmenüs und jede andere UI-Funktionalität, die dein Spiel benötigt.