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

In dieser Lektion lernen Sie, wie Sie Text im Benutzeroberflächensystem von Cave Engine verwenden.

Text ist eines der wichtigsten Elemente jeder Benutzeroberfläche. Er wird für Beschriftungen von Schaltflächen, Menütitel, Untertitel, Anweisungen, HUD-Werte, Item-Zähler, Dialogfenster, Beschriftungen von Einstellungen und viele andere Elemente der Benutzeroberfläche verwendet.

Wir werden sehen, wie man Textelemente erstellt, ihr Aussehen konfiguriert und Eigenschaften wie Schriftart, Größe, Farbe, Abstand, Ausrichtung und Verankerung anpasst.

1. Den Platz für den Text vorbereiten

Bevor wir die Textelemente hinzufügen, lassen Sie uns die Struktur der Benutzeroberfläche vorbereiten, in der sie angezeigt werden.

In diesem Beispiel werden wir ein einfaches Hauptmenü für ein Spiel erstellen, das drei Schaltflächen enthält:

• Spiel starten
• Optionen
• Beenden

Dazu erstellen Sie ein neues UI-Element, das als Elternelement verwendet wird und als Hintergrund für das Menü dient.

Duplizieren Sie dann eine der zuvor erstellten Schaltflächen, bis Sie drei Schaltflächen haben, und machen Sie alle zu Kindern dieses UI-Elements.

So bleiben die Schaltflächen innerhalb einer einzigen Hierarchie organisiert, was Positionierung, Bearbeitung und zukünftige Änderungen an der Benutzeroberfläche erheblich erleichtert.

2. Text hinzufügen

Erstellen Sie jetzt ein UI-Element des Typs Text und machen Sie es zu einem Kind der Start-Schaltfläche.

Passen Sie dann die Skalierung des Textelements an, bis es eine gute Größe für die Benutzeroberfläche hat.

Da der Text ein Kind der Schaltfläche ist, folgt er automatisch der Position der Schaltfläche. Dies erleichtert die Organisation der Benutzeroberfläche und hilft, die Beschriftung ordnungsgemäß mit der Schaltfläche auszurichten.

Wiederholen Sie den gleichen Prozess für die anderen Schaltflächen im Menü.

Erstellen Sie ein Text-UI-Element für die Optionen-Schaltfläche und ein weiteres für die Beenden-Schaltfläche, wobei jedes Textelement ein Kind seiner jeweiligen Schaltfläche ist.

So hat jede Schaltfläche ihre eigene Beschriftung, und das gesamte Menü bleibt durch die Eltern-Kind-Hierarchie organisiert.

3. Texteinstellungen

Wählen Sie das Textelement aus, das wir für die Start-Schaltfläche erstellt haben.

Im Text-Tab finden Sie alle Eigenschaften, die für die Konfiguration des Textinhalts und seines visuellen Erscheinungsbildes verantwortlich sind.

Die Inhalt-Eigenschaft definiert den Text, der von dem UI-Element angezeigt wird.

Geben Sie einfach den gewünschten Inhalt in dieses Feld ein, und er wird in der Benutzeroberfläche angezeigt.

In diesem Beispiel verwenden wir den Text Spiel starten, um die Schaltfläche zu identifizieren, die das Spiel startet.

• Schriftartquelle

Die Schriftartquelle-Eigenschaft ermöglicht es Ihnen, eine Schriftart auszuwählen und das Erscheinungsbild des Textes zu ändern.

Sie können eine kompatible Schriftart laden und sie direkt im UI-Element verwenden, wodurch es einfacher wird, die Typografie mit der visuellen Identität Ihres Spiels abzugleichen.

• Farbe

Die Farbe-Eigenschaft ermöglicht es Ihnen, die Farbe des Textes zu ändern.

Dies ist nützlich, um den Text an den Stil der Benutzeroberfläche anzupassen, die Lesbarkeit zu verbessern oder einen visuellen Kontrast zum Hintergrund zu schaffen.

• Skala

Die Skala-Eigenschaft steuert die allgemeine Skalierung des Textes und erhöht oder verringert seine Größe.

Verwenden Sie dies, um den Text lesbarer zu machen oder besser an die Größe der Schaltfläche, des Bereichs oder des Interfaces anzupassen, wo er platziert ist.

• Horizontale Skalierung

Die Horizontale Skalierung-Eigenschaft passt nur die horizontale Skalierung des Textes an.

So können Sie den Text schmaler oder breiter machen, ohne seine Höhe zu verändern.

• Abstand

Die Abstand-Eigenschaft steuert den Abstand zwischen den Zeichen.

Sie können diese verwenden, um Buchstaben näher zusammenzubringen oder weiter auseinander zu bewegen, um die Lesbarkeit zu verbessern oder einen bestimmten visuellen Stil zu schaffen.

• Zeilenhöhe

Die Zeilenhöhe-Eigenschaft definiert den Abstand zwischen den Textzeilen.

Dies wird verwendet, wenn der Inhalt zwei oder mehr Zeilen hat, z.B. bei Beschreibungen, Dialogtexten, Anweisungen oder längeren Nachrichten in der Benutzeroberfläche.

• Textausrichtung

Die Textausrichtung-Eigenschaft definiert, wie die Textzeilen innerhalb des Elements ausgerichtet sind.

Dies ist besonders nützlich, wenn der Text mehrere Zeilen hat, da Sie ihn links, zentriert oder rechts ausrichten können.

• Textverankerung

Die Textverankerung-Eigenschaft definiert die Verankerung des Textes innerhalb des UI-Elements.

Sie bestimmt, welcher Punkt als Referenz für die Textausrichtung verwendet wird. Mit dieser Option können Sie den Text in der Mitte, in den Ecken oder an den Seiten des UI-Elements positionieren, je nach den Bedürfnissen Ihrer Benutzeroberfläche.

4. Den Text anpassen

Jetzt bearbeiten Sie die Textelemente so, dass sie am besten zu Ihrem Projekt passen.

Verwenden Sie die zuvor dargestellten Eigenschaften, um Schriftart, Farbe, Skalierung, Zeichenabstand, Zeilenhöhe, Ausrichtung und Verankerung zu konfigurieren.

Mit diesen Optionen können Sie verschiedene Textstile erstellen und die Benutzeroberfläche an die visuelle Identität Ihres Spiels anpassen.

Zum Beispiel können Menüschaltflächen eine große und gut lesbare Schriftart verwenden, während Beschreibungen und sekundäre Beschriftungen kleinere Texte mit sanfteren Farben verwenden können.

Mit allem, was Sie in dieser Quest gelernt haben, haben Sie nun die Grundlagen, um vollständige Benutzeroberflächen in Cave Engine zu erstellen.

Sie können UI-Elemente frei bearbeiten, Text anpassen, UI-Styles erstellen und ändern, die UI-Hierarchie organisieren, Verankerung konfigurieren und Callbacks verwenden, um benutzerdefinierte Logik auszuführen.

Als Übung können Sie die Print-Nachrichten, die in den vorherigen Lektionen erstellt wurden, durch echte Aktionen aus Ihrem Projekt ersetzen.

Zum Beispiel können Sie die Menüschaltflächen so konfigurieren, dass sie tatsächlich das Spiel starten, das Optionsmenü öffnen oder die Anwendung schließen.

Die Struktur ist jetzt bereit, damit Sie das UI-System weiter erkunden und vollständigere, ausgefeiltere und interaktive Benutzeroberflächen entwickeln können.