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

In dieser Lektion lernen wir, wie das Eltern-Kind-System von Cave Engine funktioniert.

Diese Funktion kann mit jedem Typ von Entity in der Szene verwendet werden, wodurch Sie organisierte Hierarchien zwischen Objekten erstellen können.

Beim Erstellen von Benutzeroberflächen wird dies besonders nützlich. Indem Sie ein UI-Element als Elternteil anderer UI-Elemente definieren, werden Transformationen wie Position, Skalierung und Sichtbarkeit automatisch auf die Kind-Elemente übertragen.

Das erleichtert die Organisation der Benutzeroberfläche, vereinfacht die Bearbeitung von Menüs und Panels und macht das Management komplexerer UI-Strukturen viel effizienter.

1. Erstellen von UI-Toolkit-Elementen

Zusätzlich zu dem zuvor erstellten UI-Element Standard fügen Sie drei weitere Interface-Elemente mit dem UI Toolkit hinzu:

• Eingabe-Schieberegler
• Eingabe-Zahl
• Eingabe-Text

Wir werden in der Praxis testen, wie sich jedes dieser Elemente während des Gameplays verhält.

Anschließend verwenden wir diese Komponenten, um eine Entitäten-Hierarchie zu erstellen, indem wir sie zu Kindern des UI-Elements Standard machen, um zu demonstrieren, wie das Eltern-Kind-System die Benutzeroberfläche organisiert.

2. Testen der UI-Toolkit-Elemente

Bevor Sie die mit dem UI Toolkit erstellten Elemente testen, deaktivieren Sie, falls Sie die Third-Person-Spielvorlage von Cave Engine verwenden, den Spieler und das Fahrzeug in der Szene.

Dies ist wichtig, da eines dieser Entities während des Spielbetriebs die Kontrolle über den Mauszeiger übernehmen könnte.

Mit dem freien Cursor können Sie korrekt mit den Interface-Elementen interagieren, wie z. B. dem Eingabe-Schieberegler, Eingabe-Zahl und Eingabe-Text, wodurch Sie alle ihre Funktionen ohne Störungen testen können.

Führen Sie das Spiel aus, indem Sie F5 drücken.

Während der Ausführung können Sie mit den erstellten Elementen interagieren.

Der Eingabe-Schieberegler und die Eingabe-Zahl ermöglichen es Ihnen, ihre Werte über Mausinteraktion zu ändern, während die Eingabe-Text es Ihnen ermöglicht, Text direkt in die Benutzeroberfläche einzugeben.

Dies ist ein guter Moment, um jedes Element zu testen und praktisch zu verstehen, wofür sie gedacht sind.

Zum Beispiel:

• der Eingabe-Schieberegler ist großartig für Einstellungen wie Lautstärke oder Helligkeit
• die Eingabe-Zahl ist nützlich für präzise numerische Werte
• die Eingabe-Text ist nützlich, wenn der Spieler Informationen eingeben muss

3. Hierarchie

Nun sehen wir, wie die Hierarchie zwischen UI-Elementen funktioniert.

Wählen Sie das UI-Element Standard aus und passen Sie im Eigenschaften-Panel seine Skalierungs-Werte an.

Durch Ändern dieser Werte können Sie die Größe des Elements vergrößern oder verkleinern.

Um die Eltern-Kind-Beziehung zwischen den Entities zu erstellen, klicken und ziehen Sie das UI-Element, das Sie zum Kind machen möchten, und lassen Sie es auf dem UI-Element Standard los, das dann zur Eltern-Entity wird.

Dies ist dasselbe Hierarchie-Konzept, das im gesamten Engine verwendet wird: das Kind wird am Elternteil befestigt und folgt ihm.

Nachdem Sie diese Eltern-Kind-Beziehung erstellt haben, folgt das Kind-Element automatisch den Transformationen des Eltern-Elements.

Das bedeutet, dass Änderungen wie Position, Skalierung und Sichtbarkeit, die auf das UI-Element Standard angewendet werden, auch alle seine Kind-Elemente betreffen.

Dies ist extrem nützlich beim Erstellen von Menüs und Interface-Panels.

Wenn Sie beispielsweise ein Menü-Panel als Elternteil erstellen und mehrere Schaltflächen, Texte und Eingabefelder als Kinder platzieren, können Sie das gesamte Menü verschieben oder die Größe ändern, indem Sie nur das Elternelement bearbeiten.

Anstatt jedes Interface-Element einzeln anzupassen, können Sie sie in Gruppen organisieren, was die gesamte UI viel einfacher zu bearbeiten und zu warten macht.

An diesem Punkt haben Sie nicht nur gelernt, wie man UI-Toolkit-Elemente erstellt und testet, sondern auch, wie man sie mithilfe von Hierarchien organisiert.

Dies ist eines der wichtigsten Konzepte beim Erstellen größerer Benutzeroberflächen in Cave Engine, da es hilft, Ihre UI sauberer, modularer und viel einfacher zu verwalten.