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

In dieser Lektion lernen Sie, wie Sie das UI-Ankersystem von Cave Engine verwenden.

Das Ankern ermöglicht es Ihnen, den Bezugspunkt für UI-Elemente auf dem Bildschirm festzulegen. Dies ist sehr wichtig, wenn Sie Schnittstellen erstellen, die sich an verschiedene Auflösungen, Fenstergrößen und Seitenverhältnisse anpassen müssen.

Am Ende dieser Lektion werden Sie verstehen, wie Sie UI-Elemente konsistent positionieren, damit sie unabhängig von der Bildschirmgröße dort bleiben, wo Sie sie erwarten.

1. Erstellen eines neuen UI-Elements

Erstellen Sie ein neues UI-Element Standard.

Nachdem Sie es zur Szene hinzugefügt haben, wählen Sie es aus und schauen Sie sich das Eigenschaften-Panel an.

Dort finden Sie die Einstellungen, die für die Position, Skalierung, das Erscheinungsbild und das Ankern des Elements verantwortlich sind. In dieser Lektion werden wir diese Eigenschaften nutzen, um zu verstehen, wie das Ankersystem funktioniert und wie es das Verhalten der Schnittstelle beeinflusst.

2. Position

Standardmäßig wird die Position von UI-Elementen in Cave Engine in Prozentwerten definiert.

Dies hilft Ihnen, Schnittstellen zu erstellen, die sich besser an verschiedene Bildschirmauflösungen anpassen.

Ursprünglich ist das UI-Element im Zentrum des Bildschirms verankert. Daher erscheint das Element genau in der Mitte der Schnittstelle, wenn die Positionswerte auf 0 gesetzt sind.

3. Skalierung

Ähnlich wie die Position wird die Skalierung von UI-Elementen in Cave Engine standardmäßig ebenfalls in Prozentwerten angegeben.

Durch Ändern der Skalierungswerte können Sie die Größe des UI-Elements direkt auf dem Bildschirm vergrößern oder verkleinern.

Dies erleichtert es, die Abmessungen der Schnittstelle anzupassen und sie gleichzeitig reaktionsfähig zu halten.

4. Prozent- und absolute Pixelwerte

Wie bereits zuvor erwähnt, werden die Position und die Skalierung von UI-Elementen in Cave Engine standardmäßig in Prozentwerten angegeben.

In den meisten Fällen ist dies das empfohlene Verhalten, da es hilft, die Schnittstelle unabhängig von der Auflösung oder Monitorgröße konsistent zu halten.

In diesem Beispiel haben wir die Skalierung des UI-Elements auf 10% sowohl auf der X- als auch auf der Y-Achse festgelegt. Außerdem haben wir die Position auf 25% auf der X-Achse gesetzt, was der horizontalen Achse entspricht.

Mit diesem Setup wird das Element 25% nach rechts relativ zu seinem Ankerpunkt verschoben.

Da die Werte in Prozent definiert sind, bleibt diese Positionierung unabhängig von der Auflösung oder Monitorgröße erhalten, sodass die Schnittstelle auf verschiedenen Geräten konsistent bleibt.

Neben Prozentwerten ermöglicht es Cave Engine auch, absolute Werte in Pixeln zu verwenden.

Dieser Modus ist nützlich, wenn Sie möchten, dass ein UI-Element eine feste Größe oder Position hat.

Um den Einheitstyp zu ändern, klicken Sie auf das Schloss-Symbol neben der Positions- oder Skalierungsachse, die Sie ändern möchten.

Wenn Sie dies tun, wechselt der Wert zwischen Prozent (%) und absoluten Pixeln (px), sodass Sie die geeignetste Einheit für jede Situation wählen können.

Bei der Verwendung eines absoluten Pixelwerts passt sich das UI-Element nicht mehr proportional an die Bildschirmauflösung an.

Das bedeutet, dass unabhängig davon, ob das Spiel auf einem niedrigauflösenden oder hochauflösenden Monitor läuft, der Pixelwert genau wie konfiguriert angewendet wird.

Dasselbe Verhalten gilt für die Y-Achse der Position und für beide X- und Y-Achsen der Skalierung.

Dieser Modus wird empfohlen, wenn Sie wünschen, dass ein Element eine feste Größe oder Position beibehält, ohne die Breite und Höhe des Bildschirms oder seines übergeordneten UI-Elements zu berücksichtigen.

Zum Beispiel möchten Sie möglicherweise, dass ein Symbol immer genau 64 Pixel breit oder ein kleiner Abstand immer genau 20 Pixel vom Rand entfernt ist.

5. Position Ankern

Das Ankersymbol, das in den Position- und Skalierungseigenschaften verfügbar ist, zeigt den Ankerpunkt des UI-Elements an.

