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

In dieser Lektion lernen Sie, wie Sie das visuelle Erscheinungsbild von UI-Elementen in Cave Engine anpassen können.

Wir werden sehen, wie man Stil-Eigenschaften wie Farben, Transparenz, Bilder, Unschärfe ändert und auch, wie man neue UI-Stile für Ihr Projekt erstellt.

UI-Stile sind nützlich, da sie es Ihnen ermöglichen, dieselbe visuelle Konfiguration über mehrere UI-Elemente hinweg wiederzuverwenden. Dies erleichtert es, Ihre Benutzeroberfläche konsistent und organisiert zu halten.

1. UI-Stil

Standardmäßig, wenn Sie ein UI-Element-Standard in Cave Engine erstellen, wird bereits ein UI-Stil zugewiesen.

Dieser Stil wird Standardstil genannt.

Dieser Stil ist dafür verantwortlich, das anfängliche Erscheinungsbild des UI-Elements festzulegen.

Sie finden ihn im Interface-Ordner im Content Browser.

Das bedeutet, dass jede Änderung am Standardstil automatisch alle UI-Elemente beeinflusst, die diesen Stil über die Stilüberschreibung-Eigenschaft verwenden.

Deshalb ist es eine gute Praxis, den Standardstil als Standardbenutzeroberflächenstil von Cave Engine beizubehalten und einen neuen UI-Stil für Ihre eigenen Projektanpassungen zu erstellen.

So können Sie das Erscheinungsbild Ihrer UI-Elemente ändern, ohne versehentlich jedes Element, das noch den Standardstil verwendet, zu ändern.

Wählen Sie das UI-Element aus und ersetzen Sie in der Stilüberschreibung-Eigenschaft den Standardstil durch den neuen UI-Stil, den wir gerade erstellt haben.

Jetzt verwendet dieses UI-Element Ihren benutzerdefinierten Stil anstelle des Standardstils.

Um den Stil zu bearbeiten, klicken Sie auf das Stiftsymbol neben dem UI-Stil-Feld.

Sie können auch die Stil-Datei direkt im Content Browser auswählen, um den Stileditor zu öffnen.

2. Anpassung

Im UI-Stil-Editor können Sie die visuellen Eigenschaften des Elements anpassen.

Die 9-Slice-Skalierung-Option ermöglicht es Ihnen, ein UI-Element zu skalieren, ohne seine Ränder und Ecken zu verzerren.

Wenn sie aktiviert ist, wird das Element in neun Regionen unterteilt. Die vier Ecken behalten immer die gleiche Größe, die Ränder werden nur in eine Richtung gedehnt, und nur die zentrale Region wird frei skaliert.

Dies ist sehr nützlich, um Panels, Fenster, Dialogfelder, Schaltflächen und andere Interface-Elemente zu erstellen, die unterschiedliche Größen unterstützen müssen, während die visuelle Qualität erhalten bleibt.

Ohne 9-Slice-Skalierung kann das Ändern der Größe einer Schaltfläche oder eines Panels das gesamte Bild dehnen und die Ecken verzerren. Mit 9-Slice-Skalierung kann das Element größer oder kleiner werden, während die Ränder sauber bleiben.

• Im Bild-Option können Sie eine Textur von Ihrem Computer laden, die als visuelles Erscheinungsbild des UI-Elements verwendet werden soll.

• Tint ermöglicht es Ihnen, die Farbe des UI-Elements zu ändern. Es funktioniert wie eine Farbüberlagerung über dem Bild, das vom Element verwendet wird, sodass Sie das Erscheinungsbild ändern können, ohne die ursprüngliche Textur zu bearbeiten.

• Alpha steuert den Transparenzgrad des UI-Elements. Höhere Werte machen das Element undurchsichtiger, während niedrigere Werte das Element transparenter machen.

• Unschärfe wendet einen Unschärfeeffekt auf den Hintergrund hinter dem UI-Element an. Dies kann nützlich sein für Menüs, Popups, Pausenscreens, Dialogfenster und Panels, die sich vom Spielgeschehen abheben müssen.

Die gleichen Einstellungen können auch auf die Hover- und Click-Zustände des UI-Elements angewendet werden.

Das bedeutet, dass Sie für jeden Interaktionszustand ein bestimmtes Bild, eine Farbe, Transparenz und Unschärfewert definieren können.

Zum Beispiel kann eine Schaltfläche eine Farbe im Leerlauf haben, beim Überfahren mit der Maus heller werden und sich wieder ändern, wenn sie geklickt wird.

Dies gibt dem Spieler ein klares visuelles Feedback und sorgt dafür, dass die Benutzeroberfläche reaktionsschneller und polierter wirkt.

An diesem Punkt verstehen Sie nun, wie UI-Stile das Erscheinungsbild von UI-Elementen in Cave Engine steuern.

Indem Sie Ihre eigenen Stile erstellen, anstatt den Standardstil direkt zu bearbeiten, können Sie Ihr Projekt organisiert halten, visuelle Konfigurationen wiederverwenden und Benutzeroberflächen mit einem einheitlichen Look über Menüs, Schaltflächen, Panels und HUD-Elemente hinweg erstellen.