Die Umsetzung deiner Designs ist der Prozess, bei dem deine Wireframes in Studio mit integrierten und benutzerdefinierten UI-Elementen mit Skripten erstellt werden, die deinen UI-Kontext dynamisch erstellen. Dieser spannende Schritt des Tutorials ist, wo du alle deine Designs siehst und hart arbeitest, um ein kohärentes Set von Workflows zu erstellen, die fertig sind und bereit für die Interaktion mit dem Spieler sind.
Dieses Beispiel-Laser-Tag-Erlebnis als Referenz verwenden, zeigt dieses Abschnitt des Benutzeroberflächendesign-Kurses, wie Sie Ihre UI-Planung in die Tat umsetzen, einschließlich Anleitung:
- Rufen Sie die Asset-IDs aus der UI-Asset-Bibliothek ab, damit Sie die UI-Komponenten der Beispiel-Laser-Tag-Erlebnisses wiederherstellen können.
- Emulieren Sie verschiedene Geräte direkt in Studio, um zu sehen, wie Ihre UI auf verschiedenen Bildschirmen und Aspekt比例 angezeigt wird.
- Erstellen Sie ScreenGui, SurfaceGui und BillboardGui Objekte, um Ihre UI auf den Bildschirmen von Spielern, Teiloberflächen und innerhalb des Platzanzuzeigen, jeweils.
Nachdem Sie die Techniken in dieser Sektion überprüft haben, können Sie sie auf Ihre eigenen Projekte anwenden, um spannende UI-Komponenten zu erstellen, die den Spielern helfen, sich in Ihren Erlebnissen zu orientieren.
Die Anweisungen in diesem Abschnitt des Tutorials zeigen Ihnen, wie Sie die UI-Komponenten genau mit dem UI Design Asset Library wiederherstellen. Dieser Prozess dauert etwa 90 Minuten oder weniger vom Start bis zum Ende. Wenn Sie die angegebenen Werte nicht verwenden möchten, können Sie jeden UI-Element anpassen, um die Spezifikationen Ihres eigenen Erlebnisses zu erfüllen, oder verwenden Sie die Probemuster für den Rest des Tutorials.
Hol dir die Asset-Bibliothek
Asset-Bibliotheken sind Sammlungen von Assets, die Sie in Ihren Inventar hinzufügen können, um einfachen Zugriff und Wiederverwendung zu ermöglichen. Die Asset-Bibliothek, die Sie für Ihr Projekt aus dem Creator-Store verwenden, enthält neun 2D-Individual-UI-Elemente und die finalen Versionen der Ziele, Blaster-Selector und Spieler-Info-Komponenten, die Sie in diesem Abschnitt des Tutorials erstellen.
Du kannst die meisten der Bibliothek in deinem Inventar innerhalb von Studio hinzufügen, indem du auf die Schaltfläche In das Inventar hinzufügen in der folgenden Komponente klickst. Sobald die Assets in deinem Inventar sind, kannst du sie in jedem Projekt auf der Plattform wiederverwenden.
Um die Asset-Bibliothek aus deinem Inventar in deine Erlebniszu holen:
In der Menüleiste wählen Sie die Ansicht -Registerkarte.
In der Show -Sektion, klicken Sie auf Toolbox . Das Toolbox-Fenster wird angezeigt.
In dem Toolbox-Fenster , klicken Sie auf die Registerkarte Inventar . Die My Models Sortierungen werden angezeigt.
Klicken Sie auf das Dropdown-Menü und wählen Sie dann die sortieren My Packages .
Klicken Sie auf die Final Screen UI Components -Kachel, dann in dem Explorer-Fenster , wählen Sie Completed Components , dann ziehen Sie sie in den 1> StarterGui-Service ein. Sie können jetzt jeden der finalen Komponenten aktivieren, um ihr Design zu referenzieren.
Emulieren von Geräten
Studio's Gerät-Emulator ermöglicht es Ihnen, wie Spieler Ihre UI auf verschiedenen Geräten sehen und mit ihr interagieren. Dieses Werkzeug ist ein wesentlicher Teil des Entwicklungsprozesses, da das Aspektverhältnis Ihres Ansichtsfensters in Studio nicht unbedingt den Aspektverhältnis der Bildschirme wiedergibt, die Spieler verwenden, um auf Ihr Erlebnis zuzugreifen, und es wichtig ist, dass Ihre UI sowohl
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 Ihren Bildschirm in die kleinste Bildschirmgröße zu emulieren:
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 das Gerät mit der kleinsten Bildschirmgröße aus, die Spieler verwenden können, um auf Ihr Erlebnis zuzugreifen. Während die beste Option je nach Gerät unterschiedlich ist, die Beispiel-Laser-Tag-Erfahrung mit einem iPhone 4S testet, um zu überprüfen, wie die UI mit begrenztem Platzaussieht.
Erstellen Sie ScreenGUI-Objekte
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
Du kannst mehrere ScreenGui Objekte erstellen, um Gruppen von UI-Elementen während des Gameplayorganisieren und anzeigen zu können. Zum Beispiel enthält die Beispiel-Laser-Tag-Erfahrung fünf separate ScreenGui Objekte, die ursprünglich deaktiviert sind, bis Spieler verschiedene Bedingungen erfüllen, während des Haupt-Benutzerfluss des Erlebnisses:
- HUDGui - Zeigt Schlüsselinformationen über das Spielverhalten des Erlebnisan, wenn Spieler in einer Runde aktiv sind, wie z. B. die Zielvorgaben und die Gesamtpunkte jedes Teams.
- PickABlasterGui - Zeigt alle Blaster-Wählen an, wenn Spieler eine Runde starten oder wieder beitreten.
- ForceFieldGui - Zeigt ein hexagonales Raster an, wenn Spieler einen Blaster auswählen und vorübergehend unbesiegbar sind.
- OutStateGui - Displays eine dunkle Kante um den Bildschirm, wenn Spieler ausgewählt werden.
- RoundResultsGui - Zeigt ein dunkles Overlay auf dem Bildschirm mit Informationen darüber, welches Team die Runde gewonnen hat.
Nachdem du ein ScreenGui-Objekt erstellt hast, kannst du sein Kind GuiObjects entsprechend dem Zweck jedes Containers nach dem Ziel erstellen und anpassen. Um zu zeigen, in den sofortigen Abschnitten, die folgen, wirst du lernen, wie du UI-Elemente für die drei Kategorien von
Um ein ScreenGui Objekt zu erstellen:
In dem Explorer-Fenster bewegen Sie den Mauszeiger über den StarterGui-Dienst und klicken Sie dann auf die Schaltfläche ⊕ . Ein Symbolwird angezeigt.
Fügen Sie einen ScreenGUI-Bildschirm ein.
Benennen Sie den ScreenGUI nach dem Kontext seiner Kind UI-Elemente.
Wiederholen Sie diesen Prozess für jede Gruppierung von Benutzeroberflächenelementen, die Sie auf jedem Spieler:inanzeigen müssen.
Ziel-UI
Folgend die visuelle Hierarchie-Best Practices von Wireframe Your Layouts, zeigt diese Sektion dir, wie du alle On-Screen-UI-Elemente, die sich auf das Ziel der Erlebnisbeziehen, implementierst. Diese Gruppierung von UI-Elementen befindet sich in der Nähe des oberen Randes des Bildschirms, da das Ziel und die Punkte jedes Teams die wichtigsten sind, wie man das Spiel gewinnt.
Zum Beispiel bietet die Probe ein objektives UI-Komponente, zu dem Spieler auf die Erforderlichkeit hinweist, was sie tun müssen, um in einer Runde erfolgreich zu sein. Wenn Spieler Teammitglieder von einem feindlichen Team anzeigen und Punkte verdienen, behält diese Komponente die Gesamtpunktzahl eines Teams im Verhältnis zu dem Gesamtpunktzahl desHeader's im Blick. Für eine umfassende Überprüfung aller Client- und Server-Sk
Um genau die Ziel-UI innerhalb der Laser-Tag-Erlebnissen nachzubilden:
Erstellen Sie einen Container für das gesamte Komponente.
Fügen Sie ein Rame in das HUDGui -Objekt ein.
- In dem Explorer-Fenster navigieren Sie zum StarterGui-Dienst.
- Bewegen Sie den Mauszeiger über sein Kind HUDGui -Objekt und klicken Sie dann auf die Schaltfläche ⊕. Ein Symbolwird angezeigt.
- Vom Kontextmenü, fügen Sie einen Rahmen 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 HintergrundTransparenz auf 1, um den Hintergrund des Rahmens vollständig durchsichtig zu machen.
- Setzen Sie Position auf {0.5, 0},{0.03, 0} , um den Frame in der Nähe der oberen Mitte des Bildschirms (50% von der linken Seite des Bildschirms und 3% von der oberen Seite des Bildschirms, so dass ein kleiner Buffer vorhanden ist).
- Setzen Sie Größe auf {0.5, 0},{0.13, 0} , damit die Elemente des Rahmens einen großen Teil der oberen Seite des Bildschirms belegen, um die Aufmerksamkeit der Spieler zu erhalten (50% horizontal und 13% vertikal).
- Set Name zu Ziel .
(Optional) Fügen Sie einen UIAspectRatioConstraint in Ziel ein , um sicherzustellen, dass das Aspektverhältnis des Beschriftungunabhängig von der Bildschirmgröße des Spieler:inimmer noch das gleiche bleibt. Die Probe setzt ihre 0> Class.UIAspectRatioConstraint.AspectRatio 0> -Eigenschaft auf 3> 7 3> fest.
Erstellen Sie einen Container für die Anforderungsobjekte des Ziels.
Füge einen Rahmen in Ziel 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 HintergrundTransparenz auf 1, um den Hintergrund des Rahmens vollständig durchsichtig zu machen.
- Setzen Sie Position auf {0.5, 0},{0, 0} , um das Frame in der Mitte des Containers zu setzen (50% von der linken zum rechten des Elternrahmens und 0% von der oberen zum unteren des Elternrahmens).
- Set Größe auf {1, 0},{0.67, 0} , damit die Auswahl-UI-Komponenten etwa die Hälfte des Containers von oben nach unten einnehmen (100% horizontal und 67% vertikal des Elternrahmens).
- Set Name to Zielanzeige .
Erstellen Sie die Titel-Elemente.
Fügen Sie ein Bild-Label in Zielanzeige ein.
Wählen Sie die Bildetikett , dann im Eigenschaften-Fenster
- Set AnchorPoint to 0.5, 1 to set the Beschriftung's origin point in the bottom-mid of itself (50% from the left to the right of the Beschriftung, and 100% from the top to the bottom of the Beschriftung).
- Setze HintergrundTransparenz auf 1, um den Hintergrund des Beschriftungvollständig durchsichtig zu machen.
- Set LayoutOrder to -1 .
- Setzen Sie Position auf {0.5, 0},{0.34, 0} , um das Etikett in der Nähe der oberen Mitte des Rahmens (50% von der linken Seite zum rechten) zu setzen.
- Set Größe auf {0.46, 0},{0.34, 0} , um den Anzeigebereich fast auf die Hälfte des Rahmens zu erweitern (46% horizontal und 34% vertikal des Elternrahmens).
- Set Name an den Kopf.
- Setzen Sie Bild auf rbxassetid://14304828123 , um einen Trapezoid zu zeigen.
- Setze BildTransparenz auf 0.15, um den Kopfzeilenseitig semi-transparent zu machen.
(Optional) Fügen Sie einen UIAspectRatioConstraint in das BildLabel ein, um sicherzustellen, dass das Aspektverhältnis des Beschriftungunabhängig von der Bildschirmgröße des Spieler:inimmer noch gleich bleibt. Die Probe setzt seine 0> Class.UIAspectRatioLimit.AspectRatio ”Eigenschaft auf 3>13.781 3> .
Fügen Sie ein TextLabel in Header ein, um einen Titel anzuzeigen.
Wähle das neue Beschriftung, dann im Eigenschaften-Fenster ,
- Set AnchorPoint to 0.5, 0.5 to set the new Beschriftung's origin point in the middle of itself (50% from the left to the right of the Beschriftung, and 50% from the top to the bottom of the Beschriftung).
- Setze HintergrundTransparenz auf 1, um den Hintergrund des Beschriftungvollständig durchsichtig zu machen.
- Setzen Sie Position auf {0.5, 0},{0.5, 0} , um das Etikett in die Mitte seiner Eltern-Etikett (50% von der linken zum rechten der Beschriftungund 50% von der oberen zum unteren der Beschriftung) zu verschieben.
- Set Größe zu {0.62, 0},{0.55, 0} , um den Textbereich um mehr als die Hälfte der Eltern-Etikett zu erweitern (62% horizontal und 55% vertikal der Beschriftung).
- Set Name zu HeaderTextLabel .
- Set FontFace auf Montserrat , um die futuristische Ästhetik anzupassen.
- Setze Gewicht auf Mittel um die Schriftdicke zu verdicken.
- Set Text zu ZIEL .
- Aktiviere TextSkaliert .
Erstellen Sie die Ansichtselemente.
Fügen Sie ein Bild-Label in Zielanzeige ein.
Wählen Sie die Bildetikett , dann im Eigenschaften-Fenster
- Set AnchorPoint to 0.5, 1 to set the Beschriftung's origin point in the bottom-mid of itself (50% from the left to the right of the Beschriftung, and 100% from the top to the bottom of the Beschriftung).
- Setze HintergrundTransparenz auf 1, um den Hintergrund des Beschriftungvollständig durchsichtig zu machen.
- Setzen Sie Position auf {0.5, 0},{1, 0}, um das Etikett an den unteren Mitte seines Elternrahmens zu verschieben (50% von der linken zum rechten Elternraum und 100% von der oberen zum unteren Elternraum).
- Set Größe to {0.89, 0},{0.66, 0} to widmen Sie den Textbereich fast zur vollen Breite des Elternrahmens (89% horizontal und 66% vertikal des Elternrahmens).
- Set Name zu Körper .
- Set Bild to rbxassetid://14304827265 to display a upside-down Trapezoid.
- Set BildFarbe3 to 0, 0, 0 to darken the image.
- Setze BildTransparenz auf 0.3, um den Kopfzeilenseitig semi-transparent zu machen.
(Optional) Fügen Sie einen UIAspectRatioConstraint in das BildLabel ein, um sicherzustellen, dass das Aspektverhältnis des Beschriftungunabhängig von der Bildschirmgröße des Spieler:inimmer noch das gleiche bleibt. Die Probe setzt seine 0> Class.UIAspectRatioLimit0> Eigenschaft auf 3> 13.781 3>.
Fügen Sie ein TextLabel in Körper ein, um eine Anfrage anzuzeigen.
Wähle das neue Beschriftung, dann im Eigenschaften-Fenster ,
- Set AnchorPoint to 0.5, 0.5 to set the new Beschriftung's origin point in the middle of itself (50% from the left to the right of the Beschriftung, and 50% from the top to the bottom of the Beschriftung).
- Setze HintergrundTransparenz auf 1, um den Hintergrund des Beschriftungvollständig durchsichtig zu machen.
- Setzen Sie Position auf {0.5, 0},{0.5, 0} , um das Etikett in die Mitte seiner Eltern-Etikett (50% von der linken zum rechten der Beschriftungund 50% von der oberen zum unteren der Beschriftung) zu verschieben.
- Set Größe zu {0.85, 0},{0.39, 0} , um den Textbereich auf mehr als die Hälfte der Eltern-Etikett zu erweitern (85% horizontal und 39% vertikal der Beschriftung).
- Set Name zu BodyTextLabel .
- Set FontFace auf Montserrat , um die futuristische Ästhetik anzupassen.
- Setze Gewicht auf Mittel um die Schriftdicke zu verdicken.
- Setzen Sie TextColor3 auf 255, 255, 255, um den Text weiß gegen den dunklen Hintergrund zu machen.
- Set Text auf Tag, um Punkte zu erzielen! Erster Team zu %d Punkten gewinnt. .
- Aktiviere TextSkaliert .
Erstellen Sie einen Container für die Zielteams-Zähler.
Füge einen Rahmen in Ziel ein.
Wählen Sie das neue Frame , dann im Properties -Fenster,
- Set AnchorPoint to 0.5, 1 to set the Beschriftung's origin point in the bottom-mid of itself (50% from the left to the right of the frame, and 100% from the top to the bottom of the frame).
- Setze HintergrundTransparenz auf 1, um den Hintergrund des Rahmens vollständig durchsichtig zu machen.
- Setzen Sie Position auf {0.5, 0},{1, 0}, um den Frame in der unteren Mitte des Containers (50% von der linken zum rechten des Elternrahmens und 100% von der unteren zum rechten des Elternrahmens) zu setzen.
- Set Größe auf {0.44, 0},{0.27, 0} , damit die Auswahl-UI-Komponenten etwa ein Drittel des Containers von links nach rechts einnehmen (44% horizontal und 27% vertikal des Elternrahmens).
- Set Name zu TeamPointCounter .
Erstellen Sie Pad für die Teamzähler.
- Fügen Sie ein UIListLayout Objekt in den Frame von Schritt 5 ein.
- Wählen Sie das UIListLayout Objekt, dann im Eigenschaften Fenster,
- Setzen Sie Padming auf 0.025, 0, um den Platz zwischen den zukünftigen Teamzählern zu bieten.
- Setzen Sie FillDirection auf Horizontale , damit jedes Team gegenüber jedem anderen Team angezeigt wird.
- Set HorizontalAlignment auf Center , damit jedes Team gegenübersteht.
Erstellen Sie die grünen Team-Counter-Elemente.
Fügen Sie ein Bildetikett in TeamPointCounter ein.
Wählen Sie die Bildetikett , dann im Eigenschaften-Fenster
- Setze HintergrundTransparenz auf 1, um den Hintergrund des Beschriftungvollständig durchsichtig zu machen.
- Setzen Sie Position auf {0.5, 0},{1, 0}, um das Etikett an den unteren Mitte seines Elternrahmens zu verschieben (50% von der linken zum rechten Elternraum und 100% von der oberen zum unteren Elternraum).
- Set Größe auf {0.5, 0},{1, 0} , um das Etikett auf die Hälfte der Elternlamellen zu erweitern (50% horizontal und 100% vertikal der Elternlamellen).
- Set Name to TeamACountner .
- Setzen Sie Bild auf rbxassetid://14304826831 , um eine Richtungsfade anzuzeigen.
- Set BildFarbe3 to 88, 218, 171 to tone the image mint green.
Konfigurieren Sie ein benutzerdefiniertes Attribut, um zu verfolgen, dass dieses Etikett für das grüne Team ist.
- In dem Eigenschaften -Fenster, navigieren Sie zur Attributen -Sektion und klicken Sie dann auf das Plus-Symbol. Ein Pop-up-Dialog wird angezeigt.
- In dem Namen -Feld geben Sie teamColor ein.
- In dem Typ- Dropdown-Menü wählen Sie Ziegelsteinfarbe .
- Klicken Sie auf die Speichern Schaltfläche.
- Setzen Sie das neue Teamfarbe-Attribut auf Mint .
Fügen Sie ein TextLabel in TeamACountner ein, um eine Anfrage anzuzeigen.
Wähle das neue Beschriftung, dann im Eigenschaften-Fenster ,
- Set AnchorPoint to 1, 0.5 to set the new Beschriftung's origin point in the right-midnight of itself (100% from the left to the right of the Beschriftung, and 50% from the top to the bottom of the Beschriftung).
- Setze HintergrundTransparenz auf 1, um den Hintergrund des Beschriftungvollständig durchsichtig zu machen.
- Setzen Sie Position auf {0.95, 0},{0.5, 0}, um das Etikett an die Rechte seiner Eltern-Etikett (95% von der linken Seite zur rechten Seite der Beschriftungund 50% von der oberen Seite der Beschriftung) zu bewegen.
- Set Größe zu {0.85, 0},{0.39, 0} , um den Textbereich auf mehr als die Hälfte der Eltern-Etikett zu erweitern (85% horizontal und 39% vertikal der Beschriftung).
- Set FontFace auf Montserrat , um die futuristische Ästhetik anzupassen.
- Setze Gewicht auf Mutig um die Schriftart zu verdicken.
- Setzen Sie TextColor3 auf 255, 255, 255, um den Text weiß gegen den dunklen Hintergrund zu machen.
- Set Text zu - .
- Aktiviere TextSkaliert .
- Set TextXAlignment auf Rechts .
Fügen Sie ein UIStroke-Objekt in das TextLabel und dann in das Properties-Fenster ein, setzen Sie 2> Farbe2> auf 5> 8, 78, 525> und zeichnen Sie den Strich mit einem dunklen grünen Strokes umrissen.
Erstellen Sie die rosa Team-Counter-Elemente.
Duplizieren Sie TeamAICount und seine Kinder.
Wählen Sie das duplikat TeamACounter , dann im Eigenschaften -Fenster,
- Set Name zu TeamBCounter .
- Set Bild to rbxassetid://14305849451 to display a directional fade in the opposite direction.
- Setzen Sie BildFarbe3 auf 255, 170, 255 um das Bildrötungspink zu hellen.
- Setzen Sie das teamColor Attribut auf Carnation Pink .
Wähle das doppelte TextLabel Kind von TeamBCounter und dann im Eigenschaften -Fenster,
- Set AnchorPoint to 0, 0.5 to set the new Beschriftung's origin point in the left-middle of itself (0% from the left to the right of the Beschriftung, and 50% from the top to the bottom of the Beschriftung).
- Setzen Sie Position auf {0.05, 0},{0.5, 0}, um das Etikett links von seinem Eltern-Etikett zu verschieben (5% von der linken Beschriftungzum rechten, und 50% von der oberen Beschriftungzum unteren).
- Set TextXAlignment auf Links .
Wählen Sie das doppelte UIStroke Kind von TeamBCounter , dann in dem Eigenschaften-Fenster setzen Sie 1> Farbe1> auf 4> 158, 18, 94 4> um das Strich mit einem dunklen rosa Strich umzurissen.
Beachten Sie die folgenden ReplicatedStorage Skripts innerhalb der Probe Laser-Tag Datei, die programmieren die Zielanfrage und die Teampunkte.
Das folgende Skript erfordert eine Reihe von Modul-Skripts, die zusammenarbeiten, um das Haupt-Heads-Up-Anzeige (HUD) aufzustellen, einschließlich setObjective und startSyncingTeamPoints. Nachdem ein Spieler einer Runde beigetreten ist und seinen Blaster ausgewählt hat, stellt dieses Skript sicher, dass alle HUD-Benutzeroberflächenelemente für den Zustand, das Spieler:inund den Team-Status des
Nun, nachdem ein Spieler seinen Blaster ausgewählt hat, wird die Ziel-UI oben auf seinem Bildschirm angezeigt und verfolgt die Punkte jedes Teams.
Blaster-UI
Folgende visuelle Hierarchie-Best Practices aus Wireframe Your Layouts zeigen Ihnen, wie Sie alle auf-Screen-UI-Elemente, die mit dem Blaster des Spieler:inzu tun haben, implementieren können. Diese Gruppierung von UI-Elementen belegt den größten Teil des Bildschirms in der Nähe des Zentrums des Bildschirms, da sie als Fokuspunkt dient, um die Aufmerksamkeit des Spielers auf die Aktion in Platzzu ziehen, und es die me
Fadenkreuz
Ein Fadenkreuz ist ein UI-Element, das den Spielern sagt, wo sie einen Einfluss haben, wenn sie ihre Waffe zerschlagen. Dieses UI-Element ist ein wichtiges Gameplay-Anforderung für First-Person-Shooter-Erlebnisse, da die Spieler ihre Waffe genau zielen und feindliche Teammitglieder markieren müssen.
Wie die meisten anderen Erlebnisse in der Genrepositioniert die Probe-Laser-Tag-Erfahrung das Fadenkreuz in der Mitte des Bildschirms, damit Spieler etwas statisches auf das Fadenkreuz konzentrieren können, während ihr Avatar durch den 3D-Raum bewegt. Darüber hinaus, um Bewegungsübeligkeit zu reduzieren, ermöglicht dieses Platzierung, dass das Fadenkreuz auch perzeptibel ist, während es sich in die UmgebungBlendet.
Um das Fadenkreuz innerhalb der Laser-Tag-Sammlung Erlebnisnachzubilden:
Fügen Sie ein Bild-Label in das HUDGui Class.ScreenGui -Objekt ein.
In dem Explorer-Fenster navigieren Sie zum StarterGui-Dienst.
Bewegen Sie den Mauszeiger über sein Kind HUDGui -Objekt und klicken Sie dann auf die Schaltfläche ⊕ . Ein Symbolwird angezeigt.
Vom Kontextmenü, fügen Sie einen Bild-Etikettierungs-Label ein.
Wählen Sie das neue Bild-Label , dann in dem Eigenschaften-Fenster ,
- Set Bild to rbxassetid://14400935446 .
- Set AnchorPoint auf 0.5, 0.5 um den Beschriftungin der Mitte des Labels zu setzen (50% von der linken bis zur rechten Seite des Beschriftungund 50% von der oberen bis zur unteren Seite des Beschriftung).
- Setze HintergrundTransparenz auf 1, um den Hintergrund des Beschriftungvollständig durchsichtig zu machen.
- Set Name auf Fadenkreuz .
- Setzen Sie Position auf {0.5,0},{0.5,0} , um das Etikett in der Mitte des Bildschirms zu setzen.
- Set ScaleType auf Fit , damit das Bild in seinem Container passt und nicht auf verschiedenen Bildschirmen ausstreckt.
(Optional) Fügen Sie einen UIAspectRatioConstraint in Crosshair ein, um sicherzustellen, dass das Aspektverhältnis der Etikett immer gleich bleibt, unabhängig von der Beschriftungdes Spieler:in. Die Probensätze seine 0> Class.UIAspectRatioConstraint.AspectRatio -Eigenschaft auf 3> 0.895 3> festlegen.
Zielmarkierung
Ein Treffmarkierungs-Element ist ein UI-Element, das nur angezeigt wird, wenn eine Explosion mit einem anderen Spieler auf dem Feind-Team ein Aufprall verursacht. Wie das Fadenkreuz ist dieses UI-Element ein wichtiges Spielanforderungs-Anzeigelement für First-Person-Shooter-Erlebnisse, da es visuelle Feedback bietet, wenn Spieler bei der Markierung ihrer Gegner erfolgreich sind.
Um genau den Treffmarkierungs-Marker innerhalb der Laser-Tag-Erlebnissen zu wiederherzustellen:
Fügen Sie ein Bild-Label in das Fadenkreuz-Objekt ImageLabel ein.
In dem Explorer-Fenster navigieren Sie zum StarterGui-Dienst.
Bewegen Sie den Mauszeiger über sein Kind Crosshair -Objekt und klicken Sie dann auf die Schaltfläche ⊕ . Ein Symbolwird angezeigt.
Vom Kontextmenü, fügen Sie einen Bild-Etikettierungs-Label ein.
Wählen Sie das neue Bild-Label , dann in dem Eigenschaften-Fenster ,
- Setzen Sie Bild auf rbxassetid://14401148736 , um das rechteckige Treffmarkierungs-Symbol anzuzeigen.
- Setzen Sie AnchorPoint auf 0.5, 0.5 , um den Beschriftungin der Mitte des Beschriftungzu setzen.
- Setze HintergrundTransparenz auf 1, um den Hintergrund des Beschriftungvollständig durchsichtig zu machen.
- Setzen Sie Position auf {0.5,0},{0.5,0} , um das Etikett in der Mitte des Bildschirms zu setzen.
- Set Name zu Zielmarkierung .
- Setzen Sie Größe auf {0.6, 0},{0.06, 0} um die Größe der Rechtecke um die Mitte des Fadenkreuzes zu reduzieren.
- Setzen Sie BildTransparenz auf 1, um den Zielmarkierungs-Marker vollständig durchsichtig zu machen. Die Skripte in der folgenden Schritt kehren die Transparenz jedes Mal zurück, wenn ein Spieler:inmit einem anderen Spieler auf der Teamaufprallt.
Beziehen Sie sich auf die folgenden ReplicatedStorage Skripts innerhalb des Beispiels Laser-Tag Platzdatei, die programmieren den Treffmarkierungs-Marker anzeigt, wenn ein Blast mit einem Spieler auf dem feindlichen Team auftrifft.
Das folgende Skript erfordert eine Reihe von Modul-Skripts, die zusammenarbeiten, um das Haupt-Heads-Up-Anzeige (HUD) aufzustellen, einschließlich setupHitmarker. Nachdem ein Spieler einer Runde beigetreten ist und seinen Blaster ausgewählt hat, stellt dieses Skript sicher, dass alle HUD-Benutzeroberflächenelemente für den Zustand, das Gerät und den Team-Status des Spieler:inrichtig angezeigt werden.
Jetzt wird angezeigt, wenn ein Spieler seinen Blaster abfeuert und der Explosionsradius einen anderen Spieler:intrifft.
Blaster-Auswahl
Ein Blaster-Selector ist ein UI-Komponente, den Spieler verwenden, um ihren Blaster-Typ vor dem Beitreten oder Wiederbeitreten einer Runde auszuwählen. Die Beispiel-Laser-Tag-Erfahrung bietet zwei Arten von Blaster: einen, der mehrere Strahlen mit einer breit horizontalen Streuung erzeugt, und einen, der einen einzelnen Strahl erzeugt. Die Blaster-Typ-Auswahl beeinflusst während der Runde die Strategie der Spieler, wodurch dieser UI-Komponente
Die folgenden Schritte zeigen detailliert, wie Sie mehrere Container für die verschiedenen UI-Elementgruppen erstellen, einenHeader mit einer Anfrage, die Navigation und Auswahlknöpfe und ein Blaster-Button-Vorlage. Die Skriptlogik für die Gesamtkomponente beliebt verschiedene visuelle Merkmale in den Blaster-Button-Vorlage entsprechend der Configuration Instanzen, die jeden eingebenrepräsentieren.
Diese Konfiguration ermöglicht es Ihnen, zusätzliche Configuration Instanzen für mehr Blaster-Typen zu erstellen, die automatisch richtig innerhalb des Blaster-Selectors angezeigt werden, ohne dass Sie einzelne Schaltflächen innerhalb von StarterGui.PickABlasterGui erstellen müssen.
Um genau den Blaster-Selector innerhalb der Laser-Tag-Erlebnissen nachzubilden:
Erstellen Sie einen Container für das gesamte Komponente.
Fügen Sie ein Rame in das PickABlaster ScreenGui Objekt ein.
- In dem Explorer-Fenster navigieren Sie zum StarterGui-Dienst.
- Bewegen Sie den Mauszeiger über sein Kind PickABlaster -Objekt, dann klicken Sie auf das ⊕ -Symbol. Ein Kontextmenü wird angezeigt.
- Vom Kontextmenü, fügen Sie einen Rahmen ein.
Wählen Sie den neuen Frame und dann im Eigenschaften-Fenster ,
- Set AnchorPoint auf 0.5, 1 um den Kernpunkt des Rahmens in der unteren Mitte des Kerns (50% von der linken bis zur rechten Seite des Kerns und 100% von der oberen bis zur unteren Seite des Kerns) zu setzen.
- Setze HintergrundTransparenz auf 1, um den Hintergrund des Rahmens vollständig durchsichtig zu machen.
- Setzen Sie Position auf {0.5, 0},{0.9, 0} , um den Frame in der Nähe der Mitte des Bildschirms (50% von der linken Seite des Bildschirms, und 92.4% von der oberen Seite des Bildschirms) zu setzen.
- Set Größe auf {0.8, 0},{0.25, 0} , damit die Blaster-Selector-Benutzeroberfläche einen großen Teil des Bildschirms belegt (80% horizontal und 25% vertikal).
- Set Name zu Komponente .
(Optional) Fügen Sie einen UIAspectRatioConstraint in Komponente ein, um sicherzustellen, dass das Frame und seine Kinder UI-Elemente Aspekt比例 bleiben, unabhängig von der Bildschirmgröße des Spielers. Die Probe setzt ihre 0> Class.UIAspectRatioConstraint.AspectRatio -Eigenschaft auf 3> 5 3> .
Erstellen Sie einen Container, der UI-Element-Gruppen hält.
Füge einen Rahmen in Komponente ein.
Wählen Sie den neuen Frame und dann im Eigenschaften-Fenster ,
- Set AnchorPoint auf 0.5, 0.5 um den Ursprungspunkt des Rahmens in der Mitte von sich selbst (50% von der linken bis zur rechten Seite des Rahmens und 50% von der oberen bis zur unteren Seite des Rahmens) zu setzen.
- Setze HintergrundTransparenz auf 1, um den Hintergrund des Rahmens vollständig durchsichtig zu machen.
- Setzen Sie Position auf {0.5, 0},{0.375, 0} , um den Rahmen in der Nähe der oberen Mitte des Containers (50% von der linken Seite des Elternrahmens und 37.5% von der oberen Seite des Elternrahmens) zu setzen.
- Set Größe auf {1, 0},{0.75, 0} , damit die Auswahl-UI-Komponenten 3/4 des Containers (100% horizontal und 75% vertikal des Elternrahmens) belegen.
- Set Name zu SelectionFrame .
Erstellen Sie eine Anfrage für den Blaster-Selector.
Fügen Sie ein Bild-Label in Auswahl框 ein.
Wähle das neue Beschriftung, dann im Eigenschaften-Fenster ,
- Set AnchorPoint to 0.5, 1 to set the Beschriftung's origin point in the bottom-mid of itself (50% from the left to the right of the Beschriftung, and 100% from the top to the bottom of the Beschriftung).
- Setze HintergrundTransparenz auf 1, um den Hintergrund des Beschriftungvollständig durchsichtig zu machen.
- Set LayoutOrder to -1 .
- Setzen Sie Position auf {0.5, 0},{0.22, 0} , um das Etikett in der Nähe der oberen Mitte des Rahmens (50% von der linken Seite zum rechten) zu setzen.
- Set Größe auf {0.45, 0},{0.22, 0} , um den Anzeigebereich fast auf die Hälfte des Rahmens zu erweitern (45% horizontal und 22% vertikal des Elternrahmens).
- Set Name zu Header .
- Setzen Sie Bild auf rbxassetid://14304828123 , um einen Trapezoid zu zeigen.
- Setze BildTransparenz auf 0.15, um den Kopfzeilenseitig semi-transparent zu machen.
(Optional) Fügen Sie einen UIAspectRatioConstraint in das Etikett ein, um sicherzustellen, dass der Aspekt des Etiketts unabhängig von der Bildschirmgröße des Spieler:inimmer noch gleich bleibt. Die Probe setzt seine UIAspectRatioConstraint.AspectRatio Eigenschaft auf 0> 13.780> .
Fügen Sie ein TextLabel in Kopfzeile ein, um eine Anfrage anzuzeigen.
Wähle das neue Beschriftung, dann im Eigenschaften-Fenster ,
- Set AnchorPoint to 0.5, 0.5 to set the new Beschriftung's origin point in the middle of itself (50% from the left to the right of the Beschriftung, and 50% from the top to the bottom of the Beschriftung).
- Setze HintergrundTransparenz auf 1, um den Hintergrund des Beschriftungvollständig durchsichtig zu machen.
- Setzen Sie Position auf {0.5, 0},{0.5, 0} , um das Etikett in die Mitte seiner Eltern-Etikett (50% von der linken zum rechten der Beschriftungund 50% von der oberen zum unteren der Beschriftung) zu verschieben.
- Set Größe zu {0.6, 0},{0.55, 0} , um den Textbereich auf mehr als die Hälfte der Eltern-Etikett zu erweitern (60% horizontal und 55% vertikal der Beschriftung).
- Set Name zu HeaderTextLabel .
- Set FontFace auf Montserrat , um die futuristische Ästhetik anzupassen.
- Setze Gewicht auf Mittel um die Schriftdicke zu verdicken.
- Set Text auf WÄHLE EINEN BLASTER .
- Aktiviere TextSkaliert .
Erstellen Sie den Container für Ihren Blaster-Button-Container und Auswahlpfeile.
Fügen Sie ein Bild-Label in Auswahl框 ein.
Wähle das neue Beschriftung, dann im Eigenschaften-Fenster ,
- Entfernen Sie den Standard Bild-Wert .
- Set AnchorPoint to 0.5, 1 to set the Beschriftung's origin point in the bottom-mid of itself (50% from the left to the right of the Beschriftung, and 100% from the top to the bottom of the Beschriftung).
- Setze Hintergrundfarbe auf 0, 0, 0, um das Etikett schwarz zu machen.
- Setze HintergrundTransparenz auf 0.3, um die Opacity des Labels um 30% zu reduzieren, und alle schwarzen UI-Elemente im Erlebnis zu übereinstimmen.
- Setzen Sie Position auf {0.5, 0},{1, 0}, um das Etikett an den unteren Mitte des Rahmens zu setzen (50% von der linken zum rechten des Elternrahmens und 100% von der unteren zum rechten des Elternrahmens).
- Set Größe auf {1, 0},{0.77, 0} , um die Label-Bereich auf den Platz unter der Anfrage zu erweitern (100% horizontal und 77% vertikal des Elternrahmens).
Runden Sie die Ecken des Containers.
- Fügen Sie ein UICorner-Objekt in das Beschriftungein.
- Wählen Sie das neue Eck-Objekt, dann in dem Eigenschaften-Fenster , setzen Sie CornerRadius auf 0.075, 0 um die Ecken zu runden.
Erstellen Sie den Container für Ihre Blaster-Schaltflächen.
Fügen Sie einen Rahmen in das Etikett von Schritt 4 ein.
Wählen Sie den neuen Frame und dann im Eigenschaften-Fenster ,
- Set AnchorPoint auf 0.5, 0.5 um den neuen Frame's Ursprungspunkt in der Mitte des sich selbst (50% von der linken Seite des Frame und 50% von der rechten Seite des Frame) zu setzen.
- Setze HintergrundTransparenz auf 1, um den Hintergrund des Rahmens vollständig durchsichtig zu machen.
- Setzen Sie Position auf {0.5, 0},{0.5, 0} , um den Frame in der Mitte seiner Eltern-Etikett (50% von der linken zum rechten Eltern-Etikett und 50% von der oberen zum unteren Eltern-Etikett) zu setzen.
- Set Größe to {0.85, 0},{0.77, 0} to erweitern den Frame-Bereich zu den meisten des Labels (85% horizontal und 77% vertikal des Beschriftung).
- Set Name zu Container .
Erstellen Sie Pad für alle zukünftigen Blaster-Schaltflächen.
- Fügen Sie ein UIListLayout Objekt in den Frame von Schritt 5 ein.
- Wählen Sie das neue Layout-Objekt, dann im Eigenschaften-Fenster ,
- Setzen Sie Padming auf 0.035, 0 , um Platz zwischen allen zukünftigen Schaltflächen zu bieten.
- Setzen Sie FillDirection auf Horizontal , damit jede Schaltfläche neben jeder anderen angezeigt wird.
- Setzen Sie beide Horizontale Ausrichtung und Vertikale Ausrichtung auf Center , damit jede Schaltfläche sich in der Mitte von einerander zusammensetzt.
Erstellen Sie die linke Navigationsschaltfläche.
Fügen Sie ein BildButton-Objekt in das BildLabel von Schritt 4 ein.
Wählen Sie die neue Schaltfläche, dann im Eigenschaften-Fenster ,
- Entfernen Sie den Standard Bild-Wert .
- Set AnchorPoint to 0, 0.5 to set the new button's origin point in the left-middle of itself (0% from the left to the right of the button, and 50% from the top to the bottom of the button).
- Setze HintergrundTransparenz auf 0.15, um visuelle Feedback über das Ziehen des Buttons zu liefern, dass die Schaltfläche auswählbar ist.
- Setzen Sie Position auf {0.02, 0},{0.5, 0}, um das Pading links vom Button zu liefern, von seinem Eltern-Container (2% von der linken zur rechten Seite des Beschriftungund 50% von der oberen zur unteren Seite des Beschriftung).
- Set Größe to {0.04, 0},{0.33, 0} to make the selection button much smaller than the blaster buttons (4% horizontally and 33% vertically of the parent frame).
- Set Name zu NavigationButtonLeft .
Runden Sie die Ecken der Schaltfläche.
- Fügen Sie ein UI-Ecke-Objekt in die Schaltfläche ein.
- Wählen Sie das neue Eck-Objekt, dann in dem Eigenschaften-Fenster , setzen Sie CornerRadius auf 0.1, 0 um die Ecken zu runden.
Fügen Sie ein Bild-Label Objekt in die Schaltfläche ein.
Wähle das neue Beschriftung, dann im Eigenschaften-Fenster ,
- Set AnchorPoint to 0.5, 0.5 to set the new Beschriftung's origin point in the middle of itself (50% from the left to the right of the Beschriftung, and 50% from the top to the bottom of the Beschriftung).
- Set Position to {0.45, 0},{0.5, 0} to set the label near the middle of its parent button (45% from the left to the right of the parent button, and 50% from the top to the bottom of the parent button). This value isn't in the middle because an arrow doesn't <
- Set Größe auf {0.8, 0},{0.8, 0} , um den Label-Bereich um das Feld zu erweitern, um den Bereich unter dem Prompt (80% horizontal und 80% vertikal des Elternrahmens) zu füllen.
- Setze HintergrundTransparenz auf 1, um den Hintergrund des Bildes vollständig durchsichtig zu machen.
- Set Bild to rbxassetid://14309187238 .
- Set ScaleType zu Anpassen .
Erstellen Sie die richtige Navigationsschaltfläche.
Duplikat NavigationButtonLeft .
Wählen Sie die Duplikat-Schaltfläche, dann im Eigenschaften -Fenster,
- Set AnchorPoint to 1, 0.5 to set the new button's origin point in the right-midnight of itself (100% from the left to the right of the button, and 50% from the top to the bottom of the button).
- Setzen Sie Position auf {0.98, 0},{0.5, 0} , um das Padding rechts vom Button aus seinem Elternbehälter (98% von der linken Seite bis zur rechten Seite des Eltern Beschriftung, und 50% von der oberen bis zur unteren Seite des Eltern Beschriftung) zu liefern.
- Set Name zu NavigationButtonRight .
Wählen Sie sein Bild-Label Objekt.
- Set Rotation auf 180, um das Bild umzukehren.
- Set Position to 0.55, 0,0.5, 0 0.5 zu setzen, um das Etikett in der Nähe des mittleren Teils seines Elternteils (55% von der linken zu der rechten Seite des Elternteils und 50% von der oberen zu der
Erstellen Sie die AUSWÄHLEN Schaltfläche.
Fügen Sie einen BildButton in Komponente ein. Beachten Sie, wie dieser Prozess den Auswahl-Button von AuswahlFrame trennt, sodass Sie zwischen der Hauptteil des Komponenten von der Auswahl-Schaltfläche ein Puffer hinzufügen können.
Wählen Sie die neue Schaltfläche, dann im Eigenschaften-Fenster ,
- Entfernen Sie den Standard Bild-Wert .
- Set AnchorPoint to 0.5, 1 to set the new button's origin point in the bottom-mitte of itself (50% from the left to the right of the button, and 100% from the top to the bottom of the button).
- Setze HintergrundTransparenz auf 0.15, um visuelle Feedback über das Ziehen des Buttons zu liefern, dass die Schaltfläche auswählbar ist.
- Setzen Sie Position auf {0.5, 0},{0.99, 0} , um die Schaltfläche in der Nähe der Mitte des Containers (50% von der linken zum rechten des Elternrahmens und 99% von der Mitte zum Elternraum) zu setzen.
- Set Größe auf {0.17, 0},{0.18, 0} , um die Schaltfläche unter den Blaster-Schaltflächen (17% horizontal und 18% vertikal des Elternrahmens) zu verlängern.
- Set Name zu SelectButton .
Runden Sie die Ecken der Schaltfläche.
- Fügen Sie ein UI-Ecke-Objekt in die Schaltfläche ein.
- Wählen Sie das neue Eck-Objekt, dann in dem Eigenschaften-Fenster , setzen Sie CornerRadius auf 0.2, 0 um die Ecken zu runden.
Fügen Sie ein TextLabel Objekt in die Schaltfläche ein, damit Sie eine Actionanzeigen können.
Wähle das neue Beschriftung, dann im Eigenschaften-Fenster ,
- Set AnchorPoint to 0.5, 0.5 to set the new Beschriftung's origin point in the middle of itself (50% from the left to the right of the Beschriftung, and 50% from the top to the bottom of the Beschriftung).
- Setze HintergrundTransparenz auf 1, um den Hintergrund des Beschriftungvollständig durchsichtig zu machen.
- Setzen Sie Position auf {0.5, 0},{0.5, 0} , um das Etikett in die Mitte des Buttons zu verschieben (50% von der linken zum rechten der Eltern-Schaltfläche und 50% von der oberen zum unteren der Eltern-Schaltfläche).
- Set Größe to {0.9, 0},{0.55, 0} to widmen Sie den Textbereich fast auf die gesamte Breite der Eltern-Etikett (90% horizontal und 55% vertikal der Beschriftung).
- Set Name zu SelectTextLabel .
- Set FontFace auf Montserrat , um die futuristische Ästhetik anzupassen.
- Setze Gewicht auf Mittel um die Schriftdicke zu verdicken.
- Set Text to AUSWÄHLEN .
- Aktiviere TextSkaliert .
Erstellen Sie eine Blaster-Schaltfläche-Voreinrichtung.
- Im ReplicatedStorage -Dienst, erstellen Sie eine Ordnerstruktur, um Ihre UI-Objekte zu organisieren. Die Sammlung verwendet einen Instanzen-Ordner mit einem Kind Guis-Ordner.
- Fügen Sie ein Bildschaltfläche-Objekt in den Guis-Ordner ein.
- Wählen Sie die neue Schaltfläche, dann im Eigenschaften-Fenster ,
- Entfernen Sie den Standard Bild-Wert .
- Set AnchorPoint to 0.5, 0.5 to set the new button's origin point in the middle of itself (50% from the left to the right of the button, and 50% from the top to the bottom of the button).
- Setze HintergrundTransparenz auf 0.65, um visuelle Feedback zu liefern, dass die Schaltfläche nicht in Fokus ist. Skripte in Schritt 12 liefern programmierte visuelle Feedback, wenn die Schaltfläche in Fokus ist.
- Set LayoutOrder to 2 .
- Set Name zu BlasterButtonPrefab .
- Set Größe to {0.8, 0},{0.8, 0} .
- Setzen Sie BildTransparenz auf 1 , um das Bild vollständig durchsichtig zu machen.
- Fügen Sie einen UIAspectRatioConstructor in BlasterButtonPrefab ein, um sicherzustellen, dass die Button-Aspektgröße im Komponenten unabhängig von der Bildschirmgröße des Spieler:inimmer gleich bleibt.
- Runden Sie die Ecken der Schaltfläche.
- Fügen Sie ein UICorner-Objekt in BlasterButtonPrefab ein.
- Wählen Sie die Ecke, dann in dem Eigenschaften-Fenster setzen Sie Eckenradius auf 2> 0.05, 02> um die Ecken zu runden.
- Fügen Sie ein Bildetikett in BlasterButtonPrefab ein.
- Wähle das neue Beschriftung, dann im Eigenschaften-Fenster ,
- Entfernen Sie den Standard Bild-Wert .
- Set AnchorPoint to 0.5, 0.5 to set the new Beschriftung's origin point in the middle of itself (50% from the left to the right of the Beschriftung, and 50% from the top to the bottom of the Beschriftung).
- Setze HintergrundTransparenz auf 1, um den Hintergrund des Beschriftungvollständig durchsichtig zu machen.
- Set Position to {0.52, 0},{0.497, 0} to set the label near the middle of its parent button (52% from the left to the right of the parent button, and 49.7% from the top to the bottom of the parent button). This value isn't in the
- Setzen Sie Größe auf {1.20, 0},{0.9, 0} , um den Label-Bereich außerhalb der Schaltfläche zu erweitern (120% horizontal und 90% vertikal des Elternknopfes).
- Set ScaleType zu Anpassen .
Beziehen Sie sich auf die folgenden ReplicatedStorage Skripts innerhalb des Beispiels Laser-Tag Platzdatei, die programmieren Button für jeden Blaster anzeigen, skalieren die Buttons, wenn ein Spieler eine Schaltfläche auswählt, die nicht in Fokus ist, und fügen Sie dem Avatar des Spieler:inseine Blasterauswahl an.
Das folgende Skript erfordert eine Reihe von Skripten, die zusammenarbeiten, um den Blaster-Selector zu erstellen. Wenn ein Spieler der Erfahrung beitritt oder nach einer Gesundheitsabwärtsspirale in einer Runde wieder in eine Runde zurückkehrt, aktiviert dies alle Elemente der Benutzeroberfläche des Blaster-Selectors, bis der Spieler seine Auswahl getroffen hat.
Jetzt wird jedes Mal angezeigt, wenn ein Spieler dem Erlebnis beitritt oder wieder in eine Runde zurückkehren, nachdem seine Gesundheit Null erreicht hat, die Blaster-Auswahl-Benutzeroberfläche angezeigt, und sie können eine Auswahl treffen, und jeder Schaltfläche funktioniert wie erwartet.
Explosions按鈕
Ein Blast-Button ist ein UI-Komponente, den Spieler verwenden, um ihren Blaster zu blasen, wenn sie den Zugriff auf den Erlebnis durch ein mobiles oder Tablet-Gerät erhalten. Die Beispiel-Laser-Tag-Erfahrung verwendet einen Blaster-Button mit einem Icon, das sowohl ein Fadenkreuz als auch einen Explosionsradius darstellt, um die Funktion des Buttons ohne Text zu kommunizieren.
Um genau den Explosions-Button innerhalb der Laser-Tag-Sammlung nachzubilden:
Fügen Sie einen BildButton in das HUDGui Class.ScreenGui -Objekt ein.
In dem Explorer-Fenster navigieren Sie zum StarterGui-Dienst.
Bewegen Sie den Mauszeiger über sein Kind HUDGui -Objekt und klicken Sie dann auf die Schaltfläche ⊕ . Ein Symbolwird angezeigt.
Vom Kontextmenü, fügen Sie einen BildButton ein.
In der Ansicht, bewegen Sie die Schaltfläche so, dass eine Spieler:inThumb natürlich ruht, so dass Sie eine visuelle Wahrnehmung darüber haben, wie die Schaltfläche auf einem Spieler:inGerät aussieht, dann in dem Eigenschaften-Fenster ,
- Set Bild to rbxassetid://18308375035 to display the Symbol.
- Setze PressedImage auf rbxassetid://18308372558 , um eine umgekehrte Version des Blast-Buttons-Symbols anzuzeigen, wenn ein Spieler die Schaltfläche drückt.
- Setze HintergrundTransparenz auf 1, um den Hintergrund des Beschriftungvollständig durchsichtig zu machen.
- Set Name zu BlastButton .
- Set ScaleType auf Fit , damit das Bild in seinem Container passt und nicht auf verschiedenen Bildschirmen ausstreckt.
- Setzen Sie BildTransparenz auf 0.3, um die Opacity des Labels zu reduzieren, sodass es alle Schaltflächen-Elemente im Erlebnis übereinstimmt.
Fügen Sie einen UIAspectRatioConstructor in BlastButton ein, um sicherzustellen, dass die Button-Aspektgröße unabhängig von der Bildschirmgröße des Spieler:inimmer gleich bleibt.
Beziehen Sie sich auf die folgenden ReplicatedStorage Skripts innerhalb des Beispiels Laser-Tag Datei, die programmiert anzeigt, wenn ein Spieler die Touch-Eingabe auf einem Gerät verwendet, das Touch-Steuerung unterstützt.
Das folgende Skript erfordert eine Reihe von Modul-Skripts, die zusammenarbeiten, um das Haupt-Heads-Up-Anzeige (HUD) aufzustellen, einschließlich setupTouchButtonAsync. Nachdem ein Spieler einer Runde beigetreten ist und seinen Blaster ausgewählt hat, stellt dieses Skript sicher, dass alle HUD-Benutzeroberflächenelemente für den Zustand, das Gerät und den Team-Status des Spieler:inrichtig angezeigt werden.
Jetzt wird der Blaster-Button oben rechts auf dem Sprung-Button angezeigt, wenn ein Spieler die Erfahrung betritt und die Touch-Eingabe auf einem Gerät verwendet, das Touch-Steuerung unterstützt.
Spieler-UI
Folgend die visuelle Hierarchie-Best Practices aus Wireframe Your Layouts, zeigt diese Sektion dir, wie du alle On-Screen-UI-Elemente, die den Zustand des Spieler:inbetreffen, implementierst. Diese Gruppierung von UI-Elementen ist in der Nähe der Seiten des Bildschirms, da Spieler diesen periphere Informationen verstehen können, ohne ihren Fokus vom Gameplayzu wechseln.
Spieler-Indikator
Ein Spieler-Indikator ist ein UI-Komponente, auf den Spieler schnell dekodieren, zu welchem Team sie gehören, sobald sie in der Spawn-Zone ihres Teams spawnen. Die Beispiel-Laser-Tag-Erfahrung bietet zwei Versionen des Spieler-Indikators, abhängig davon, ob der Spieler auf dem grünen oder pinken Team ist.
Folgendo der Anleitung von Wählen Sie eine Farbthema aus, kombinieren beide Versionen des Spielersignals die Teamfarbe mit einem einzigartigen, einfachen Icon mit minimalem Detail, damit sie auf kleinen Bildschirmen lesbar bleiben. Die Bereitstellung von zwei Formen von visuellen Feedback ist wichtig, da dies hilft, das Design für Spieler mit Farbblindheit zugänglich zu halten.
Um genau den Spieler-Indikator-Komponente innerhalb der Laser-Tag-Erlebnissen nachzubilden:
Fügen Sie ein Rame in das HUDGui -Objekt ein.
- In dem Explorer-Fenster navigieren Sie zum StarterGui-Dienst.
- Bewegen Sie den Mauszeiger über sein Kind HUDGui -Objekt und klicken Sie dann auf die Schaltfläche ⊕. Ein Symbolwird angezeigt.
- Vom Kontextmenü, fügen Sie einen Rahmen ein.
Wählen Sie das neue Frame , dann im Properties -Fenster,
Set AnchorPoint auf 0, 1 um den Kernpunkt des Rahmens in der unteren Mitte des Kerns (0% von der linken Seite des Korners und 100% von der rechten Seite des Korners) zu setzen.
Setze HintergrundTransparenz auf 1, um den Hintergrund des Beschriftungvollständig durchsichtig zu machen.
Set Name zu PlayerDisplay .
Setzen Sie Position auf {0.02, 0},{0.97, 0} , um den Frame in der Nähe der unteren linken Ecke des Bildschirms zu setzen.
Setzen Sie Größe auf {0.23, 0},{0.08, 0} um sowohl das Frame kürzen als auch breiter zu machen.
Aktiviere ClipsDescendants , um Kindere GuiObjekte zu schneiden, die über das Frame hinausgehen.
Erstellen Sie die polygonale Form.
Fügen Sie ein Bild-Label in PlayerDisplay ein.
Wähle das neue Beschriftung, dann im Eigenschaften-Fenster ,
- Setzen Sie Bild auf rbxassetid://14304828123 um das Trapezoid-Symbol anzuzeigen.
- Set AnchorPoint to 1, 1 to set the Beschriftung's origin point in the bottom-right of itself (100% from the left to the right of the Beschriftung, and 100% from the top to the bottom of the Beschriftung).
- Setze HintergrundTransparenz auf 1, um den Hintergrund des Beschriftungvollständig durchsichtig zu machen.
- Set Name zu Block .
- Setzen Sie Position auf {1,0},{1,0} , um das Etikett auf die rechte Seite des Rahmens zu setzen.
- Setzen Sie Größe auf {1.858, 0},{0.581, 0} , um das Etikett außerhalb des Rahmens zu erweitern und es um einige mm unter der Länge des Rahmens zu verkürzen.
- Setze BildTransparenz auf 0.15, um das Etikett leicht transparen zu machen.
- Set ScaleType auf Fit , damit das Bild in seinem Container passt und nicht auf verschiedenen Bildschirmen ausstreckt.
- Fügen Sie einen UIAspectRatioConstructor in Block ein, um sicherzustellen, dass das Etikett und seine Kinder-UI-Elemente das Aspektverhältnis immer gleich bleiben, unabhängig von der Bildschirmgröße des Spieler:in.
- Wählen Sie den neuen Beschränkung, dann in dem Eigenschaften-Fenster , setzen Sie AspectRatio auf 13.78.
Erstellen Sie die Box für das Hochformatdes Spieler:in.
Fügen Sie ein Bild-Label in PlayerDisplay ein.
Wähle das neue Beschriftung, dann im Eigenschaften-Fenster ,
- Entfernen Sie den Platzhalter-AssetID innerhalb der Eigenschaften. Die Skripte in Schritt 7 fügen die Porträt des Spieler:inin das Beschriftungein.
- Set AnchorPoint to 0, 1 to set the Beschriftung's origin point in the bottom-left of itself (0% from the left to the right of the Beschriftung, and 100% from the top to the bottom of the Beschriftung).
- Set Hintergrundfarbe3 to 0, 0, 0 to set the Beschriftung's background color to black.
- Setze HintergrundTransparenz auf 0.3, um die Opacity des Labels um 30% zu reduzieren, und alle schwarzen UI-Elemente im Erlebnis zu übereinstimmen.
- Set Name to PlayerPortrait .
- Set Position to {0.11, 0},{1, 0} to set the label to the left side of the polygonal shape.
- Setzen Sie Größe auf {0.23, 0},{1, 0} , um das Beschriftungzu schrumpfen.
- Setze BildTransparenz auf 0.15, um das Etikett leicht transparen zu machen.
- Set ScaleType auf Fit , damit das Bild in seinem Container passt und nicht auf verschiedenen Bildschirmen ausstreckt.
- Fügen Sie einen UIAspectRatioConstructor in PlayerPortrait ein, um sicherzustellen, dass das Etikett und seine Kinder UI-Elemente' Aspekt比例 bleiben, unabhängig von der Bildschirmengröße des Spieler:in.
- Fügen Sie einen UI-Ecke in PlayerPortrait ein, dann in der Eigenschaften-Fenster setzen Sie 2> CornerRadius2> auf 5> 0.05, 05> um die Ecken etwas runden.
Erstellen Sie das Text-Etikett für den Namen des Spieler:in.
Fügen Sie ein TextLabel Objekt in PlayerDisplay ein.
Wähle das neue Beschriftung, dann im Eigenschaften-Fenster ,
- Set AnchorPoint to 0, 0.5 to set the new button's origin point in the left-middle of itself (0% from the left to the right of the button, and 50% from the top to the bottom of the button).
- Setze HintergrundTransparenz auf 1, um den Hintergrund des Beschriftungvollständig durchsichtig zu machen.
- Set Name zu PlayerNameTextLabel .
- Setzen Sie Position auf {0.35, 0},{0.72, 0}, um das Etikett auf die rechte Seite seines Containers zu setzen (35% von der linken Seite zum rechten Seiten des Beschriftungund 72% von der oberen Seite zum Boden des Beschriftung).
- Set Größe to {0.52, 0},{0.3, 0} , damit der Text die meiste Fläche des polygonalen Körpers belegen kann (52% horizontal und 30% vertikal des Elternrahmens).
- Set FontFace auf Montserrat , um die futuristische Ästhetik anzupassen.
- Setze Gewicht auf Mutig um die Schriftart zu verdicken.
- Entfernen Sie den Platzhaltertext innerhalb der Eigenschaften. Die Skripte in Schritt 7 fügen den Namen des Spieler:inin das Beschriftungprogrammiert ein.
- Aktiviere TextSkaliert .
- Set TextXAlignment auf Links .
Erstellen Sie die Team-Symbole und Farben, die links vom Hochformatdes Spieler:inangezeigt werden.
Fügen Sie einen Ordner in PlayerDisplay ein und benennen Sie ihn dann TeamIcons um.
Erstellen Sie das grüne Team-Symbol und die Farbe.
- Fügen Sie ein Bildetikett in TeamIcons ein.
- Wähle das neue Beschriftung, dann im Eigenschaften-Fenster ,
- Set AnchorPoint to 0, 1 to set the Beschriftung's origin point in the bottom-left of itself (0% from the left to the right of the Beschriftung, and 100% from the top to the bottom of the Beschriftung).
- Setze Hintergrundfarbe3 auf 88, 218, 171, um die Hintergrundfarbe des Beschriftungauf Mintgrün festzulegen.
- Set Name to TeamAIcon .
- Setzen Sie Position auf {0, 0},{1, 0} um das Etikett auf die linke Seite des Rahmens zu setzen.
- Set Größe to {0.135, 0},{0.58, 0} to schrumpfen Sie das Etikett links vom Hochformat.
- Setzen Sie BildTransparenz auf 1 um das Etikett transparen zu machen.
- Konfigurieren Sie ein benutzerdefiniertes Attribut, um zu verfolgen, dass dieses Etikett für das grüne Team ist. Dieser Schritt ist sehr wichtig für die Skripte in Schritt 7.
- In dem Eigenschaften -Fenster, navigieren Sie zur Attributen -Sektion und klicken Sie dann auf das Plus-Symbol. Ein Pop-up-Dialog wird angezeigt.
- In dem Namen -Feld geben Sie teamColor ein.
- In dem Typ- Dropdown-Menü wählen Sie Ziegelsteinfarbe .
- Klicken Sie auf die Speichern Schaltfläche.
- Setzen Sie das neue Teamfarbe-Attribut auf Mint .
- Fügen Sie einen UIAspectRatioConstructor in TeamAIcon ein, um sicherzustellen, dass das Etikett und seine Kinder UI-Elemente Aspekt比例 bleiben, unabhängig von der Bildschirmgröße des Spieler:in.
- Erstellen Sie das Symbol.
- Fügen Sie ein Bildetikett in TeamAIcon ein.
- Wähle das neue Beschriftung, dann im Eigenschaften-Fenster ,
- Set Bild to rbxassetid://14309678670 to display the green team Symbol.
- Set AnchorPoint to 0.5, 0.5 to set the Beschriftung's origin point in the middle of itself (50% from the left to the right of the Beschriftung, and 50% from the top to the bottom of the Beschriftung).
- Setze HintergrundTransparenz auf 1, um den Hintergrund des Beschriftungvollständig durchsichtig zu machen.
- Set Name zu Icon .
- Setzen Sie Position auf {0.5, 0},{0.5, 0} um das Etikett in der Mitte seiner Beschriftungzu platzieren.
- Set Größe auf {0.7, 0},{0.6, 0} , um das Beschriftungzu schrumpfen.
- Set ScaleType auf Fit , damit das Bild in seinem Container passt und nicht auf verschiedenen Bildschirmen ausstreckt.
Erstellen Sie das Team-Symbol für Pink und die Farbe.
- Duplizieren Sie TeamAIcon und seine Kinder.
- Wählen Sie das doppelte TeamAIcon , dann im Eigenschaften-Fenster ,
- Set Hintergrundfarbe3 auf 255, 170, 255 , um die Hintergrundfarbe des Beschriftungauf Karnation pink festzulegen.
- Set Name to TeamBIcon .
- Setzen Sie das teamColor Attribut auf Carnation Pink .
- Wählen Sie das doppelte Symbol Kind von TeamBIcon , dann in dem Eigenschaften-Fenster setzen Sie 1> Bild1> auf 4> rbxassetid://14309678549 4> , um das rosa Team-Symbol anzuzeigen.
Beziehen Sie sich auf die folgenden ReplicatedStorage Skripts innerhalb des Beispiels Laser-Tag Datei, die das Spieler-Symbol mit der passenden Teamfarbe und dem entsprechenden Team-Symbol anzeigt, während ein Spieler in einer Runde aktiv ist.
Das folgende Skript erfordert eine Reihe von Modul-Skripts, die zusammenarbeiten, um das Haupt-Heads-up-Anzeige (HUD) aufzustellen, einschließlich startSyncingTeamColor, setPlayerName und setPlayerPortrait. Nachdem ein Spieler:ineiner Runde beigetreten ist und seinen Blaster ausgewählt hat, stellt dieses Skript sicher, dass alle HUD-Benutzerober
Jetzt wird der Player-Indikator nach dem Respawnen oder Beitreten der Runde auf der unteren linken Seite des Bildschirms angezeigt.
Kraftfeld-Bildschirm
Ein Kraftfeld-Bildschirm ist ein UI-Element, das die Ansichtsfenster überschneidet, um den Spielern mitzuteilen, dass sie sicher vor dem feindlichen Team-Feuer sind, während sie sich dem Spieler:inanschließen oder wieder beitreten. Folgend den ästhetischen Richtlinien für Icons aus Wähle einen Kunststil aus , verwendet das Beispiel-Laser-Tag-Erle
Um genau das Kraftfeld-Bildschirm innerhalb der Beziehung Laser-Tag Erlebnisnachzubilden:
Fügen Sie ein Bild-Label in das ForceFieldGui ScreenGui Objekt ein.
In dem Explorer-Fenster navigieren Sie zum StarterGui-Dienst.
Bewegen Sie den Mauszeiger über sein Kind ForceFieldGui Objekt und klicken Sie dann auf die Schaltfläche ⊕ . Ein Symbolwird angezeigt.
Vom Kontextmenü, fügen Sie einen Bild-Etikettierungs-Label ein.
Wähle das neue Beschriftung, dann im Eigenschaften-Fenster ,
Set Bild to rbxassetid://14462567888 .
Setze HintergrundTransparenz auf 0.8, um das Kraftfeld translucent zu machen.
Setzen Sie Größe auf {1, 0},{1, 0} , um das Bild auf den gesamten Bildschirm zu füllen (100% horizontal und 100% vertikal des Eltern-ScreenGUI).
Set ScaleType to Kachel to make the hexagon tile across the entire screen.
Set Kachelgröße auf {0, 104},{0, 180} .
Fügen Sie ein UIGradient -Objekt in das Beschriftungein.
Wählen Sie das neue Gradient-Objekt, dann im Eigenschaften-Fenster ,
Set Farbe auf eine Farbfolge, die blau beginnt, weiß wird und dann blau wieder wird.
Setzen Sie Farbe auf 120, 192, 250, um eine hellblaue Farbe auf alle Hexagone anzuwenden.
Klicken Sie auf die Eigenschaften, dann klicken Sie auf die ⋯-Schaltfläche. Ein Farb順序-Pop-up wird angezeigt.
Jedes Dreieck auf der unteren Achse der Farbfolge ist ein Schlüsselpunkt, der den Farbwert der Eigenschaft an diesem Zeitpunkt des Bildes von links nach rechts bestimmt.
Klicke und ziehe auf der Farbfolge, bis du einen Zeit-Wert von 0.05 erreichst, dann klicke auf das kleine Quadrat neben Farbe, um das 2> Farben2>-Pop-up-Fenster zu öffnen.
Wählen Sie ein hellweißes und schließen Sie dann das Pop-up-Fenster.
Klicke und ziehe auf die Farbfolge, bis du eine Zeit--Wert von 0.95 erreichst, dann öffne das Farben--Pop-up-Fenster erneut und wähle die gleiche Farbe wie vorher aus.
Setzen Sie Rotation auf 225, um den blauen Teil Ihrer Farbfolge in den oberen, linken und rechten Ecken anzuzeigen.
Setzen Sie Transparenz auf eine Zahlfolge, die das Kraftfeld wie es schimmert aussehen lässt.
Klicken Sie auf die Transparenz Eigenschaften, dann klicken Sie auf die ⋯ -Schaltfläche. Ein Zahlenschema-Pop-up wird angezeigt. Jeder Quadrat am Anfang und am Ende der Zahlenserie ist ein Keypunkt, der den Transparenzwert der Eigenschaft an diesem Zeitpunkt des Bildes von links nach rechts bestimmt.
Setzen Sie die folgenden Zeit- und Werte属性 über die Nummernfolge:
- Zeit = 0 , Wert = 0> 0.250>
- Zeit = .101 , Wert = 0> 0.8750>
- Zeit = .183 , Wert = 0> 00>
- Zeit = .3 , Wert = 0> 10>
- Zeit = .7 , Wert = 0> 10>
- Zeit = 1 , Wert = 0> 0.90>
Duplizieren Sie das Bild-Etikett aus dem Schritt 2.
Wählen Sie das UIGradient -Objekt innerhalb der Beschriftung, dann im Eigenschaften -Fenster,
Set Rotation auf -45 , um das Bild so zu drehen, dass es fast so viele andere auf der Y-Achse miteinander spiegelt.
Modify Transparency , um den Shimmer besser aussehen zu lassen.
- Klicken Sie auf die Eigenschaften, dann klicken Sie auf die ⋯ ⋯ ⋯ ⋯ ⋯ ⋯ ⋯ ⋯ ⋯ ⋯ ⋯ ⋯ ⋯ ⋯ ⋯ ⋯ ⋯ ⋯ ⋯ ⋯ ⋯ ⋯ ⋯ ⋯ ⋯ ⋯ ⋯ ⋯ ⋯ ⋯ ⋯ ⋯ ⋯ ⋯ ⋯ ⋯ ⋯ ⋯ ⋯ ⋯ ��
- Wählen Sie den dritten Keyframe, dann klicken Sie auf die Schaltfläche Löschen .
Beziehen Sie sich auf die folgenden ReplicatedStorage Skripts innerhalb des Beispiels Laser-Tag Platzdatei, die das Kraftfeld anzeigt, während ein Spieler beitritt oder beitritt zu einer Runde.
Das folgende ReplicatedStorage.ForceFieldClientVisuals Client-Skript überträgt das Standard- ForceField -Visual mit StarterGui.ForceFieldGui . Wenn Spieler in ein Erlebnis laden und auf einem 1> Class.SpawnLocation1> mit einem <
Dieses Skript beginnt, indem es hört, wenn das ForceField an einen Charakter hinzugefügt wird, deaktiviert die Standard-First-Person-Kraftfeldsichtsichten und aktiviert dann das Class.ForceFieldGuiScreenGui-Objekt. Beachten Sie, dass dies 2>nicht2> die visuellen Effekte von Drittpersonen beeinflusst, wenn Spieler auf andere Sp
local Players = game:GetService("Players")
local localPlayer = Players.LocalPlayer
local function onCharacterAddedAsync(character: Model)
local forceField = character:WaitForChild("ForceField", 3)
if not forceField then
-- Wenn der Spieler an einem Spawn-Punkt mit ForceField deaktiviert spawnet
return
end
forceField.Visible = false
localPlayer.PlayerGui:WaitForChild("ForceFieldGui").Enabled = true
forceField.Destroying:Wait()
localPlayer.PlayerGui.ForceFieldGui.Enabled = false
end
if localPlayer.Character then
onCharacterAddedAsync(localPlayer.Character)
end
localPlayer.CharacterAdded:Connect(onCharacterAddedAsync)
Jetzt zeigt die neue Kraftfeld-Ansicht auf dem Bildschirm immer an, wenn ein Spieler der Runde beitritt oder beitritt, und nicht die Standard-Erster-Person-Ansicht ForceField .
Respawn-Bildschirm
Ein Respawn-Bildschirm ist ein UI-Element, das die Ansichtsfenster dunkelt, damit die Spieler darüber informiert werden, dass sie ausgewählt wurden, und dass der Server im Prozess der Respawn-Verarbeitung zurück in ihre Spawn-Zone ist. Dieses UI-Element ist wichtig, da es den Spielern Zeit gibt, das ausgewählte Element zu verarbeiten, und strategize den nächsten Schritt, bevor sie dem aktiven Round beitreten.
For more information on custom respawning behavior in the sample laser tag Erlebnis, see Respawn Characters from the Gameplay Scripting curriculum.
Um genau den Respawn-Bildschirm innerhalb der Probe Laser-Tag Erlebnisnachzubilden:
Erstellen Sie das Zentrum-Informationen-Banner.
Fügen Sie ein Bild-Label in das OutstateGui Class.ScreenGui -Objekt ein.
In dem Explorer-Fenster navigieren Sie zum StarterGui-Dienst.
Bewegen Sie den Mauszeiger über sein Kind OutStateGui Objekt und klicken Sie dann auf die Schaltfläche ⊕ . Ein Symbolwird angezeigt.
Vom Kontextmenü, fügen Sie einen Bild-Etikettierungs-Label ein.
Wähle das neue Beschriftung, dann im Eigenschaften-Fenster ,
Set AnchorPoint to 0.5, 0.5 to set the new button's origin point in the middle of itself (50% from the left to the right of the Beschriftung, and 50% from the top to the bottom of the Beschriftung).
Setze HintergrundTransparenz auf 1, um den Hintergrund des Beschriftungvollständig durchsichtig zu machen.
Setzen Sie Position auf {0.5, 0},{0.5, 0} , um das Etikett in der Mitte seines Containers zu setzen (50% von der linken bis zur rechten Seite des Eltern-ScreenGUI und 50% von der oberen bis zur unteren Seite des Eltern-ScreenGUI).
Set Größe to {0.48, 0},{0.06, 0} to widen das Etikett (48% horizontal und 6% vertikal von der Eltern-ScreenGUI).
Set Name zu Block .
Set Bild to rbxassetid://14304827265 to make the image a trapezoid.
Setzen Sie Bildfarbe auf 0,0,0, um das Trapezoid schwarz zu machen.
Setzen Sie BildTransparenz auf 0.3, um die Opacity des Labels um 30% zu reduzieren, und passen Sie alle schwarzen UI-Elemente im Erlebnis zu.
Fügen Sie einen UIAspectRatioConstructor in Block ein, um sicherzustellen, dass das Etikett und seine Kinder-UI-Elemente das Aspektverhältnis immer gleich bleiben, unabhängig von der Bildschirmgröße des Spieler:in.
Wählen Sie den neuen Beschränkung, dann in dem Eigenschaften-Fenster , setzen Sie AspectRatio auf 13.78.
Fügen Sie ein TextLabel in Block für den informativen Text ein.
Wähle das neue Beschriftung, dann im Eigenschaften-Fenster ,
Set AnchorPoint to 0.5, 0.5 to set the Beschriftung's origin point in the middle of itself (50% from the left to the right of the Beschriftung, and 50% from the top to the bottom of the Beschriftung).
Setze HintergrundTransparenz auf 1, um den Hintergrund des Beschriftungvollständig durchsichtig zu machen.
Setzen Sie Position auf {0.5, 0},{0.5, 0} , um das Etikett in der Mitte seiner Eltern-Etikett (50% von der linken zum rechten der Beschriftungund 50% von der oberen zum unteren der Beschriftung) zu setzen.
Set Größe to {.85, 0},{0.55, 0} so that the text can take up most of the trapezoid-bereich (85% horizontal und 55% vertikal der Beschriftung).
Set Name zu BodyTextLabel .
Set FontFace auf Montserrat , um die futuristische Ästhetik anzupassen.
Setze Gewicht auf Mutig um die Schriftart zu verdicken.
Set Text to Respawning… .
Setzen Sie TextColor3 auf 255, 255, 255 , um den Text weiß zu machen.
Aktiviere TextSkaliert .
Erstellen Sie denHeader.
Fügen Sie ein Bild-Label in Block ein.
Wähle das neue Beschriftung, dann im Eigenschaften-Fenster ,
Set AnchorPoint to 0.5, 1 to set the Beschriftung's origin point in the bottom-mid of itself (50% from the left to the right of the Beschriftung, and 100% from the top to the bottom of the Beschriftung).
Setze HintergrundTransparenz auf 1, um den Hintergrund des Beschriftungvollständig durchsichtig zu machen.
Setzen Sie Position auf {0.5, 0},{0, 0} , um das Label an der oberen Mitte seiner Eltern-Etikett (50% von der linken Seite zum rechten Seiten der Beschriftungund 0% von der oberen Seite zum Boden der Beschriftung) zu setzen.
Set Größe to {0.46, 0},{0.56, 0} to widen das Etikett (46% horizontal und 56% vertikal des Beschriftung).
Set Name zu Header .
Set Bild to rbxassetid://14304826985 to make the image a multi-Directional Fade.
Setzen Sie Bildfarbe auf 245, 46, 46, um das Verblassen rot zu verwenden, um anzuzeigen, dass der Spieler vorübergehend inaktiv ist, während er aus der Runde ausgestellt wird.
Fügen Sie ein TextLabel in Header für den informativen Text ein.
Wähle das neue Beschriftung, dann im Eigenschaften-Fenster ,
Set AnchorPoint to 0.5, 0.5 to set the Beschriftung's origin point in the middle of itself (50% from the left to the right of the Beschriftung, and 50% from the top to the bottom of the Beschriftung).
Setze HintergrundTransparenz auf 1, um den Hintergrund des Beschriftungvollständig durchsichtig zu machen.
Setzen Sie Position auf {0.5, 0},{0.5, 0} , um das Etikett in der Mitte seiner Eltern-Etikett (50% von der linken zum rechten der Beschriftungund 50% von der oberen zum unteren der Beschriftung) zu setzen.
Set Größe to {.85, 0},{0.55, 0} , so dass der Text den meisten Verblasstbereich abdecken kann (85% horizontal und 55% vertikal der Beschriftung).
Set Name zu HeaderTextLabel .
Set FontFace auf Montserrat , um die futuristische Ästhetik anzupassen.
Setze Gewicht auf Schwarz , um die Schriftart zu verdicken.
Set Text auf GESPERRT - DU BIST AUS! 9. Setzen Sie TextColor3 auf 255, 255, 255 , um den Text weiß zu machen.
Aktiviere TextSkaliert .
Erstellen Sie die Verblasst um die Grenzen des Bildschirms.
- Fügen Sie ein Bild-Label in OutStateGui ein.
- Wähle das neue Beschriftung, dann im Eigenschaften-Fenster ,
- Set AnchorPoint to 0.5, 0.5 to set the Beschriftung's origin point in the middle of itself (50% from the left to the right of the Beschriftung, and 50% from the top to the bottom of the Beschriftung).
- Set Hintergrundfarbe3 to 0,0,0 to set the Beschriftung's background color to black.
- Setze HintergrundTransparenz auf 0.5, um den Hintergrund des Beschriftunghalb durchsichtig zu machen.
- Setzen Sie Position auf {0.5, 0},{0.5, 0} , um das Etikett in der Mitte seines Containers zu setzen (50% von der linken bis zur rechten Seite des Eltern-ScreenGUI und 50% von der oberen bis zur unteren Seite des Eltern-ScreenGUI).
- Set Größe auf {1, 0},{1, 0} , um das Etikett auf den gesamten Bildschirm zu erweitern (100% horizontal und 100% vertikal des Eltern-ScreenGUI).
- Setzen Sie ZIndex auf -1, um die Verblasstseite hinter den anderen UI-Elementen anzuzeigen.
- Set Name zu Header .
- Set Bild to rbxassetid://14309518613 to make the image a border fade.
- Setze BildTransparenz auf 0.1, um das Verblassen leicht zu transparenzieren.
Um die Erfüllungzu verbessern, kannst du die Bild-Asset überspringen und stattdessen ein UIGradient -Objekt mit einer benutzerdefinierten Transparenz-Nummer verwenden. Um mehr über diese Verblasstechnik zu erfahren, siehe UI-Aussehen-Modifikatoren - Gradient.
Beziehen Sie sich auf das folgende ReplicatedStorage Skript innerhalb des Beispiels Laser-Tag -Platzdatei, die programmiert anzeigt, dass der Respawn-Bildschirm beim Erreichen der Gesundheit des Spieler:inauf null zurückgeht und sie sich im Prozess des Respawns zurück zu ihrem Team-Spawn-Zone befinden.
Das folgende ReplicatedStorage.PlayerStateHandler Client-Skript enthält Funktionen, die verschiedene Arten von Verhaltensmustern nach dem Attribut playerState auslösen. Alle Ereignisantworten werden in diesem Skript logisch zusammengeführt, da sie ähnliches Verhalten erfordern, um die Aktivierung oder Deaktivierung von Steuerung, Kamerabewegungen und welche Benutzeroberfläche angezeigt wird.
Wenn die Gesundheit eines Spieler:in
- Der Spieler kann nicht in der Arena bewegen.
- Der Spieler kann seine Kamera nicht bewegen.
- Der Spieler kann seinen Blaster nicht verwenden.
- Der StarterGui.OutStateGui wird ausschließlich aktiviert.
Wenn der Spieler respawns, wird ihre playerState in SelectingBlaster verwandelt, was die Funktion onSelectingBlaster() auslöst. 1> onSelectingBlaster1> aktiviert dann ausschließlich den 4> StarterGui.PickABlasterGui4>, der das Respawn-F
local ReplicatedStorage = game:GetService("ReplicatedStorage")
local Players = game:GetService("Players")
local PlayerState = require(ReplicatedStorage.PlayerState)
local PlayerAttribute = require(ReplicatedStorage.PlayerAttribute)
local BlasterState = require(ReplicatedStorage.Blaster.BlasterState)
local togglePlayerMovement = require(script.togglePlayerMovement)
local togglePlayerCamera = require(script.togglePlayerCamera)
local scheduleDestroyForceField = require(ReplicatedStorage.scheduleDestroyForceField)
local localPlayer = Players.LocalPlayer
local playerGui = localPlayer.PlayerGui
local guiLayers = {
playerGui:WaitForChild("HUDGui"),
playerGui:WaitForChild("OutStateGui"),
playerGui:WaitForChild("PickABlasterGui"),
}
-- Deaktivieren Sie alle UI-Schichten, mit Ausnahme der angegebenen Ausnahme
local function setGuiExclusivelyEnabled(enabledGui: ScreenGui?)
-- GUI-Layers enthält eine Liste der GUI, die exklusiv festgelegt werden sollten.
for _, screenGui in guiLayers do
screenGui.Enabled = screenGui == enabledGui
end
end
local function onSelectingBlaster()
-- Aktiviere die Kamera, damit Spieler während der Auswahl eines Blasters umherschauen können
togglePlayerCamera(true)
togglePlayerMovement(false)
setGuiExclusivelyEnabled(playerGui.PickABlasterGui)
-- Deaktivieren Sie Blaster, während Sie einen Blaster auswählen
localPlayer:SetAttribute(PlayerAttribute.blasterStateClient, BlasterState.Disabled)
end
local function onPlaying()
-- Aktivieren Sie den Bewegung des Spielers nach dem Auswählen eines Blasters
togglePlayerMovement(true)
setGuiExclusivelyEnabled(playerGui.HUDGui)
-- Blaster aktivieren, während Sie spielen
localPlayer:SetAttribute(PlayerAttribute.blasterStateClient, BlasterState.Ready)
-- Planen Sie die Zerstörungsfeldlogik, wenn der Spieler beginnt zu spielen
scheduleDestroyForceField()
end
local function onTaggedOut()
-- Steuerelemente deaktivieren, während du mit dem Haken ausgängig bist
togglePlayerMovement(false)
togglePlayerCamera(false)
setGuiExclusivelyEnabled(playerGui.OutStateGui)
-- Blaster deaktivieren, während er mit einem Tag ausgelassen wird
localPlayer:SetAttribute(PlayerAttribute.blasterStateClient, BlasterState.Disabled)
end
local function onInLobby()
-- Aktivieren Sie Steuerelemente in der Lobby
togglePlayerMovement(true)
togglePlayerCamera(true)
-- Alle HUD im Lobby ausblenden
setGuiExclusivelyEnabled(nil)
-- Deaktivieren Sie Blaster in der Lobby
localPlayer:SetAttribute(PlayerAttribute.blasterStateClient, BlasterState.Disabled)
end
local function onPlayerStateChanged(newPlayerState: string)
if newPlayerState == PlayerState.SelectingBlaster then
onSelectingBlaster()
elseif newPlayerState == PlayerState.Playing then
onPlaying()
elseif newPlayerState == PlayerState.TaggedOut then
onTaggedOut()
elseif newPlayerState == PlayerState.InLobby then
onInLobby()
else
warn(`Invalid player state ({newPlayerState})`)
end
end
-- Behandeln Sie den anfänglichen Spielerzustand, wenn festlegen
local initialPlayerState = localPlayer:GetAttribute(PlayerAttribute.playerState)
onPlayerStateChanged(initialPlayerState)
local function updateFromPlayerState()
onPlayerStateChanged(localPlayer:GetAttribute(PlayerAttribute.playerState))
end
-- Behandeln Sie zukünftige Spielerzustands-Updates
localPlayer:GetAttributeChangedSignal(PlayerAttribute.playerState):Connect(updateFromPlayerState)
-- Stellen Sie sicher, dass sich die Änderungen nach dem Respawn immer noch anwenden
localPlayer.CharacterAdded:Connect(updateFromPlayerState)
Jetzt wird die Gesundheitsleiste des Spieler:inimmer angezeigt, bis der Spieler wieder in seine Spawn-Zone zurückgespawnt wird.
Jetzt, da Sie sich mit der üblichen GuiObjects für die On-screen-Benutzeroberfläche vertraut sind, versuchen Sie, das Objekt RoundResultsGui ScreenGui und all seine Kinder für die On-screen-Anzeige zu wiederholen, wenn Spieler ein übereinstimmengewinnen oder verl
Erstellen Sie Oberflächen-GUI-Objekte
Um UI auf der Oberfläche eines Teils im 3D-Bereich, der auf Skriptlogik für jeden einzelnen Spieler reagiert, anzuzeigen, kannst du ein Class.SurfaceGui -Objekt auf das Teil, das du seine UI innerhalb des SurfaceGui -Dienstes anzeigen möchtest, übernehmen. Dies gewährleistet, dass deine UI und ihre Skriptlogik sowohl dem Server als auch jedem Client des Spieler:in
SurfaceGui Objekte enthalten alle GuiObjects , die auf der Oberfläche eines Teils im Platzangezeigt werden. Die Beispiel-Laser-Tag-Erfahrung enthält nur eine Instanz eines SurfaceGui -Objekts: die Abklingzeit-Meter,
Um ein SurfaceGui Objekt zu erstellen:
In dem Explorer-Fenster , bewegen Sie den Mauszeiger über den ReplicatedStorage-Dienst und klicken Sie dann auf die Schaltfläche ⊕ . Ein Symbolwird angezeigt.
Von dem Kontextmenü, fügen Sie ein Teil Objekt ein.
Fügen Sie ein ScreenGUI-Objekt in das Teil ein.
Benennen Sie die OberflächenGUI nach dem Kontext ihrer Kind-UI-Elemente.
Wiederholen Sie diesen Prozess für jeden Benutzeroberflächen-Element, das Sie auf der Oberfläche eines Teils im Platzanzeigen möchten.
Abklingzeit Meter
Ein Abklingzeit Meter ist ein UI-Komponente, der den Spielern sagt, wie lange sie warten müssen, bevor sie ihren Blaster wieder spucken können. Diese leichte Pause verhindert, dass die Spieler so schnell wie möglich spucken können, was für das Gameplayunrealistisch ist.
Um genau den Abklingzeit Meter innerhalb der Laser-Tag-Erlebnissen nachzubilden:
Erstellen Sie ein Teil, um Ihr SurfaceGui Objekt zu halten.
- In dem Explorer-Fenster bewegen Sie den Mauszeiger über die Arbeitsbereich-Registerkarte und klicken Sie dann auf das ⊕-Symbol. Ein Kontextmenü wird angezeigt.
- Vom Kontextmenü, fügen Sie ein Block Teil ein. Dies ist eine temporäre Position für das Teil, sodass Sie die Änderungen in jedem Schritt des Prozesses visuellisieren können.
Positionieren und orientieren Sie das Teil um die Position, in der sich der Charakter eines Spieler:inbefinden würde, dann in dem Eigenschaften -Fenster,
Setzen Sie Transparenz auf 1, um das Teil vollständig durchsichtig zu machen.
Set Name auf CooldownBarPrefab .
Set Größe to 0.169, 0.027, 2.537 to scale the part to a size about the Länge des Blasters.
Deaktivieren Sie KannCollide und KannQuery .
Fügen Sie eine OberflächenGUI in CooldownBarPrefab ein.
Wählen Sie das neue Oberflächen-Gui , dann im Eigenschaften-Fenster ,
Setzen Sie Gesicht auf Oben , damit die Benutzeroberfläche nach oben angezeigt wird.
Setzen Sie Einfluss von Licht und MaxDistance auf 0.
Set Pixel pro Stud auf 200 .
Erstellen Sie die schwarze Leiste.
Fügen Sie ein Bild-Label in das Oberflächen-Guide ein.
Wähle das neue Beschriftung, dann im Eigenschaften-Fenster ,
- Entfernen Sie den Standard Bild-Wert .
- Set AnchorPoint to 0.5, 0.5 to set the Beschriftung's origin point in the middle of itself (50% from the left to the right of the Beschriftung, and 50% from the top to the bottom of the Beschriftung).
- Set Hintergrundfarbe3 to 0,0,0 to set the Beschriftung's background color to black.
- Setze HintergrundTransparenz auf 0.4, um den Hintergrund des Beschriftunghalbtransparent zu machen.
- Setzen Sie Position auf {0.5, 0},{0.5, 0} , um das Etikett in der Mitte seines Containers zu setzen (50% von der linken bis zur rechten Seite des Eltern-SurfGUI und 50% von der oberen bis zur unteren Seite des Eltern-SurfGUI).
- Set Größe auf {1, 0},{1, 0} , um das Etikett auf die gesamte Größe zu erweitern (100% horizontal und 100% vertikal der übergeordneten SurfaceGui).
- Set Name zu Container .
Runden Sie die Ecken des Containers.
Fügen Sie ein UICorner-Objekt in Container ein .
Wählen Sie die Ecke, dann in dem Eigenschaften-Fenster setzen Sie Kantenradius auf 2> 0.15, 02> um die Ecken etwas runden.
Erstellen Sie die rote Leiste.
- Fügen Sie ein Bild-Label in Container ein.
- Wähle das neue Beschriftung, dann im Eigenschaften-Fenster ,
- Entfernen Sie den Standard Bild-Wert .
- Set AnchorPoint to 1, 0.5 to set the Beschriftung's origin point in the right-midnight of itself (100% from the left to the right of the Beschriftung, and 50% from the top to the bottom of the Beschriftung).
- Set Hintergrundfarbe3 to 172, 13, 13, um die Hintergrundfarbe des Beschriftungauf ein dunkelrotes zu setzen.
- Setze HintergrundTransparenz auf 0.2, um den Hintergrund des Beschriftungleicht zu durchsichtig zu machen.
- Set Name zu Bar .
- Setzen Sie Position auf {1, 0},{0.5, 0}, um das Etikett in der Mitte rechts seines Container (100% von der linken bis zur rechten Seite des Beschriftungund 50% von der oberen bis zur unteren Seite des Beschriftung) zu setzen.
- Setzen Sie Größe auf {0, 0},{1, 0} , um das Etikett an die Spitze seiner Eltern-Etikett (0% horizontal und 100% vertikal der Beschriftung) zu verlängern. Dieser Schritt ist auch für das Tweening-Verhalten nützlich, das in den Skripten in Schritt 8 vorkommt.
Runden Sie die Ecken des Beschriftung.
- Fügen Sie ein UICorner-Objekt in die Bar ein.
- Wählen Sie die Ecke, dann in dem Eigenschaften-Fenster setzen Sie Kantenradius auf 2> 0.15, 02> um die Ecken etwas runden.
Bewegen Sie CooldownBarPrefab zu ReplicatedStorage .
Erstellen Sie eine Ordnerstruktur, um Ihre UI-Objekte zu organisieren. Die Beispiel verwendet einen Instanzen-Ordner mit einem Kind Guis-Ordner.
Bewegen Sie CooldownBarPrefab in Guis .
Beziehen Sie sich auf die folgenden ReplicatedStorage Skripts innerhalb des Beispiels Laser-Tag ort-Datei, die das Kühlzeit-Messgerät programmiert an den Spieler:inansteckt, und animiert die rote Bar nach dem Explosions eines Spielers.
Das folgende ReplicatedStorage.FirstPersonBlasterVisuals Client-Skript behandelt alle visuellen Logik für den Blaster des Spieler:in. Es erfordert eine Reihe von Modul-Skripts, die zusammenarbeiten, um Blaster- visuellen effekte zu erstellen, die sich für das Gameplayspüren mehr realistisch sind, einschließlich FirstPersonBlasterVisuals.addCooldown
local Players = game:GetService("Players")
local ReplicatedStorage = game:GetService("ReplicatedStorage")
local Workspace = game:GetService("Workspace")
local RunService = game:GetService("RunService")
local BlastData = require(ReplicatedStorage.Blaster.BlastData)
local PlayerAttribute = require(ReplicatedStorage.PlayerAttribute)
local PlayerState = require(ReplicatedStorage.PlayerState)
local getBlasterConfig = require(ReplicatedStorage.Blaster.getBlasterConfig)
local runBlastVisuals = require(script.runBlastVisuals)
local setupAnimations = require(script.setupAnimations)
local addCooldownBar = require(script.addCooldownBar)
local runCooldownBarEffect = require(script.runCooldownBarEffect)
local laserBlastedBindableEvent = ReplicatedStorage.Instances.LaserBlastedBindableEvent
local RIG_OFFSET_FROM_CAMERA = CFrame.new(2, -2, -3) * CFrame.Angles(math.rad(0.25), math.rad(95.25), 0)
local localPlayer = Players.LocalPlayer
local currentCamera = Workspace.CurrentCamera
local rigModel = nil
local cooldownBar = nil
local animations = {}
local function addFirstPersonVisuals()
local blasterConfig = getBlasterConfig()
-- Füge das erste Rig
rigModel = blasterConfig.RigModel:Clone()
rigModel.Parent = Workspace
-- Füge die AbklingzeitBar hinzu
cooldownBar = addCooldownBar(rigModel.PrimaryPart.CooldownBarAttachment)
animations = setupAnimations(blasterConfig, rigModel)
end
local function removeFirstPersonVisuals()
for _, animation in animations do
animation:Stop()
animation:Destroy()
animation = nil
end
if rigModel then
-- Dies zerstört auch die Abklingzeitbar, da sie mit dem Rig verbunden ist
rigModel:Destroy()
rigModel = nil
end
end
-- Laufen Sie erste persönliche visuelle Effekte, wenn ein Explosion auftritt
laserBlastedBindableEvent.Event:Connect(function(blastData: BlastData.Type)
runBlastVisuals(rigModel.PrimaryPart.TipAttachment, blastData, animations.blastAnimation)
runCooldownBarEffect(cooldownBar)
end)
-- Binden Sie das Rig auf die Kamera, wenn es existiert
RunService.RenderStepped:Connect(function()
if rigModel then
-- Aktualisieren Sie CFrame des Rigs in Bezug auf die Kameraposition und RIG_OFFSET_FROM_CAMERA
rigModel:PivotTo(currentCamera.CFrame * RIG_OFFSET_FROM_CAMERA)
end
end)
-- Griffen ändern sich visuell, wenn sich der BlasterType ändert, während des Spiels
localPlayer:GetAttributeChangedSignal(PlayerAttribute.blasterType):Connect(function()
local playerState = localPlayer:GetAttribute(PlayerAttribute.playerState)
if playerState == PlayerState.Playing then
removeFirstPersonVisuals()
addFirstPersonVisuals()
end
end)
-- Griffen ändern sich visuell, wenn sich der Spielerzustand ändert
localPlayer:GetAttributeChangedSignal(PlayerAttribute.playerState):Connect(function()
local newPlayerState = localPlayer:GetAttribute(PlayerAttribute.playerState)
-- Entfernen Sie die visuellen Elemente, wenn der Spieler einen Blaster auswählt oder in der Lobby ist
if newPlayerState == PlayerState.SelectingBlaster or newPlayerState == PlayerState.InLobby then
removeFirstPersonVisuals()
-- Füge die visuellen Elemente hinzu, wenn der Spieler die Blasterauswahl abgeschlossen hat.
elseif newPlayerState == PlayerState.Playing then
addFirstPersonVisuals()
end
end)
Jetzt animiert sich die Abklingzeit, wenn ein Spieler seinen Blaster wieder abfeuert.
Erstellen Sie BillboardGui-Objekte
Um UI-Elemente innerhalb des 3D-Bereichs anzuzeigen, der auf Skriptlogik reagiert und immer auf die Kamera jedes Spieler:inunabhängig von seinem Ansichtswinkel, wie z. B. Spielernamen oder Kameramarkierungen, kannst du ein BillboardGui -Objekt als Kind eines BasePart oder Attachment erstellen, das im Platzexistiert.
Die Beispiel-Laser-Tag-Erfahrung umfasst zwei separate BillboardGui Objekte innerhalb des ReplicatedStorage Dienstes:
- OtherPlayerIndicatorGuiPrefab - Zeigt einen rosa oder grünen Kreis über dem Kopf jedes Spieler:inan, wenn er in einer Runde aktiv ist.
- TaggedOutIndicatorGuiPrefab - Displays über dem Kopf eines Spieler:in, wenn sie aus der Runde ausgeworfen werden.
Nachdem du ein BillboardGui-Objekt erstellt hast, kannst du sein Kind GuiObjects nach dem Zweck jedes Containers entsprechend der jeweiligen Anforderungen erstellen und anpassen. Um es zu demonstrieren, in den sofortigen Abschnitten, die folgen, wirst du lernen, wie du UI-Elemente für beide Indikator-Typen innerhalb der Beispiel-
Um ein BillboardGui Objekt zu erstellen:
- In dem Explorer-Fenster , bewegen Sie den Mauszeiger über ein BasePart oder Attachment, dann klicken Sie auf das 1> ⊕1>-Symbol. Ein Kontextmenü wird angezeigt.
- Von dem Kontextmenü, fügen Sie ein BillboardGui Objekt ein.
- Benennen Sie das BillboardGui nach dem Kontext seiner Kind UI-Elemente.
- Wiederholen Sie diesen Prozess für jeden Benutzeroberflächenelement, das Sie kontextuell über den Köpfen der Spieler anzeigen müssen.
Team-Indikator
Ein Team-Indikator ist ein UI-Element, das den Spielern mitteilt, zu welchem Team andere Spieler in der Runde gehören, damit sie leicht zwischen ihren Verbündeten und Feind-Teamemitglieden unterscheiden können. Diese Information ist wichtig, da die Spielweise eines First-Person-Shooter-Erlebnisses die Spieler dazu zwingt, schnelle strategische Entscheidungen zu treffen, während sie in Kampfzones sind, damit sie nicht ausgelöscht werden und das übereinstimmengewinnen.
Um genau den Team-Indikator innerhalb der Laser-Tag-Erlebnissen nachzubilden:
Fügen Sie ein BillboardGui Objekt in ein temporäres Rig ein.
In der Menüleiste, navigieren Sie zur Avatar-Registerkarte, dann klicken Sie auf Rig-Builder.
Wählen Sie aus der verfügbaren Optionen. Die Probe verwendet eine R15 eingeben, eine weibliche Körperform und einen Rthro-Avatar. Das Rig wird sowohl in der 3D-Ansicht als auch im 2>Explorer2>-Fenster unter dem Namen 5>Rig5> angezeigt.
In dem Explorer-Fenster , navigieren Sie zum Kind des Rigs Kopf -Mesh, dann klicken Sie auf die ⊕ -Schaltfläche. Ein Kontextmenü wird angezeigt.
Vom Kontextmenü, fügen Sie einen BillboardGui ein.
Wählen Sie das neue BillboardGui , dann in dem Eigenschaften-Fenster 1. Setze LightInfluence auf 0, um Umweltlicht von der Farbe des Indikators zu beeinflussen. 2. Set Name zu OtherPlayerIndicatorPrefab . 3. Setzen Sie Größe auf {0, 10},{0, 10} , um das Etikett deutlich kleiner zu machen. 4. Setzen Sie StudsOffsetWorldSpace auf 0, 4, 0, um es über dem Kopf des Rig zu platzieren.
Füge ein Rame-Objekt in OtherPlayerIndicatorPrefab ein.
Wählen Sie den neuen Frame und dann im Eigenschaften-Fenster ,
Set AnchorPoint auf 0.5, 0.5 um den Frame-Hauptpunkt in der Mitte von sich selbst (50% von der linken bis zur rechten Seite des Beschriftungund 50% von der oberen bis zur unteren Seite des Beschriftung) zu setzen.
Set Hintergrundfarbe3 to 255, 3, 0 to set the frame's background color to red as a placeholder color.
Set Position zu {0.5, 0},{0.5, 0}, um den Frame in der Mitte seines Containers zu platzieren (50% von der linken zum rechten der Eltern-WerbetafelGUI und 50% von der oberen zum unteren der Eltern-WerbetafelGui).
Set Größe auf 1, -2,1, -2 5> auf die Oberfläche der BillboardGUI, um den Frame auf die Oberfläche des Billboards zu beschränken.
Fügen Sie ein UICorner-Objekt in Frame ein, um die Ecken vollständig abzurunden.
Fügen Sie ein UIStroke Objekt in Frame ein, um den Kreis des Indikators zu umrissen.
Bewegen Sie OtherPlayerIndicatorPrefab zu ReplicatedStorage .
Beziehen Sie sich auf das folgende ReplicatedStorage Skript innerhalb des Beispiels Laser-Tag 1A ort-Datei, die das Team-Indikator für jeden Spieler in einer aktiven Runde anzeigt, wenn sie nicht auf dem feindlichen Team sind und versiegelt.
Das folgende ReplicatedStorage.OtherPlayerIndicatorGuiSetup Skript läuft, wenn Spieler in die Arena für eine aktive Runde spawnen. Es verbindet den Team-Indikator, indem es die addIndicatorToCharacter() -Funktion aufruft, die das
Wenn andere Spieler in demselben Team sind, wird der Team-Indikator immer angezeigt, auch wenn sie hinter Objekten im Platzversteckt sind; wenn andere Spieler im feindlichen Team sind, wird der Team-Indikator nur angezeigt, wenn es kein Objekt im 3D-Raum gibt, um sie zu occlen.
local Players = game:GetService("Players")
local ReplicatedStorage = game:GetService("ReplicatedStorage")
local localPlayer = Players.LocalPlayer
local otherPlayerIndicatorPrefab = ReplicatedStorage.Instances.Guis.OtherPlayerIndicatorPrefab
local characterSpawnConnectionsByPlayer: { [Player]: RBXScriptConnection } = {}
local playerAddedConnection: RBXScriptConnection?
local function removeIndicatorFromPlayer(player: Player)
if not player.Character then
return
end
local head = player.Character:WaitForChild("Head", 3)
if not head then
return
end
local gui = head:FindFirstChild(otherPlayerIndicatorPrefab.Name)
if gui then
gui:Destroy()
end
end
local function addIndicatorToCharacter(otherCharacter: Model?)
local otherPlayer = Players:GetPlayerFromCharacter(otherCharacter)
if not otherPlayer then
return
end
task.spawn(function()
local otherHead = otherCharacter:WaitForChild("Head", 3)
if not otherHead then
return
end
-- Füge nur Indikatoren zu Spielern hinzu, die an der Runde teilnehmen
if not otherPlayer.Team then
return
end
-- Vermeiden Sie doppelte Indikatoren, erstellen Sie einen neuen nur, wenn es nicht existiert
local gui = otherHead:FindFirstChild(otherPlayerIndicatorPrefab.Name)
if not gui then
gui = otherPlayerIndicatorPrefab:Clone()
gui.Frame.BackgroundColor3 = otherPlayer.TeamColor.Color
gui.Parent = otherHead
end
-- Der Indikator ist immer oben, wenn der Spieler freundlich ist
local isFriendly = otherPlayer.Team == localPlayer.Team
gui.AlwaysOnTop = isFriendly
end)
end
local function addIndicatorWhenCharacterSpawns(player: Player)
if characterSpawnConnectionsByPlayer[player] then
return
end
local connection = player.CharacterAdded:Connect(addIndicatorToCharacter)
characterSpawnConnectionsByPlayer[player] = connection
end
local function stopSyncingIndicators()
for _, connection in characterSpawnConnectionsByPlayer do
connection:Disconnect()
end
table.clear(characterSpawnConnectionsByPlayer)
if playerAddedConnection then
playerAddedConnection:Disconnect()
playerAddedConnection = nil
end
for _, player in Players:GetPlayers() do
removeIndicatorFromPlayer(player)
end
end
local function addIndicatorToPlayer(player: Player)
if player == localPlayer then
return
end
addIndicatorToCharacter(player.Character)
addIndicatorWhenCharacterSpawns(player)
end
local function startSyncingIndicators()
for _, player in Players:GetPlayers() do
addIndicatorToPlayer(player)
end
if not playerAddedConnection then
playerAddedConnection = Players.PlayerAdded:Connect(addIndicatorToPlayer)
end
end
local function onLocalTeamChanged()
local localTeam = localPlayer.Team
if localTeam then
startSyncingIndicators()
else
stopSyncingIndicators()
end
end
localPlayer:GetPropertyChangedSignal("Team"):Connect(onLocalTeamChanged)
onLocalTeamChanged()
Jetzt werden die Team-Indikatoren immer über den Kopf anderer Spieler:inangezeigt, wenn sie in einer aktiven Runde sind, und dies unabhängig davon, ob sie im feindlichen Team sind und hinter einem Objekt stehen.
Indikator mit ausgewählter Markierung
Ein mit einem Tag ausgewiesener Indikator ist ein UI-Element, das den Spielern mitteilt, wenn andere Spieler in der Runde nicht mehr aktiv sind und sich in der Zusammenarbeit befinden. Diese Information ist wichtig, da die Spielweise eines First-Person-Shooter-Erlebnisses die Spieler dazu bringt, in die Arena zu wechseln, sobald sie ein Spieler ausgewählt haben, um nicht in der Arena zu werden, indem sie in derselben Zone zu lange spielen.
Um genau den deaktivierten Indikator innerhalb der Probe Laser-Tag Erlebnisnachzubilden:
Fügen Sie ein BillboardGui Objekt in ein temporäres Rig ein, damit Sie die Änderungen in jedem Schritt des Prozesses visuellisieren können.
In der Menüleiste, navigieren Sie zur Avatar-Registerkarte, dann klicken Sie auf Rig-Builder.
Wählen Sie aus der verfügbaren Optionen. Die Probe verwendet eine R15 eingeben, eine männliche Körperform und einen Rthro-Avatar. Das Rig wird sowohl in der 3D-Ansicht als auch im 2>Explorer2>-Fenster unter dem Namen 5>Rig5> angezeigt.
In dem Explorer-Fenster , navigieren Sie zum Kind des Rigs Kopf -Mesh, dann klicken Sie auf die ⊕ -Schaltfläche. Ein Kontextmenü wird angezeigt.
Vom Kontextmenü, fügen Sie einen BillboardGui ein.
Wählen Sie das neue BillboardGui , dann in dem Eigenschaften-Fenster 1. Setze LightInfluence auf 0, um Umweltlicht von der Farbe des Indikators zu beeinflussen. 2. Set Name to TaggedOutIndicatorGuiPrefab . 3. Set Größe auf {3, 0},{0.5, 0} , um den Platz für ein Beschriftungzu erweitern. 4. Setzen Sie StudsOffset auf 0, 3.25, 0, um es über dem Kopf eines Spieler:inzu platzieren.
Fügen Sie ein Bild-Label-Objekt in TaggedOutIndicatorGuiPrefab ein.
Wähle das neue Beschriftung, dann im Eigenschaften-Fenster ,
- Set AnchorPoint to 0.5, 0.5 to set the Beschriftung's origin point in the middle of itself (50% from the left to the right of the Beschriftung, and 50% from the top to the bottom of the Beschriftung).
- Setze HintergrundTransparenz auf 1, um den Hintergrund des Beschriftungvollständig durchsichtig zu machen.
- Set Name zu Frame .
- Set Position zu {0.5, 0},{0.5, 0}, um das Etikett in der Mitte seines Containers zu platzieren (50% von der linken zu der rechten Seite des Eltern-BillboardGUI und 50% von der oberen zu der unteren Seite des Eltern-BillboardGUI).
- Set Größe auf {1, 0},{1, 0} , um das Etikett auf die gesamte BillboardGui auszuweiten (100% horizontal und 100% vertikal des Eltern-BillboardGUI).
- Set Bild to rbxassetid://14304826985 to make the image a multi-Directional Fade.
- Setze Bildfarbe auf 245, 46, 46 , um das Etikett rot zu färben.
Um die Erfüllungzu verbessern, kannst du die Bild-Asset überspringen und stattdessen ein UIGradient -Objekt mit einer benutzerdefinierten Transparenz-Nummer verwenden. Um mehr über diese Verblasstechnik zu erfahren, siehe UI-Aussehen-Modifikatoren - Gradient.
Fügen Sie ein TextLabel Objekt in Frame ein.
Wähle das neue Beschriftung, dann im Eigenschaften-Fenster ,
Set AnchorPoint to 0.5, 0.5 to set the Beschriftung's origin point in the middle of itself (50% from the left to the right of the Beschriftung, and 50% from the top to the bottom of the Beschriftung).
Setze HintergrundTransparenz auf 1, um den Hintergrund des Beschriftungvollständig durchsichtig zu machen.
Set Name zu BodyTextLabel .
Setzen Sie Position auf {0.5, 0},{0.5, 0} , um das Etikett in der Mitte seines Containers zu setzen (50% von der linken zum rechten der Beschriftungund 50% von der oberen zum unteren der Beschriftung).
Set Größe to {0.85, 0},{0.7, 0} , damit der Text den meisten Verblasstbereich abdecken kann (85% horizontal und 70% vertikal der Beschriftung).
Set FontFace auf Montserrat , um die futuristische Ästhetik anzupassen.
Setze Gewicht auf Mutig um die Schriftart zu verdicken.
Set Text to GESPERRT .
Setzen Sie TextColor3 auf 255, 255, 255 , um den Text weiß zu machen.
Aktiviere TextSkaliert .
Bewegen Sie TaggedOutIndicatorGuiPrefab zu ReplicatedStorage .
Beziehen Sie sich auf die folgenden ServerScriptService Skripts innerhalb des Beispiels Laser Tag 1A Platzdatei, die das markierte Indikator anzeigt, während ein Spieler zurück zu seiner Team-Spawn-Zone respawnen.
Der folgende ServerScriptService.SetupHumanoid Server-Skript läuft, sobald ein Spieler die Erlebnislädt. Es stellt sicher, dass, wenn ein Spieler:inin das Modellhinzugefügt wird, setupHumanoidAsync mit ihrem Humanoid aufgerufen wird.
local Players = game:GetService("Players")
local setupHumanoidAsync = require(script.setupHumanoidAsync)
local function onCharacterAdded(player: Player, character: Model)
local humanoid = character:WaitForChild("Humanoid")
setupHumanoidAsync(player, humanoid)
end
local function onPlayerAdded(player: Player)
-- Rufen Sie onCharacterAdded auf, wenn der Spieler bereits einen Charakter hat
if player.Character then
onCharacterAdded(player, player.Character)
end
-- Rufen Sie aufCharacterAdded für alle zukünftigen Charakter-Spawns für diesen Spieler:in
player.CharacterAdded:Connect(function(character: Model)
onCharacterAdded(player, character)
end)
end
-- Rufen Sie onPlayerAdded für alle Spieler im Spiel auf
for _, player in Players:GetPlayers() do
onPlayerAdded(player)
end
-- Rufen Sie onPlayerAdded für alle zukünftigen Spieler auf
Players.PlayerAdded:Connect(onPlayerAdded)
Jetzt wird angezeigt, wenn die Gesundheit eines Spieler:indie Null erreicht, wenn sie wiederbelebt werden.
Herzlichen Glückwunsch zum Abschluss des Benutzeroberfläche-Design-Curriculums! Jetzt, da du Erfahrung mit der Erstellung eines Kunststils hast, deine布局 gestaltet und deine Designs in Studio von Anfang an umgesetzt hast, kannst du dein Projekt mit neuen UI und Funktionen erweitern, oder folgen Sie zusätzlichen Tutorial-Curriculums, wie dem Gameplay Scripting Curriculum, das dir über die allgemeine Organisation und die Schlüss