Wenn Sie auf das Positionsankersymbol klicken, wird das Fenster Ankerpunkt angezeigt. Dort können Sie den aktuellen Ankerpunkt des Elements sehen.

Standardmäßig sind neue UI-Elemente auf das Zentrum des Bildschirms verankert, was durch den blauen Kreis im Konfigurationsfenster dargestellt wird.

Dieser Ankerpunkt fungiert als Referenz für die Positionierung des Elements in der Schnittstelle. Von diesem Punkt aus werden die Positionswerte gemäß dem ausgewählten Anker angewendet.

Stellen Sie sich vor, Sie möchten eine Minikarte erstellen, die normalerweise in der unteren linken Ecke des Bildschirms platziert wird.

In diesem Fall macht es nicht viel Sinn, das Element im Zentrum verankert zu lassen, da seine Position vom Mittelpunkt des Bildschirms berechnet würde.

Für diese Art von Schnittstelle ändern Sie einfach den Ankerpunkt in die gewünschte untere Ecke.

Dies ermöglicht es dem Element, diesen Bereich des Bildschirms als Referenz zu verwenden, was die Positionierung erleichtert und sicherstellt, dass es unabhängig von der verwendeten Auflösung an der richtigen Stelle bleibt.

Wenn die Positionswerte auf 0 gesetzt werden, entweder unter Verwendung von Prozent (%) oder absoluten Pixeln (px), wird das UI-Element genau über seinem Ankerpunkt positioniert.

Mit anderen Worten, der Ankerpunkt wird zum Bezugspunkt für die Position des Elements.

Von diesem Punkt aus müssen Sie nur die Positionswerte anpassen, um das Element in die gewünschte Richtung zu bewegen.

6. Skalierungsansteuerung

Jetzt lassen Sie uns verstehen, wie die Skalierungsansteuerung funktioniert.

Um dies zu tun, ändern Sie den Ankerpunkt des UI-Elements zurück zur Mitte des Bildschirms und setzen Sie die Positionswerte auf 0, damit das Element genau wieder in die Mitte zurückkehrt.

Mit dem zentrierten Element wird es einfacher zu sehen, wie das Ankern das Skalierungsverhalten beeinflusst und von welchem Punkt das UI-Element skaliert wird.

Wenn der Skalierungsanker auf die Mitte gesetzt ist, wirkt sich eine Erhöhung oder Verringerung der Skalierung gleichmäßig auf beide Seiten aus. Das Element wächst oder schrumpft gleichzeitig nach links und nach rechts.

In einigen Situationen ist dies jedoch nicht das gewünschte Verhalten.

Stellen Sie sich beispielsweise eine Gesundheitsleiste oder Fortschrittsleiste vor. In diesem Fall möchten Sie normalerweise, dass das Element nur in eine Richtung wächst oder schrumpft.

Um dies zu erreichen, ändern Sie den Skalierungsanker in die gewünschte Seite.

Wenn Sie dies tun, wird ein kleiner Cursor angezeigt, der den Punkt angibt, von dem aus die Skalierung angewendet wird.

Wenn Sie die Skalierung jetzt erhöhen oder verringern, wächst das Element nur in die entgegengesetzte Richtung des Ankerpunkts. Dies erleichtert das Erstellen von Leisten und anderen dynamischen UI-Elementen.

7. Anpassen des Ankers und der Skalierung

Jetzt, da wir verstanden haben, wie der Skalierungsanker das Größenänderungsverhalten des Elements beeinflusst, können wir die Schnittstelle so konfigurieren, dass sie am besten zu unserem Projekt passt.

Setzen Sie den Positionsanker zurück in die untere linke Ecke des Bildschirms oder wählen Sie eine andere Position, die besser zur von Ihnen erstellten Schnittstelle passt.

Sie können dasselbe mit dem Skalierungsanker tun und den Punkt festlegen, von dem aus das Element skaliert wird.

In diesem Beispiel werden wir absolute Pixelwerte für die X-Achse der Position und die X-Achse der Skalierung verwenden und die Prozentwerte für die Y-Achse beibehalten.

Dieses Setup ermöglicht es dem Element, ein quadratisches Verhältnis unabhängig von den Bildschirmdimensionen aufrechtzuerhalten und gleichzeitig auf der vertikalen Achse reaktionsfähig zu bleiben.

Zu diesem Zeitpunkt sollten Sie ein gutes Verständnis dafür haben, wie das UI-Ankern in Cave Engine funktioniert.

Anker sind eines der wichtigsten Elemente bei der Erstellung von Schnittstellen, da sie definieren, wie sich UI-Elemente ändern, wenn sich die Bildschirmgröße ändert.

Durch die Kombination von Positionsankern, Skalierungsankern, Prozentwerten und Pixelwerten können Sie Schnittstellen erstellen, die sowohl genau als auch reaktionsfähig sind.