Die Umsetzung deiner Designs ist der Prozess der Erstellung deiner Wireframes in Studio mit eingebauten und benutzerdefinierten UI-Elementen mit Skripten, die deinen UI-Kontext auslösen.Dieser aufregende Schritt des Tutorials ist der Ort, an dem du all deine Designs und harte Arbeit zusammen sehen kannst, um eine kohesive Reihe von Workflows zu erhalten, die vollständig und bereit für die Interaktion mit dem Spieler sind.
Mit der Beispiel-Laser-Tag-Erfahrung Datei als Referenz verwendet, zeigt dieser Abschnitt des Benutzeroberflächen-Design-Kurses Ihnen, wie Sie Ihre UI-Planung zum Leben erwecken, einschließlich Anleitung zur:
- Abrufen von Asset-IDs aus der UI-Asset-Bibliothek, damit Sie die UI-Komponenten des Beispiel-Lasertag-Erlebnisses wiederherstellen können.
- Emulieren verschiedener Geräte direkt in Studio, um zu sehen, wie deine Benutzeroberfläche auf verschiedenen Bildschirmen und Aspektverhältnissen angezeigt wird.
- Erstellung von ScreenGui, SurfaceGui und BillboardGui Objekten, um deine Benutzeroberfläche auf den Bildschirmen von Spielern, Oberflächen und innerhalb des Platzanzuzeigen, jeweils respektive.
Nachdem du die Techniken in diesem Abschnitt überprüft hast, kannst du sie auf deine eigenen Projekte anwenden, um aufregende Benutzeroberflächenkomponenten zu erstellen, die Spielern helfen, sich durch deine Erlebnisse zu navigieren.
Die Anweisungen in diesem Abschnitt des Tutorials zeigen Ihnen, wie Sie die UI-Komponenten genau mit der UI-Design-Asset-Bibliothek wiederherstellen können.Dieser Prozess dauert ungefähr 90 Minuten oder weniger von Anfang bis Ende.Wenn du die bereitgestellten Werte nicht verwenden möchtest, kannst du jedes UI-Element anpassen, um die Spezifikationen deiner eigenen Erlebniszu erfüllen, oder verwende die Probe selbst für den Rest des Tutorials.
Holen Sie sich die Asset-Bibliothek
Asset-Bibliotheken sind Sammlungen von Assets, die Sie in Ihr Inventar aufnehmen können, um sie leicht zugänglich und wiederzuverwenden.Die Asset-Bibliothek, die du für dein Projekt aus dem Creator-Store verwenden wirst, enthält neun 2D-Einzel-UI-Element-Assets und die endgültigen Versionen der Ziel-, Blaster- und Spielerinformationen, die du in diesem Abschnitt des Tutorials erstellst.
Du kannst die meisten Teile der Bibliothek zu deinem Inventar innerhalb von Studio hinzufügen, indem du auf den Link Zum Inventar hinzufügen in der folgenden Komponente klickst.Sobald 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 bringen:
Wählen Sie in der Toolbar die Ansicht -Registerkarte.
Klicken Sie auf Werkzeugkiste . Das Werkzeugkistenfenster wird angezeigt.
In dem Werkzeugkasten Fenster klicken Sie auf die Inventar Registerkarte. Die meine Modelle Sortierung wird angezeigt.
Klicke auf das Dropdown-Menü und wähle dann die sortieren Meine Pakete .
Klicken Sie auf die Final Screen UI Components -Kachel, dann wählen Sie im Explorer -Fenster Abgeschlossene Komponenten aus und ziehen Sie sie dann in den StarterGui -Dienst.Du kannst jetzt eine beliebige der finalen Komponenten aktivieren, um ihr Design zu referenzieren.
Geräte emulieren
Der Geräteemulator von Studio ermöglicht es Ihnen, zu testen, wie Spieler mit Ihrer UI auf verschiedenen Geräten sehen und interagieren werden .Dieses Tool ist ein wesentlicher Teil des Implementierungsprozesses, da der Aspektverhältnis des Ansichtsfensters in Studio nicht unbedingt das Aspektverhältnis der Bildschirme widerspiegelt, mit denen Spieler auf deine Erlebniszugreifen, und es wichtig ist, dass deine Benutzeroberfläche sowohl lesbar als auch zugänglich auf jedem Gerät ist.
Wenn du zum Beispiel deine UI nicht auf einer Reihe von Bildschirmgrößen testest, können Spieler mit großen Bildschirmen deinen Text nicht lesen oder deine Ikonen entschlüsseln, und Spieler mit kleinen Bildschirmen können den 3D-Raum nicht sehen, weil deine UI-Elemente zu viel Platz auf dem Bildschirm einnehmen.
Um deinen Bildschirm auf die kleinste Bildschirmgröße zu emulieren:
Wählen Sie in der Toolbar die Test -Registerkarte.
Klicken Sie auf Gerät . Die Ansichtsfenster ändern sich, um die Aspektverhältnis eines durchschnittlichen Laptops zu reflektieren.
Wählen Sie in der Auflösungsauswahl tatsächliche Auflösung .Dies ermöglicht es Ihnen, die wahre Auflösung Ihrer UI-Elemente auf dem Gerät zu sehen, das Sie emulieren.
Wähle im Gerät-Dropdown das Gerät mit der kleinsten Bildschirmgröße, mit der Spieler auf deine Erfahrung zugreifen können.Während die beste Option je nach den von deiner Erfahrung unterstützten Geräten variiert, testet das Beispiel-Laser-Tag-Erlebnis mit einem iPhone 4S, um zu überprüfen, wie die UI mit begrenztem Platzaussieht.
Erstellen von ScreenGui-Objekten
Um UI-Elemente auf dem Bildschirm jedes Spieler:inanzuzeigen, kannst du ein ScreenGui Objekt im StarterGui Service erstellen. Objekte sind die primären Container für die Benutzeroberfläche auf dem Bildschirm, und der Service kopiert seine Inhalte in den Speicher eines jeden Spieler:in, wenn er eine Erlebnisbetritt.
Du kannst mehrere ScreenGui Objekte erstellen, um Gruppierungen von UI-Elementen kontextuell während des Gameplayzu organisieren und anzuzeigen.Zum Beispiel enthält das Beispiel-Laser-Tag-Erlebnis fünf separate ScreenGui Objekte, die zuerst deaktiviert sind, bis Spieler unterschiedliche Bedingungen während des Haupt-Benutzerflusses des Erlebnisses erfüllen:
- HUDGui - Zeigt Schlüsselinformationen über das Gameplay des Erlebnisses an, wenn Spieler in einer Runde aktiv sind, wie das Ziel und die Gesamtpunkte jedes Teams.
- PickABlasterGui - Zeigt alle Blaserauswahl an, wenn Spieler eine Runde starten oder wieder beitreten.
- ForceFieldGui - Zeigt ein hexagonales Gitter an, wenn Spieler einen Blaster auswählen und während sie vorübergehend unbesiegbar sind.
- OutStateGui - Zeigt einen dunklen Rand um den Bildschirm an, wenn Spieler markiert 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 nach dem Zweck jedes Containers erstellen und anpassen.Um zu demonstrieren, lernen Sie in den unmittelbaren Abschnitten, die folgen, wie Sie UI-Elemente für die drei Kategorien von Informationen implementieren, die die Spieler benötigen, um im Beispiel-Laser-Tag-Erlebnis erfolgreich zu sein. Du kannst jeden Teil des Prozesses anpassen, um die Spezifikationen deiner eigenen Erfahrung zu erfüllen .
Um ein ScreenGui
In dem Explorer -Fenster bewegen Sie den Mauszeiger über den StarterGui -Dienst, dann klicken Sie auf das ⊕ -Symbol. Ein Kontextmenü wird angezeigt.
Füge ein ScreenGui ein.
Benennen Sie das ScreenGui nach dem Kontext seiner Kind-UI-Elemente um.
Wiederhole diesen Prozess für jede Gruppierung von UI-Elementen, die du auf dem Bildschirm jedes Spieler:inanzeigen musst.
Ziel-Interface
Nach den visuellen Hierarchie-Best Practices aus Wireframe Your Layouts lehrt dieser Abschnitt dich, wie du alle auf-Bildschirm-Benutzeroberflächenelemente implementierst, die sich auf das Ziel der Erlebnisbeziehen.Diese Gruppierung von UI-Elementen befindet sich in der Nähe der oberen Ecke des Bildschirms, weil das Ziel und die Punkte jedes Teams die größte Bedeutung haben, um das Spiel zu gewinnen.
Zum Beispiel bietet die Probe eine objektive UI-Komponente, auf die Spieler sich beziehen, um zu wissen, was sie tun müssen, um in einer Runde erfolgreich zu sein.Wenn Spieler gegnerische Teammitglieder markieren und Punkte verdienen, behält dieser Komponente die Gesamtpunktzahl eines Teams gegenüber dem Gesamtziel im Kopf der Überschrift im Auge.Für eine hochrangige Überprüfung aller Client- und Serverskripte, die zusammenarbeiten, um Punkte zu verfolgen, siehe Punkte verfolgen im Gameplay-Skript-Kurriculum.
Um die exakte Ziel-UI innerhalb der Probephase Erlebniswiederherzustellen:
Erstelle einen Container für die gesamte Komponente.
Füge ein Rahmen in das HUDGui Objekt ein.
- Im Explorer -Fenster navigieren Sie zum StarterGui -Service.
- Bewegen Sie den Mauszeiger über sein Kind HUDGui -Objekt, dann klicken Sie auf das ⊕ -Symbol. Ein Kontextmenü wird angezeigt.
- Aus dem Kontextmenü füge ein Rahmen ein.
Wähle das neue Rahmen aus, dann im Eigenschaften -Fenster,
- Setze Ankerpunkt auf 0.5, 0, um den Ursprungspunkt des Rahmens in der Mitte oben zu setzen (50% von der linken zur rechten Seite des Rahmens und 0% von der oberen zur unteren Seite des Rahmens).
- Setze Hintergrundtransparenz auf 1, um den Hintergrund des Rahmens vollständig transparent zu machen.
- Setze Position auf {0.5, 0},{0.03, 0}, um den Rahmen in der Nähe der Mitte des Bildschirms zu setzen (50% von der linken zur rechten Seite des Bildschirms und 3% von der oberen zur unteren Seite des Bildschirms, damit es einen kleinen Puffer gibt).
- Setze Größe auf , damit die Elemente des Rahmens einen großen Teil der Spitze des Bildschirms einnehmen, um die Aufmerksamkeit der Spieler zu erregen (50% horizontal, und 13% vertikal).
- Setze Name auf Ziel .
(Optional) Füge eine UIAspectRatioConstraints in Ziel ein, um sicherzustellen, dass die Aspektverhältnis des Beschriftungunabhängig von der Bildschirmgröße des Spieler:ingleich bleibt.Die Probe legt ihre UIAspectRatioConstraint.AspectRatio Eigenschaft auf 7 fest.
Erstelle einen Container für die prompten Objekte des Ziels.
Füge ein Rahmen in Ziel ein.
Wähle das neue Rahmen aus, dann im Eigenschaften -Fenster,
- Setze Ankerpunkt auf 0.5, 0, um den Ursprungspunkt des Rahmens in der Mitte oben zu setzen (50% von der linken zur rechten Seite des Rahmens und 0% von der oberen zur unteren Seite des Rahmens).
- Setze Hintergrundtransparenz auf 1, um den Hintergrund des Rahmens vollständig transparent zu machen.
- Setze Position auf {0.5, 0},{0, 0}, um den Rahmen in der Mitte des Containers zu setzen (50% von der linken zur rechten des Elternrahmens und 0% von der oberen zur unteren des Elternrahmens).
- Setze Größe auf , so dass die Auswahl-UI-Komponenten etwa mehr als die Hälfte des Containers von oben nach unten einnehmen (100% horizontal und 67% vertikal des übergeordneten Rahmens).
- Setze Name auf Zielanzeige .
Erstelle die Titel元素.
Füge ein Bild-Label in Zielanzeige ein.
Wähle das Bild-Label aus, dann im Eigenschaften -Fenster,
- Setze Ankerpunkt auf 0.5, 1, um den Ursprungspunkt des Beschriftungin der Mitte unten festzulegen (50% von links nach rechts des Beschriftungund 100% von oben nach unten des Beschriftung).
- Setze Hintergrundtransparenz auf 1, um den Hintergrund des Beschriftungvollständig transparent zu machen.
- Setze Layout-Ordnung auf -1.
- Setze Position auf {0.5, 0},{0.34, 0}, um das Etikett in der Nähe der oberen Mitte des Rahmens (50% von der linken zur rechten des Elternrahmens und 34% von der oberen zur unteren des Elternrahmens) zu setzen.
- Setze Größe auf {0.46, 0},{0.34, 0}, um den Eingabebereich auf fast die Hälfte des Rahmens zu erweitern (46% horizontal und 34% vertikal des übergeordneten Rahmens).
- Setze Name auf Header.
- Setze Bild auf rbxassetid://14304828123, um ein Trapez anzuzeigen.
- Setze Bildtransparenz auf 0.15, um den Kopfzeilensatz halbtransparent zu machen.
(Optional) Füge eine UIAspectRatioConstraints in das Bild-Label ein, um sicherzustellen, dass die Aspektverhältnis des Beschriftunggleich bleibt, unabhängig von der Bildschirmgröße des Spieler:in.Die Probe legt ihre Eigenschaft UIAspectRatioConstraint.AspectRatio auf 13.781 fest.
Füge ein TextLabel in Header ein, um einen Titel anzuzeigen.
Wählen Sie das neue Beschriftung, dann im Eigenschaften -Fenster,
- Setze Ankerpunkt auf 0.5, 0.5, um den Ursprungspunkt der neuen Beschriftungin der Mitte von sich selbst zu setzen (50% von links nach rechts des Beschriftungund 50% von oben nach unten des Beschriftung).
- Setze Hintergrundtransparenz auf 1, um den Hintergrund des Beschriftungvollständig transparent zu machen.
- Setze Position auf {0.5, 0},{0.5, 0}, um das Etikett in die Mitte seines übergeordneten Etikettes zu verschieben (50% von links nach rechts des übergeordneten Beschriftungund 50% von oben nach unten des übergeordneten Beschriftung).
- Setze Größe auf {0.62, 0},{0.55, 0}, um den Textbereich auf mehr als die Hälfte des übergeordneten Labels zu erweitern (62% horizontal und 55% vertikal des übergeordneten Beschriftung).
- Setze Name auf HeaderTextLabel .
- Setze FontFace auf Montserrat , um die futuristische Ästhetik zu passen.
- Setze Gewicht auf Mittel , um die Schrift zu verdicken.
- Setze Text auf ZIEL .
- Aktiviere Textskaliert .
Erstelle die Eingabeelemente.
Füge ein Bild-Label in Zielanzeige ein.
Wähle das Bild-Label aus, dann im Eigenschaften -Fenster,
- Setze Ankerpunkt auf 0.5, 1, um den Ursprungspunkt des Beschriftungin der Mitte unten festzulegen (50% von links nach rechts des Beschriftungund 100% von oben nach unten des Beschriftung).
- Setze Hintergrundtransparenz auf 1, um den Hintergrund des Beschriftungvollständig transparent zu machen.
- Setze Position auf {0.5, 0},{1, 0}, um das Etikett in die Mitte des oberen Rahmens zu verschieben (50% von der linken zur rechten Seite des oberen Rahmens und 100% von der oberen zur unteren Seite des oberen Rahmens).
- Setze Größe auf {0.89, 0},{0.66, 0}, um den Textbereich auf fast die volle Breite des übergeordneten Rahmens zu erweitern (89% horizontal und 66% vertikal des übergeordneten Rahments).
- Setze Name auf Körper .
- Setze Bild auf rbxassetid://14304827265, um ein umgekehrtes Dreieck anzuzeigen.
- Setze Bildfarbe3 auf 0, 0, 0, um das Bild schwarz zu färben.
- Setze Bildtransparenz auf 0.3, um den Kopfzeilensatz halbtransparent zu machen.
(Optional) Füge eine UIAspectRatioConstraints in das Bild-Label ein, um sicherzustellen, dass die Aspektverhältnis des Beschriftunggleich bleibt, unabhängig von der Bildschirmgröße des Spieler:in.Die Probe legt ihre UIAspectRatioConstraint.AspectRatio Eigenschaft auf 13.781 fest.
Füge ein TextLabel in Körper ein, um eine Aufforderung anzuzeigen.
Wählen Sie das neue Beschriftung, dann im Eigenschaften -Fenster,
- Setze Ankerpunkt auf 0.5, 0.5, um den Ursprungspunkt der neuen Beschriftungin der Mitte von sich selbst zu setzen (50% von links nach rechts des Beschriftungund 50% von oben nach unten des Beschriftung).
- Setze Hintergrundtransparenz auf 1, um den Hintergrund des Beschriftungvollständig transparent zu machen.
- Setze Position auf {0.5, 0},{0.5, 0}, um das Etikett in die Mitte seines übergeordneten Etikettes zu verschieben (50% von links nach rechts des übergeordneten Beschriftungund 50% von oben nach unten des übergeordneten Beschriftung).
- Setze Größe auf {0.85, 0},{0.39, 0}, um den Textbereich auf mehr als die Hälfte des übergeordneten Labels zu erweitern (85% horizontal und 39% vertikal des übergeordneten Beschriftung).
- Setze Name auf BodyTextLabel .
- Setze FontFace auf Montserrat , um die futuristische Ästhetik zu passen.
- Setze Gewicht auf Mittel , um die Schrift zu verdicken.
- Setze Textfarbe3 auf 255, 255, 255, um den Text weiß gegen den dunklen Hintergrund zu machen.
- Setze Text auf Tag , um gegnerische Spieler zu punkten! Das erste Team mit %d Punkten gewinnt.
- Aktiviere Textskaliert .
Erstelle einen Container für die Teamzähler des Ziels.
Füge ein Rahmen in Ziel ein.
Wähle das neue Rahmen aus, dann im Eigenschaften -Fenster,
- Setze Ankerpunkt auf 0.5, 1, um den Ursprungspunkt des Beschriftungin der Mitte unten festzulegen (50% von der linken zur rechten Seite des Rahmens und 100% von der oberen zur unteren Seite des Rahmens).
- Setze Hintergrundtransparenz auf 1, um den Hintergrund des Rahmens vollständig transparent zu machen.
- Setze Position auf {0.5, 0},{1, 0}, um den Rahmen in der Mitte des Containers zu setzen (50% von der linken zur rechten des Elternrahmens und 100% von der oberen zur unteren des Elternrahmens).
- Setze Größe auf , so dass die Auswahl-UI-Komponenten etwa weniger als die Hälfte des Containers von links nach rechts einnehmen (44% horizontal und 27% vertikal des übergeordneten Rahmens).
- Setze Name auf TeamPointCounter .
Erstelle Puffer für die Teamzähler.
- Füge ein UIListLayout -Objekt in den Rahmen aus Schritt 5 ein.
- Wählen Sie das UIListLayout Objekt aus, dann im Eigenschaften Fenster,
- Setze Polsterung auf 0.025, 0, um Platz zwischen den zukünftigen Teamzählern zu bieten.
- Setze Füllrichtung auf Horizontal , damit jede Teamzähler neben einander angezeigt wird.
- Setze horizontale Ausrichtung auf Zentrum , damit sich die Zähler jedes Teams auf die Mitte des anderen ausrichten.
Erstelle die grünen Teamzähler-Elemente.
Füge ein Bild-Label in TeamPointCounter ein.
Wähle das Bild-Label aus, dann im Eigenschaften -Fenster,
- Setze Hintergrundtransparenz auf 1, um den Hintergrund des Beschriftungvollständig transparent zu machen.
- Setze Position auf {0.5, 0},{1, 0}, um das Etikett in die Mitte des oberen Rahmens zu verschieben (50% von der linken zur rechten Seite des oberen Rahmens und 100% von der oberen zur unteren Seite des oberen Rahmens).
- Setze Größe auf {0.5, 0},{1, 0}, um das Etikett auf die Hälfte der Breite des übergeordneten Rahmens zu erweitern (50% horizontal und 100% vertikal des übergeordneten Rahments).
- Setze Name auf TeamACounter .
- Setze Bild auf rbxassetid://14304826831, um einen richtungsweisenden Verbleich anzuzeigen.
- Setze Bildfarbe3 auf 88, 218, 171, um das Bild mintgrün zu färben.
Konfiguriere ein benutzerdefiniertes Attribut, um zu verfolgen, dass dieses Etikett für das grüne Team ist.
- Im Eigenschaften -Fenster navigieren Sie zum Abschnitt Attribute , dann klicken Sie auf das Plus-Symbol. Ein Pop-up-Dialog wird angezeigt.
- Im Feld Name geben Sie teamColor ein.
- Im Typ Dropdown-Menü wählen Sie BrickColor .
- Klicken Sie auf die Schaltfläche Speichern .
- Setze das neue Attribut teamColor auf Minze .
Füge ein TextLabel in TeamACounter ein, um eine Aufforderung anzuzeigen.
Wählen Sie das neue Beschriftung, dann im Eigenschaften -Fenster,
- Setze Ankerpunkt auf 1, 0.5, um den Ursprungspunkt der neuen Beschriftungin der rechten Mitte zu setzen (100% von der linken zur rechten Seite des Beschriftungund 50% von der oberen zur unteren Seite des Beschriftung).
- Setze Hintergrundtransparenz auf 1, um den Hintergrund des Beschriftungvollständig transparent zu machen.
- Setze Position auf {0.95, 0},{0.5, 0}, um das Etikett nach rechts vom Eltern-Etikett zu verschieben (95% von links nach rechts vom Beschriftungund 50% von oben nach unten vom Beschriftung).
- Setze Größe auf {0.85, 0},{0.39, 0}, um den Textbereich auf mehr als die Hälfte des übergeordneten Labels zu erweitern (85% horizontal und 39% vertikal des übergeordneten Beschriftung).
- Setze FontFace auf Montserrat , um die futuristische Ästhetik zu passen.
- Setze Gewicht auf Fett , um die Schrift zu verdicken.
- Setze Textfarbe3 auf 255, 255, 255, um den Text weiß gegen den dunklen Hintergrund zu machen.
- Setze Text auf - .
- Aktiviere Textskaliert .
- Setze TextXAlignment auf Rechts .
Füge ein UIStroke Objekt in das TextLabel ein, dann im Eigenschaften Fenster stelle Farbe auf 8, 78, 52 ein, um den Strich mit einem dunkelgrünen Streich zu umreißen
Erstelle die rosa Teamzähler-Elemente.
Duplizieren Sie TeamAICounter und seine Kinder.
Wählen Sie das doppelte TeamACounter aus, dann im Eigenschaften -Fenster,
- Setze Name auf TeamBCounter .
- Setze Bild auf rbxassetid://14305849451, um einen richtungsweisenden Verbleich in die entgegengesetzte Richtung anzuzeigen.
- Setze Bildfarbe3 auf 255, 170, 255, um die Bildkarte rosa zu tönen.
- Setze das Attribut teamColor auf Rosenpink .
Wählen Sie das doppelte TextLabel -Kind von TeamBCounter , dann im Eigenschaften -Fenster,
- Setze Ankerpunkt auf 0, 0.5, um den Ursprungspunkt der neuen Beschriftungim linken mittleren Bereich zu setzen (0% von der linken zur rechten Seite des Beschriftungund 50% vom oberen zum unteren Bereich des Beschriftung).
- Setze Position auf {0.05, 0},{0.5, 0}, um das Etikett nach links vom Eltern-Etikett zu verschieben (5% von links nach rechts vom Beschriftungund 50% von oben nach unten vom Beschriftung).
- Setze TextXAlignment auf Links .
Wähle das doppelte UIStroke -Kind von TeamBCounter , dann im Eigenschaften -Fenster lege Farbe auf 158, 18, 94 fest, um den Strich mit einem dunkelrosa Streich zu umreißen.
Verweise auf die folgenden ReplicatedStorage innerhalb der Beispiel-Laser-Tag-Platzdatei, die das Ziel-Prompt und die Teampunkte programmatisch aktualisiert.
Das folgende Skript erfordert eine Reihe von Modulskripten, die zusammen arbeiten, um das Haupt-Head-up-Display (HUD) einzurichten, 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 Gerät und den Statusdes Spieler:inangemessen angezeigt werden.
Nachdem ein Spieler seinen Blaster ausgewählt hat, wird die Ziel-UI oben auf seinem Bildschirm angezeigt und verfolgt die Punkte jedes Teams.
Blaster-Benutzerinterface
Nach den visuellen Hierarchie-Best Practices aus Wireframe Your Layouts lehrt dieser Abschnitt dich, wie du alle auf-Bildschirm-Benutzeroberflächenelemente implementierst, die sich auf den Blaster des Spieler:inbeziehen.Diese Gruppierung von UI-Elementen nimmt den Großteil des Bildraums in der Nähe des Zentrums des Bildschirms ein, weil sie als Fokuspunkt dient, um die Aufmerksamkeit der Spieler auf die Aktion im Platzzu lenken, und sie hat die größte Bedeutung für das Spielen des Spiels.
Fadenkreuz
Ein Fadenkreuz ist ein UI-Element, das die Spieler informiert, wo sie ihre Waffe einsetzen werden, wenn sie sie abfeuern.Dieses UI-Element ist eine entscheidende Spielanforderung für First-Person-Shooter-Erlebnisse, weil Spieler ihre Blaster genau zielen und feindliche Teammitglieder markieren müssen.
Wie die meisten anderen Erfahrungen im First-Person-Shooter-Genre positioniert die Probepunktlasertag-Erfahrung das Fadenkreuz in der Mitte des Bildschirms, so dass die Spieler etwas Statisches haben, auf das sie sich konzentrieren können, während ihr Avatar durch den 3D-Raum bewegt.Neben der Reduzierung von Bewegungsübelkeit ermöglicht diese Platzierung, dass das Fadenkreuz wahrnehmbar bleibt, während es sich in die gesamte Umgebung einfügt.
Um das Fadenkreuz genau wiederherzustellen innerhalb der Probenerfahrung Laser-Tag:
Füge ein Bild-Label in das HUDGui -Objekt ein.
Im Explorer -Fenster navigieren Sie zum StarterGui -Service.
Bewegen Sie den Mauszeiger über sein Kind HUDGui -Objekt, dann klicken Sie auf das ⊕ -Symbol. Ein Kontextmenü wird angezeigt.
Aus dem Kontextmenü fügen Sie ein Bild-Label ein.
Wähle das neue Bild-Label aus, dann im Eigenschaften -Fenster,
- Setze Bild auf >.
- Setze Ankerpunkt auf 0.5, 0.5, um den Ursprungspunkt des Beschriftungin der Mitte des Labels zu setzen (50% von links nach rechts des Beschriftungund 50% von oben nach unten des Beschriftung).
- Setze Hintergrundtransparenz auf 1, um den Hintergrund des Beschriftungvollständig transparent zu machen.
- Setze Name auf Fadenkreuz .
- Setze Position auf {0.5,0},{0.5,0}, um das Label in der Mitte des Bildschirms zu setzen.
- Setze Skalierungstyp auf Passen , damit das Bild in seinen Container passt und sich nicht auf verschiedenen Bildschirmgrößen dehnt.
(Optional) Füge eine UIAspectRatioConstraints in Crosshair ein, um sicherzustellen, dass die Aspektverhältnis des Beschriftunggleich bleibt, unabhängig von der Größe des Bildschirms des Spieler:in.Die Probe legt ihre Eigenschaft UIAspectRatioConstraint.AspectRatio auf 0.895 fest.
Zielmarkierung
Ein Treffermarker ist ein UI-Element, das nur angezeigt wird, wenn eine Explosion mit einem anderen Spieler auf dem gegnerischen Team Zusammenstoß macht.Wie das Fadenkreuz ist dieses UI-Element ein wesentlicher Bestandteil des Spielablaufs für First-Person-Shooter-Erlebnisse, weil es visuelle Rückmeldung gibt, wann Spieler bei der Markierung ihrer Gegner erfolgreich sind.
Um genau den Treffermarkierer innerhalb der Probenerfahrung Laser-Tag wiederherzustellen:
Füge ein Bild-Label in das Fadenkreuz Objekt ein.
Im Explorer -Fenster navigieren Sie zum StarterGui -Service.
Bewegen Sie den Mauszeiger über sein Kind Fadenkreuz Objekt, dann klicken Sie auf das ⊕ Symbol. Ein Kontextmenü wird angezeigt.
Aus dem Kontextmenü fügen Sie ein Bild-Label ein.
Wähle das neue Bild-Label aus, dann im Eigenschaften -Fenster,
- Setze Bild auf rbxassetid://14401148736, um das rechteckige Hitmarkierungsicon anzuzeigen.
- Setze Ankerpunkt auf 0.5, 0.5, um den Ursprungspunkt des Beschriftungin der Mitte des Beschriftungfestzulegen.
- Setze Hintergrundtransparenz auf 1, um den Hintergrund des Beschriftungvollständig transparent zu machen.
- Setze Position auf {0.5,0},{0.5,0}, um das Label in der Mitte des Bildschirms zu setzen.
- Setze Name auf Hitmarker .
- Setze Größe auf {0.6, 0},{0.06, 0}, um die Größe der Rechtecke rund um die Mitte des Fadenkreuzes zu reduzieren.
- Setze Bildtransparenz auf 1, um den Treffermarkierer vollständig transparent zu machen.Die Skripte im folgenden Schritt drehen die Transparenz jedes Mal zurück auf 0, wenn die Explosion eines Spieler:inmit einer anderen Spielerin des gegnerischen Teams auftrifft.
Verweise auf die folgenden ReplicatedStorage-Skripte innerhalb der Beispiel-Datei Laser-Tag, die den Treffermarkierer programmatisch anzeigt, wenn eine Explosion mit einem Spieler auf dem gegnerischen Team Zusammenstoß macht.
Das folgende Skript erfordert eine Reihe von Modulskripten, die zusammen arbeiten, um das Haupt-Head-up-Display (HUD) einzurichten, 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 Statusdes Spieler:inangemessen angezeigt werden.
Jetzt, wann immer ein Spieler seinen Blaster abfeuert und die Explosion mit einem anderen Spieler:inzusammenstößt, wird der Treffermarkierer vorübergehend angezeigt.
Blasterauswahl
Ein Blasterauswahl ist eine UI-Komponente, die Spieler verwenden, um ihren Blastertyp vor dem Beitreten oder Wiederbeitreten einer Runde auszuwählen.Die Probepunktlasertag-Erfahrung bietet zwei Arten von Blastern: einen, der mehrere Strahlen mit einer breiten, horizontalen Streuung erzeugt, und einen anderen, der einen einzigen Strahl erzeugt.Die Art von Blaster, die Spieler auswählen, beeinflusst ihre Strategie während der Runde und macht diesen UI-Komponenten zu einem wesentlichen Workflow für das Erlebnis.
Die folgenden Schritte zeigen, wie mehrere Container für die verschiedenen UI-Elementgruppierungen erstellt werden, ein Kopfzeichen mit einem Prompt, die Navigation und Auswahlknöpfe und eine Blaster-Button-Vorlage.Die Skriptlogik für die Gesamtkomponente füllt verschiedene visuelle Merkmale in den Blaster-Button-Vorlauf entsprechend Configuration, die jede eingebenrepräsentieren.
Diese Konfiguration ermöglicht es Ihnen, zusätzliche Configuration Instanzen für mehr Blastertypen zu erstellen, die automatisch im Blasterauswahlkorb richtig angezeigt werden, ohne dass einzelne Schaltflächen innerhalb von StarterGui.PickABlasterGui erstellt werden müssen.
Um genau das Blasterauswahlfeld innerhalb der Probenerfahrung Laser-Tag wiederherzustellen:
Erstelle einen Container für die gesamte Komponente.
Füge ein Rahmen in das PickABlaster Objekt ein.
- Im Explorer -Fenster navigieren Sie zum StarterGui -Service.
- Bewegen Sie den Mauszeiger über sein Kind PickABlaster Objekt, dann klicken Sie auf das ⊕ Symbol. Ein Kontextmenü wird angezeigt.
- Aus dem Kontextmenü füge ein Rahmen ein.
Wählen Sie den neuen Rahmen, dann im Eigenschaften -Fenster,
- Setze Ankerpunkt auf 0.5, 1, um den Ursprungspunkt des Rahmens in der Mitte unten festzulegen (50% von der linken zur rechten Seite des Rahmens und 100% von der oberen zur unteren Seite des Rahmens).
- Setze Hintergrundtransparenz auf 1, um den Hintergrund des Rahmens vollständig transparent zu machen.
- Setze Position auf {0.5, 0},{0.9, 0}, um den Rahmen in der Nähe der Mitte des Bildschirms zu setzen (50% von der linken zur rechten Seite des Bildschirms und 92,4% von der oberen zur unteren Seite des Bildschirms).
- Setze Größe auf , damit die Benutzeroberfläche des Blastersenders einen großen Teil des Bildschirms einnimmt, um die Aufmerksamkeit der Spieler zu erregen (80% horizontal, und 25% vertikal).
- Setze Name auf Komponente .
(Optional) Füge eine UIAspectRatioConstraints in Komponente ein, um sicherzustellen, dass die Rahmen- und die Aspektverhältnisse seiner Kinder-UI-Elemente unabhängig von der Bildschirmgröße des Spieler:ingleich bleiben.Die Probe legt ihre Eigenschaft UIAspectRatioConstraint.AspectRatio auf 5 fest.
Erstellen Sie einen Container, um UI-Elementgruppierungen zu halten.
Füge ein Rahmen in Komponente ein.
Wählen Sie den neuen Rahmen, dann im Eigenschaften -Fenster,
- Setze Ankerpunkt auf 0.5, 0.5, um den Ursprungspunkt der Frames in der Mitte von sich selbst zu setzen (50% von links nach rechts des Rahmens und 50% von oben nach unten des Rahmens).
- Setze Hintergrundtransparenz auf 1, um den Hintergrund des Rahmens vollständig transparent zu machen.
- Setze Position auf {0.5, 0},{0.375, 0}, um den Rahmen in der Nähe der Mitte des Containers zu setzen (50% von der linken zur rechten des Elternrahmens und 37.5% von der oberen zur unteren des Elternrahmens).
- Setze Größe auf , so dass die Auswahl-UI-Komponenten 3/4 des Containers einnehmen (100% horizontal und 75% vertikal des übergeordneten Rahmens).
- Setze Name auf Auswahlrahmen .
Erstellen Sie eine Aufforderung für den Blasterauswahl.
Füge ein Bild-Label in Auswahlrahmen ein.
Wählen Sie das neue Beschriftung, dann im Eigenschaften -Fenster,
- Setze Ankerpunkt auf 0.5, 1, um den Ursprungspunkt des Beschriftungin der Mitte unten festzulegen (50% von links nach rechts des Beschriftungund 100% von oben nach unten des Beschriftung).
- Setze Hintergrundtransparenz auf 1, um den Hintergrund des Beschriftungvollständig transparent zu machen.
- Setze Layout-Ordnung auf -1.
- Setze Position auf {0.5, 0},{0.22, 0}, um das Etikett in der Nähe der oberen Mitte des Rahmens (50% von der linken zur rechten des Elternrahmens und 22% von der oberen zur unteren des Elternrahmens) zu setzen.
- Setze Größe auf {0.45, 0},{0.22, 0}, um den Eingabebereich auf fast die Hälfte des Rahmens zu erweitern (45% horizontal und 22% vertikal des übergeordneten Rahmens).
- Setze Name auf Header .
- Setze Bild auf rbxassetid://14304828123, um ein Trapez anzuzeigen.
- Setze Bildtransparenz auf 0.15, um den Kopfzeilensatz halbtransparent zu machen.
(Optional) Füge eine UIAspectRatioConstraints in das Label ein, um sicherzustellen, dass die Aspektverhältnis des Beschriftunggleich bleibt, unabhängig von der Bildschirmgröße des Spieler:in.Die Probe legt ihre UIAspectRatioConstraint.AspectRatio Eigenschaft auf 13.78 fest.
Füge ein TextLabel in Header ein, um eine Aufforderung anzuzeigen.
Wählen Sie das neue Beschriftung, dann im Eigenschaften -Fenster,
- Setze Ankerpunkt auf 0.5, 0.5, um den Ursprungspunkt der neuen Beschriftungin der Mitte von sich selbst zu setzen (50% von links nach rechts des Beschriftungund 50% von oben nach unten des Beschriftung).
- Setze Hintergrundtransparenz auf 1, um den Hintergrund des Beschriftungvollständig transparent zu machen.
- Setze Position auf {0.5, 0},{0.5, 0}, um das Etikett in die Mitte seines übergeordneten Etikettes zu verschieben (50% von links nach rechts des übergeordneten Beschriftungund 50% von oben nach unten des übergeordneten Beschriftung).
- Setze Größe auf {0.6, 0},{0.55, 0}, um den Textbereich auf mehr als die Hälfte des übergeordneten Labels zu erweitern (60% horizontal und 55% vertikal des übergeordneten Beschriftung).
- Setze Name auf HeaderTextLabel .
- Setze FontFace auf Montserrat , um die futuristische Ästhetik zu passen.
- Setze Gewicht auf Mittel , um die Schrift zu verdicken.
- Setze Text auf WÄHLE EINEN BLASTER .
- Aktiviere Textskaliert .
Erstelle den Container für deinen Blaster-Button-Container und Auswahlpfeile.
Füge ein Bild-Label in Auswahlrahmen ein.
Wählen Sie das neue Beschriftung, dann im Eigenschaften -Fenster,
- Entferne den Standard- Bild -Wert.
- Setze Ankerpunkt auf 0.5, 1, um den Ursprungspunkt des Beschriftungin der Mitte unten festzulegen (50% von links nach rechts des Beschriftungund 100% von oben nach unten des Beschriftung).
- Setze Hintergrundfarbe auf 0, 0, 0, um das Etikett schwarz zu machen.
- Setze Hintergrundtransparenz auf um die Opazität des Labels um 30% zu reduzieren und alle schwarzen UI-Elemente im Erlebnis zu passen.
- Setze Position auf {0.5, 0},{1, 0}, um das Etikett in die Mitte des Rahmens zu setzen (50% von der linken zur rechten des Elternrahmens und 100% von der oberen zur unteren des Elternrahmens).
- Setze Größe auf {1, 0},{0.77, 0}, um den Etikettbereich auf den Raum unter der Eingabe zu erweitern (100% horizontal und 77% vertikal des übergeordneten Rahmens).
Runde die Ecken des Containers.
- Füge ein UICorner -Objekt in das Beschriftungein.
- Wählen Sie das neue Objektaus, dann setzen Sie im Eigenschaften -Fenster Eckradius auf 0.075, 0, um die Ecken zu runden.
Erstelle den Container für deine Blaster-Buttons.
Füge einen Rahmen in das Etikett aus Schritt 4 ein.
Wählen Sie den neuen Rahmen, dann im Eigenschaften -Fenster,
- Setze Ankerpunkt auf 0.5, 0.5, um den Ursprungspunkt des neuen Rahmens in der Mitte von sich selbst zu setzen (50% von links nach rechts des Rahmens und 50% von oben nach unten des Rahmens).
- Setze Hintergrundtransparenz auf 1, um den Hintergrund des Rahmens vollständig transparent zu machen.
- Setze Position auf {0.5, 0},{0.5, 0}, um den Rahmen in der Mitte seines übergeordneten Labels zu platzieren (50% von links nach rechts des übergeordneten Rahmens und 50% von oben nach unten des übergeordneten Rahmens).
- Setze Größe auf {0.85, 0},{0.77, 0}, um den Rahmenbereich auf die meisten des Etikettes zu erweitern (85% horizontal und 77% vertikal des übergeordneten Beschriftung).
- Setze Name auf Container .
Erstelle Puffer für alle zukünftigen Blaster-Buttons.
- Füge ein UIListLayout -Objekt in den Rahmen aus Schritt 5 ein.
- Wählen Sie das neue Layout-Objekt aus, dann im Eigenschaften -Fenster,
- Setze Polsterung auf 0.035, 0, um Platz zwischen allen zukünftigen Schaltflächen zu bieten.
- Setze Füllrichtung auf Horizontal , damit jede Schaltfläche neben einander angezeigt wird.
- Stellen Sie sowohl horizontale Ausrichtung als auch vertikale Ausrichtung auf Mitte ein, damit sich jede Schaltfläche auf die Mitte der anderen ausrichtet.
Erstelle die linke Navigationsschaltfläche.
Füge ein Bild-Button -Objekt in das Bild-Label von Schritt 4 ein.
Wählen Sie die neue Schaltfläche, dann im Eigenschaften -Fenster,
- Entferne den Standard- Bild -Wert.
- Setze Ankerpunkt auf 0, 0.5, um den Ursprungspunkt der neuen Schaltfläche in der linken Mitte zu setzen (0% von der linken zur rechten Seite der Schaltfläche und 50% von der oberen zur unteren Seite der Schaltfläche).
- Setze Hintergrundtransparenz auf 0.15, um visuelles Feedback über die Maus zu geben, dass der Knopf auswischbar ist.
- Setze Position auf {0.02, 0},{0.5, 0}, um Puffer links vom Knopf von seinem Eltern-Container zu liefern (2% von links nach rechts vom Beschriftungund 50% von oben nach unten vom Beschriftung).
- Setze Größe auf {0.04, 0},{0.33, 0}, um den Auswahlknopf viel kleiner als die Blasterknöpfe (4% horizontal und 33% vertikal des übergeordneten Rahmens) zu machen.
- Setze Name auf NavigationButtonLeft .
Runde die Ecken des Buttons.
- Füge ein UICorner -Objekt in den Button ein.
- Wählen Sie das neue Objektaus, dann setzen Sie im Eigenschaften -Fenster Eckradius auf 0.1, 0, um die Ecken zu runden.
Füge ein Bild-Label -Objekt in den Button ein.
Wählen Sie das neue Beschriftung, dann im Eigenschaften -Fenster,
- Setze Ankerpunkt auf 0.5, 0.5, um den Ursprungspunkt der neuen Beschriftungin der Mitte von sich selbst zu setzen (50% von links nach rechts des Beschriftungund 50% von oben nach unten des Beschriftung).
- Setze Position auf {0.45, 0},{0.5, 0}, um das Label in der Nähe der Mitte des übergeordneten Knopfes (45% von der linken zur rechten Seite des übergeordneten Knopfes und 50% von der oberen zur unteren Seite des übergeordneten Knopfes) zu setzen.Dieser Wert ist nicht in der Mitte, weil ein Pfeil nicht visuell aussieht, als wäre er in der Mitte des Buttons bei {0.5, 0},{0.5, 0}.
- Setze Größe auf {0.8, 0},{0.8, 0}, um den Etikettbereich auf den Raum unterhalb des Prompts zu erweitern (80% horizontal und 80% vertikal des übergeordneten Rahmens).
- Setze Hintergrundtransparenz auf 1, um den Hintergrund des Bildes vollständig transparent zu machen.
- Setze Bild auf >.
- Setze Skalentyp auf Passen .
Erstelle die richtige Navigationsschaltfläche.
Duplizieren von NavigationButtonLeft .
Wählen Sie die duplizierte Schaltfläche, dann im Eigenschaften -Fenster,
- Setze Ankerpunkt auf 1, 0.5, um den Ursprungspunkt der neuen Schaltfläche in der rechten Mitte zu setzen (100% von der linken zur rechten Seite der Schaltfläche und 50% von der oberen zur unteren Seite der Schaltfläche).
- Setze Position auf {0.98, 0},{0.5, 0}, um die Pufferung rechts vom Knopf von seinem Eltern-Container (98% von links nach rechts vom Beschriftungund 50% von oben nach unten vom Beschriftung) zu liefern.
- Setze Name auf NavigationButtonRight .
Wählen Sie sein Bild-Label Kind-Objekt aus.
- Setze Rotation auf 180, um das Bild umzudrehen.
- Setze Position auf {0.55, 0},{0.5, 0}, um das Label in der Nähe der Mitte des übergeordneten Knopfes (55% von der linken zur rechten Seite des übergeordneten Knopfes und 50% von der oberen zur unteren Seite des übergeordneten Knopfes) zu setzen.Dieser Wert ist nicht in der Mitte, weil ein Pfeil nicht visuell aussieht, als wäre er in der Mitte des Buttons bei {0.5, 0},{0.5, 0}.
Erstelle die AUSWÄHLEN -Schaltfläche.
Füge einen Bild-Button in Komponente ein.Beachten Sie, wie dieser Prozess die Auswahlschaltfläche von Auswahlrahmen getrennt hält, damit Sie Puffer zwischen dem Hauptteil des Komponenten von der Auswahlschaltfläche hinzufügen können.
Wählen Sie die neue Schaltfläche, dann im Eigenschaften -Fenster,
- Entferne den Standard- Bild -Wert.
- Setze Ankerpunkt auf 0.5, 1, um den Ursprungspunkt der neuen Schaltfläche in der Mitte unten festzulegen (50% von der linken zur rechten Seite der Schaltfläche und 100% von der oberen zur unteren Seite der Schaltfläche).
- Setze Hintergrundtransparenz auf 0.15, um visuelles Feedback über die Maus zu geben, dass der Knopf auswischbar ist.
- Setze Position auf {0.5, 0},{0.99, 0}, um die Schaltfläche in der Nähe der mittleren Unterseite ihres Containers (50% von der linken zur rechten des Elternrahmens und 99% von der oberen zur unteren des Elternrahmens) zu setzen.
- Setze Größe auf {0.17, 0},{0.18, 0} um die Schaltfläche unter den Blaster-Schaltflächen zu verlängern (17% horizontal und 18% vertikal des übergeordneten Rahmens).
- Setze Name auf SelectButton .
Runde die Ecken des Buttons.
- Füge ein UICorner -Objekt in den Button ein.
- Wählen Sie das neue Objektaus, dann setzen Sie im Eigenschaften -Fenster Eckradius auf 0.2, 0, um die Ecken zu runden.
Füge ein TextLabel -Objekt in den Button ein, damit du einen Aufruf zum Actionanzeigen kannst.
Wählen Sie das neue Beschriftung, dann im Eigenschaften -Fenster,
- Setze Ankerpunkt auf 0.5, 0.5, um den Ursprungspunkt der neuen Beschriftungin der Mitte von sich selbst zu setzen (50% von links nach rechts des Beschriftungund 50% von oben nach unten des Beschriftung).
- Setze Hintergrundtransparenz auf 1, um den Hintergrund des Beschriftungvollständig transparent zu machen.
- Setze Position auf {0.5, 0},{0.5, 0}, um das Etikett in die Mitte des Buttons zu verschieben (50% von der linken zur rechten Seite des übergeordneten Buttons und 50% von der oberen zur unteren Seite des übergeordneten Buttons).
- Setze Größe auf {0.9, 0},{0.55, 0}, um den Textbereich auf fast die gesamte Breite des übergeordneten Labels zu erweitern (90% horizontal und 55% vertikal des übergeordneten Beschriftung).
- Setze Name auf SelectTextLabel .
- Setze FontFace auf Montserrat , um die futuristische Ästhetik zu passen.
- Setze Gewicht auf Mittel , um die Schrift zu verdicken.
- Setze Text auf AUSWÄHLEN .
- Aktiviere Textskaliert .
Erstelle eine Blaster-Button-Vorlage.
- Im ReplicatedStorage -Service erstellen Sie eine Ordnerstruktur, um Ihre UI-Objekte zu organisieren.Die Probe verwendet einen Instanzen -Ordner mit einem Kind Guis -Ordner.
- Füge ein Bild-Button Objekt in den Guis Ordner ein.
- Wählen Sie die neue Schaltfläche, dann im Eigenschaften -Fenster,
- Entferne den Standard- Bild -Wert.
- Setze Ankerpunkt auf 0.5, 0.5, um den Ursprungspunkt der neuen Schaltfläche in der Mitte selbst zu setzen (50% von der linken zur rechten Seite der Schaltfläche und 50% von der oberen zur unteren Seite der Schaltfläche).
- Setze Hintergrundtransparenz auf 0.65, um visuelles Feedback zu liefern, dass der Button nicht im Fokus ist.Skripte in Schritt 12 geben programmatisches visuelles Feedback, wenn der Knopf im Fokus ist.
- Setze Layout-Ordnung auf 2.
- Setze Name auf BlasterButtonPrefab .
- Setze Größe auf .
- Setze Bildtransparenz auf 1, um das Bild vollständig transparent zu machen.
- Füge eine UI-Aspektverhältnis-Einschränkung in BlasterButtonPrefab ein, um sicherzustellen, dass die Aspektverhältnis des Buttons innerhalb des Komponenten unabhängig von der Bildschirmgröße des Spieler:ingleich bleibt.
- Runde die Ecken des Buttons.
- Füge ein UICorner -Objekt in BlasterButtonPrefab ein.
- Wählen Sie das UICorner , dann im Eigenschaften -Fenster, setzen Sie Eckenradius auf , um die Ecken zu runden.
- Füge ein Bild-Label in BlasterButtonPrefab ein.
- Wählen Sie das neue Beschriftung, dann im Eigenschaften -Fenster,
- Entferne den Standard- Bild -Wert.
- Setze Ankerpunkt auf 0.5, 0.5, um den Ursprungspunkt der neuen Beschriftungin der Mitte von sich selbst zu setzen (50% von links nach rechts des Beschriftungund 50% von oben nach unten des Beschriftung).
- Setze Hintergrundtransparenz auf 1, um den Hintergrund des Beschriftungvollständig transparent zu machen.
- Setze Position auf {0.52, 0},{0.497, 0}, um das Label in der Nähe der Mitte des übergeordneten Knopfes (52% von der linken zur rechten Seite des übergeordneten Knopfes und 49,7% von der oberen zur unteren Seite des übergeordneten Knopfes) zu setzen.Dieser Wert ist nicht in der Mitte, weil der Blaster nicht visuell aussieht, als wäre er in der Mitte des Buttons bei {0.5, 0},{0.5, 0}.
- Setze Größe auf {1.20, 0},{0.9, 0}, um den Etikettbereich außerhalb der Schaltfläche zu erweitern (120% horizontal und 90% vertikal des übergeordneten Knopfes).
- Setze Skalentyp auf Passen .
Verweise auf die folgenden ReplicatedStorage -Skripte innerhalb der Beispiel- Lasertag -Platzdatei, die programmatisch Schaltflächen für jeden Blaster anzeigt, skaliere die Schaltflächen, wenn ein Spieler eine Schaltfläche wählt, die nicht im Fokus steht, und füge die Blaserswahl eines Spieler:inan ihren Avatar an.
Das folgende Skript erfordert eine Reihe von Skripten, die zusammen arbeiten, um den Blaster-Selector zu erstellen.Wenn ein Spieler der Erfahrung beitritt oder wieder in eine Runde zurückkehrt, nachdem seine Gesundheit auf Null gesunken ist, aktiviert dieses Skript alle UI-Elemente des Blasterauswahlers, bis der Spieler seine Auswahl trifft.
Jetzt, wann immer ein Spieler der Erfahrung beitritt oder nachdem seine Gesundheit auf Null gesunken ist, wieder in eine Runde zurückkehrt, wird die Blasterauswahl-Benutzeroberfläche angezeigt, sie können eine Auswahl treffen, und jede Taste funktioniert wie erwartet.
Explosionsknopf
Ein Explosionsknopf ist eine UI-Komponente, die Spieler verwenden, um ihren Blaster zu explodieren, wenn sie über ein mobiles oder Gerätauf die Erfahrung zugreifen.Die Probepunktlasertag-Erfahrung verwendet einen Blaster-Button mit einem Symbol, das sowohl ein Fadenkreuz als auch eine Explosion darstellt, um die Funktion des Buttons ohne Text zu kommunizieren.
Um genau die Explosionsschaltfläche innerhalb der Probenerfahrung Laser-Tag wiederherzustellen:
Füge einen BildButton in das HUDGui -Objekt ein.
Im Explorer -Fenster navigieren Sie zum StarterGui -Service.
Bewegen Sie den Mauszeiger über sein Kind HUDGui -Objekt, dann klicken Sie auf das ⊕ -Symbol. Ein Kontextmenü wird angezeigt.
Aus dem Kontextmenü füge einen BildButton ein.
Bewegen Sie im Ansichtsfenster den Knopf dorthin, wo sich die Daumen eines Spieler:innatürlich ausruhen, damit Sie ein visuelles Gefühl dafür bekommen, wie der Knopf auf dem Gerät eines Spieler:inaussehen wird, und dann im Eigenschaften -Fenster
- Setze Bild auf rbxassetid://18308375035, um das Explosionsschaltflächen-Symbol anzuzeigen.
- Setze PressedImage auf rbxassetid://18308372558, um eine invertierte Version des Blast-Button-Symbols anzuzeigen, wenn ein Spieler den Knopf drückt.
- Setze Hintergrundtransparenz auf 1, um den Hintergrund des Beschriftungvollständig transparent zu machen.
- Setze Name auf Explosionsknopf .
- Setze Skalierungstyp auf Passen , damit das Bild in seinen Container passt und sich nicht auf verschiedenen Bildschirmgrößen dehnt.
- Setze Bild透明度 auf 0.3, um die Opazität des Labels zu reduzieren, so dass es allen schwarzen UI-Elementen im Erlebnis entspricht
Füge eine UI-Aspektverhältnis-Einschränkung in Explosionsschaltfläche ein, um sicherzustellen, dass die Aspektverhältnis des Buttons unabhängig von der Bildschirmgröße des Spieler:ingleich bleibt.
Verweise auf die folgenden ReplicatedStorage-Skripte innerhalb der Beispiel-Laser-Tag-Platzdatei, die programmatisch den Blasertaste anzeigt, wenn ein Spieler die Touch-Eingabe auf einem Gerät verwendet, das Steuerungakzeptiert.
Das folgende Skript erfordert eine Reihe von Modulskripten, die zusammen arbeiten, um das Haupt-Head-up-Display (HUD) einzurichten, 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 Statusdes Spieler:inangemessen angezeigt werden.
Jetzt, wenn ein Spieler der Erfahrung beitritt und Touch-Eingabe auf einem Gerät verwendet, das Steuerungakzeptiert, wird der Blaster-Button oben rechts vom Sprung-Button angezeigt.
Spieler-UI
Nach den visuellen Hierarchie-Best Practices aus Wireframe Your Layouts lehrt dieser Abschnitt dich, wie du alle auf-Bildschirm-Benutzeroberflächenelemente implementierst, die sich auf den Zustand des Spieler:inbeziehen.Diese Gruppierung von UI-Elementen befindet sich in der Nähe der Seiten des Bildschirms, weil Spieler diese peripheren Informationen verstehen können, ohne ihre Aufmerksamkeit vom Gameplayabzulenken.
Spieler-Indikator
Ein Spieler-Indikator ist eine UI-Komponente, auf die Spieler sich beziehen, um schnell zu entschlüsseln, zu welchem Team sie gehören, sobald sie in die Spawn-Zone ihres Teams spawnen.Die Probepunktlasertag-Erfahrung bietet zwei Versionen des Spielersindikators, abhängig davon, ob der Spieler im grünen oder rosa Team ist.
Nach der Anleitung von Wählen Sie ein Farbmotto kombinieren beide Versionen des Spielindikators die Teamfarbe mit einem einzigartigen, einfachen Symbol mit minimalen Details, damit sie auf kleinen Bildschirmen leserlich bleiben.Die Bereitstellung von zwei Formen visueller Feedback ist wichtig, weil sie dazu beiträgt, das Design für Spieler mit Farbenblindheit zugänglich zu halten.
Um genau die Spielerindikator-Komponente innerhalb der Probephase Erlebniswiederherzustellen:
Füge ein Rahmen in das HUDGui Objekt ein.
- Im Explorer -Fenster navigieren Sie zum StarterGui -Service.
- Bewegen Sie den Mauszeiger über sein Kind HUDGui -Objekt, dann klicken Sie auf das ⊕ -Symbol. Ein Kontextmenü wird angezeigt.
- Aus dem Kontextmenü füge ein Rahmen ein.
Wähle das neue Rahmen aus, dann im Eigenschaften -Fenster,
Setze Ankerpunkt auf 0, 1, um den Ursprungspunkt des Rahmens in der Mitte unten festzulegen (0% von der linken zur rechten Seite des Rahmens und 100% von der oberen zur unteren Seite des Rahmens).
Setze Hintergrundtransparenz auf 1, um den Hintergrund des Beschriftungvollständig transparent zu machen.
Setze Name auf PlayerDisplay .
Setze Position auf {0.02, 0},{0.97, 0}, um den Rahmen in der Nähe der unteren linken Ecke des Bildschirms zu platzieren.
Setze Größe auf {0.23, 0},{0.08, 0}, um sowohl den Rahmen zu verkürzen als auch zu erweitern
Aktiviere ClipsDescendants , um KinderguiObjekte zu beschneiden, die über den Rahmen hinausreichen.
Erstelle die polygonale Form.
Füge ein Bild-Label in Spieleranzeige ein.
Wählen Sie das neue Beschriftung, dann im Eigenschaften -Fenster,
- Setze Bild auf rbxassetid://14304828123, um das Trapezoid-Symbol anzuzeigen.
- Setze Ankerpunkt auf 1, 1, um den Ursprungspunkt des Beschriftungin der rechten unteren Ecke zu festlegen (100% von links nach rechts des Beschriftungund 100% von oben nach unten des Beschriftung).
- Setze Hintergrundtransparenz auf 1, um den Hintergrund des Beschriftungvollständig transparent zu machen.
- Setze Name auf Block .
- Setze Position auf {1,0},{1,0}, um das Etikett auf die rechte Seite des Rahmens zu setzen.
- Setze Größe auf {1.858, 0},{0.581, 0}, um das Etikett außerhalb des Rahmens zu verbreitern und es auf weniger als die Hälfte der Länge des Rahmens zu kürzen.
- Setze Bildtransparenz auf 0.15, um das Etikett leicht transparent zu machen.
- Setze Skalierungstyp auf Passen , damit das Bild in seinen Container passt und sich nicht auf verschiedenen Bildschirmgrößen dehnt.
- Füge eine UI-Aspektverhältnis-Einschränkung in Block ein, um sicherzustellen, dass die Etikett- und seine Kind-UI-Elemente-Aspektverhältnis gleich bleibt, unabhängig von der Bildschirmgröße des Spieler:in.
- Wählen Sie die neue Beschränkungaus, dann setzen Sie im Eigenschaften -Fenster auf Aspektverhältnis auf 13.78.
Erstelle die Box für das Hochformatdes Spieler:in.
Füge ein Bild-Label in Spieleranzeige ein.
Wählen Sie das neue Beschriftung, dann im Eigenschaften -Fenster,
- Entferne die Platzhalter-AssetID innerhalb der Eigenschaften.Die Skripte in Schritt 7 fügen das Porträt des Spieler:inprogrammatisch in das Beschriftungein.
- Setze Ankerpunkt auf 0, 1, um den Ursprungspunkt des Beschriftungin der unteren linken Ecke zu festlegen (0% von der linken zur rechten Seite des Beschriftungund 100% von der oberen zur unteren Seite des Beschriftung).
- Setze Hintergrundfarbe3 auf 0, 0, 0, um die Hintergrundfarbe des Beschriftungauf Schwarz zu setzen.
- Setze Hintergrundtransparenz auf um die Opazität des Labels um 30% zu reduzieren und alle schwarzen UI-Elemente im Erlebnis zu passen.
- Setze Name auf PlayerPortrait .
- Setze Position auf {0.11, 0},{1, 0}, um das Label auf die linke Seite der polygonalen Form zu setzen.
- Setze Größe auf {0.23, 0},{1, 0}, um das Beschriftungzu verkleinern.
- Setze Bildtransparenz auf 0.15, um das Etikett leicht transparent zu machen.
- Setze Skalierungstyp auf Passen , damit das Bild in seinen Container passt und sich nicht auf verschiedenen Bildschirmgrößen dehnt.
- Füge eine UI-Aspektverhältnis-Einschränkung in Spielerporträt ein, um sicherzustellen, dass die Etikett- und seine Kind-UI-Elemente-Aspektverhältnis gleich bleibt, unabhängig von der Bildschirmgröße des Spieler:in.
- Füge einen UICorner in PlayerPortrait ein, dann stelle im Eigenschaften -Fenster Eckenradius auf 0.05, 0 ein, um die Ecken leicht zu runden.
Erstelle das Textfeld für den Namen des Spieler:in.
Füge ein TextLabel -Objekt in PlayerDisplay ein.
Wählen Sie das neue Beschriftung, dann im Eigenschaften -Fenster,
- Setze Ankerpunkt auf 0, 0.5, um den Ursprungspunkt der neuen Schaltfläche in der linken Mitte zu setzen (0% von der linken zur rechten Seite der Schaltfläche und 50% von der oberen zur unteren Seite der Schaltfläche).
- Setze Hintergrundtransparenz auf 1, um den Hintergrund des Beschriftungvollständig transparent zu machen.
- Setze Name auf PlayerNameTextLabel .
- Setze Position auf {0.35, 0},{0.72, 0}, um das Etikett auf die rechte Seite seines Containers zu setzen (35% von links nach rechts vom Beschriftungund 72% von oben nach unten vom Beschriftung).
- Setze Größe auf , damit der Text die meiste Fläche der polygonalen Form einnehmen kann (52% horizontal und 30% vertikal des übergeordneten Rahmens).
- Setze FontFace auf Montserrat , um die futuristische Ästhetik zu passen.
- Setze Gewicht auf Fett , um die Schrift zu verdicken.
- Entferne den Platzhaltertext innerhalb der Eigenschaften. Die Skripte in Schritt 7 fügen den Namen des Spieler:inprogrammatisch in das Beschriftungein.
- Aktiviere Textskaliert .
- Setze TextXAlignment auf Links .
Erstelle die Team-Icons und Farben, die links vom Hochformatdes Spieler:inangezeigt werden.
Füge einen Ordner in Spieleranzeige ein und benenne ihn dann TeamIcons um.
Erstelle das grüne Team-Symbol und Farbe.
- Füge ein Bild-Label in Team-Icons ein.
- Wählen Sie das neue Beschriftung, dann im Eigenschaften -Fenster,
- Setze Ankerpunkt auf 0, 1, um den Ursprungspunkt des Beschriftungin der unteren linken Ecke zu festlegen (0% von der linken zur rechten Seite des Beschriftungund 100% von der oberen zur unteren Seite des Beschriftung).
- Setze Hintergrundfarbe3 auf 88, 218, 171, um die Hintergrundfarbe des Beschriftungauf Mintgrün zu legen.
- Setze Name auf TeamAIcon .
- Setze Position auf {0, 0},{1, 0}, um das Label auf die linke Seite des Rahmens zu setzen.
- Setze Größe auf {0.135, 0},{0.58, 0}, um das Etikett links vom Hochformatzu verkleinern.
- Setze Bildtransparenz auf 1, um das Etikett transparent zu machen.
- Konfiguriere 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 im Schritt 7.
- Im Eigenschaften -Fenster navigieren Sie zum Abschnitt Attribute , dann klicken Sie auf das Plus-Symbol. Ein Pop-up-Dialog wird angezeigt.
- Im Feld Name geben Sie teamColor ein.
- Im Typ Dropdown-Menü wählen Sie BrickColor .
- Klicken Sie auf die Schaltfläche Speichern .
- Setze das neue Attribut teamColor auf Minze .
- Füge eine UIAspectRatioConstraints in TeamAIcon ein, um sicherzustellen, dass die Label- und die Aspektverhältnisse seiner Kinder-UI-Elemente unabhängig von der Bildschirmgröße des Spieler:ingleich bleiben.
- Erstelle das Symbol.
- Füge ein Bild-Label in TeamAIcon ein.
- Wählen Sie das neue Beschriftung, dann im Eigenschaften -Fenster,
- Setze Bild auf rbxassetid://14309678670 , um das grüne Symbolanzuzeigen.
- Setze Ankerpunkt auf 0.5, 0.5, um den Ursprungspunkt des Beschriftungin der Mitte selbst festzulegen (50% von links nach rechts des Beschriftungund 50% von oben nach unten des Beschriftung).
- Setze Hintergrundtransparenz auf 1, um den Hintergrund des Beschriftungvollständig transparent zu machen.
- Setze Name auf Icon .
- Setze Position auf {0.5, 0},{0.5, 0}, um das Label in die Mitte seines übergeordneten Beschriftungzu setzen.
- Setze Größe auf {0.7, 0},{0.6, 0}, um das Beschriftungzu verkleinern.
- Setze Skalierungstyp auf Passen , damit das Bild in seinen Container passt und sich nicht auf verschiedenen Bildschirmgrößen dehnt.
Erstelle das rosa Team-Symbol und die Farbe.
- Duplizieren Sie TeamAIcon und seine Kinder.
- Wählen Sie das doppelte TeamAIcon , dann im Eigenschaften -Fenster,
- Setze Hintergrundfarbe3 auf 255, 170, 255, um die Hintergrundfarbe des Beschriftungauf Carnation Pink zu setzen.
- Setze Name auf TeamBIcon .
- Setze das Attribut teamColor auf Rosenpink .
- Wähle das doppelte Symbol des TeamBIcon aus, dann lege im Eigenschaften -Fenster fest, dass Bild auf rbxassetid://14309678549 gesetzt wird, um das rosa Teamsymbol anzuzeigen.
Verweise auf die folgenden ReplicatedStorage-Skripte innerhalb der Beispiel-Laser-Tag-Platzdatei, die den Spielerindikator mit der entsprechenden Teamfarbe und dem Icon anzeigt, während ein Spieler in einer Runde aktiv ist.
Das folgende Skript erfordert eine Reihe von Modulskripten, die zusammen arbeiten, um das Haupt-Head-up-Display (HUD) einzurichten, einschließlich startSyncingTeamColor , setPlayerName und setPlayerPortrait.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 Statusdes Spieler:inangemessen angezeigt werden.
Jetzt, wann immer ein Spieler der Runde beitritt oder wieder beitritt, nachdem er respawnt wurde, wird der Spielerindikator unten links auf ihrem Bildschirm angezeigt.
Kraftfeld-Bildschirm
Ein Kraftfeld-Bildschirm ist ein UI-Element, das den Ansichtsbereich überschreibt, um Spieler darüber zu informieren, dass sie vor feindlichem Teamfeuer sicher sind, während sie einer Runde beitreten oder ihr beitreten.Nach den ästhetischen Richtlinien für Ikonen von Wählen Sie einen Kunststil nutzt die Probepunktlasertag-Erfahrung ein halbtransparentes hexagonales Muster, um ein Kraftfeld zu symbolisieren.Diese Designentscheidung verstärkt nicht nur den gesamten futuristischen Kunststil für alle UI im Erlebnis, sondern kommuniziert auch den Zustand des Spieler:inohne Text oder zusätzliche Anleitung.
Um genau das Kraftfeld-Bildschirm innerhalb der Probephase Erlebniswiederherzustellen:
Füge ein Bild-Label in das ForceFieldGui -Objekt ein.
Im Explorer -Fenster navigieren Sie zum StarterGui -Service.
Bewegen Sie den Mauszeiger über sein Kind ForceFieldGui -Objekt, dann klicken Sie auf das ⊕ -Symbol. Ein Kontextmenü wird angezeigt.
Aus dem Kontextmenü fügen Sie ein Bild-Label ein.
Wählen Sie das neue Beschriftung, dann im Eigenschaften -Fenster,
Setze Bild auf >.
Setze Hintergrundtransparenz auf 0.8, um das Kraftfeld transluzent zu machen.
Setze Größe auf , um das Bild die gesamte Bildschirmfläche zu füllen (100% horizontal und 100% vertikal des zugeordneten ScreenGui).
Setze Skalentyp auf Kachel , um die Hexagon-Kachel über den gesamten Bildschirm zu machen.
Setze Kachelgröße auf .
Füge ein UIGradient -Objekt in das Beschriftungein.
Wählen Sie das neue Objektaus, dann im Eigenschaften -Fenster,
Setze Farbe auf eine Farbsequenz, die blau beginnt, dann weiß wird und dann wieder blau wird.
Setze Farbe auf 120, 192, 250, um allen Hexagonen einen hellblauen Farbton zu verleihen.
Klicken Sie auf die Eigenschaften Farbe , dann klicken Sie auf die Schaltfläche ⋯ . Ein Farbfolgen-Pop-up wird angezeigt.
Jedes Dreieck auf der unteren Achse der Farbsequenz ist ein Schlüsselpunkt, der den Farbwert der Eigenschaft an diesem Punkt des Bildes von links nach rechts bestimmt.
Klicke und ziehe auf die Farbsequenz, bis du einen Zeit Wert von 0.05 erreicht hast, dann klicke auf das kleine Quadrat neben Farbe , um das Farben Popup-Fenster zu öffnen.
Wählen Sie ein hellweißes Element aus und schließen Sie dann das Popup-Fenster.
Klicke und ziehe auf die Farbsequenz, bis du einen Zeitwert von 0.95 erreicht hast, öffne dann erneut das Farben Popup-Fenster und wähle die gleiche weiße Farbe wie zuvor aus.
Stelle Drehung auf 225 ein, um den blauen Teil deiner Farbsequenz in den oberen linken und unteren rechten Ecken anzuzeigen.
Setze Transparenz auf eine Zahlensequenz, die das Kraftfeld so aussehen lässt, als würde es schimmern.
Klicken Sie auf die Eigenschaften Transparenz , dann klicken Sie auf die Schaltfläche ⋯ .Ein Nummernsequenz-Pop-up wird angezeigt.Jedes Quadrat am Anfang und am Ende der Zahlensequenz ist ein Schlüsselpunkt, der den Transparenzwert der Eigenschaft an diesem Punkt des Bildes von links nach rechts bestimmt.
Stellen Sie die folgenden Zeit- und Werteigenschaften während der Nummersequenz ein:
- Zeit = 0, Wert = 0.25
- Zeit = .101, Wert = 0.875
- Zeit = .183, Wert = 0
- Zeit = .3, Wert = 1
- Zeit = .7, Wert = 1
- Zeit = 1, Wert = 0.9
Duplizieren Sie das Bild-Label aus Schritt 2.
Wählen Sie das UIGradient Objekt innerhalb des doppelten Beschriftungaus, dann im Eigenschaften Fenster,
Setze Drehung auf -45, um das Bild so zu drehen, dass es sich fast gegenseitig entlang der Y-Achse spiegelt.
Modifizieren Sie Transparenz , um das Schimmern organischer aussehen zu lassen.
- Klicken Sie auf die Eigenschaften Transparenz , dann klicken Sie auf die Schaltfläche ⋯ . Ein Zahlenschema wird angezeigt.
- Wählen Sie den dritten Keyframeaus, dann klicken Sie auf die Schaltfläche Löschen .
Verweise auf die folgenden ReplicatedStorage-Skripte innerhalb der Beispiel-Laser-Tag-Platzdatei, die das Kraftfeld-Bild programmatisch anzeigt, während ein Spieler einer Runde beitritt oder wieder beitritt.
Das folgende ReplicatedStorage.ForceFieldClientVisuals Client-Skript ersetzt das Standardvisual ForceField durch StarterGui.ForceFieldGui.Wenn Spieler in ein Erlebnis laden und auf einem SpawnLocation mit einer Duration Eigenschaft spawnen, die größer als 0 ist, ist das Standardverhalten in jedem Erlebnis, ihren Avatar mit einem schützenden blauen Orb auszustatten, der ihn vorübergehend vor Verlust von Gesundheit schützt.
Dieses Skript beginnt, indem es zuhört, wann das ForceField einem Charakter hinzugefügt wird, deaktiviert die Standard-First-Person-Kraftfeldvisualisierungen und aktiviert dann das Objekt ForceFieldGui ScreenGui.Beachten Sie, dass dies keinen Einfluss auf visuelle Darstellungen der dritten Person hat, wenn Spieler andere Spieler respawnen sehen, die wieder in die Erlebniszurückkehren.
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 Spawnpunkt mit deaktivem Kraftfeld spawnt
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 wird immer, wenn ein Spieler der Runde beitritt oder wieder beitritt, nachdem er respawnt wurde, die neue Kraftfeld-Bildschirm-Benutzeroberfläche anstelle der Standard-First-Person-Visuals ForceField angezeigt.
Respawn-Bildschirm
Ein Respawn-Bildschirm ist ein UI-Element, das den Ansichtsbereich verdunkelt, um die Spieler zu informieren, dass sie markiert wurden, und dass der Server im Prozess ist, sie zurück in ihre Spawn-Zone zu respawnen.Dieses UI-Element ist wichtig, weil es den Spielern Zeit gibt, um zu verarbeiten, dass sie ausgezeichnet wurden, und ihre nächste Bewegung strategisch zu planen, bevor sie der aktiven Runde wieder beitreten.
Für weitere Informationen zum benutzerdefinierten Respawn-Verhalten im Beispiel-Lasertag-Erlebnis, siehe Respawn-Charaktere aus dem Spielmechanik-Skript-Kurriculum.
Um genau das Respawn-Fenster innerhalb der Probephase Erlebniswiederherzustellen:
Erstelle das mittlere Informationsbanner.
Füge ein Bild-Label in das OutStateGui -Objekt ein.
Im Explorer -Fenster navigieren Sie zum StarterGui -Service.
Bewegen Sie den Mauszeiger über sein Kind OutStateGui Objekt, dann klicken Sie auf das ⊕ Symbol. Ein Kontextmenü wird angezeigt.
Aus dem Kontextmenü fügen Sie ein Bild-Label ein.
Wählen Sie das neue Beschriftung, dann im Eigenschaften -Fenster,
Setze Ankerpunkt auf 0.5, 0.5, um den Ursprungspunkt der neuen Schaltfläche in der Mitte von sich selbst zu setzen (50% von links nach rechts des Beschriftungund 50% von oben nach unten des Beschriftung).
Setze Hintergrundtransparenz auf 1, um den Hintergrund des Beschriftungvollständig transparent zu machen.
Setze Position auf {0.5, 0},{0.5, 0}, um das Label in der Mitte seines Containers zu setzen (50% von der linken zur rechten Seite des Eltern-ScreenGis und 50% von der oberen zur unteren Seite des Eltern-ScreenGis).
Setze Größe auf {0.48, 0},{0.06, 0}, um das Etikett zu erweitern (48% horizontal und 6% vertikal des zugeordneten ScreenGui).
Setze Name auf Block .
Setze Bild auf rbxassetid://14304827265, um das Bild zu einem Dreieck zu machen.
Setze Bildfarbe auf 0,0,0, um das Dreieck schwarz zu machen.
Setze Bild透明度 auf 0.3, um die Opazität des Labels um 30% zu reduzieren und alle schwarzen UI-Elemente im Erlebnis zu passen.
Füge eine UI-Aspektverhältnis-Einschränkung in Block ein, um sicherzustellen, dass die Etikett- und seine Kind-UI-Elemente-Aspektverhältnis gleich bleibt, unabhängig von der Bildschirmgröße des Spieler:in.
Wählen Sie die neue Beschränkungaus, dann setzen Sie im Eigenschaften -Fenster auf Aspektverhältnis auf 13.78.
Füge ein TextLabel in Block für den Informationstext ein.
Wählen Sie das neue Beschriftung, dann im Eigenschaften -Fenster,
Setze Ankerpunkt auf 0.5, 0.5, um den Ursprungspunkt des Beschriftungin der Mitte selbst festzulegen (50% von links nach rechts des Beschriftungund 50% von oben nach unten des Beschriftung).
Setze Hintergrundtransparenz auf 1, um den Hintergrund des Beschriftungvollständig transparent zu machen.
Setze Position auf {0.5, 0},{0.5, 0}, um das Label in der Mitte seines übergeordneten Labels zu setzen (50% von links nach rechts des übergeordneten Beschriftungund 50% von oben nach unten des übergeordneten Beschriftung).
Setze Größe auf , damit der Text die meiste Fläche des Dreiecksbereichs einnehmen kann (85% horizontal und 55% vertikal des übergeordneten Beschriftung).
Setze Name auf BodyTextLabel .
Setze FontFace auf Montserrat , um die futuristische Ästhetik zu passen.
Setze Gewicht auf Fett , um die Schrift zu verdicken.
Setze Text auf Respawning… .
Setze Textfarbe3 auf 255, 255, 255, um den Text weiß zu machen.
Aktiviere Textskaliert .
Erstelle den Kopfzeilen.
Füge ein Bild-Label in Block ein.
Wählen Sie das neue Beschriftung, dann im Eigenschaften -Fenster,
Setze Ankerpunkt auf 0.5, 1, um den Ursprungspunkt des Beschriftungin der Mitte unten festzulegen (50% von links nach rechts des Beschriftungund 100% von oben nach unten des Beschriftung).
Setze Hintergrundtransparenz auf 1, um den Hintergrund des Beschriftungvollständig transparent zu machen.
Setze Position auf {0.5, 0},{0, 0}, um das Etikett oben in der Mitte seines übergeordneten Etikettes (50% von links nach rechts des übergeordneten Beschriftungund 0% von oben nach unten des übergeordneten Beschriftung) zu setzen.
Setze Größe auf {0.46, 0},{0.56, 0}, um das Etikett zu verbreitern (46% horizontal und 56% vertikal des übergeordneten Beschriftung).
Setze Name auf Header .
Setze Bild auf rbxassetid://14304826985, um das Bild zu einem mehrdimensionalen Verbleicht zu machen.
Setze Bildfarbe auf um das Verbleichen rot zu machen, um zu zeigen, dass der Spieler vorübergehend inaktiv ist, während er aus der Runde heraus markiert wird.
Füge ein TextLabel in Header für den informativen Text ein.
Wählen Sie das neue Beschriftung, dann im Eigenschaften -Fenster,
Setze Ankerpunkt auf 0.5, 0.5, um den Ursprungspunkt des Beschriftungin der Mitte selbst festzulegen (50% von links nach rechts des Beschriftungund 50% von oben nach unten des Beschriftung).
Setze Hintergrundtransparenz auf 1, um den Hintergrund des Beschriftungvollständig transparent zu machen.
Setze Position auf {0.5, 0},{0.5, 0}, um das Label in der Mitte seines übergeordneten Labels zu setzen (50% von links nach rechts des übergeordneten Beschriftungund 50% von oben nach unten des übergeordneten Beschriftung).
Setze Größe auf , damit der Text die meiste Fläche des Verbleichbereichs einnehmen kann (85% horizontal und 55% vertikal des übergeordneten Beschriftung).
Setze Name auf HeaderTextLabel .
Setze FontFace auf Montserrat , um die futuristische Ästhetik zu passen.
Setze Gewicht auf Schwarz , um die Schrift zu verdicken.
Setze Text auf TAGGED - DU BIST RAUS! 9. Setze Textfarbe3 auf 255, 255, 255, um den Text weiß zu machen.
Aktiviere Textskaliert .
Erstelle den Verbleich um die Grenzen des Bildschirms herum.
- Füge ein Bild-Label in OutStateGui ein.
- Wählen Sie das neue Beschriftung, dann im Eigenschaften -Fenster,
- Setze Ankerpunkt auf 0.5, 0.5, um den Ursprungspunkt des Beschriftungin der Mitte selbst festzulegen (50% von links nach rechts des Beschriftungund 50% von oben nach unten des Beschriftung).
- Setze Hintergrundfarbe3 auf 0,0,0, um die Hintergrundfarbe des Beschriftungauf Schwarz zu setzen.
- Setze Hintergrundtransparenz auf 0.5, um den Hintergrund des Beschriftungmitten transparent zu machen.
- Setze Position auf {0.5, 0},{0.5, 0}, um das Label in der Mitte seines Containers zu setzen (50% von links nach rechts vom Eltern-ScreenGui und 50% von oben nach unten vom Eltern-ScreenGui).
- Setze Größe auf {1, 0},{1, 0}, um das Etikett auf den gesamten Bildschirm zu erweitern (100% horizontal und 100% vertikal des zugeordneten ScreenGui).
- Setze ZIndex auf -1, um den Verbleich hinter den anderen UI-Elementen anzuzeigen.
- Setze Name auf Header .
- Setze Bild auf rbxassetid://14309518613, um das Bild zu einem Übergang zu machen.
- Setze Bildtransparenz auf 0.1, um den Verbleich leicht durchsichtig zu machen.
Um die Erfüllungzu verbessern, kannst du das Bild-Asset überspringen und stattdessen ein UIGradient Objekt mit einer benutzerdefinierten Transparenznumber-Sequenz verwenden.Um mehr über diese Verblasstechnik zu erfahren, siehe UI-Aussehensmodifizierer - Gradient.
Verweise auf das folgende ReplicatedStorage-Skript innerhalb der Probeseite Lasertag, die programmatisch den Respawn-Bildschirm anzeigt, wenn die Gesundheit eines Spieler:inauf null sinkt und sie sich in der Prozessphase befinden, zurück in die Spawn-Zone ihres Teams zu respawnen.
Das folgende ReplicatedStorage.PlayerStateHandler Client-Skript enthält Funktionen, die nach dem Attribut playerState verschiedene Verhaltensweisen auslösen.Alle Antworten auf Ereignisse werden in diesem Skript logisch zusammengefasst, weil sie ein ähnliches Verhalten erfordern, um Steuerungzu aktivieren oder zu deaktivieren, die Kamerabewegung und die sichtbare UI-Schicht.
Wenn die Gesundheit eines Spieler:inauf Null sinkt, wird seine playerState zu TaggedOut, was die Funktion onTaggedOut() auslöst.onTaggedOut() löst sofort das folgende Verhalten aus:
- Der Spieler kann sich nicht in der Arena bewegen.
- Der Spieler kann seine Kamera nicht bewegen.
- Der Spieler kann seinen Blaster nicht verwenden.
- Die StarterGui.OutStateGui wird ausschließlich aktiviert.
Wenn der Spieler respawniert, wird sein playerState zu SelectingBlaster, was die onSelectingBlaster() Funktion auslöst.onSelectingBlaster() dann aktiviert es ausschließlich die StarterGui.PickABlasterGui, die den Respawn-Bildschirm automatisch deaktiviert.Für weitere Informationen zu diesen Bedingungen siehe Client-Status verwalten aus dem Spiel脚本-Skript-Kurs.
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"),
}
-- Deaktiviere alle UI-Schichten außer der angegebenen Ausnahme
local function setGuiExclusivelyEnabled(enabledGui: ScreenGui?)
-- guiLayers enthält eine Liste der Guis, die ausschließlich festgelegt werden sollten.
for _, screenGui in guiLayers do
screenGui.Enabled = screenGui == enabledGui
end
end
local function onSelectingBlaster()
-- Aktiviere die Kamera, damit Spieler sich umsehen können, während sie einen Blaster auswählen
togglePlayerCamera(true)
togglePlayerMovement(false)
setGuiExclusivelyEnabled(playerGui.PickABlasterGui)
-- Deaktiviere Blaster beim Auswählen eines Blasters
localPlayer:SetAttribute(PlayerAttribute.blasterStateClient, BlasterState.Disabled)
end
local function onPlaying()
-- Spielerbewegung aktivieren, nachdem ein Blaster ausgewählt wurde
togglePlayerMovement(true)
setGuiExclusivelyEnabled(playerGui.HUDGui)
-- Aktiviere Blaster während des Spiels
localPlayer:SetAttribute(PlayerAttribute.blasterStateClient, BlasterState.Ready)
-- Stelle die Zerstörungsfeldlogik ein, wenn der Spieler beginnt zu spielen
scheduleDestroyForceField()
end
local function onTaggedOut()
-- Steuerelemente deaktivieren, während markiert wird
togglePlayerMovement(false)
togglePlayerCamera(false)
setGuiExclusivelyEnabled(playerGui.OutStateGui)
-- Deaktiviere Blaster, während er markiert wird
localPlayer:SetAttribute(PlayerAttribute.blasterStateClient, BlasterState.Disabled)
end
local function onInLobby()
-- Steuerelemente aktivieren, während in der Lobby
togglePlayerMovement(true)
togglePlayerCamera(true)
-- Alle HUD ausblenden, während in der Lobby
setGuiExclusivelyEnabled(nil)
-- Deaktiviere Blaster, während du in der Lobby bist
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
-- Behandle den ursprünglichen Spielerzustand, wenn festlegen
local initialPlayerState = localPlayer:GetAttribute(PlayerAttribute.playerState)
onPlayerStateChanged(initialPlayerState)
local function updateFromPlayerState()
onPlayerStateChanged(localPlayer:GetAttribute(PlayerAttribute.playerState))
end
-- Künftige Spielerzustandsaktualisierungen bearbeiten
localPlayer:GetAttributeChangedSignal(PlayerAttribute.playerState):Connect(updateFromPlayerState)
-- Stellen Sie sicher, dass sich die Änderungen nach dem Respawnen immer noch anwenden
localPlayer.CharacterAdded:Connect(updateFromPlayerState)
Jetzt wird jedes Mal, wenn die Gesundheit eines Spieler:inauf Null sinkt, der Respawn-Bildschirm angezeigt, bis der Spieler in seine Spawn-Zone zurückkehrt.
Jetzt, da du dich mit häufigen für die UI auf dem Bildschirm vertraut gemacht hast, versuche, das RoundResultsGui -Objekt und alle seine Kinder für die Anzeige auf dem Bildschirm zu recreieren, wenn Spieler ein übereinstimmengewinnen oder verlieren.Du kannst die Beispiel-Lasertag-Erfahrung als Referenz verwenden oder die Werte anpassen, um die Spielanforderungen deiner eigenen Erlebniszu erfüllen.
Erstellen von SurfaceGui-Objekten
Um die Benutzeroberfläche auf der Oberfläche eines Teils im 3D-Raum anzuzeigen, die auf Skriptlogik für jeden einzelnen Spieler reagiert, kannst du ein SurfaceGui Objekt dem Teil zuordnen, das du deine Benutzeroberfläche innerhalb des ReplicatedStorage Dienstes anzeigen möchtest.Diese Technik gewährleistet, dass deine UI und ihre Skriptlogik sowohl für den Server als auch für den Client jedes Spieler:inverfügbar sind.
SurfaceGui Objekte enthalten alles, was GuiObjects auf der Oberfläche eines Teils im Platzangezeigt wird.Die Probepunktlasertag-Erfahrung enthält nur eine Instanz eines SurfaceGui -Objekts: das Abklingzeitmeter, das über den Blaster eines jeden Spieler:inangezeigt wird.Dieses Objekt benötigt Skriptlogik für jeden Spieler, weil es aktiv auf die Eingabe eines jeden einzelnen Spieler:inreagiert und visuelles Feedback gibt, wann sie ihren Blaster wieder explodieren können.
Um ein SurfaceGui
In dem Explorer -Fenster bewegen Sie den Mauszeiger über den ReplicatedStorage -Dienst, dann klicken Sie auf das ⊕ -Symbol. Ein Kontextmenü wird angezeigt.
Aus dem Kontextmenü füge ein Teil -Objekt ein.
Füge ein ScreenGui -Objekt in das Teil ein.
Benennen Sie die Oberflächen-GUI entsprechend dem Kontext seiner Kind-UI-Elemente um.
Wiederhole diesen Prozess für jedes UI-Element, das du auf der Oberfläche eines Teils im Platzanzeigen musst.
Abklingzeitmesser
Ein Abklingzeitmesser ist eine UI-Komponente, die den Spielern mitteilt, wie lange sie warten müssen, bevor sie ihren Blaster wieder explodieren können.Diese leichte Pause verhindert, dass Spieler so schnell wie möglich explodieren können, was für das Gameplaymit Lasertag unrealistisch ist.
Um das Abklingzeitmeter innerhalb der Probenerfahrung Laser-Tag genau wiederzugeben:
Erstelle ein Teil, um dein SurfaceGui Objekt zu halten.
- In dem Explorer Fenster bewegen Sie den Mauszeiger über den Arbeitsbereich , dann klicken Sie auf das ⊕-Symbol. Ein Kontextmenü wird angezeigt.
- Aus dem Kontextmenü füge einen Block -Teil ein.Dies ist ein vorübergehender Ort für das Teil, damit du die Änderungen in jedem Schritt des Prozesses visualisieren kannst.
Positioniere und orientiere das Teil um die Position, an der ein Spieler:inseinen Blaster halten würde, dann im Eigenschaften -Fenster
Setze Transparenz auf 1, um das Teil vollständig transparent zu machen.
Setze Name auf CooldownBarPrefab .
Setze Größe auf um das Teil auf eine Größe von etwa der Länge des Blasters zu skalieren.
Deaktiviere CanCollide und CanQuery .
Füge eine Oberflächen-GUI in CooldownBarPrefab ein.
Wählen Sie das neue SurfaceGui , dann im Eigenschaften -Fenster,
Setze Gesicht auf Oberseite , damit die UI nach oben zeigt.
Setze Lichtbeeinflussung und MaxDistanz auf .
Setze PixelsPerStud auf 200.
Erstelle die schwarze Leiste.
Füge ein Bild-Label in die SurfaceGui ein.
Wählen Sie das neue Beschriftung, dann im Eigenschaften -Fenster,
- Entferne den Standard- Bild -Wert.
- Setze Ankerpunkt auf 0.5, 0.5, um den Ursprungspunkt des Beschriftungin der Mitte selbst festzulegen (50% von links nach rechts des Beschriftungund 50% von oben nach unten des Beschriftung).
- Setze Hintergrundfarbe3 auf 0,0,0, um die Hintergrundfarbe des Beschriftungauf Schwarz zu setzen.
- Setze Hintergrundtransparenz auf 0.4, um den Hintergrund des Beschriftunghalbtransparent zu machen
- Setze Position auf {0.5, 0},{0.5, 0}, um das Label in der Mitte seines Containers zu setzen (50% von der linken zur rechten Seite des übergeordneten SurfaceGui und 50% von der oberen zur unteren Seite des übergeordneten SurfaceGui).
- Setze Größe auf {1, 0},{1, 0}, um das Etikett auf das gesamte Teil zu erweitern (100% horizontal und 100% vertikal des übergeordneten SurfaceGui).
- Setze Name auf Container .
Runde die Ecken des Containers.
Füge ein UICorner -Objekt in Container ein.
Wählen Sie das UICorner , dann im Eigenschaften -Fenster, setzen Sie Eckenradius auf , um die Ecken leicht zu runden.
Erstelle die rote Leiste.
- Füge ein Bild-Label in Container ein.
- Wählen Sie das neue Beschriftung, dann im Eigenschaften -Fenster,
- Entferne den Standard- Bild -Wert.
- Setze Ankerpunkt auf 1, 0.5, um den Ursprungspunkt des Beschriftungin der rechten Mitte zu setzen (100% von links nach rechts des Beschriftungund 50% von oben nach unten des Beschriftung).
- Setze Hintergrundfarbe3 auf 172, 13, 13, um die Hintergrundfarbe des Beschriftungauf dunkelrot zu setzen.
- Setze Hintergrundtransparenz auf 0.2, um den Hintergrund des Beschriftungleicht transparent zu machen.
- Setze Name auf Bar .
- Setze Position auf {1, 0},{0.5, 0}, um das Etikett in der rechten Mitte seines Containers zu setzen (100% von links nach rechts vom Beschriftungund 50% von oben nach unten vom Beschriftung).
- Setze Größe auf {0, 0},{1, 0}, um das Etikett an die Spitze seines übergeordneten Etikettes zu verlängern (0% horizontal und 100% vertikal des übergeordneten Beschriftung).Dieser Schritt ist auch für das Teenager-Verhalten von Vorteil, das in den Skripten im Schritt 8 auftritt.
Runde die Ecken des Beschriftung.
- Füge ein UICorner -Objekt in Bar ein.
- Wählen Sie das UICorner , dann im Eigenschaften -Fenster, setzen Sie Eckenradius auf , um die Ecken leicht zu runden.
Bewegen Sie CooldownBarPrefab zu ReplicatedStorage .
Erstelle eine Ordnerstruktur, um deine UI-Objekte zu organisieren. Die Probe verwendet einen Instanzen -Ordner mit einem Kind Guis -Ordner.
Bewegen Sie CooldownBarPrefab in Guis .
Verweise auf die folgenden ReplicatedStorage -Skripte innerhalb der Beispiel-Lasertag-Platzdatei, die das Abklingzeitmesser programmatisch am Blaster des Spieler:inanbringt, und animiert dann die rote Leiste nachdem ein Spieler seinen Blaster abgefeuert hat.
Das folgende ReplicatedStorage.FirstPersonBlasterVisuals Client-Skript bearbeitet die gesamte visuelle Logik für den First-Person-Blaster des Spieler:in.Es erfordert eine Reihe von Modulskripten, die zusammen arbeiten, um Blaster-Visuals zu erstellen, die sich realistischer für das Gameplayanfühlen, einschließlich FirstPersonBlasterVisuals.addCooldownBar und FirstPersonBlasterVisuals.runCooldownBarEffect.
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 Abklingzeitleiste, da sie dem Rig zugewiesen ist
rigModel:Destroy()
rigModel = nil
end
end
-- Führe visuelle Effekte der ersten Person aus, wenn eine Explosion auftritt
laserBlastedBindableEvent.Event:Connect(function(blastData: BlastData.Type)
runBlastVisuals(rigModel.PrimaryPart.TipAttachment, blastData, animations.blastAnimation)
runCooldownBarEffect(cooldownBar)
end)
-- Binden Sie das Gerät an die Kamera, wenn es existiert
RunService.RenderStepped:Connect(function()
if rigModel then
-- Aktualisierung des CFrames des Rigs in Bezug auf die Position der Kamera und RIG_OFFSET_FROM_CAMERA
rigModel:PivotTo(currentCamera.CFrame * RIG_OFFSET_FROM_CAMERA)
end
end)
-- Verwaltet sich ändernde visuelle Effekte, wenn sich der Blastertyp während des Spiels ändert
localPlayer:GetAttributeChangedSignal(PlayerAttribute.blasterType):Connect(function()
local playerState = localPlayer:GetAttribute(PlayerAttribute.playerState)
if playerState == PlayerState.Playing then
removeFirstPersonVisuals()
addFirstPersonVisuals()
end
end)
-- Verwaltet sich ändernde visuelle Inhalte, wenn sich der Spielerstatus ändert
localPlayer:GetAttributeChangedSignal(PlayerAttribute.playerState):Connect(function()
local newPlayerState = localPlayer:GetAttribute(PlayerAttribute.playerState)
-- Entferne die Visualisierungen, wenn der Spieler einen Blaster auswählt oder sich in der Lobby befindet
if newPlayerState == PlayerState.SelectingBlaster or newPlayerState == PlayerState.InLobby then
removeFirstPersonVisuals()
-- Füge die visuellen Elemente zurück, wenn der Spieler den Blaster ausgewählt hat.
elseif newPlayerState == PlayerState.Playing then
addFirstPersonVisuals()
end
end)
Jetzt, wann immer ein Spieler seinen Blaster abfeuert, animiert die Abklingzeit-Leiste zu kommunizieren, wenn der Spieler wieder abfeuern kann.
Erstellen von BillboardGui-Objekten
Um UI-Elemente im 3D-Raum anzuzeigen, die auf Skriptlogik reagieren und immer die Kamera eines jeden Spieler:inausrichten, unabhängig von dessen Sichtwinkel, wie z. B. Spielername oder Kartenausschnitte, kannst du ein BillboardGui -Objekt als Kind eines BasePart - oder Attachment -Objekts erstellen, das im Platzexistiert.
Das Beispiel-Laser-Tag-Erlebnis umfasst zwei separate BillboardGui Objekte innerhalb des ReplicatedStorage Dienstes:
- OtherPlayerIndicatorGuiPrefab - Zeigt einen rosa oder grünen Kreis über dem Kopf eines Spieler:inan, wenn er in einer Runde aktiv ist.
- TaggedOutIndicatorGuiPrefab - Zeigt über dem Kopf eines Spieler:inan, wenn er aus der Runde ausgeschlossen wird.
Nachdem du ein BillboardGui-Objekt erstellt hast, kannst du sein Kind GuiObjects nach dem Zweck jedes Containers erstellen und anpassen.Um zu demonstrieren, lernen Sie in den unmittelbaren Abschnitten, die folgen, wie Sie UI-Elemente für beide Indikationstypen innerhalb der Erlebnisimplementieren. Du kannst jeden Teil des Prozesses anpassen, um die Spezifikationen deiner eigenen Erfahrung zu erfüllen .
Um ein BillboardGui
- In dem Explorer -Fenster bewegen Sie den Mauszeiger über ein BasePart oder Attachment, dann klicken Sie auf das ⊕ -Symbol. Ein Kontextmenü wird angezeigt.
- Aus dem Kontextmenü fügen Sie ein BillboardGui Objekt ein.
- Rename the BillboardGui entsprechend dem Kontext seiner Kind-UI-Elemente.
- Wiederhole diesen Prozess für jedes UI-Element, das du kontextuell über den Köpfen der Spieler anzeigen musst.
Teamanzeige
Ein Team-Indikator ist ein UI-Element, das die Spieler informiert, zu welchem Team andere Spieler in der Runde gehören, damit sie leicht zwischen ihren Verbündeten und gegnerischen Teammitgliedern unterscheiden können.Diese Informationen sind wichtig, weil das Spiel eines First-Person-Shooter-Erlebnisses erfordert, dass Spieler schnelle strategische Entscheidungen treffen, während sie sich in Kampfzonen befinden, damit sie nicht markiert werden und das übereinstimmenverlieren.
Um den Team-Indikator innerhalb der Probenerfahrung Laser-Tag genau wiederzugeben:
Füge ein BillboardGui -Objekt in ein temporäres Rig ein.
Von der Avatar-Registerkarte der Toolleiste klicken Sie auf Rig-Builder.
Wählen Sie aus den verfügbaren Optionen.Die Probe verwendet einen R15 eingeben, eine weibliche Körperform und einen Rthro Avatar.Das Gerät wird sowohl im 3D-Ansichtsfenster als auch im Explorer -Fenster unter dem Namen Rig angezeigt.
Im Explorer -Fenster navigieren Sie zum Kind der Rig Kopf -Mesh, dann klicken Sie auf das ⊕ -Symbol. Ein Kontextmenü wird angezeigt.
Aus dem Kontextmenü fügen Sie eine BillboardGui ein.
Wählen Sie das neue BillboardGui , dann im Eigenschaften -Fenster,
Setze Lichtbeeinflussung auf 0, um die Umgebungslicht zu verhindern, die die Farbe des Indikators beeinflusst.
Setze Name auf OtherPlayerIndicatorPrefab .
Setze Größe auf {0, 10},{0, 10}, um das Etikett deutlich kleiner zu machen.
Setze StudsOffsetWorldSpace auf 0, 4, 0, um es über dem Kopf des Rigs zu positionieren.
Füge ein Rahmen Objekt in OtherPlayerIndicatorPrefab ein.
Wählen Sie den neuen Rahmen, dann im Eigenschaften -Fenster,
Setze Ankerpunkt auf 0.5, 0.5, um den Ursprungspunkt des Rahmens in der Mitte von sich selbst zu setzen (50% von links nach rechts des Beschriftungund 50% von oben nach unten des Beschriftung).
Setze Hintergrundfarbe3 auf 255, 3, 0, um die Hintergrundfarbe des Rahmens auf Rot als Platzhalterfarbe zu setzen.
Setze Position auf {0.5, 0},{0.5, 0}, um den Rahmen in die Mitte seines Containers zu setzen (50% von der linken zur rechten Seite der übergeordneten BillboardGui und 50% von der oberen zur unteren Seite der übergeordneten BillboardGui).
Setze Größe auf {1, -2},{1, -2}, um den Rahmen auf die Fläche des BillboardGui zu verkürzen.
Füge ein UICorner Objekt in Rahmen ein, um die Ecken vollständig zu runden.
Füge ein UIStroke Objekt in Rahmen ein, um den Kreis des Indikators zu skizzieren.
Bewegen Sie OtherPlayerIndicatorPrefab zu ReplicatedStorage .
Verweise auf das folgende ReplicatedStorage-Skript innerhalb der Beispiel-Datei Lasertag 1A, die programmatisch den Team-Indikator für jeden Spieler in einer aktiven Runde anzeigt, es sei denn, er befindet sich im feindlichen Team und ist ausgeblendet.
Das folgende ReplicatedStorage.OtherPlayerIndicatorGuiSetup-Skript wird ausgeführt, wenn Spieler in die Arena für eine aktive Runde spawnen.Es fügt den Teamindikator an, indem es die addIndicatorToCharacter() -Funktion aufruft, die das Head -Objekt eines jeden Spielerscharakters findet, der an der Runde teilnimmt.Wenn sie noch keinen Team-Indikator haben, kloniert das Skript dann die andereSpielerindikatorPrefab UI auf den Charakter und setzt die Team-Indikatorfarbe auf die Farbe ihres Teams.
Wenn andere Spieler im selben Team sind, wird der Teamindikator immer angezeigt, auch wenn sie sich hinter Objekten im Platzverstecken; wenn andere Spieler im feindlichen Team sind, wird der Teamindikator nur angezeigt, wenn es kein Objekt im 3D-Raum gibt, um sie zu verdecken.
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 das Hinzufügen von doppelten Indikatoren, erstellen Sie einen neuen nur, wenn er 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, nur 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, wann immer ein Spieler:inin einer aktiven Runde ist, werden Teamindikatoren über den Köpfen anderer Spieler angezeigt, es sei denn, sie sind im feindlichen Team und hinter einem Objekt.
Indikator markiert aus
Ein mit einem Zeichen versehener Indikator ist ein UI-Element, das Spieler informiert, wenn andere Spieler nicht mehr aktiv sind in der Runde und sich im Prozess befinden, in ihre Spawn-Zone zurückzukehren.Diese Informationen sind wichtig, weil das Gameplay eines First-Person-Shooter-Erlebnisses erfordert, dass Spieler auf ihr nächstes Ziel wechseln, sobald sie einen Spieler markiert haben, damit sie nicht in der Arena verwundbar werden, indem sie zu lange am selben Ort spielen.
Um den markierten Indikator innerhalb der Probenerfahrung Laser-Tag genau wiederzugeben:
Füge ein BillboardGui -Objekt in ein temporäres Rig ein, damit du die Änderungen in jedem Schritt des Prozesses visualisieren kannst.
Von der Avatar-Registerkarte der Toolleiste klicken Sie auf Rig-Builder.
Wählen Sie aus den verfügbaren Optionen.Die Probe verwendet einen R15 eingeben, eine männliche Körperform und einen Rthro Avatar.Das Gerät wird sowohl im 3D-Ansichtsfenster als auch im Explorer -Fenster unter dem Namen Rig angezeigt.
Im Explorer -Fenster navigieren Sie zum Kind der Rig Kopf -Mesh, dann klicken Sie auf das ⊕ -Symbol. Ein Kontextmenü wird angezeigt.
Aus dem Kontextmenü fügen Sie eine BillboardGui ein.
Wählen Sie das neue BillboardGui , dann im Eigenschaften -Fenster,
Setze Lichtbeeinflussung auf 0, um die Umgebungslicht zu verhindern, die die Farbe des Indikators beeinflusst.
Setze Name auf TaggedOutIndicatorGuiPrefab .
Setze Größe auf {3, 0},{0.5, 0}, um den Raum für ein Beschriftungzu erweitern.
Setze StudsOffset auf 0, 3.25, 0, um es über dem Kopf eines Spieler:inzu positionieren.
Füge ein Bild-Label -Objekt in TaggedOutIndicatorGuiPrefab ein.
Wählen Sie das neue Beschriftung, dann im Eigenschaften -Fenster,
- Setze Ankerpunkt auf 0.5, 0.5, um den Ursprungspunkt des Beschriftungin der Mitte selbst festzulegen (50% von links nach rechts des Beschriftungund 50% von oben nach unten des Beschriftung).
- Setze Hintergrundtransparenz auf 1, um den Hintergrund des Beschriftungvollständig transparent zu machen.
- Setze Name auf Rahmen .
- Setze Position auf {0.5, 0},{0.5, 0}, um das Label in die Mitte seines Containers zu setzen (50% von der linken zur rechten Seite der übergeordneten BillboardGui und 50% von der oberen zur unteren Seite der übergeordneten BillboardGui).
- Setze Größe auf {1, 0},{1, 0}, um das Etikett auf die gesamte BillboardGui zu erweitern (100% horizontal und 100% vertikal des übergeordneten BillboardGui).
- Setze Bild auf rbxassetid://14304826985, um das Bild zu einem mehrdimensionalen Verbleicht zu machen.
- Setze Bildfarbe auf 245, 46, 46, um das Etikett rot zu färben.
Um die Erfüllungzu verbessern, kannst du das Bild-Asset überspringen und stattdessen ein UIGradient Objekt mit einer benutzerdefinierten Transparenznumber-Sequenz verwenden.Um mehr über diese Verblasstechnik zu erfahren, siehe UI-Aussehensmodifizierer - Gradient.
Füge ein TextLabel -Objekt in Rahmen ein.
Wählen Sie das neue Beschriftung, dann im Eigenschaften -Fenster,
Setze Ankerpunkt auf 0.5, 0.5, um den Ursprungspunkt des Beschriftungin der Mitte selbst festzulegen (50% von links nach rechts des Beschriftungund 50% von oben nach unten des Beschriftung).
Setze Hintergrundtransparenz auf 1, um den Hintergrund des Beschriftungvollständig transparent zu machen.
Setze Name auf BodyTextLabel .
Setze Position auf {0.5, 0},{0.5, 0}, um das Etikett in die Mitte seines Containers zu setzen (50% von links nach rechts vom Beschriftungund 50% von oben nach unten vom Beschriftung).
Setze Größe auf , damit der Text die meiste Fläche des Verbleichbereichs einnehmen kann (85% horizontal und 70% vertikal des Beschriftung).
Setze FontFace auf Montserrat , um die futuristische Ästhetik zu passen.
Setze Gewicht auf Fett , um die Schrift zu verdicken.
Setze Text auf TAGGED .
Setze Textfarbe3 auf 255, 255, 255, um den Text weiß zu machen.
Aktiviere Textskaliert .
Bewegen Sie TaggedOutIndicatorGuiPrefab zu ReplicatedStorage .
Verweise auf die folgenden ServerScriptService Skripte innerhalb der Beispiel-Datei Lasertag 1A, die den markierten Indikator programmatisch anzeigt, während ein Spieler in die Spawn-Zone seines Teams zurückkehrt.
Das folgende ServerScriptService.SetupHumanoid Server-Skript läuft, sobald ein Spieler die Erlebnisgeladen hat.Es stellt sicher, dass jedes Mal, wenn der Charakter eines 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)
-- Rufe onCharacterAdded auf, wenn der Spieler bereits einen Charakter hat
if player.Character then
onCharacterAdded(player, player.Character)
end
-- Rufen Sie onCharacterAdded für alle zukünftigen Charakter-Spawns für diesen Spieler:inauf
player.CharacterAdded:Connect(function(character: Model)
onCharacterAdded(player, character)
end)
end
-- Rufen Sie onPlayerAdded für alle Spieler auf, die bereits im Spiel sind
for _, player in Players:GetPlayers() do
onPlayerAdded(player)
end
-- Rufen Sie onPlayerAdded für alle zukünftigen Spieler auf
Players.PlayerAdded:Connect(onPlayerAdded)
Jetzt, wann immer die Gesundheit eines Spieler:inauf Null sinkt, wird der mit einem Tag versehene Indikator über ihrem Kopf angezeigt, bis sie wieder erscheinen.
Herzlichen Glückwunsch zum Abschluss des Benutzeroberflächen-Design-Lehrgangs! Jetzt, da Sie Erfahrung haben, einen Kunststil zu schaffen, Ihre Layouts zu wireframen und Ihre Designs in Studio von Anfang bis Ende zu implementieren, können Sie Ihr Projekt mit neuen UI und Funktionen erweitern oder zusätzliche Tutorial-Lehrgänge wie das Gameplay-Skript-Lehrprogramm, das Sie über die allgemeine Organisation und die wichtigsten Implementierung details der Erlebnislehrt, befolgen.Frohes Schaffen!