Eine Punktestandleiste ist ein UI-Element, das Spielerinformationen anzeigt, die für das Gameplay deiner Erfahrung wichtig sind, wie zum Beispiel ihre Level-Statistiken, Währungsanzahl oder Power-Up-Artikel in ihrem Inventar. Durch die Anzeige von Punktestandleisten direkt auf dem Bildschirm des Spielers kannst du ihre Aufmerksamkeit auf das lenken, was sie benötigen, um verschiedene Ziele innerhalb deiner Erfahrung zu erreichen.
Dieses Tutorial verwendet die Gold Rush .rbxl-Datei als Referenz und zeigt dir, wie du eine Punktestandleiste erstellen kannst, die die Menge an Gold, die die Spieler sammeln, verfolgt, einschließlich Anleitungen zu:
- Erstellen eines Rahmens in der oberen Mitte des Bildschirms.
- Hinzufügen eines Krone-Symbols, das kommuniziert, was die Punktestandleiste verfolgt, ohne textliche Anleitung.
- Einfügen von Punktestandtext, der die Menge an Gold aufzeichnet, die der Spieler sammelt.
- Testen deines UI-Designs auf mehreren emulierten Geräten, um das Erscheinungsbild auf verschiedenen Bildschirmen und Seitenverhältnissen zu überprüfen.
Wie bei allen 2D-Erstellungen gibt es viele Möglichkeiten, um ein bestimmtes Ziel zu erreichen. Du kannst deine eigenen 2D-Assets in Drittanbieter-UI-Tools erstellen und mit deinem eigenen Design fortfahren.
Erstelle den Rahmen
Um UI-Elemente auf dem Bildschirm jedes Spielers anzuzeigen, kannst du ein ScreenGui-Objekt im Dienst StarterGui erstellen. ScreenGui-Objekte sind die Hauptcontainer für On-Screen-UI, und der Dienst StarterGui kopiert seinen Inhalt in den PlayerGui-Container jedes Spielers, wenn sie eine Erfahrung betreten.
Nachdem du ein ScreenGui-Objekt erstellt hast, kannst du seine untergeordneten GuiObjects gemäß dem Zweck jedes Containers erstellen und anpassen. Um dieses Konzept zu demonstrieren, zeigt dir dieser Abschnitt, wie du ein ScreenGui-Objekt mit einem untergeordneten Frame-Objekt erstellen kannst, das sowohl das Symbol als auch den Text der Punktestandleiste enthält.
Neben der Anpassung der Eigenschaften des Rahmens enthält dieser Abschnitt auch Anweisungen zum Hinzufügen eines untergeordneten UISizeConstraint und UIListLayout-Objekts zum Rahmen. Diese Technik sorgt dafür, dass GuiObjects automatisch horizontal angeordnet werden, während du sie in den Rahmen einfügst, und dass sie auf kleineren Bildschirmgrößen immer lesbar sind. Wenn du diese Anleitung nicht befolgst, wird jedes GuiObject, das du dem Rahmen hinzufügst, außerhalb des Rahmens angeordnet.
Um den Rahmencontainer innerhalb der Beispieldatei Gold Rush zu reproduzieren:
Erstelle ein ScreenGui-Objekt, um deine On-Screen-UI zu enthalten.
- Klicke im Explorer-Fenster mit der Maus über StarterGui und klicke auf das ⊕-Symbol. Ein kontextuelles Menü wird angezeigt.
- Füge ein ScreenGui ein.
Erstelle einen Container für die gesamte Punktestandleiste-Benutzeroberfläche.
Füge ein Frame in das ScreenGui-Objekt ein.
Wähle den neuen Frame aus, dann im Eigenschaften-Fenster,
- Setze AnchorPoint auf 0.5, 0, um den Ursprungspunkt des Rahmens in der oberen Mitte selbst zu setzen (50 % von links nach rechts des Rahmens, und 0 % von oben nach unten des Rahmens).
- Setze BackgroundColor auf 0.6, um den Hintergrund des Rahmens schwarz zu machen.
- Setze BackgroundTransparency auf 0.6, um den Hintergrund des Rahmens halbtransparent zu machen.
- Setze Position auf {0.5, 0},{0.01, 0}, um den Rahmen nahe der oberen Mitte des Bildschirms zu platzieren (50 % von links nach rechts des Bildschirms, und 1 % von oben nach unten des Bildschirms).
- Setze Size auf {0.25, 0},{0.08, 0}, damit der Rahmen einen großen Teil der Mitte des Bildschirms einnimmt, um die Aufmerksamkeit des Spielers zu erlangen (25 % horizontal und 8 % vertikal).
- Setze Name auf ScoreBarFrame.
Füge eine Einschränkung zum Rahmen hinzu, damit sein Inhalt auf kleinen Bildschirmgrößen immer lesbar bleibt.
- Füge ein UISizeConstraint-Objekt in ScoreBarFrame ein.
- Wähle die neue Einschränkung aus, dann im Eigenschaften-Fenster, setze MinSize auf 0, 40, um sicherzustellen, dass der Rahmen nie kleiner als 40 Pixel in der Höhe wird.
Füge ein Layoutobjekt zum Rahmen hinzu, damit sein Inhalt von links nach rechts und vertikal innerhalb der Rahmenperimeter angeordnet wird.
- Füge ein UIListLayout-Objekt in ScoreBarFrame ein.
- Wähle das neue Layoutobjekt aus, dann im Eigenschaften-Fenster,
- Setze FillDirection auf Horizontal.
- Setze VerticalAlignment auf Center.
Füge ein Symbol hinzu
Ein Symbol ist ein Zeichen, das eine Aktion, ein Objekt oder ein Konzept in einer Erfahrung darstellt. Die Verwendung von Symbolen, die einfach und intuitiv sind, ermöglicht es den Spielern, leicht zu erkennen, was du mit deiner Benutzeroberfläche kommunizierst, ohne Text zu verwenden, der den Bildschirm überladen und von wichtigen Inhalten ablenken kann.
Das Beispiel verwendet beispielsweise ein einfaches Symbol einer goldenen Krone, um anzuzeigen, wie viel Gold ein Spieler gesammelt hat. Dieses Symbol ist leicht als das wichtigste Ziel innerhalb der Erfahrung erkennbar und enthält minimale Details, damit es auf den Bildschirmen mobiler Geräte lesbar bleibt.
Um das goldene Krone-Symbol innerhalb der Beispieldatei Gold Rush zu reproduzieren:
Füge ein ImageLabel-Objekt in ScoreBarFrame ein.
Klicke im Explorer-Fenster mit der Maus über ScoreBarFrame und klicke auf das ⊕-Symbol. Ein kontextuelles Menü wird angezeigt.
Füge ein ImageLabel ein.
Wähle das neue Label aus, dann im Eigenschaften-Fenster,
Setze Image auf rbxassetid://5673786644, um das Symbol in eine Krone zu verwandeln.
Setze BackgroundTransparency auf 1, um den Hintergrund des Labels vollständig transparent zu machen.
Setze LayoutOrder auf 1. Dadurch bleibt das Symbol das erste GuiObject im Rahmen von links nach rechts, wenn du im nächsten Abschnitt des Tutorials Text einfügst.
Setze Size auf {1.25,0},{1,0}, um den Anzeigebereich des Labels über die gesamte Breite des Rahmens zu erweitern.
Setze SizeConstraint auf RelativeYY, um das Seitenverhältnis des Symbols beizubehalten, indem die Größe des Labels mit der Höhe des übergeordneten Rahmens skaliert wird.
Füge Punktestandtext ein
Der Punktestandtext zeichnet den Punktestand des Spielers innerhalb einer Erfahrung auf, z. B. wie viele Punkte sie in einem Spiel verdienen. Es ist wichtig, dass alles UI-Text sowohl klar als auch leicht lesbar ist, damit die Spieler schnell die Informationen verstehen können, die sie benötigen, um in deiner Erfahrung erfolgreich zu sein.
Das Beispiel verwendet beispielsweise großen Text auf einem kontrastierenden Hintergrund, sodass er sich nicht mit dem Lärm des Hintergrunds vermischt. Dies ist besonders wichtig für die Barrierefreiheit, da es sicherstellt, dass der Text lesbar bleibt, während der Spieler durch den 3D-Raum navigiert, der möglicherweise Objekte enthält, die die gleiche Farbe wie der Text haben.
Um den Punktestandtext innerhalb der Beispieldatei Gold Rush zu reproduzieren:
Füge ein TextLabel-Objekt in ScoreBarFrame ein.
Klicke im Explorer-Fenster mit der Maus über ScoreBarFrame und klicke auf das ⊕-Symbol. Ein kontextuelles Menü wird angezeigt.
Füge ein TextLabel ein.
Wähle das neue Label aus, dann im Eigenschaften-Fenster,
Setze BackgroundTransparency auf 1, um den Hintergrund des Labels vollständig transparent zu machen.
Setze Size auf {1,0},{1,0}, um das Label auf den gesamten Rahmen zu erweitern (100 % horizontal und 100 % vertikal des übergeordneten Rahmens). Das Label erstreckt sich über die Grenzen des Rahmens hinaus, da es durch das Symbol verschoben wird.
Setze SizeConstraint auf RelativeYY, um sicherzustellen, dass sich die Größe des Labels mit der Höhe des übergeordneten Rahmens skaliert, und das Seitenverhältnis des Symbols beizubehalten. Dieser Schritt macht das Label auch quadratisch und hält es innerhalb der Grenzen des Rahmens.
Setze Font auf GothamSSm, um die Ästhetik der Umgebung anzupassen.
Setze Text auf 0, um den Punktestand bei null zu beginnen.
Setze TextColor3 auf 255, 200, 100, um den Text goldfarbig zu färben.
Setze TextSize auf 30, um den Text auf dem Bildschirm größer zu machen.
Setze TextXAlignment auf Left, um sicherzustellen, dass der Punktestandtext linksbündig in der Nähe des Kronensymbols bleibt, unabhängig davon, ob der Punktestand des Spielers 0, 1.000 oder 1.000.000 beträgt.
Teste das Design
Studios Geräte-Emulator ermöglicht es dir, zu testen, wie Spieler deine Benutzeroberfläche auf verschiedenen Geräten sehen und damit interagieren. Dieses Tool ist ein wesentlicher Bestandteil des UI-Designs, da das Seitenverhältnis deines Viewports in Studio nicht unbedingt das Seitenverhältnis der Bildschirme widerspiegelt, die die Spieler verwenden, um auf deine Erfahrung zuzugreifen. Es ist wichtig, dass deine Benutzeroberfläche auf jedem Gerät sowohl lesbar als auch zugänglich ist.
Wenn du deine Benutzeroberfläche beispielsweise nicht auf einer Reihe von Bildschirmgrößen testest, können Spieler mit großen Bildschirmen möglicherweise deinen Text nicht lesen oder deine Symbole entschlüsseln, und Spieler mit kleinen Bildschirmen sehen möglicherweise den 3D-Raum nicht, da deine UI-Elemente zu viel Platz auf dem Bildschirm einnehmen.
Um deine Benutzeroberfläche auf verschiedenen Bildschirmgrößen zu emulieren:
Aktiviere im Test-Menü von Studio den Geräte-Emulator.
Wähle im Dropdown-Menü für die Auflösung die Tatsächliche Auflösung aus. Dadurch kannst du die tatsächliche Auflösung deiner UI-Elemente auf dem Gerät sehen, das du emulierst.
Wähle im Dropdown-Menü für Geräte mindestens ein Gerät aus den Bereichen Telefon, Tablet, Desktop und Konsole aus.
