Ein Score-Bar ist ein UI-Element, das Spieler-Informationen anzeigt, die wichtig für das Gameplaysind, wie ihre Leveling-Up-Statistiken, Währungs-Count oder Power-Up-Items in ihrem Inventar. Indem Sie Score-Balken direkt auf dem Bildschirm des Spieler:inanzeigen, können Sie ihre Aufmerksamkeit auf das setzen, was sie brauchen, um verschiedene Ziele in Ihrem Erlebnis zu erreichen.
Dieses Tutorial zeigt dir, wie du eine Score-Bar erstellst, die die Menge an Gold-Spielern anzeigt, einschließlich Anleitung:
- Erzeugen eines Rahmens in der oberen Mitte des Bildschirms.
- Hinzufügen eines Krone-Symbols, das anzeigt, was die Score-Bar verfolgt, ohne Text-Anleitung.
- Ein Ergebnis einfügen, das die Menge an Gold, die der Spieler sammelt, aufzeichnet.
- Testen Sie Ihr UI-Design auf mehreren emulierten Geräten, um seine Ansicht auf verschiedenen Bildschirmen und Aspekt比例 zu überprüfen.
Wie bei allen Schöpfunggibt es viele Möglichkeiten, ein bestimmtes Ziel zu erreichen. Sie können Ihre eigenen 2D-Assets in Dritt-UI-Tools erstellen und mit Ihrem eigenen Design folgen.
Erstellen Sie das Rahmen
Um UI-Elemente auf dem Bildschirm jedes Spieler:inanzuzeigen, kannst du ein ScreenGui -Objekt im StarterGui -Dienst erstellen. ScreenGui -Objekte sind die primären Container für On-Screen-UI und der 1> Class.StarterGui
Nachdem du ein ScreenGui Objekt erstellt hast, kannst du sein Kind GuiObjects nach dem Zweck jedes Containers nach dem jeweiligen Ziel erstellen und anpassen. Um dieses Konzept zu demonstrieren, zeigt dieses Abschnitt dir, wie du ein ScreenGui Objekt mit einem Kind 1> Class.Frame
Neben der Anpassung der Eigenschaften des Frames bietet dieser Abschnitt Anweisungen zum Hinzufügen eines Kindes UISizeConstraint und UIListLayout Objekt zum Frame. Diese Technik gewährleistet, dass Class.GuiObject|Gui
Um den Frame Container innerhalb der Probe Gold Rush zu recreate, platzieren Sie die Datei:
Erstellen Sie ein ScreenGui -Objekt, um Ihre On-Screen-UI zu enthalten.
- In dem Explorer-Fenster bewegen Sie den Mauszeiger über StarterGui und klicken Sie auf das ⊕-Symbol. Ein Kontextmenü wird angezeigt.
- Fügen Sie einen ScreenGUI-Bildschirm ein.
Erstellen Sie einen Container für den gesamten Score-Bar-UI-Komponenten.
Fügen Sie ein Rame in das ScreenGUI-Objekt ein.
Wählen Sie das neue Frame , dann im Properties -Fenster,
- Set AnchorPoint to 0.5, 0 to set the frame's origin point in the top-mitte of itself (50% from the left to the right of the frame, and 0% from the top to the bottom of the frame).
- Setze Hintergrundfarbe auf 0.6, um den Hintergrund des Rahmens schwarz zu machen.
- Setze HintergrundTransparenz auf 0.6, um den Hintergrund des Rahmens halbtransparent zu machen.
- Setzen Sie Position auf {0.5, 0},{0.01, 0} , um den Frame in der Nähe der oberen Mitte des Bildschirms (50% von der linken Seite des Bildschirms) und der unteren Mitte des Bildschirms (1% von der oberen Seite des Bildschirms) zu setzen.
- Set Größe to {0.25, 0},{0.08, 0} so dass der Frame einen großen Teil des mittleren Teils des Bildschirms belegt, um die Aufmerksamkeit des Spieler:inzu erhalten (25% horizontal und 8% vertikal).
- Set Name zu ScoreBarFrame .
Fügen Sie eine KonSTRSTRZEPT an den Frame an, damit seine Inhalte auf kleinen Bildschirmen immer lesbar sind.
- Fügen Sie ein UISizeConstraint -Objekt in ScoreBarFrame ein.
- Wählen Sie den neuen Beschränkung, dann in dem Eigenschaften-Fenster , setzen Sie MinSize auf 0, 40 um sicherzustellen, dass der Frame nie weniger als 40 Pixel vertikal kleiner wird.
Fügen Sie ein Layout-Objekt zum Frame hinzu, damit seine Inhalte von links nach rechts und vertikal in seinem Perimeter angeordnet sind.
- Fügen Sie ein UIListLayout Objekt in ScoreBarFrame ein.
- Wählen Sie das neue Layout-Objekt, dann im Eigenschaften-Fenster ,
- Set Füllrichtung auf Horizontal .
- Set VerticalAlignment auf Center .
Symbol hinzufügen
Ein Icon ist ein Symbol, das eine Action, ein Objekt oder ein Konzept in einem Erlebnis repräsentiert. Wenn Sie Icons verwenden, die einfach und intuitiv sind, können die Spieler leicht erkennen, mit dem Sie mit Ihrer UI kommunizieren, ohne Text zu verwenden, was den Bildschirm überladen und die Aufmerksamkeit vom Inhalt ablenken kann.
Zum Beispiel verwendet die Probe ein einfaches Gold-Kronen-Symbol, um anzuzeigen, wie viel Gold ein Spieler gesammelt hat. Dieses Symbol ist leicht zu erkennen, da es das wichtigste Ziel innerhalb der Erlebnisist, und es enthält minimal viele Details, sodass es auf dem mobilen Gerät-Bildschirm lesbar bleibt.
Um das Gold-Kronen-Symbol innerhalb der Probe Gold Rush zu wiederholen, platzieren Sie den Datei:
Fügen Sie ein Bild-Label -Objekt in ScoreBarFrame ein.
In dem Explorer-Fenster bewegen Sie den Mauszeiger über ScoreBarFrame und klicken Sie auf das ⊕-Symbol. Ein Kontextmenü wird angezeigt.
Fügen Sie ein Bild-Label ein .
Wähle das neue Beschriftung, dann im Eigenschaften-Fenster ,
Set Bild to rbxassetid://5673786644 to make the icon a crown.
Setze HintergrundTransparenz auf 1, um den Hintergrund des Beschriftungvollständig durchsichtig zu machen.
Set LayoutOrder to 1 . Dies gewährleistet, dass das Icon das erste Gui-Objekt in der Reihenfolge von links nach rechts bleibt, wenn Sie Text in der nächsten Sektion des Tutorials einfügen.
Setzen Sie Größe auf {1.25,0},{1,0} , um das Etikettbereich über die gesamte Breite des Rahmens hinweg zu erweitern.
Setzen Sie SizeConstraint auf RelativeYY , um die Aspektgröße des Icons durch Skalierung der Symbolmit der Höhe des Elternrahmens zu erhalten.
Score-Text einfügen
Score Erlebnis重要的是，所有 UI Erlebnis
Zum Beispiel verwendet die Probe großen Text oben auf einer kontrastreichen Farbe, damit er nicht mit dem Lärm des Hintergrunds verschmolzt. Dies ist besonders für die Barrierefreiheit wichtig, da dies sicherstellt, dass der Text legible bleibt, während der Spieler durch den Platzbewegt wird, was Objekte sein können, die der Text und die Textfarbe sind.
Um den Score-Text innerhalb der Probe Gold Rush zu wiederherzustellen, platzieren Sie den Datei:
Fügen Sie ein TextLabel Objekt in ScoreBarFrame ein.
In dem Explorer-Fenster bewegen Sie den Mauszeiger über ScoreBarFrame und klicken Sie auf das ⊕-Symbol. Ein Kontextmenü wird angezeigt.
Fügen Sie ein TextLabel ein.
Wähle das neue Beschriftung, dann im Eigenschaften-Fenster ,
Setze HintergrundTransparenz auf 1, um den Hintergrund des Beschriftungvollständig durchsichtig zu machen.
Set Größe to {1,0},{1,0} to widmen Sie das Etikett auf das gesamte Frame (100% horizontal und 100% vertikal des Elternrahmens). Das Etikett verlängert sich über die Grenzen des Frame, da es vom Icon abgesetzt wird.
Setzen Sie Größen约束 auf RelativeYY , um die Größe des Labels mit der Höhe des Elternrahmens zu skalieren, und beibehalten Sie das Aspektverhältnis des Symbol. Dieser Schritt macht auch das Label ein Quadrat und hält es innerhalb der Grenzen des Rahmens.
Set Schriftart to GothamSSm to match the esthetics of the Umgebung.
Set Text auf 0 um die Punktzahl von null auszugehen.
Setzen Sie TextColor3 auf 255, 200, 100 um das Textgold zu färben.
Setzen Sie TextSize auf 30, um den Text auf dem Bildschirm größer zu machen.
Setzen Sie TextXAlignment auf Links , um sicherzustellen, dass der Score-Text in der Nähe des Kronzeichens immer noch in der linken Alignment bleibt, unabhängig davon, ob der Spieler:in0, 1,000, oder 1,000,000 ist.
Testen Sie das Design
Studio's Gerät-Emulator ermöglicht es Ihnen, how玩ers will sehen und mit Ihrer UI auf verschiedenen Geräten interagieren. Dieses Werkzeug ist ein wesentlicher Teil des Entwerfens von UI, da die AspektRatio Ihres Ansichtsfensters in Studio nicht unbedingt den AspektRatio der Bildschirme widerspiegeln muss, und es wichtig ist, dass Ihre UI sowohl auf jedem Gerät lesbar als auch auf jedem Gerät zugänglich ist.
Zum Beispiel, wenn Sie Ihre UI nicht auf einer Reihe von Bildschirmen testen, können Spieler mit großen Bildschirmen Ihren Text nicht lesen oder Ihre Icons nicht entschlüsseln, und Spieler mit kleinen Bildschirmen können den 3D-Raum nicht sehen, da Ihre UI-Elemente zu viel Platz auf dem Display einnehmen.
Um deine UI auf verschiedenen Bildschirmen anzuzeigen:
In der Menüleiste wählen Sie die Test -Registerkarte.
In der Emulation-Sektion , klicken Sie auf Gerät . Der Ansichtsfenster ändert sich, um das Aspektverhältnis eines durchschnittlichen Laptops zu reflektieren.
In der Auflösungs-Dropdown-Liste wählen Sie Aktuelle Auflösung . Dies ermöglicht es Ihnen, die richtige Auflösung Ihrer UI-Elemente auf dem Gerät, auf dem Sie emulieren, zu sehen.
In der Geräte-Dropdown-Liste wählen Sie mindestens ein Gerät innerhalb der Telefon , Tablet , Desktop und 1> Konsole1>-Sektionen.
