Implementierung Ihrer Designs ist der Prozess, bei dem Sie Ihre Wireframes im Studio erstellen, indem Sie sowohl integrierte als auch benutzerdefinierte UI-Elemente mit Skripten verwenden, die Ihre UI kontextuell auslösen. Dieser aufregende Schritt des Tutorials zeigt Ihnen, wie all Ihre Designs und Ihre harte Arbeit sich zu einem kohärenten Set von Workflows zusammenfügen, die vollständig und bereit für die Interaktion mit den Spielern sind.
Mithilfe der Beispiellaser-Tag-Erfahrung .rbxl-Datei als Referenz zeigt Ihnen dieser Abschnitt des Benutzeroberflächendesignlehrplans, wie Sie Ihre UI-Planung zum Leben erwecken, einschließlich Anleitungen zur:
- Abholung von Asset-IDs aus der UI-Asset-Bibliothek, damit Sie die UI-Komponenten der Beispiel-Laser-Tag-Erfahrung nachbilden können.
- Emulation verschiedener Geräte direkt im Studio, um zu sehen, wie Ihre UI auf unterschiedlichen Bildschirmen und Seitenverhältnissen angezeigt wird.
- Erstellung der Objekte ScreenGui, SurfaceGui und BillboardGui, um Ihre UI auf den Bildschirmen der Spieler, auf Bauteiloberflächen und im 3D-Raum anzuzeigen.
Nachdem Sie die Techniken in diesem Abschnitt überprüft haben, können Sie diese auf Ihre eigenen Projekte anwenden, um aufregende UI-Komponenten zu erstellen, die den Spielern helfen, zu navigieren, was sie in Ihren Erlebnissen tun können.
Die Anweisungen in diesem Abschnitt des Tutorials zeigen Ihnen, wie Sie die UI-Komponenten genau mithilfe der UI-Design-Asset-Bibliothek nachbilden. Dieser Prozess dauert von Anfang bis Ende etwa 90 Minuten oder weniger. Wenn Sie die bereitgestellten Werte nicht verwenden möchten, können Sie jedes UI-Element anpassen, um die Spezifikationen Ihres eigenen Erlebnisses zu erfüllen, oder das Beispiel selbst für den Rest des Tutorials verwenden.
Asset-Bibliothek abrufen
Asset-Bibliotheken sind Sammlungen von Assets, die Sie Ihrem Inventar hinzufügen können, um einfachen Zugriff und Wiederverwendung zu ermöglichen. Die Asset-Bibliothek, die Sie für Ihr Projekt aus dem Creator-Store verwenden werden, umfasst neun 2D-Einzel-UI-Element-Assets und die finalen Versionen der Komponenten Ziel, Blaster-Auswahl und Spielerinfo, die Sie in diesem Abschnitt des Tutorials erstellen.
rbxassetid://14309094777
rbxassetid://14309094641
rbxassetid://14309678581
rbxassetid://14304828203
rbxassetid://14304827304
rbxassetid://14309678701
rbxassetid://14304826876
rbxassetid://14304827147
rbxassetid://18308375067
rbxassetid://18308372597
rbxassetid://14400935532
rbxassetid://14401148777
rbxassetid://14462567943
rbxassetid://14309187282
rbxassetid://14309518632
Um die Asset-Bibliothek aus Ihrem Inventar in Ihr Erlebnis zu bekommen:
Fügen Sie die Asset-Bibliothek Ihrem Inventar hinzu.
- Navigieren Sie zur Detailseite der Asset-Bibliothek im Creator-Store.
- Klicken Sie oben rechts auf die Schaltfläche Modell herunterladen. Die Asset-Bibliothek befindet sich jetzt in Ihrem Inventar, und Sie können diese Assets in jedem Projekt auf der Plattform wiederverwenden.
Navigieren Sie im Studio zum Tab Start, und klicken Sie dann auf die Schaltfläche Toolbox. Das Fenster Toolbox öffnet sich.
Klicken Sie im Fenster Toolbox auf den Tab Inventar. Die Sortierung Meine Modelle wird angezeigt.
Klicken Sie auf das Dropdown-Menü, und wählen Sie die Sortierung Meine Pakete aus.
Klicken Sie auf die Kachel Final Screen UI Components und wählen Sie im Fenster Explorer die Abgeschlossenen Komponenten aus, und ziehen Sie diese in den Service StarterGui. Sie können jetzt beliebige der finalen Komponenten aktivieren, um auf ihr Design zuzugreifen.
Geräte emulieren
Das Geräteemulations-Tool von Studio ermöglicht es Ihnen, zu testen, wie Spieler Ihre UI auf verschiedenen Geräten sehen und damit interagieren. Dieses Tool ist ein wichtiger Bestandteil des Implementierungsprozesses, da das Seitenverhältnis Ihres Ansichtsfensters im Studio nicht unbedingt das Seitenverhältnis der Bildschirme widerspiegelt, die Spieler verwenden, um auf Ihr Erlebnis zuzugreifen, und es wichtig ist, dass Ihre UI sowohl lesbar als auch zugänglich auf jedem Gerät ist.
Wenn Sie beispielsweise Ihre UI nicht auf einer Vielzahl von Bildschirmgrößen testen, könnten Spieler mit großen Bildschirmen Ihren Text möglicherweise nicht lesen oder Ihre Symbole entschlüsseln, und Spieler mit kleinen Bildschirmen könnten den 3D-Raum nicht sehen, da Ihre UI-Elemente zu viel Platz auf dem Bildschirm einnehmen.
Um Ihre UI auf verschiedenen Bildschirmgrößen zu emulieren:
Aktivieren Sie im Menü Test des Studios die Geräteemulation.
Wählen Sie im Dropdown-Menü die Tatsächliche Auflösung aus. Dadurch können Sie die tatsächliche Auflösung Ihrer UI-Elemente auf dem emulierten Gerät sehen.
Wählen Sie im Dropdown-Menü mindestens ein Gerät aus den Kategorien Telefon, Tablet, Desktop und Konsole aus.
ScreenGui-Objekte erstellen
Um UI-Elemente auf jedem Bildschirm eines Spielers anzuzeigen, können Sie ein ScreenGui-Objekt im StarterGui-Service erstellen. ScreenGui-Objekte sind die primären Container für On-Screen-UI, und der StarterGui-Service kopiert seinen Inhalt in jeden PlayerGui-Container eines Spielers, wenn sie ein Erlebnis betreten.
Sie können mehrere ScreenGui-Objekte erstellen, um UI-Elemente im Kontext während des Spielbetriebs zu organisieren und anzuzeigen. Zum Beispiel umfasst die Beispiel-Laser-Tag-Erfahrung fünf separate ScreenGui-Objekte, die anfänglich deaktiviert sind, bis die Spieler verschiedene Bedingungen während des Haupt-Benutzerflusses des Erlebnisses erfüllen:
- HUDGui - Zeigt wichtige Informationen über das Gameplay des Erlebnisses an, wenn die Spieler in einer Runde aktiv sind, wie das Ziel und die Gesamtpunkte jedes Teams.
- PickABlasterGui - Zeigt alle Blaster-Optionen an, wenn Spieler eine Runde starten oder wieder dem Spiel beitreten.
- ForceFieldGui - Zeigt ein hexagonales Raster 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 eliminiert werden.
- RoundResultsGui - Zeigt eine dunkle Überlagerung über dem Bildschirm mit Informationen darüber, welches Team die Runde gewonnen hat.
Nachdem Sie ein ScreenGui-Objekt erstellt haben, können Sie seine untergeordneten GuiObjects gemäß dem Zweck jedes Containers erstellen und anpassen. Um dies zu demonstrieren, lernen Sie in den unmittelbaren folgenden Abschnitten, wie Sie UI-Elemente für die drei Informationskategorien implementieren, die die Spieler wissen müssen, um in der Beispiel-Laser-Tag-Erfahrung erfolgreich zu sein. Sie können jeden Teil des Prozesses anpassen, um die Spezifikationen Ihres eigenen Erlebnisses zu erfüllen.
Um ein ScreenGui-Objekt zu erstellen:
Bewegen Sie im Fenster Explorer den Mauszeiger über den Service StarterGui und klicken Sie dann auf das ⊕-Symbol. Ein kontextuelles Menü wird angezeigt.
Fügen Sie ein ScreenGui ein.
Benennen Sie das ScreenGui gemäß dem Kontext seiner untergeordneten UI-Elemente um.
Wiederholen Sie diesen Vorgang für jede Gruppe von UI-Elementen, die Sie auf jedem Bildschirm eines Spielers anzeigen müssen.
Ziel-UI
Mit den besten Praktiken der visuellen Hierarchie aus Wireframe Your Layouts lehrt Sie dieser Abschnitt, wie Sie alle On-Screen-UI-Elemente im Zusammenhang mit dem Ziel des Erlebnisses umsetzen. Diese Gruppierung von UI-Elementen befindet sich nahe der Oberseite des Bildschirms, da das Ziel und die Punkte jedes Teams die größte Bedeutung für den Gewinn des Spiels haben.
Die Beispiel-Laser-Tag-Erfahrung bietet ein Ziel-UI-Komponente, auf die die Spieler zugreifen, um zu wissen, was sie tun müssen, um in einer Runde erfolgreich zu sein. Während die Spieler gegnerische Teammitglieder markieren und Punkte verdienen, verfolgt diese Komponente die Punktzahl jedes Teams im Vergleich zum Gesamtziel innerhalb der Aufforderung des Headers. Für eine Übersicht über alle Client- und Server-Skripte, die zusammenarbeiten, um die Punkte zu verfolgen, siehe Punkte verfolgen im Gameplay-Scripting-Lehrplan.
Um die Ziel-UI innerhalb der Beispiel Laser Tag Erfahrung genau nachzubilden:
Erstellen Sie einen Container für die gesamte Komponente.
Fügen Sie ein Frame in das HUDGui ScreenGui-Objekt ein.
- Navigieren Sie im Fenster Explorer zum StarterGui-Service.
- Bewegen Sie den Mauszeiger über das untergeordnete HUDGui-Objekt und klicken Sie auf das ⊕-Symbol. Ein kontextuelles Menü wird angezeigt.
- Fügen Sie aus dem kontextuellen Menü ein Frame ein.
Wählen Sie das neue Frame aus und setzen Sie im Eigenschaften-Fenster,
- Setzen Sie AnchorPoint auf 0.5, 0, um den Ursprungspunkt des Rahmens in der oberen Mitte von sich selbst festzulegen (50% von links nach rechts des Rahmens und 0% von oben nach unten des Rahmens).
- Setzen Sie BackgroundTransparency auf 1, um den Hintergrund des Rahmens vollständig transparent zu machen.
- Setzen Sie Position auf {0.5, 0},{0.03, 0}, um den Rahmen in die obere Mitte des Bildschirms zu setzen (50% von links nach rechts des Bildschirms und 3% von oben nach unten des Bildschirms, sodass es einen kleinen Puffer gibt).
- Setzen Sie Size auf {0.5, 0},{0.13, 0}, damit die Elemente des Rahmens einen großen Teil der Oberseite des Bildschirms einnehmen, um die Aufmerksamkeit der Spieler zu erregen (50% horizontal und 13% vertikal).
- Setzen Sie Name auf Objective.
(Optional) Fügen Sie ein UIAspectRatioConstraint in Objective ein, um sicherzustellen, dass das Seitenverhältnis des Labels unabhängig von der Bildschirmgröße des Spielers gleich bleibt. Die Beispielkonfiguration setzt ihre UIAspectRatioConstraint.AspectRatio-Eigenschaft auf 7.
Erstellen Sie einen Container für die Aufforderungsobjekte des Ziels.
Fügen Sie ein Frame in Objective ein.
Wählen Sie das neue Frame aus und setzen Sie im Eigenschaften-Fenster,
- Setzen Sie AnchorPoint auf 0.5, 0, um den Ursprungspunkt des Rahmens in der oberen Mitte von sich selbst festzulegen (50% von links nach rechts des Rahmens und 0% von oben nach unten des Rahmens).
- Setzen Sie BackgroundTransparency auf 1, um den Hintergrund des Rahmens vollständig transparent zu machen.
- Setzen Sie Position auf {0.5, 0},{0, 0}, um den Rahmen in die Mitte des Containers zu setzen (50% von links nach rechts des übergeordneten Rahmens und 0% von oben nach unten des übergeordneten Rahmens).
- Setzen Sie Size auf {1, 0},{0.67, 0}, sodass die UI-Komponenten zur Auswahl ungefähr mehr als die Hälfte des Containers von oben nach unten einnehmen (100% horizontal und 67% vertikal des übergeordneten Rahmens).
- Setzen Sie Name auf ObjectiveDisplay.
Erstellen Sie die Titel-Elemente.
Fügen Sie ein ImageLabel in ObjectiveDisplay ein.
Wählen Sie das ImageLabel aus und setzen Sie im Eigenschaften-Fenster,
- Setzen Sie AnchorPoint auf 0.5, 1, um den Ursprungspunkt des Labels in der unteren Mitte von sich selbst festzulegen (50% von links nach rechts des Labels und 100% von oben nach unten des Labels).
- Setzen Sie BackgroundTransparency auf 1, um den Hintergrund des Labels vollständig transparent zu machen.
- Setzen Sie LayoutOrder auf -1.
- Setzen Sie Position auf {0.5, 0},{0.34, 0}, um das Label in der oberen Mitte des Rahmens zu platzieren (50% von links nach rechts des übergeordneten Rahmens und 34% von oben nach unten des übergeordneten Rahmens).
- Setzen Sie Size auf {0.46, 0},{0.34, 0}, um den Aufforderungsbereich auf fast die Hälfte des Rahmens zu verbreitern (46% horizontal und 34% vertikal des übergeordneten Rahmens).
- Setzen Sie Name auf Header.
- Setzen Sie Image auf rbxassetid://14304828123, um einen Trapez anzuzeigen.
- Setzen Sie ImageTransparency auf 0.15, um den Header halbtransparent zu machen.
(Optional) Fügen Sie ein UIAspectRatioConstraint in das ImageLabel ein, um sicherzustellen, dass das Seitenverhältnis des Labels unabhängig von der Bildschirmgröße des Spielers gleich bleibt. Die Beispielkonfiguration setzt ihre UIAspectRatioConstraint.AspectRatio-Eigenschaft auf 13.781.
Fügen Sie ein TextLabel in Header ein, um einen Titel anzuzeigen.
Wählen Sie das neue Label aus und setzen Sie im Eigenschaften-Fenster,
- Setzen Sie AnchorPoint auf 0.5, 0.5, um den Ursprungspunkt des neuen Labels in der Mitte von sich selbst festzulegen (50% von links nach rechts des Labels und 50% von oben nach unten des Labels).
- Setzen Sie BackgroundTransparency auf 1, um den Hintergrund des Labels vollständig transparent zu machen.
- Setzen Sie Position auf {0.5, 0},{0.5, 0}, um das Label in die Mitte seines übergeordneten Labels zu bewegen (50% von links nach rechts des übergeordneten Labels und 50% von oben nach unten des übergeordneten Labels).
- Setzen Sie Size auf {0.62, 0},{0.55, 0}, um den Textbereich auf mehr als die Hälfte des übergeordneten Labels zu verbreitern (62% horizontal und 55% vertikal des übergeordneten Labels).
- Setzen Sie Name auf HeaderTextLabel.
- Setzen Sie FontFace auf Montserrat, um das futuristische Ästhetik zu unterstreichen.
- Setzen Sie Weight auf Medium, um die Schrift zu verdicken.
- Setzen Sie Text auf OBJECTIVE.
- Aktivieren Sie TextScaled.
Erstellen Sie die Aufforderungs-Elemente.
Fügen Sie ein ImageLabel in ObjectiveDisplay ein.
Wählen Sie das ImageLabel aus und setzen Sie im Eigenschaften-Fenster,
- Setzen Sie AnchorPoint auf 0.5, 1, um den Ursprungspunkt des Labels in der unteren Mitte von sich selbst festzulegen (50% von links nach rechts des Labels und 100% von oben nach unten des Labels).
- Setzen Sie BackgroundTransparency auf 1, um den Hintergrund des Labels vollständig transparent zu machen.
- Setzen Sie Position auf {0.5, 0},{1, 0}, um das Label in die untere Mitte seines übergeordneten Rahmens zu bewegen (50% von links nach rechts des übergeordneten Rahmens und 100% von oben nach unten des übergeordneten Rahmens).
- Setzen Sie Size auf {0.89, 0},{0.66, 0}, um den Textbereich fast auf die gesamte Breite des übergeordneten Rahmens zu verbreitern (89% horizontal und 66% vertikal des übergeordneten Rahmens).
- Setzen Sie Name auf Body.
- Setzen Sie Image auf rbxassetid://14304827265, um einen umgedrehten Trapez anzuzeigen.
- Setzen Sie ImageColor3 auf 0, 0, 0, um das Bild schwarz zu färben.
- Setzen Sie ImageTransparency auf 0.3, um den Header halbtransparent zu machen.
(Optional) Fügen Sie ein UIAspectRatioConstraint in das ImageLabel ein, um sicherzustellen, dass das Seitenverhältnis des Labels unabhängig von der Bildschirmgröße des Spielers gleich bleibt. Die Beispielkonfiguration setzt ihre UIAspectRatioConstraint.AspectRatio-Eigenschaft auf 13.781.
Fügen Sie ein TextLabel in Body ein, um eine Aufforderung anzuzeigen.
Wählen Sie das neue Label aus und setzen Sie im Eigenschaften-Fenster,
- Setzen Sie AnchorPoint auf 0.5, 0.5, um den Ursprungspunkt des neuen Labels in der Mitte von sich selbst festzulegen (50% von links nach rechts des Labels und 50% von oben nach unten des Labels).
- Setzen Sie BackgroundTransparency auf 1, um den Hintergrund des Labels vollständig transparent zu machen.
- Setzen Sie Position auf {0.5, 0},{0.5, 0}, um das Label in die Mitte seines übergeordneten Labels zu bewegen (50% von links nach rechts des übergeordneten Labels und 50% von oben nach unten des übergeordneten Labels).
- Setzen Sie Size auf {0.85, 0},{0.39, 0}, um den Textbereich auf mehr als die Hälfte des übergeordneten Labels zu verbreitern (85% horizontal und 39% vertikal des übergeordneten Labels).
- Setzen Sie Name auf BodyTextLabel.
- Setzen Sie FontFace auf Montserrat, um das futuristische Ästhetik zu unterstreichen.
- Setzen Sie Weight auf Medium, um die Schrift zu verdicken.
- Setzen Sie TextColor3 auf 255, 255, 255, um den Text vor dem dunklen Hintergrund weiß zu machen.
- Setzen Sie Text auf Markieren Sie gegnerische Spieler, um Punkte zu erzielen! Das erste Team mit %d Punkten gewinnt..
- Aktivieren Sie TextScaled.
Erstellen Sie einen Container für die Zähler der Teams im Ziel.
Fügen Sie ein Frame in Objective ein.
Wählen Sie das neue Frame aus und setzen Sie im Eigenschaften-Fenster,
- Setzen Sie AnchorPoint auf 0.5, 1, um den Ursprungspunkt des Rahmens in der unteren Mitte von sich selbst festzulegen (50% von links nach rechts des Rahmens und 100% von oben nach unten des Rahmens).
- Setzen Sie BackgroundTransparency auf 1, um den Hintergrund des Rahmens vollständig transparent zu machen.
- Setzen Sie Position auf {0.5, 0},{1, 0}, um den Rahmen in die untere Mitte des Containers zu setzen (50% von links nach rechts des übergeordneten Rahmens und 100% von oben nach unten des übergeordneten Rahmens).
- Setzen Sie Size auf {0.44, 0},{0.27, 0}, sodass die Auswahl-UI-Komponenten weniger als die Hälfte des Containers von links nach rechts einnehmen (44% horizontal und 27% vertikal des übergeordneten Rahmens).
- Setzen Sie Name auf TeamPointCounter.
Erstellen Sie Abstände für die Teamzähler.
- Fügen Sie ein UIListLayout-Objekt in den Rahmen aus Schritt 5 ein.
- Wählen Sie das UIListLayout-Objekt aus und setzen Sie im Eigenschaften-Fenster,
- Setzen Sie Padding auf 0.025, 0, um Platz zwischen den zukünftigen Teamzählern zu schaffen.
- Setzen Sie FillDirection auf Horizontal, sodass jeder Teamzähler nebeneinander angezeigt wird.
- Setzen Sie HorizontalAlignment auf Center, damit jeder Teamzähler zueinander ausgerichtet ist.
Erstellen Sie die Zählelemente für das grüne Team.
Fügen Sie ein ImageLabel in TeamPointCounter ein.
Wählen Sie das ImageLabel aus und setzen Sie im Eigenschaften-Fenster,
- Setzen Sie BackgroundTransparency auf 1, um den Hintergrund des Labels vollständig transparent zu machen.
- Setzen Sie Position auf {0.5, 0},{1, 0}, um das Label in die untere Mitte seines übergeordneten Rahmens zu bewegen (50% von links nach rechts des übergeordneten Rahmens und 100% von oben nach unten des übergeordneten Rahmens).
- Setzen Sie Size auf {0.5, 0},{1, 0}, um das Label auf die halbe Breite des übergeordneten Rahmens zu verbreitern (50% horizontal und 100% vertikal des übergeordneten Rahmens).
- Setzen Sie Name auf TeamACounter.
- Setzen Sie Image auf rbxassetid://14304826831, um einen Richtungsfade anzuzeigen.
- Setzen Sie ImageColor3 auf 88, 218, 171, um das Bild mintgrün zu färben.
Konfigurieren Sie ein benutzerdefiniertes Attribut, um festzulegen, dass dieses Label für das grüne Team ist.
- Navigieren Sie im Eigenschaften-Fenster zum Abschnitt Attribute und klicken Sie auf das Plus-Symbol. Ein Pop-up-Dialog wird angezeigt.
- Geben Sie im Feld Name teamColor ein.
- Wählen Sie im Dropdown-Menü Type BrickColor aus.
- Klicken Sie auf die Schaltfläche Speichern.
- Setzen Sie das neue teamColor-Attribut auf Mint.
Fügen Sie ein TextLabel in TeamACounter ein, um eine Aufforderung anzuzeigen.
Wählen Sie das neue Label aus und setzen Sie im Eigenschaften-Fenster,
- Setzen Sie AnchorPoint auf 1, 0.5, um den Ursprungspunkt des neuen Labels in der rechten Mitte von sich selbst festzulegen (100% von links nach rechts des Labels und 50% von oben nach unten des Labels).
- Setzen Sie BackgroundTransparency auf 1, um den Hintergrund des Labels vollständig transparent zu machen.
- Setzen Sie Position auf {0.95, 0},{0.5, 0}, um das Label rechts von seinem übergeordneten Label zu bewegen (95% von links nach rechts des übergeordneten Labels und 50% von oben nach unten des übergeordneten Labels).
- Setzen Sie Size auf {0.85, 0},{0.39, 0}, um den Textbereich auf mehr als die Hälfte des übergeordneten Labels zu verbreitern (85% horizontal und 39% vertikal des übergeordneten Labels).
- Setzen Sie FontFace auf Montserrat, um das futuristische Ästhetik zu unterstreichen.
- Setzen Sie Weight auf Bold, um die Schrift zu verdicken.
- Setzen Sie TextColor3 auf 255, 255, 255, um den Text vor dem dunklen Hintergrund weiß zu machen.
- Setzen Sie Text auf -.
- Aktivieren Sie TextScaled.
- Setzen Sie TextXAlignment auf Right.
Fügen Sie ein UIStroke-Objekt in das TextLabel ein, und setzen Sie im Eigenschaften-Fenster die Color auf 8, 78, 52, um den Strich um den Strich mit einem dunkelgrünen Strich zu umranden.
Erstellen Sie die Zählelemente für das pinke Team.
Duplizieren Sie TeamAICounter und seine Kinder.
Wählen Sie die duplizierte TeamACounter aus und setzen Sie im Eigenschaften-Fenster,
- Setzen Sie Name auf TeamBCounter.
- Setzen Sie Image auf rbxassetid://14305849451, um einen Richtungsfade in die entgegengesetzte Richtung anzuzeigen.
- Setzen Sie ImageColor3 auf 255, 170, 255, um das Bild in rosa zu färben.
- Setzen Sie das teamColor-Attribut auf Carnation Pink.
Wählen Sie das duplizierte TextLabel-Kindelement von TeamBCounter aus und setzen Sie im Eigenschaften-Fenster,
- Setzen Sie AnchorPoint auf 0, 0.5, um den Ursprungspunkt des neuen Labels in der linken Mitte von sich selbst festzulegen (0% von links nach rechts des Labels und 50% von oben nach unten des Labels).
- Setzen Sie Position auf {0.05, 0},{0.5, 0}, um das Label links von seinem übergeordneten Label zu bewegen (5% von links nach rechts des übergeordneten Labels und 50% von oben nach unten des übergeordneten Labels).
- Setzen Sie TextXAlignment auf Left.
Wählen Sie das duplizierte UIStroke-Kindelement von TeamBCounter aus und setzen Sie im Eigenschaften-Fenster die Color auf 158, 18, 94, um den Strich um den Strich mit einem dunkelrosa Strich zu umranden.
Verweisen Sie auf die folgenden ReplicatedStorage-Skripte innerhalb der Beispiel Laser Tag Placedatei, die die Aufforderung an das Ziel programmgesteuert aktualisieren und die Punkte der Teams verfolgen.
Das folgende Skript erfordert eine Reihe von Modulscripten, die zusammenarbeiten, um das Haupt-Head-Up-Display (HUD) einzurichten, einschließlich setObjective und startSyncingTeamPoints. After a player joins a round and selects their blaster, this script ensures all HUD UI elements display appropriately for the player's state, device, and team status.
Jetzt wird, nachdem ein Spieler seinen Blaster ausgewählt hat, die Ziel-UI oben auf seinem Bildschirm angezeigt und verfolgt die Punkte jedes Teams.
Blaster-UI
Mit den besten Praktiken der visuellen Hierarchie aus Wireframe Your Layouts lehrt Sie dieser Abschnitt, wie Sie alle On-Screen-UI-Elemente in Bezug auf den Blaster des Spielers umsetzen. Diese Gruppierung von UI-Elementen nimmt den Großteil des Bildschirmraums in der Mitte des Bildschirms ein, da sie als zentraler Punkt dient, um die Aufmerksamkeit der Spieler auf die Aktion im 3D-Raum zu lenken, und sie hat die größte Bedeutung für das Spiel.
Fadenkreuz
Ein Fadenkreuz ist ein UI-Element, das den Spielern informiert, wo sie beim Abfeuern ihrer Waffe einschlagen werden. Dieses UI-Element ist eine wesentliche Spielanforderung für Erfahrungen im First-Person-Shooter, da die Spieler genau zielen und gegnerische Teammitglieder markieren müssen.
Wie die meisten anderen Erfahrungen im First-Person-Shooter-Genre positioniert die Beispiel-Laser-Tag-Erfahrung das Fadenkreuz in der Mitte des Bildschirms, damit die Spieler einen statischen Punkt haben, auf den sie sich konzentrieren können, während ihr Avatar durch den 3D-Raum bewegt. Neben der Reduzierung der Reisekrankheit ermöglicht diese Platzierung es, das Fadenkreuz wahrnehmbar zu machen und gleichzeitig in die gesamte Umgebung zu integrieren.
Um das Fadenkreuz innerhalb der Beispiel Laser Tag Erfahrung genau nachzubilden:
Fügen Sie ein ImageLabel in das HUDGui ScreenGui-Objekt ein.
Navigieren Sie im Fenster Explorer zum StarterGui-Service.
Bewegen Sie den Mauszeiger über das untergeordnete HUDGui-Objekt und klicken Sie auf das ⊕-Symbol. Ein kontextuelles Menü wird angezeigt.
Fügen Sie aus dem kontextuellen Menü ein ImageLabel ein.
Wählen Sie das neue ImageLabel aus und setzen Sie im Eigenschaften-Fenster,
- Setzen Sie Image auf rbxassetid://14400935446.
- Setzen Sie AnchorPoint auf 0.5, 0.5, um den Ursprungspunkt des Labels in der Mitte des Labels festzulegen (50% von links nach rechts des Labels und 50% von oben nach unten des Labels).
- Setzen Sie BackgroundTransparency auf 1, um den Hintergrund des Labels vollständig transparent zu machen.
- Setzen Sie Name auf Crosshair.
- Setzen Sie Position auf {0.5,0},{0.5,0}, um das Label in die Mitte des Bildschirms zu setzen.
- Setzen Sie ScaleType auf Fit, damit das Bild in seinen Container passt und sich auf verschiedenen Bildschirmgrößen nicht dehnt.
(Optional) Fügen Sie ein UIAspectRatioConstraint in Crosshair ein, um sicherzustellen, dass das Seitenverhältnis des Labels unabhängig von der Bildschirmgröße des Spielers gleich bleibt. Die Beispielkonfiguration setzt ihre UIAspectRatioConstraint.AspectRatio-Eigenschaft auf 0.895.
Trefferanzeige
Eine Trefferanzeige ist ein UI-Element, das nur angezeigt wird, wenn ein Schuss mit einem anderen Spieler des gegnerischen Teams trifft. Wie das Fadenkreuz ist dieses UI-Element eine wesentliche Spielanforderung für Erfahrungen im First-Person-Shooter, da es visuelles Feedback darüber gibt, wann die Spieler erfolgreich ihre Gegner markieren.
Um die Trefferanzeige innerhalb der Beispiel Laser Tag Erfahrung genau nachzubilden:
Fügen Sie ein ImageLabel in das Crosshair ImageLabel-Objekt ein.
Navigieren Sie im Fenster Explorer zum StarterGui-Service.
Bewegen Sie den Mauszeiger über das untergeordnete Crosshair-Objekt und klicken Sie auf das ⊕-Symbol. Ein kontextuelles Menü wird angezeigt.
Fügen Sie aus dem kontextuellen Menü ein ImageLabel ein.
Wählen Sie das neue ImageLabel aus und setzen Sie im Eigenschaften-Fenster,
- Setzen Sie Image auf rbxassetid://14401148736, um das rechteckige Trefferanzeigen-Symbol anzuzeigen.
- Setzen Sie AnchorPoint auf 0.5, 0.5, um den Ursprungspunkt des Labels in der Mitte des Labels festzulegen.
- Setzen Sie BackgroundTransparency auf 1, um den Hintergrund des Labels vollständig transparent zu machen.
- Setzen Sie Position auf {0.5,0},{0.5,0}, um das Label in die Mitte des Bildschirms zu setzen.
- Setzen Sie Name auf Hitmarker.
- Setzen Sie Size auf {0.6, 0},{0.06, 0}, um die Größe der Rechtecke um die Mitte des Fadenkreuzes zu reduzieren.
- Setzen Sie ImageTransparency auf 1, um die Trefferanzeige vollständig transparent zu machen. Die Skripte im nächsten Schritt setzen die Transparenz jedes Mal auf 0 zurück, wenn der Schuss eines Spielers mit einem anderen Spieler des gegnerischen Teams trifft.
Verweisen Sie auf die folgenden ReplicatedStorage-Skripte innerhalb der Beispiel Laser Tag Placedatei, die die Trefferanzeige programmgesteuert anzeigen, wenn ein Schuss mit einem Spieler des gegnerischen Teams trifft.
Das folgende Skript erfordert eine Reihe von Modulscripten, die zusammenarbeiten, um das Haupt-Head-Up-Display (HUD) einzurichten, einschließlich setupHitmarker. Nachdem ein Spieler einer Runde beigetreten ist und seinen Blaster ausgewählt hat, sorgt dieses Skript dafür, dass alle HUD-UI-Elemente entsprechend dem Status des Spielers, dem Gerät und dem Teamstatus angezeigt werden.
Nun wird, wann immer ein Spieler seinen Blaster abfeuert und der Schuss mit einem anderen Spieler in Kontakt kommt, die Trefferanzeige vorübergehend angezeigt.
Blaster-Auswahl
Ein Blaster-Wähler ist ein UI-Komponent, den die Spieler verwenden, um ihren Blastertyp auszuwählen, bevor sie einer Runde beitreten oder wieder beitreten. Die Beispiel-Laser-Tag-Erfahrung bietet zwei Arten von Blastern: einen, der mehrere Strahlen mit einer breiten, horizontalen Streuung erzeugt, und einen anderen, der einen einzigen Strahl erzeugt. Der Blastertyp, den die Spieler auswählen, beeinflusst ihre Strategie während der Runde, und macht dieses UI-Element zu einem wesentlichen Workflow für das gesamte Erlebnis.
Die folgenden Schritte erläutern, wie Sie mehrere Container für die verschiedenen UI-Elementgruppen, einen Header mit einer Aufforderung, die Navigations- und Auswahlknöpfe sowie eine Blaster-Schaltflächen-Vorlage erstellen. Die Skriptlogik für die gesamte Komponente befüllt verschiedene visuelle Eigenschaften in die Blaster-Schaltflächen-Vorlage entsprechend den Configuration-Instanzen, die jeden Blastertyp darstellen.
Diese Einrichtung ermöglicht es Ihnen, zusätzliche Configuration-Instanzen für weitere Blastertypen zu erstellen, die automatisch korrekt im Blaster-Wähler angezeigt werden, ohne dass Sie individuelle Schaltflächen innerhalb von StarterGui.PickABlasterGui erstellen müssen.
Um den Blaster-Wähler innerhalb der Beispiel Laser Tag Erfahrung genau nachzubilden:
Erstellen Sie einen Container für die gesamte Komponente.
Fügen Sie ein Frame in das PickABlaster ScreenGui-Objekt ein.
- Navigieren Sie im Fenster Explorer zum StarterGui-Service.
- Bewegen Sie den Mauszeiger über das untergeordnete PickABlaster-Objekt und klicken Sie auf das ⊕-Symbol. Ein kontextuelles Menü wird angezeigt.
- Fügen Sie aus dem kontextuellen Menü ein Frame ein.
Wählen Sie den neuen Rahmen aus und setzen Sie im Eigenschaften-Fenster,
- Setzen Sie AnchorPoint auf 0.5, 1, um den Ursprungspunkt des Rahmens in der unteren Mitte von sich selbst festzulegen (50% von links nach rechts des Rahmens und 100% von oben nach unten des Rahmens).
- Setzen Sie BackgroundTransparency auf 1, um den Hintergrund des Rahmens vollständig transparent zu machen.
- Setzen Sie Position auf {0.5, 0},{0.9, 0}, um den Rahmen in die untere Mitte des Bildschirms zu setzen (50% von links nach rechts des Bildschirms und 92.4% von oben nach unten des Bildschirms).
- Setzen Sie Size auf {0.8, 0},{0.25, 0}, sodass die UI-Komponenten des Blaster-Wählers einen großen Teil des Bildschirms einnehmen, um die Aufmerksamkeit der Spieler zu erregen (80% horizontal und 25% vertikal).
- Setzen Sie Name auf Component.
(Optional) Fügen Sie ein UIAspectRatioConstraint in Component ein, um sicherzustellen, dass das Seitenverhältnis des Rahmens und seiner Kind-UI-Elemente unabhängig von der Bildschirmgröße des Spielers gleich bleibt. Die Beispielkonfiguration setzt ihre UIAspectRatioConstraint.AspectRatio-Eigenschaft auf 5.
Erstellen Sie einen Container, um UI-Elementgruppen zu halten.
Fügen Sie ein Frame in Component ein.
Wählen Sie den neuen Rahmen aus und setzen Sie im Eigenschaften-Fenster,
- Setzen Sie AnchorPoint auf 0.5, 0.5, um den Ursprungspunkt des Rahmens in der Mitte von sich selbst festzulegen (50% von links nach rechts des Rahmens und 50% von oben nach unten des Rahmens).
- Setzen Sie BackgroundTransparency auf 1, um den Hintergrund des Rahmens vollständig transparent zu machen.
- Setzen Sie Position auf {0.5, 0},{0.375, 0}, um den Rahmen in die obere Mitte des Containers zu setzen (50% von links nach rechts des übergeordneten Rahmens und 37.5% von oben nach unten des übergeordneten Rahmens).
- Setzen Sie Size auf {1, 0},{0.75, 0}, sodass die Auswahl-UI-Komponenten 3/4 des Containers einnehmen (100% horizontal und 75% vertikal des übergeordneten Rahmens).
- Setzen Sie Name auf SelectionFrame.
Erstellen Sie eine Aufforderung für den Blaster-Wähler.
Fügen Sie ein ImageLabel in SelectionFrame ein.
Wählen Sie das neue Label aus und setzen Sie im Eigenschaften-Fenster,
- Setzen Sie AnchorPoint auf 0.5, 1, um den Ursprungspunkt des Labels in der unteren Mitte von sich selbst festzulegen (50% von links nach rechts des Labels und 100% von oben nach unten des Labels).
- Setzen Sie BackgroundTransparency auf 1, um den Hintergrund des Labels vollständig transparent zu machen.
- Setzen Sie LayoutOrder auf -1.
- Setzen Sie Position auf {0.5, 0},{0.22, 0}, um das Label in die obere Mitte des Rahmens zu platzieren (50% von links nach rechts des übergeordneten Rahmens und 22% von oben nach unten des übergeordneten Rahmens).
- Setzen Sie Size auf {0.45, 0},{0.22, 0}, um den Aufforderungsbereich auf fast die Hälfte des Rahmens zu verbreitern (45% horizontal und 22% vertikal des übergeordneten Rahmens).
- Setzen Sie Name auf Header.
- Setzen Sie Image auf rbxassetid://14304828123, um einen Trapez anzuzeigen.
- Setzen Sie ImageTransparency auf 0.15, um den Header halbtransparent zu machen.
(Optional) Fügen Sie ein UIAspectRatioConstraint in das Label ein, um sicherzustellen, dass das Seitenverhältnis des Labels unabhängig von der Bildschirmgröße des Spielers gleich bleibt. Die Beispielkonfiguration setzt ihre UIAspectRatioConstraint.AspectRatio-Eigenschaft auf 13.78.
Fügen Sie ein TextLabel in Header ein, um eine Aufforderung anzuzeigen.
Wählen Sie das neue Label aus und setzen Sie im Eigenschaften-Fenster,
- Setzen Sie AnchorPoint auf 0.5, 0.5, um den Ursprungspunkt des neuen Labels in der Mitte von sich selbst festzulegen (50% von links nach rechts des Labels und 50% von oben nach unten des Labels).
- Setzen Sie BackgroundTransparency auf 1, um den Hintergrund des Labels vollständig transparent zu machen.
- Setzen Sie Position auf {0.5, 0},{0.5, 0}, um das Label in die Mitte seines übergeordneten Labels zu bewegen (50% von links nach rechts des übergeordneten Labels und 50% von oben nach unten des übergeordneten Labels).
- Setzen Sie Size auf {0.6, 0},{0.55, 0}, um den Textbereich auf mehr als die Hälfte des übergeordneten Labels zu verbreitern (60% horizontal und 55% vertikal des übergeordneten Labels).
- Setzen Sie Name auf HeaderTextLabel.
- Setzen Sie FontFace auf Montserrat, um das futuristische Ästhetik zu unterstreichen.
- Setzen Sie Weight auf Medium, um die Schrift zu verdicken.
- Setzen Sie Text auf WÄHLEN SIE EINEN BLASTER.
- Aktivieren Sie TextScaled.
Erstellen Sie den Container für Ihren Blaster-Schaltflächen-Container und die Auswahlpfeile.
Fügen Sie ein ImageLabel in SelectionFrame ein.
Wählen Sie das neue Label aus und setzen Sie im Eigenschaften-Fenster,
- Entfernen Sie den Standardwert für Image.
- Setzen Sie AnchorPoint auf 0.5, 1, um den Ursprungspunkt des Labels in der unteren Mitte von sich selbst festzulegen (50% von links nach rechts des Labels und 100% von oben nach unten des Labels).
- Setzen Sie BackgroundColor auf 0, 0, 0, um das Label schwarz zu machen.
- Setzen Sie BackgroundTransparency auf 0.3, um die Opazität des Labels um 30% zu reduzieren und mit allen schwarzen UI-Elementen im Erlebnis abzugleichen.
- Setzen Sie Position auf {0.5, 0},{1, 0}, um das Label in die untere Mitte des Rahmens zu setzen (50% von links nach rechts des übergeordneten Rahmens und 100% von oben nach unten des übergeordneten Rahmens).
- Setzen Sie Size auf {1, 0},{0.77, 0}, um den Bereich des Labels unter der Aufforderung zu verbreitern (100% horizontal und 77% vertikal des übergeordneten Rahmens).
Runden Sie die Ecken des Containers ab.
- Fügen Sie ein UICorner-Objekt in das Label ein.
- Wählen Sie das neue Eckobjekt aus und setzen Sie im Eigenschaften-Fenster die CornerRadius auf 0.075, 0, um die Ecken abzurunden.
Erstellen Sie den Container für Ihre Blaster-Schaltflächen.
Fügen Sie ein Frame in das Label aus Schritt 4 ein.
Wählen Sie den neuen Rahmen aus und setzen Sie im Eigenschaften-Fenster,
- Setzen Sie AnchorPoint auf 0.5, 0.5, um den Ursprungspunkt des neuen Rahmens in der Mitte von sich selbst festzulegen (50% von links nach rechts des Rahmens und 50% von oben nach unten des Rahmens).
- Setzen Sie BackgroundTransparency auf 1, um den Hintergrund des Rahmens vollständig transparent zu machen.
- Setzen Sie Position auf {0.5, 0},{0.5, 0}, um den Rahmen in die Mitte seines übergeordneten Labels zu setzen (50% von links nach rechts des übergeordneten Rahmens und 50% von oben nach unten des übergeordneten Rahmens).
- Setzen Sie Size auf {0.85, 0},{0.77, 0}, um den Raum des Rahmens auf die meisten Teile des Labels zu verbreitern (85% horizontal und 77% vertikal des übergeordneten Labels).
- Setzen Sie Name auf Container.
Erstellen Sie Abstände für alle zukünftigen Blaster-Schaltflächen.
- Fügen Sie ein UIListLayout-Objekt in den Rahmen aus Schritt 5 ein.
- Wählen Sie das neue Layout-Objekt aus und setzen Sie im Eigenschaften-Fenster,
- Setzen Sie Padding auf 0.035, 0, um Platz zwischen allen zukünftigen Schaltflächen zu schaffen.
- Setzen Sie FillDirection auf Horizontal, sodass jede Schaltfläche nebeneinander angezeigt wird.
- Setzen Sie sowohl HorizontalAlignment als auch VerticalAlignment auf Center, sodass jede Schaltfläche in der Mitte von einander ausgerichtet ist.
Erstellen Sie die linke Navigationsschaltfläche.
Fügen Sie ein ImageButton-Objekt in das ImageLabel aus Schritt 4 ein.
Wählen Sie die neue Schaltfläche aus und setzen Sie im Eigenschaften-Fenster,
- Entfernen Sie den Standardwert für Image.
- Setzen Sie AnchorPoint auf 0, 0.5, um den Ursprungspunkt der neuen Schaltfläche in der linken Mitte von sich selbst festzulegen (0% von links nach rechts der Schaltfläche und 50% von oben nach unten der Schaltfläche).
- Setzen Sie BackgroundTransparency auf 0.15, um visuelles Feedback bei Hover bereitzustellen, dass die Schaltfläche auswählbar ist.
- Setzen Sie Position auf {0.02, 0},{0.5, 0}, um der Schaltfläche einen Puffer von links von ihrem übergeordneten Container zu geben (2% von links nach rechts des übergeordneten Labels und 50% von oben nach unten des übergeordneten Labels).
- Setzen Sie Size auf {0.04, 0},{0.33, 0}, um die Auswahl-Schaltfläche viel kleiner als die Blaster-Schaltflächen zu machen (4% horizontal und 33% vertikal des übergeordneten Rahmens).
- Setzen Sie Name auf NavigationButtonLeft.
Runde die Ecken des Buttons ab.
- Füge ein UICorner-Objekt in den Button ein.
- Wähle das neue Eckenobjekt aus und setze im Eigenschaften-Fenster CornerRadius auf 0.1, 0, um die Ecken abzurunden.
Füge ein ImageLabel-Objekt in den Button ein.
Wähle das neue Label aus und setze im Eigenschaften-Fenster,
- Setze AnchorPoint auf 0.5, 0.5, um den Ursprungspunkt des neuen Labels in die Mitte von sich selbst zu setzen (50 % von links nach rechts des Labels und 50 % von oben nach unten des Labels).
- Setze Position auf {0.45, 0},{0.5, 0}, um das Label in die Nähe der Mitte seines übergeordneten Buttons zu setzen (45 % von links nach rechts des übergeordneten Buttons und 50 % von oben nach unten des übergeordneten Buttons). Dieser Wert ist nicht in der Mitte, da ein Pfeil visuell nicht so aussieht, als wäre er in der Mitte des Buttons bei {0.5, 0},{0.5, 0}.
- Setze Size auf {0.8, 0},{0.8, 0}, um den Labelbereich zu vergrößern und Platz unter dem Prompt zu schaffen (80 % horizontal und 80 % vertikal des übergeordneten Rahmens).
- Setze BackgroundTransparency auf 1, um den Hintergrund des Bildes vollständig transparent zu machen.
- Setze Image auf rbxassetid://14309187238.
- Setze ScaleType auf Fit.
Erstelle den rechten Navigationsbutton.
Dupliziere NavigationButtonLeft.
Wähle den duplizierten Button aus und setze im Eigenschaften-Fenster,
- Setze AnchorPoint auf 1, 0.5, um den Ursprungspunkt des neuen Buttons in die Mitte rechts von sich selbst zu setzen (100 % von links nach rechts des Buttons und 50 % von oben nach unten des Buttons).
- Setze Position auf {0.98, 0},{0.5, 0}, um das Padding an der rechten Seite des Buttons von seinem übergeordneten Container zu gestalten (98 % von links nach rechts des übergeordneten Labels und 50 % von oben nach unten des übergeordneten Labels).
- Setze Name auf NavigationButtonRight.
Wähle das ImageLabel-Kindobjekt aus.
- Setze Rotation auf 180, um das Bild zu drehen.
- Setze Position auf {0.55, 0},{0.5, 0}, um das Label in die Nähe der Mitte seines übergeordneten Buttons zu setzen (55 % von links nach rechts des übergeordneten Buttons und 50 % von oben nach unten des übergeordneten Buttons). Dieser Wert ist nicht in der Mitte, da ein Pfeil visuell nicht so aussieht, als wäre er in der Mitte des Buttons bei {0.5, 0},{0.5, 0}.
Erstelle den SELECT-Button.
Füge ein ImageButton in Component ein. Beachte, wie dieser Prozess den Auswahlbutton von SelectionFrame trennt, sodass du Platz zwischen dem Hauptteil des Komponents und dem Auswahlbutton hinzufügen kannst.
Wähle den neuen Button aus und setze im Eigenschaften-Fenster,
- Entferne den Standardwert für Image.
- Setze AnchorPoint auf 0.5, 1, um den Ursprungspunkt des neuen Buttons in die Mitte unten von sich selbst zu setzen (50 % von links nach rechts des Buttons und 100 % von oben nach unten des Buttons).
- Setze BackgroundTransparency auf 0.15, um visuelles Feedback beim Hover zu geben, dass der Button auswählbar ist.
- Setze Position auf {0.5, 0},{0.99, 0}, um den Button nahe der Mitte unten seines Containers zu setzen (50 % von links nach rechts des übergeordneten Rahmens und 99 % von oben nach unten des übergeordneten Rahmens).
- Setze Size auf {0.17, 0},{0.18, 0}, um den Button unter den Blaster-Buttons zu strecken (17 % horizontal und 18 % vertikal des übergeordneten Rahmens).
- Setze Name auf SelectButton.
Runde die Ecken des Buttons ab.
- Füge ein UICorner-Objekt in den Button ein.
- Wähle das neue Eckenobjekt aus und setze im Eigenschaften-Fenster CornerRadius auf 0.2, 0, um die Ecken abzurunden.
Füge ein TextLabel-Objekt in den Button ein, um einen Aufruf zur Aktion darzustellen.
Wähle das neue Label aus und setze im Eigenschaften-Fenster,
- Setze AnchorPoint auf 0.5, 0.5, um den Ursprungspunkt des neuen Labels in die Mitte von sich selbst zu setzen (50 % von links nach rechts des Labels und 50 % von oben nach unten des Labels).
- Setze BackgroundTransparency auf 1, um den Hintergrund des Labels vollständig transparent zu machen.
- Setze Position auf {0.5, 0},{0.5, 0}, um das Label in die Mitte des Buttons zu bewegen (50 % von links nach rechts des übergeordneten Buttons und 50 % von oben nach unten des übergeordneten Buttons).
- Setze Size auf {0.9, 0},{0.55, 0}, um den Textbereich fast auf die gesamte Breite des übergeordneten Labels zu erweitern (90 % horizontal und 55 % vertikal des übergeordneten Labels).
- Setze Name auf SelectTextLabel.
- Setze FontFace auf Montserrat, um die futuristische Ästhetik zu erfüllen.
- Setze Weight auf Medium, um die Schrift zu verdicken.
- Setze Text auf SELECT.
- Aktiviere TextScaled.
Erstelle ein Blaster-Button-Prefab.
- Erstelle im Service ReplicatedStorage eine Ordnerstruktur, um deine UI-Objekte zu organisieren. Das Beispiel verwendet einen Instances-Ordner mit einem untergeordneten Guis-Ordner.
- Füge ein ImageButton-Objekt in den Guis-Ordner ein.
- Wähle den neuen Button aus und setze im Eigenschaften-Fenster,
- Entferne den Standardwert für Image.
- Setze AnchorPoint auf 0.5, 0.5, um den Ursprungspunkt des neuen Buttons in die Mitte von sich selbst zu setzen (50 % von links nach rechts des Buttons und 50 % von oben nach unten des Buttons).
- Setze BackgroundTransparency auf 0.65, um visuelles Feedback zu geben, dass der Button nicht im Fokus ist. Skripte in Schritt 12 geben programmatisches visuelles Feedback, wenn der Button im Fokus ist.
- Setze LayoutOrder auf 2.
- Setze Name auf BlasterButtonPrefab.
- Setze Size auf {0.8, 0},{0.8, 0}.
- Setze ImageTransparency auf 1, um das Bild vollständig transparent zu machen.
- Füge ein UIAspectRatioConstraint in BlasterButtonPrefab ein, um sicherzustellen, dass das Seitenverhältnis des Buttons egal ist, gleich bleibt unabhängig von der Bildschirmgröße des Spielers.
- Runde die Ecken des Buttons ab.
- Füge ein UICorner-Objekt in BlasterButtonPrefab ein.
- Wähle das UICorner aus und setze im Eigenschaften-Fenster CornerRadius auf 0.05, 0, um die Ecken abzurunden.
- Füge ein ImageLabel in BlasterButtonPrefab ein.
- Wähle das neue Label aus und setze im Eigenschaften-Fenster,
- Entferne die Platzhalter-Asset-ID im Image-Eigenschaft. Die Skripte in Schritt 7 fügen programmgesteuert das Porträt des Spielers in das Bildlabel ein.
- Setze AnchorPoint auf 0.5, 0.5, um den Ursprungspunkt des neuen Labels in die Mitte von sich selbst zu setzen (50 % von links nach rechts des Labels und 50 % von oben nach unten des Labels).
- Setze BackgroundTransparency auf 1, um den Hintergrund des Labels vollständig transparent zu machen.
- Setze Position auf {0.52, 0},{0.497, 0}, um das Label in die Nähe der Mitte seines übergeordneten Buttons zu setzen (52 % von links nach rechts des übergeordneten Buttons und 49,7 % von oben nach unten des übergeordneten Buttons). Dieser Wert ist nicht in der Mitte, da der Blaster visuell nicht so aussieht, als wäre er in der Mitte des Buttons bei {0.5, 0},{0.5, 0}.
- Setze Size auf {1.20, 0},{0.9, 0}, um den Labelbereich außerhalb des Buttons zu erweitern (120 % horizontal und 90 % vertikal des übergeordneten Buttons).
- Setze ScaleType auf Fit.
Referenziere die folgenden ReplicatedStorage-Skripte innerhalb der Beispiel-Laser Tag-Platzdatei, die programmatisch Buttons für jeden Blaster anzeigen, die Buttons skalieren, wenn ein Spieler einen Button auswählt, der nicht im Fokus ist, und die Blasterauswahl eines Spielers an ihren Avatar anhängen.
Das folgende Skript erfordert eine Reihe von Skripten, die zusammenarbeiten, um den Blasterauswähler zu erstellen. Wenn ein Spieler der Erfahrung beitritt oder nach dem Erreichen von null Gesundheit wieder in eine Runde zurückkehrt, aktiviert dieses Skript alle UI-Elemente des Blasterauswählers, bis der Spieler seine Auswahl trifft.
Jetzt wird, wann immer ein Spieler der Erfahrung beitritt oder nach dem Erreichen von null Gesundheit wieder in eine Runde zurückkehrt, die UI des Blasterauswählers angezeigt, sie können eine Auswahl treffen und jeder Button funktioniert wie erwartet.
Blast Button
Ein Blast-Button ist ein UI-Komponente, die Spieler verwenden, um ihren Blaster zu feuern, wenn sie auf die Erfahrung über ein mobiles oder Tablet-Gerät zugreifen. Die Beispiel-Laser-Tag-Erfahrung verwendet einen Blast-Button mit einem Symbol, das sowohl ein Fadenkreuz als auch einen Blast darstellt, um die Funktion des Buttons ohne Text zu kommunizieren.
Um den Blast-Button genau innerhalb der Beispiel-Laser Tag-Erfahrung nachzubilden:
Füge ein ImageButton in das HUDGui ScreenGui-Objekt ein.
Navigiere im Explorer-Fenster zum Service StarterGui.
Fahre über das untergeordnete HUDGui-Objekt und klicke dann auf das ⊕-Symbol. Ein kontextuelles Menü wird angezeigt.
Wähle im kontextuellen Menü ein ImageButton ein.
Bewege im Ansichtsfenster den Button an die Stelle, an der der Daumen eines Spielers normalerweise ruht, damit du ein visuelles Gefühl dafür bekommst, wie der Button auf dem Gerät eines Spielers aussehen wird, und setze im Eigenschaften-Fenster,
- Setze Image auf rbxassetid://18308375035, um das Blast-Button-Symbol anzuzeigen.
- Setze PressedImage auf rbxassetid://18308372558, um eine invertierte Version des Blast-Button-Symbols anzuzeigen, wenn ein Spieler den Button drückt.
- Setze BackgroundTransparency auf 1, um den Hintergrund des Labels vollständig transparent zu machen.
- Setze Name auf BlastButton.
- Setze ScaleType auf Fit, damit das Bild in sein Container passt und sich auf verschiedenen Bildschirmgrößen nicht streckt.
- Setze ImageTransparency auf 0.3, um die Opazität des Labels zu reduzieren, sodass es mit allen schwarzen UI-Elementen in der Erfahrung übereinstimmt.
Füge ein UIAspectRatioConstraint in BlastButton ein, um sicherzustellen, dass das Seitenverhältnis des Buttons egal bleibt unabhängig von der Bildschirmgröße des Spielers.
Referenziere die folgenden ReplicatedStorage-Skripte innerhalb der Beispiel-Laser Tag-Platzdatei, die programmatisch den Blaster-Button anzeigen, wenn ein Spieler Touch-Eingaben auf einem Gerät verwendet, das Touch-Steuerung akzeptiert.
Das folgende Skript erfordert eine Reihe von Modulscripts, die zusammenarbeiten, 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-UI-Elemente angemessen für den Status des Spielers, das Gerät und den Teamstatus angezeigt werden.
Jetzt, wenn ein Spieler der Erfahrung beitritt und Touch-Eingaben auf einem Gerät verwendet, das Touch-Steuerungen akzeptiert, wird der Blast-Button oben rechts vom Sprung-Button angezeigt.
Spieler-UI
Folgend den besten Praktiken der visuellen Hierarchie aus Wireframe Your Layouts, lehrt dieser Abschnitt, wie man alle On-Screen UI-Elemente implementiert, die sich auf den Zustand des Spielers beziehen. Diese Gruppierung von UI-Elementen befindet sich in der Nähe der Seiten des Bildschirms, da die Spieler diese peripheren Informationen erfassen können, ohne ihre Aufmerksamkeit vom Gameplay abzulenken.
Spielerindikator
Ein Spielerindikator ist eine UI-Komponente, auf die Spieler zugreifen, um schnell zu entschlüsseln, zu welchem Team sie gehören, sobald sie in die Spawn-Zone ihres Teams spawnen. Die Beispiel-Laser-Tag-Erfahrung bietet zwei Versionen des Spielerindikators, abhängig davon, ob der Spieler im grünen oder rosa Team ist.
Im Einklang mit den Richtlinien aus Wählen Sie ein Farbthema kombinieren beide Versionen des Spielerindikators die Teamfarbe mit einem einzigartigen, einfachen Symbol mit minimalen Details, sodass sie auf kleinen Bildschirmen lesbar bleiben. Die Bereitstellung von zwei Formen visuellen Feedbacks ist wichtig, da es hilft, das Design für Spieler mit Farbenblindheit zugänglich zu halten.
Um die Spielerindikator-Komponente genau innerhalb der Beispiel-Laser Tag-Erfahrung nachzubilden:
Füge ein Frame in das HUDGui ScreenGui-Objekt ein.
- Navigiere im Explorer-Fenster zum Service StarterGui.
- Fahre über das untergeordnete HUDGui-Objekt und klicke dann auf das ⊕-Symbol. Ein kontextuelles Menü wird angezeigt.
- Wähle im kontextuellen Menü ein Frame ein.
Wähle das neue Frame aus und setze im Eigenschaften-Fenster,
Setze AnchorPoint auf 0, 1, um den Ursprungspunkt des Rahmens in die Mitte unten zu setzen (0 % von links nach rechts des Rahmens und 100 % von oben nach unten des Rahmens).
Setze BackgroundTransparency auf 1, um den Hintergrund des Labels vollständig transparent zu machen.
Setze Name auf PlayerDisplay.
Setze Position auf {0.02, 0},{0.97, 0}, um den Rahmen in die Nähe der unteren linken Ecke des Bildschirms zu setzen.
Setze Size auf {0.23, 0},{0.08, 0}, um den Rahmen sowohl zu verkürzen als auch zu verbreitern.
Aktiviere ClipsDescendants, um untergeordnete GuiObjects zu trimmen, die über den Rahmen hinausgehen.
Erstelle die polygonale Form.
Füge ein ImageLabel in PlayerDisplay ein.
Wähle das neue Label aus und setze im Eigenschaften-Fenster,
- Setze Image auf rbxassetid://14304828123, um das Trapez-Symbol anzuzeigen.
- Setze AnchorPoint auf 1, 1, um den Ursprungspunkt des Labels in die untere rechte Ecke von sich selbst zu setzen (100 % von links nach rechts des Labels und 100 % von oben nach unten des Labels).
- Setze BackgroundTransparency auf 1, um den Hintergrund des Labels vollständig transparent zu machen.
- Setze Name auf Block.
- Setze Position auf {1,0},{1,0}, um das Label an die rechte Seite des Rahmens zu setzen.
- Setze Size auf {1.858, 0},{0.581, 0}, um das Label außerhalb des Rahmens zu verbreitern und es auf etwas mehr als die Hälfte der Länge des Rahmens zu verkürzen.
- Setze ImageTransparency auf 0.15, um das Label leicht transparent zu machen.
- Setze ScaleType auf Fit, sodass das Bild in sein Container passt und sich auf verschiedenen Bildschirmgrößen nicht streckt.
- Füge ein UIAspectRatioConstraint in Block ein, um sicherzustellen, dass das Label und seine untergeordneten UI-Elemente das Seitenverhältnis unabhängig von der Bildschirmgröße des Spielers beibehalten.
- Wähle die neue Einschränkung aus und setze im Eigenschaften-Fenster AspectRatio auf 13.78.
Erstelle die Box für das Porträt des Spielers.
Füge ein ImageLabel in PlayerDisplay ein.
Wähle das neue Label aus und setze im Eigenschaften-Fenster,
- Entferne die Platzhalter-Asset-ID in der Image-Eigenschaft. Die Skripte in Schritt 7 fügen programmgesteuert das Porträt des Spielers in das Bildlabel ein.
- Setze AnchorPoint auf 0, 1, um den Ursprungspunkt des Labels in die untere linke Ecke von sich selbst zu setzen (0 % von links nach rechts des Labels und 100 % von oben nach unten des Labels).
- Setze BackgroundColor3 auf 0, 0, 0, um die Hintergrundfarbe des Labels auf schwarz zu setzen.
- Setze BackgroundTransparency auf 0.3, um die Opazität des Labels um 30 % zu reduzieren und mit allen schwarzen UI-Elementen in der Erfahrung übereinzustimmen.
- Setze Name auf PlayerPortrait.
- Setze Position auf {0.11, 0},{1, 0}, um das Label an die linke Seite der polygonalen Form zu setzen.
- Setze Size auf {0.23, 0},{1, 0}, um das Label zu verkleinern.
- Setze ImageTransparency auf 0.15, um das Label leicht transparent zu machen.
- Setze ScaleType auf Fit, sodass das Bild in sein Container passt und sich auf verschiedenen Bildschirmgrößen nicht streckt.
- Füge ein UIAspectRatioConstraint in PlayerPortrait ein, um sicherzustellen, dass das Label und seine untergeordneten UI-Elemente das Seitenverhältnis unabhängig von der Bildschirmgröße des Spielers beibehalten.
- Füge ein UICorner in PlayerPortrait ein und setze im Eigenschaften-Fenster CornerRadius auf 0.05, 0, um die Ecken leicht abzurunden.
Erstelle das Textlabel für den Namen des Spielers.
Füge ein TextLabel-Objekt in PlayerDisplay ein.
Wähle das neue Label aus und setze im Eigenschaften-Fenster,
- Setze AnchorPoint auf 0, 0.5, um den Ursprungspunkt des neuen Buttons in die linke Mitte von sich selbst zu setzen (0 % von links nach rechts des Buttons und 50 % von oben nach unten des Buttons).
- Setze BackgroundTransparency auf 1, um den Hintergrund des Labels vollständig transparent zu machen.
- Setze Name auf PlayerNameTextLabel.
- Setze Position auf {0.35, 0},{0.72, 0}, um das Label an die rechte Seite seines Containers zu setzen (35 % von links nach rechts des übergeordneten Labels und 72 % von oben nach unten des übergeordneten Labels).
- Setze Size auf {0.52, 0},{0.3, 0}, damit der Text den größten Teil des polygonalen Bereichs einnehmen kann (52 % horizontal und 30 % vertikal des übergeordneten Rahmens).
- Setze FontFace auf Montserrat, um die futuristische Ästhetik zu erfüllen.
- Setze Weight auf Bold, um die Schrift zu verdicken.
- Entferne den Platzhaltertext in der Text-Eigenschaft. Die Skripte in Schritt 7 fügen programmgesteuert den Namen des Spielers in das Textlabel ein.
- Aktiviere TextScaled.
- Setze TextXAlignment auf Left.
Erstelle die Team-Symbole und -Farben, die links vom Porträt des Spielers angezeigt werden.
Füge einen Ordner in PlayerDisplay ein und benenne ihn um in TeamIcons.
Erstelle das grüne Team-Symbol und die Farbe.
- Füge ein ImageLabel in TeamIcons ein.
- Wähle das neue Label aus und setze im Eigenschaften-Fenster,
- Setze AnchorPoint auf 0, 1, um den Ursprungspunkt des Labels in die untere linke Ecke von sich selbst zu setzen (0 % von links nach rechts des Labels und 100 % von oben nach unten des Labels).
- Setze BackgroundColor3 auf 88, 218, 171, um die Hintergrundfarbe des Labels auf mintgrün zu setzen.
- Setze Name auf TeamAIcon.
- Setze Position auf {0, 0},{1, 0}, um das Label an die linke Seite des Rahmens zu setzen.
- Setze Size auf {0.135, 0},{0.58, 0}, um das Label links des Spielerporträts zu verkleinern.
- Setze ImageTransparency auf 1, um das Label transparent zu machen.
- Konfiguriere ein benutzerdefiniertes Attribut, um zu verfolgen, dass dieses Label für das grüne Team bestimmt ist. Dieser Schritt ist sehr wichtig für die Skripte in Schritt 7.
- Navigiere im Eigenschaften-Fenster zum Abschnitt Attribute und klicke auf das Plus-Symbol. Ein Popup-Dialog wird angezeigt.
- Gib im Name-Feld teamColor ein.
- Wähle im Dropdown-Menü Type BrickColor aus.
- Klicke auf die Schaltfläche Speichern.
- Setze das neue teamColor-Attribut auf Mint.
- Füge ein UIAspectRatioConstraint in TeamAIcon ein, um sicherzustellen, dass das Label und seine untergeordneten UI-Elemente das Seitenverhältnis unabhängig von der Bildschirmgröße des Spielers beibehalten.
- Erstelle das Symbol.
- Füge ein ImageLabel in TeamAIcon ein.
- Wähle das neue Label aus und setze im Eigenschaften-Fenster,
- Setze Image auf rbxassetid://14309678670, um das Icon des grünen Teams anzuzeigen.
- Setze AnchorPoint auf 0.5, 0.5, um den Ursprungspunkt des Labels in die Mitte von sich selbst zu setzen (50 % von links nach rechts des Labels und 50 % von oben nach unten des Labels).
- Setze BackgroundTransparency auf 1, um den Hintergrund des Labels vollstä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 Labels zu setzen.
- Setze Size auf {0.7, 0},{0.6, 0}, um das Label zu verkleinern.
- Setze ScaleType auf Fit, sodass das Bild in sein Container passt und sich auf verschiedenen Bildschirmgrößen nicht streckt.
Erstelle das rosa Team-Symbol und die Farbe.
- Dupliziere TeamAIcon und seine Kinder.
- Wähle das duplizierte TeamAIcon aus und setze im Eigenschaften-Fenster,
- Setze BackgroundColor3 auf 255, 170, 255, um die Hintergrundfarbe des Labels auf zartrosa zu setzen.
- Setze Name auf TeamBIcon.
- Setze das teamColor-Attribut auf Carnation Pink.
- Wähle das duplizierte Icon-Kind von TeamBIcon aus und setze im Eigenschaften-Fenster Image auf rbxassetid://14309678549, um das rosa Team-Symbol anzuzeigen.
Referenziere die folgenden ReplicatedStorage-Skripte innerhalb der Beispiel-Laser Tag-Platzdatei, die programmatisch den Spielerindikator mit der entsprechenden Teamfarbe und -symbol anzeigen, während ein Spieler aktiv in einer Runde ist.
Das folgende Skript erfordert eine Reihe von Modulscripts, die zusammenarbeiten, 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-UI-Elemente angemessen für den Status des Spielers, das Gerät und den Teamstatus angezeigt werden.
Jetzt wird, wann immer ein Spieler der Runde beitritt oder wieder beitritt, nachdem er respawned ist, der Spielerindikator in der unteren linken Ecke ihres Bildschirms angezeigt.
Schutzschirm
Ein Schutzschirm ist ein UI-Element, das den Sichtbereich überlagert, um Spieler darüber zu informieren, dass sie vor dem Feuer des gegnerischen Teams sicher sind, während sie einer Runde beitreten oder wieder beitreten. Folgend den ästhetischen Richtlinien für Icons von Wähle einen Kunststil, verwendet die Beispiel-Laser-Tag-Erfahrung ein halbtransparentes, sechseckiges Muster, um ein Forcefield zu symbolisieren. Diese Designentscheidung verstärkt nicht nur den futuristischen Gesamtstil aller UI in der Erfahrung, sondern kommuniziert auch den Zustand des Spielers ohne Text oder zusätzliche Hinweise.
Um den Forcefield-Bildschirm genau innerhalb der Beispiel-Laser Tag-Erfahrung nachzubilden:
Füge ein ImageLabel in das ForceFieldGui ScreenGui-Objekt ein.
Navigiere im Explorer-Fenster zum Service StarterGui.
Fahre über das untergeordnete ForceFieldGui-Objekt und klicke dann auf das ⊕-Symbol. Ein kontextuelles Menü wird angezeigt.
Wähle im kontextuellen Menü ein ImageLabel ein.
Wähle das neue Label aus und setze im Eigenschaften-Fenster,
Setze Image auf rbxassetid://14462567888.
Setze BackgroundTransparency auf 0.8, um das Forcefield transluzent zu machen.
Setze Size auf {1, 0},{1, 0}, um das Bild den gesamten Bildschirm ausfüllen zu lassen (100 % horizontal und 100 % vertikal des übergeordneten ScreenGui).
Setze ScaleType auf Tile, damit das Sechseck über den gesamten Bildschirm fließen kann.
Setze TileSize auf {0, 104},{0, 180}.
Füge ein UIGradient-Objekt in das Label ein.
Wähle das neue Gradient-Objekt aus und setze im Eigenschaften-Fenster,
Setze Color auf eine Farbsequenz, die blau beginnt, dann weiß wird und dann wieder blau.
Setze Color auf 120, 192, 250, um allen Sechsecken einen hellblauen Farbton zu geben.
Klicke auf die Color-Eigenschaft und dann auf die ⋯-Schaltfläche. Ein Farbsequenz-Popup 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 an der Farbsequenz, bis du einen Time-Wert von 0.05 erreichst, und klicke dann auf das kleine Quadrat neben Color, um das Farbe-Popup-Fenster zu öffnen.
Wähle ein helles Weiß aus und schließe das Popup-Fenster.
Klicke und ziehe an der Farbsequenz, bis du einen Time-Wert von 0.95 erreichst, öffne dann erneut das Farbe-Popup-Fenster und wähle die gleiche Farbe Weiß wie zuvor aus.
Setze Rotation auf 225, damit der blaue Teil deiner Farbsequenz in der oberen linken und unteren rechten Ecke angezeigt wird.
Setze Transparency auf eine Zahlensequenz, die den Forcefield-Schirm so aussehen lässt, als würde er schimmern.
Klicke auf die Transparency-Eigenschaft und dann auf die ⋯-Schaltfläche. Ein Nummernsequenz-Popup wird angezeigt. Jeder Punkt am Anfang und Ende der Nummernsequenz ist ein Schlüsselpunkt, der den Transparenzwert der Eigenschaft an diesem Punkt des Bildes von links nach rechts bestimmt.
Setze die folgenden Zeit- und Wert-Eigenschaften in der Nummernsequenz fest:
- Time = 0, Value = 0.25
- Time = .101, Value = 0.875
- Time = .183, Value = 0
- Time = .3, Value = 1
- Time = .7, Value = 1
- Time = 1, Value = 0.9
Dupliziere das ImageLabel aus Schritt 2.
Wähle das UIGradient-Objekt innerhalb des duplizierten Labels aus und setze im Eigenschaften-Fenster,
Setze Rotation auf -45, um das Bild so zu drehen, dass es fast entlang der Y-Achse spiegelt.
Modifiziere Transparency, um das Schimmern organischer aussehen zu lassen.
- Klicke auf die Transparency-Eigenschaft und dann auf die ⋯-Schaltfläche. Ein Nummernsequenz-Popup wird angezeigt.
- Wähle den dritten Schlüsselrahmen aus und klicke auf die Schaltfläche Löschen.
Referenziere die folgenden ReplicatedStorage-Skripte innerhalb der Beispiel-Laser Tag-Platzdatei, die programmatisch den Forcefield-Bildschirm anzeigen, während ein Spieler einer Runde beitritt oder wieder beitritt.
Das folgende ReplicatedStorage.ForceFieldClientVisuals Client-Skript ersetzt die standardmäßigen ForceField-Visuals durch StarterGui.ForceFieldGui. Wenn Spieler in einem Erlebnis laden und an einem SpawnLocation mit einer Duration-Eigenschaft, die größer als 0 ist, erscheinen, ist das Standardverhalten in jedem Erlebnis, ihrem Avatar eine schützende blaue Kugel zu geben, die sie für kurze Zeit daran hindert, Gesundheit zu verlieren.
Dieses Skript beginnt damit, dass es darauf lauscht, wann das ForceField zu einem Charakter hinzugefügt wird, deaktiviert die standardmäßigen First-Person Force Field-Visuals und aktiviert das ForceFieldGui ScreenGui-Objekt. Beachten Sie, dass dies keine Auswirkungen auf Third-Person-Visuals hat, wenn die Spieler andere Spieler sehen, die wieder ins Erlebnis einsteigen.
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 deaktiviertem ForceField 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 zeigt die neue Force Field-Bildschirmbenutzeroberfläche jedes Mal an, wenn ein Spieler der Runde beitritt oder erneut beitritt, nachdem er respawned ist, anstelle der standardmäßigen First-Person ForceField-Visuals.
Respawn-Bildschirm
Der Respawn-Bildschirm ist ein UI-Element, das das Sichtfeld abdunkelt, um die Spieler darüber zu informieren, dass sie ausgeschaltet wurden und der Server sie zurück zu ihrer Spawnzone respawnt. Dieses UI-Element ist wichtig, da es den Spielern Zeit gibt, zu verarbeiten, dass sie ausgeschaltet wurden, und ihre nächste Bewegung zu planen, bevor sie wieder der aktiven Runde beitreten.
Für weitere Informationen zum benutzerdefinierten Respawning-Verhalten im Beispiel-Laser-Tag-Erlebnis siehe Respawn Characters des Gameplay Scripting-Lehrplans.
Um den Respawn-Bildschirm exakt innerhalb des Beispiel Laser Tag-Erlebnisses zu erstellen:
Erstellen Sie das Informationsbanner in der Mitte.
Fügen Sie ein ImageLabel in das OutStateGui ScreenGui-Objekt ein.
Navigieren Sie im Explorer-Fenster zum StarterGui-Dienst.
Fahren Sie mit der Maus über das untergeordnete OutStateGui-Objekt und klicken Sie dann auf das ⊕-Symbol. Ein Kontextmenü wird angezeigt.
Fügen Sie aus dem Kontextmenü ein ImageLabel hinzu.
Wählen Sie das neue Label aus und setzen Sie im Properties-Fenster,
Setzen Sie AnchorPoint auf 0.5, 0.5, um den Ursprungspunkt der neuen Schaltfläche in die Mitte zu setzen (50 % von links nach rechts des Labels und 50 % von oben nach unten des Labels).
Setzen Sie BackgroundTransparency auf 1, um den Hintergrund des Labels vollständig transparent zu machen.
Setzen Sie Position auf {0.5, 0},{0.5, 0}, um das Label in die Mitte seines Containers zu setzen (50 % von links nach rechts des übergeordneten ScreenGui und 50 % von oben nach unten des übergeordneten ScreenGui).
Setzen Sie Size auf {0.48, 0},{0.06, 0}, um das Label zu verbreitern (48 % horizontal und 6 % vertikal des übergeordneten ScreenGui).
Setzen Sie Name auf Block.
Setzen Sie Image auf rbxassetid://14304827265, um das Bild zu einem Trapez zu machen.
Setzen Sie ImageColor auf 0,0,0, um das Trapez schwarz zu machen.
Setzen Sie ImageTransparency auf 0.3, um die Opazität des Labels um 30 % zu verringern und allen schwarzen UI-Elementen im Erlebnis zu entsprechen.
Fügen Sie ein UIAspectRatioConstraint in Block ein, um sicherzustellen, dass das Label und seine untergeordneten UI-Elemente das Seitenverhältnis unabhängig von der Bildschirmgröße des Spielers beibehalten.
Wählen Sie die neue Einschränkung aus und setzen Sie im Properties-Fenster AspectRatio auf 13.78.
Fügen Sie ein TextLabel in Block für den Informationstext ein.
Wählen Sie das neue Label aus und setzen Sie im Properties-Fenster,
Setzen Sie AnchorPoint auf 0.5, 0.5, um den Ursprungspunkt des Labels in die Mitte zu setzen (50 % von links nach rechts des Labels und 50 % von oben nach unten des Labels).
Setzen Sie BackgroundTransparency auf 1, um den Hintergrund des Labels vollständig transparent zu machen.
Setzen Sie Position auf {0.5, 0},{0.5, 0}, um das Label in die Mitte seines übergeordneten Labels zu setzen (50 % von links nach rechts des übergeordneten Labels und 50 % von oben nach unten des übergeordneten Labels).
Setzen Sie Size auf {.85, 0},{0.55, 0}, damit der Text den größten Teil des Trapezbereichs einnehmen kann (85 % horizontal und 55 % vertikal des übergeordneten Labels).
Setzen Sie Name auf BodyTextLabel.
Setzen Sie FontFace auf Montserrat, um die futuristische Ästhetik zu erfüllen.
Setzen Sie Weight auf Bold, um die Schrift zu verdicken.
Setzen Sie Text auf Respawning….
Setzen Sie TextColor3 auf 255, 255, 255, um den Text weiß zu machen.
Aktivieren Sie TextScaled.
Erstellen Sie die Kopfzeile.
Fügen Sie ein ImageLabel in Block ein.
Wählen Sie das neue Label aus und setzen Sie im Properties-Fenster,
Setzen Sie AnchorPoint auf 0.5, 1, um den Ursprungspunkt des Labels in der unteren Mitte zu setzen (50 % von links nach rechts des Labels und 100 % von oben nach unten des Labels).
Setzen Sie BackgroundTransparency auf 1, um den Hintergrund des Labels vollständig transparent zu machen.
Setzen Sie Position auf {0.5, 0},{0, 0}, um das Label in der oberen Mitte seines übergeordneten Labels zu platzieren (50 % von links nach rechts des übergeordneten Labels und 0 % von oben nach unten des übergeordneten Labels).
Setzen Sie Size auf {0.46, 0},{0.56, 0}, um das Label zu verbreitern (46 % horizontal und 56 % vertikal des übergeordneten Labels).
Setzen Sie Name auf Header.
Setzen Sie Image auf rbxassetid://14304826985, um das Bild zu einem multidirektionalen Verlauf zu machen.
Setzen Sie ImageColor auf 245, 46, 46, um den Verlauf rot zu machen, um zu signalisieren, dass der Spieler vorübergehend inaktiv ist, während er aus der Runde ausgeschaltet ist.
Fügen Sie ein TextLabel in Header für den Informationstext ein.
Wählen Sie das neue Label aus und setzen Sie im Properties-Fenster,
Setzen Sie AnchorPoint auf 0.5, 0.5, um den Ursprungspunkt des Labels in die Mitte zu setzen (50 % von links nach rechts des Labels und 50 % von oben nach unten des Labels).
Setzen Sie BackgroundTransparency auf 1, um den Hintergrund des Labels vollständig transparent zu machen.
Setzen Sie Position auf {0.5, 0},{0.5, 0}, um das Label in die Mitte seines übergeordneten Labels zu setzen (50 % von links nach rechts des übergeordneten Labels und 50 % von oben nach unten des übergeordneten Labels).
Setzen Sie Size auf {.85, 0},{0.55, 0}, damit der Text den größten Teil des Verlaufsbereichs einnehmen kann (85 % horizontal und 55 % vertikal des übergeordneten Labels).
Setzen Sie Name auf HeaderTextLabel.
Setzen Sie FontFace auf Montserrat, um die futuristische Ästhetik zu erfüllen.
Setzen Sie Weight auf Black, um die Schrift zu verdicken.
Setzen Sie Text auf TAGGED - DU BIST RAUS!
Setzen Sie TextColor3 auf 255, 255, 255, um den Text weiß zu machen.
Aktivieren Sie TextScaled.
Erstellen Sie den Verlauf um die Ränder des Bildschirms.
- Fügen Sie ein ImageLabel in OutStateGui ein.
- Wählen Sie das neue Label aus und setzen Sie im Properties-Fenster,
- Setzen Sie AnchorPoint auf 0.5, 0.5, um den Ursprungspunkt des Labels in die Mitte zu setzen (50 % von links nach rechts des Labels und 50 % von oben nach unten des Labels).
- Setzen Sie BackgroundColor3 auf 0,0,0, um die Hintergrundfarbe des Labels auf schwarz zu setzen.
- Setzen Sie BackgroundTransparency auf 0.5, um den Hintergrund des Labels halbtransparent zu machen.
- Setzen Sie Position auf {0.5, 0},{0.5, 0}, um das Label in die Mitte seines Containers zu setzen (50 % von links nach rechts des übergeordneten ScreenGui und 50 % von oben nach unten des übergeordneten ScreenGui).
- Setzen Sie Size auf {1, 0},{1, 0}, um das Label über den ganzen Bildschirm zu verbreitern (100 % horizontal und 100 % vertikal des übergeordneten ScreenGui).
- Setzen Sie ZIndex auf -1, um den Verlauf hinter die anderen UI-Elemente anzuzeigen.
- Setzen Sie Name auf Header.
- Setzen Sie Image auf rbxassetid://14309518613, um das Bild zu einem Randverlauf zu machen.
- Setzen Sie ImageTransparency auf 0.1, um den Verlauf leicht durchscheinend zu machen.
Um die Leistung zu verbessern, können Sie das Bild-Asset überspringen und stattdessen ein UIGradient-Objekt mit einer benutzerdefinierten Transparenz-Zahlensequenz verwenden. Erfahren Sie mehr über diese Verlaufstechnik in UI Appearance Modifiers - Gradient.
Verweisen Sie auf das folgende ReplicatedStorage-Skript innerhalb der Beispiel Laser Tag-Platzdatei, das programmgesteuert den Respawn-Bildschirm anzeigt, wenn die Gesundheit eines Spielers null erreicht und sie sich im Prozess des Respawnens zurück zu ihrer Spawnzone befinden.
Das folgende ReplicatedStorage.PlayerStateHandler Client-Skript enthält Funktionen, die verschiedene Arten von Verhalten entsprechend dem playerState-Attribut auslösen. Alle Ereignisantworten sind logisch in diesem Skript gruppiert, da sie ein ähnliches Verhalten erfordern, um Spielersteuerungen, Kamerabewegung und welche UI-Schicht sichtbar ist, zu aktivieren oder zu deaktivieren.
Wenn die Gesundheit eines Spielers null erreicht, wird sein playerState zu TaggedOut, was die Funktion onTaggedOut() auslöst. onTaggedOut() löst dann direkt das folgende Verhalten aus:
- Der Spieler kann sich in der Arena nicht bewegen.
- Der Spieler kann seine Kamera nicht bewegen.
- Der Spieler kann seinen Blaster nicht benutzen.
- Das StarterGui.OutStateGui wird ausschließlich aktiviert.
Wenn der Spieler respawnt, wird sein playerState zu SelectingBlaster, was die Funktion onSelectingBlaster() auslöst. onSelectingBlaster() aktiviert dann ausschließlich das StarterGui.PickABlasterGui, wodurch der Respawn-Bildschirm automatisch deaktiviert wird. Weitere Informationen zu diesen Bedingungen finden Sie in Handle Client State des Gameplay Scripting-Lehrplans.
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 aktiviert werden sollen.
for _, screenGui in guiLayers do
screenGui.Enabled = screenGui == enabledGui
end
end
local function onSelectingBlaster()
-- Aktiviere die Kamera, damit die Spieler sich umsehen können, während sie einen Blaster auswählen
togglePlayerCamera(true)
togglePlayerMovement(false)
setGuiExclusivelyEnabled(playerGui.PickABlasterGui)
-- Deaktiviere den Blaster, während ein Blaster ausgewählt wird
localPlayer:SetAttribute(PlayerAttribute.blasterStateClient, BlasterState.Disabled)
end
local function onPlaying()
-- Aktiviere die Bewegungen des Spielers nach der Auswahl eines Blasters
togglePlayerMovement(true)
setGuiExclusivelyEnabled(playerGui.HUDGui)
-- Aktiviere den Blaster während des Spiels
localPlayer:SetAttribute(PlayerAttribute.blasterStateClient, BlasterState.Ready)
-- Plane die Zerstörungslogik des Force Fields, wenn der Spieler zu spielen beginnt
scheduleDestroyForceField()
end
local function onTaggedOut()
-- Deaktiviere die Steuerungen, während der Spieler ausgeschaltet ist
togglePlayerMovement(false)
togglePlayerCamera(false)
setGuiExclusivelyEnabled(playerGui.OutStateGui)
-- Deaktiviere den Blaster, während der Spieler ausgeschaltet ist
localPlayer:SetAttribute(PlayerAttribute.blasterStateClient, BlasterState.Disabled)
end
local function onInLobby()
-- Aktiviere die Steuerungen, während der Spieler in der Lobby ist
togglePlayerMovement(true)
togglePlayerCamera(true)
-- Blende alle HUDs aus, während der Spieler in der Lobby ist
setGuiExclusivelyEnabled(nil)
-- Deaktiviere den Blaster, während der Spieler in der Lobby ist
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(`Ungültiger Spielerstatus ({newPlayerState})`)
end
end
-- Bearbeite den anfänglichen Spielerstatus, falls festgelegt
local initialPlayerState = localPlayer:GetAttribute(PlayerAttribute.playerState)
onPlayerStateChanged(initialPlayerState)
local function updateFromPlayerState()
onPlayerStateChanged(localPlayer:GetAttribute(PlayerAttribute.playerState))
end
-- Bearbeite zukünftige Spielerstatus-Updates
localPlayer:GetAttributeChangedSignal(PlayerAttribute.playerState):Connect(updateFromPlayerState)
-- Stelle sicher, dass Änderungen auch nach dem Respawn angewendet werden
localPlayer.CharacterAdded:Connect(updateFromPlayerState)
Jetzt zeigt der Respawn-Bildschirm jedes Mal an, wenn die Gesundheit eines Spielers null erreicht, bis der Spieler zurück zu seiner Spawnzone respawnt.
Jetzt, da Sie mit gängigen GuiObjects für die Bildschirmbenutzeroberfläche vertraut sind, versuchen Sie, das RoundResultsGui ScreenGui-Objekt und alle seine Kinder für die Bildschirmdarstellung zu erstellen, wenn Spieler ein Match gewinnen oder verlieren. Sie können die Beispiel-Laser-Tag-Erfahrung .rbxl-Datei als Referenz verwenden oder die Werte anpassen, um die Gameplay-Anforderungen Ihres eigenen Erlebnisses zu erfüllen.
Erstellen von SurfaceGui-Objekten
Um UI auf der Oberfläche eines Teils im 3D-Raum anzuzeigen, das auf die Logik des Skripts für jeden einzelnen Spieler reagiert, können Sie ein SurfaceGui-Objekt an das Teil anhängen, in dem Sie Ihre UI im ReplicatedStorage-Dienst anzeigen möchten. Diese Technik stellt sicher, dass Ihre UI und ihre Skriptlogik sowohl für den Server als auch für den Client jedes Spielers verfügbar sind.
SurfaceGui-Objekte enthalten alle GuiObjects, die auf der Oberfläche eines Teils im 3D-Raum angezeigt werden. Das Beispiel-Laser-Tag-Erlebnis umfasst nur eine Instanz eines SurfaceGui-Objekts: den Abklingmetermeter, der über dem Blaster jedes Spielers angezeigt wird. Dieses Objekt benötigt Skriptlogik für jeden Spieler, da es aktiv auf die Eingaben jedes einzelnen Spielers antwortet und visuelles Feedback gibt, wann sie ihren Blaster wieder abfeuern können.
Um ein SurfaceGui-Objekt zu erstellen:
- Klicken Sie im Explorer-Fenster mit der Maus über den ReplicatedStorage-Dienst und klicken Sie dann auf das ⊕-Symbol. Ein Kontextmenü wird angezeigt.
- Fügen Sie aus dem Kontextmenü ein Part-Objekt ein.
- Fügen Sie ein ScreenGui-Objekt in das Teil ein.
- Benennen Sie die SurfaceGui entsprechend dem Kontext der untergeordneten UI-Elemente um.
- Wiederholen Sie diesen Prozess für jedes UI-Element, das Sie auf der Oberfläche eines Teils im 3D-Raum anzeigen möchten.
Abklingmeter
Ein Abklingmeter ist ein UI-Komponente, die die Spieler darüber informiert, wie lange sie warten müssen, bevor sie ihren Blaster erneut abfeuern können. Diese kurze Pause verhindert, dass die Spieler so schnell abfeuern können, wie sie klicken oder einen Knopf drücken, was unrealistisch für das Gameplay von Laser Tag ist.
Um den Abklingmeter innerhalb des Beispiel Laser Tag-Erlebnisses genau zu erstellen:
Erstellen Sie ein Teil, um Ihr SurfaceGui-Objekt zu halten.
- Klicken Sie im Explorer-Fenster mit der Maus über den Workspace und klicken Sie dann auf das ⊕-Symbol. Ein Kontextmenü wird angezeigt.
- Fügen Sie aus dem Kontextmenü ein Block-Teil hinzu. Dies ist ein temporärer Standort für das Teil, sodass Sie die Änderungen in jedem Schritt des Prozesses visualisieren können.
Positionieren und orientieren Sie das Teil um die Position, an der der Charakter eines Spielers seinen Blaster halten würde. Setzen Sie dann im Properties-Fenster,
Setzen Sie Transparency auf 1, um das Teil vollständig transparent zu machen.
Setzen Sie Name auf CooldownBarPrefab.
Setzen Sie Size auf 0.169, 0.027, 2.537, um das Teil auf eine Größe zu skalieren, die etwa der Länge des Blasters entspricht.
Deaktivieren Sie CanCollide und CanQuery.
Fügen Sie ein SurfaceGui in CooldownBarPrefab ein.
Wählen Sie das neue SurfaceGui aus und setzen Sie im Properties-Fenster,
Setzen Sie Face auf Top, damit die UI nach oben zeigt.
Setzen Sie LightInfluence und MaxDistance auf 0.
Setzen Sie PixelsPerStud auf 200.
Erstellen Sie die schwarze Leiste.
Fügen Sie ein ImageLabel in das SurfaceGui ein.
Wählen Sie das neue Label aus und setzen Sie im Properties-Fenster,
- Entfernen Sie den Standardwert Image.
- Setzen Sie AnchorPoint auf 0.5, 0.5, um den Ursprungspunkt des Labels in die Mitte zu setzen (50 % von links nach rechts des Labels und 50 % von oben nach unten des Labels).
- Setzen Sie BackgroundColor3 auf 0,0,0, um die Hintergrundfarbe des Labels auf schwarz zu setzen.
- Setzen Sie BackgroundTransparency auf 0.4, um den Hintergrund des Labels halbtransparent zu machen.
- Setzen Sie Position auf {0.5, 0},{0.5, 0}, um das Label in die Mitte seines Containers zu setzen (50 % von links nach rechts des übergeordneten SurfaceGui und 50 % von oben nach unten des übergeordneten SurfaceGui).
- Setzen Sie Size auf {1, 0},{1, 0}, um das Label über das ganze Teil zu verbreitern (100 % horizontal und 100 % vertikal des übergeordneten SurfaceGui).
- Setzen Sie Name auf Container.
Runden Sie die Ecken des Containers ab.
Fügen Sie ein UICorner-Objekt in Container ein.
Wählen Sie den UICorner aus und setzen Sie im Properties-Fenster den CornerRadius auf 0.15, 0, um die Ecken leicht abzurunden.
Erstellen Sie die rote Leiste.
- Fügen Sie ein ImageLabel in Container ein.
- Wählen Sie das neue Label aus und setzen Sie im Properties-Fenster,
- Entfernen Sie den Standardwert Image.
- Setzen Sie AnchorPoint auf 1, 0.5, um den Ursprungspunkt des Labels in der rechten Mitte zu setzen (100 % von links nach rechts des Labels und 50 % von oben nach unten des Labels).
- Setzen Sie BackgroundColor3 auf 172, 13, 13, um die Hintergrundfarbe des Labels auf ein dunkles Rot zu setzen.
- Setzen Sie BackgroundTransparency auf 0.2, um den Hintergrund des Labels leicht transparent zu machen.
- Setzen Sie Name auf Bar.
- Setzen Sie Position auf {1, 0},{0.5, 0}, um das Label in der rechten Mitte seines Containers zu positionieren (100 % von links nach rechts des übergeordneten Labels und 50 % von oben nach unten des übergeordneten Labels).
- Setzen Sie Size auf {0, 0},{1, 0}, um die Länge des Labels auf die Höhe seines übergeordneten Labels zu verlängern (0 % horizontal und 100 % vertikal des übergeordneten Labels). Dieser Schritt ist auch vorteilhaft für das Tweening-Verhalten, das in den Skripten in Schritt 8 auftritt.
Runden Sie die Ecken des Labels ab.
- Fügen Sie ein UICorner-Objekt in Bar ein.
- Wählen Sie den UICorner aus und setzen Sie im Properties-Fenster den CornerRadius auf 0.15, 0, um die Ecken leicht abzurunden.
Verschieben Sie CooldownBarPrefab in den ReplicatedStorage.
Erstellen Sie eine Ordnerstruktur, um Ihre UI-Objekte zu organisieren. Das Beispiel verwendet einen Instances-Ordner mit einem untergeordneten Guis-Ordner.
Verschieben Sie CooldownBarPrefab in Guis.
Verweisen Sie auf die folgenden ReplicatedStorage-Skripte innerhalb der Beispiel Laser Tag-Platzdatei, die programmgesteuert den Abklingmeter an den Blaster des Spielers anhängt und dann die rote Leiste animiert, nachdem ein Spieler seinen Blaster abgefeuert hat.
Das folgende ReplicatedStorage.FirstPersonBlasterVisuals Client-Skript behandelt alle visuellen Logik für den First-Person-Blaster des Spielers. Es erfordert eine Reihe von Modul-Skripten, die zusammenarbeiten, um die Blaster-Visuals zu erstellen, die sich realistischer für das Gameplay von Laser Tag anfü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 First-Person-Rig hinzu
rigModel = blasterConfig.RigModel:Clone()
rigModel.Parent = Workspace
-- Füge den cooldownBar 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 cooldown bar, da sie dem Rig angehängt ist
rigModel:Destroy()
rigModel = nil
end
end
-- Führe First-Person-Visuelleffekte aus, wenn ein Blast auftritt
laserBlastedBindableEvent.Event:Connect(function(blastData: BlastData.Type)
runBlastVisuals(rigModel.PrimaryPart.TipAttachment, blastData, animations.blastAnimation)
runCooldownBarEffect(cooldownBar)
end)
-- Binde das Rig an die Kamera, falls sie existiert
RunService.RenderStepped:Connect(function()
if rigModel then
-- Aktualisiere die CFrame des Rigs relativ zur Position der Kamera und RIG_OFFSET_FROM_CAMERA
rigModel:PivotTo(currentCamera.CFrame * RIG_OFFSET_FROM_CAMERA)
end
end)
-- Behandelt die Änderungen der Visuals, wenn sich der blasterType 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)
-- Behandelt die Änderungen der Visuals, wenn sich der playerState ändert
localPlayer:GetAttributeChangedSignal(PlayerAttribute.playerState):Connect(function()
local newPlayerState = localPlayer:GetAttribute(PlayerAttribute.playerState)
-- Entferne die Visuals, wenn der Spieler einen Blaster auswählt oder in der Lobby ist
if newPlayerState == PlayerState.SelectingBlaster or newPlayerState == PlayerState.InLobby then
removeFirstPersonVisuals()
-- Füge die Visuals zurück hinzu, wenn der Spieler die Blasterwahl abgeschlossen hat.
elseif newPlayerState == PlayerState.Playing then
addFirstPersonVisuals()
end
end)
Jetzt animiert der Abklingmeter jedes Mal, wenn ein Spieler seinen Blaster abfeuert, um zu kommunizieren, wann der Spieler wieder abfeuern kann.
Erstellen von BillboardGui-Objekten
Um UI-Elemente im 3D-Raum anzuzeigen, die auf Skriptlogik reagieren und immer der Kamera jedes Spielers zugewandt sind, unabhängig von ihrem Betrachtungswinkel, wie z. B. Spielernamen oder Kartenmarkierungen, können Sie ein BillboardGui-Objekt als Kind eines BasePart oder Attachment, das im 3D-Raum existiert, erstellen.
Das Beispiel-Laser-Tag-Erlebnis enthält zwei separate BillboardGui-Objekte im ReplicatedStorage-Dienst:
- OtherPlayerIndicatorGuiPrefab - Zeigt über dem Kopf jedes Spielers einen pinken oder grünen Kreis, wenn sie aktiv in einer Runde sind.
- TaggedOutIndicatorGuiPrefab - Wird über dem Kopf eines Spielers angezeigt, wenn sie aus der Runde ausgeschaltet wurden.
Nachdem Sie ein BillboardGui-Objekt erstellt haben, können Sie seine untergeordneten GuiObjects je nach Zweck jedes Containers erstellen und anpassen. Um dies zu veranschaulichen, werden Sie in den folgenden Abschnitten lernen, wie Sie UI-Elemente für beide Indikatortypen innerhalb des Beispiel-Laser-Tag-Erlebnisses implementieren. Sie können jeden Teil des Prozesses anpassen, um die Spezifikationen Ihres eigenen Erlebnisses zu erfüllen.
Um ein BillboardGui-Objekt zu erstellen:
- Klicken Sie im Explorer-Fenster mit der Maus über ein BasePart oder Attachment und klicken Sie dann auf das ⊕-Symbol. Ein Kontextmenü wird angezeigt.
- Fügen Sie aus dem Kontextmenü ein BillboardGui-Objekt ein.
- Benennen Sie das BillboardGui je nach Kontext seiner untergeordneten UI-Elemente um.
- Wiederholen Sie diesen Prozess für jedes UI-Element, das Sie kontextuell über den Köpfen der Spieler anzeigen müssen.
Team-Indikator
Ein Team-Indikator ist ein UI-Element, das die Spieler darüber informiert, zu welchem Team andere Spieler in der Runde gehören, damit sie leicht zwischen ihren Verbündeten und Mitgliedern des gegnerischen Teams unterscheiden können. Diese Informationen sind wichtig, da das Gameplay eines First-Person-Shooter-Erlebnisses von den Spielern erfordert, dass sie schnelle strategische Entscheidungen treffen, während sie sich in Kampfzonen befinden, damit sie nicht ausgeschaltet werden und das Match verlieren.
Um den Team-Indikator innerhalb des Beispiel Laser Tag-Erlebnisses genau zu erstellen:
Fügen Sie ein BillboardGui-Objekt in ein temporäres Rig ein.
Klicken Sie im Home- oder Avatar-Tab der Werkzeugleiste auf Character.
Wählen Sie aus den verfügbaren Optionen. Das Beispiel verwendet einen R15-Rig-Typ, eine feminine Körperform und einen Rthro-Avatar. Das Rig wird sowohl im 3D-Viewport als auch im Explorer-Fenster unter dem Namen Rig angezeigt.
Navigieren Sie im Explorer-Fenster zum untergeordneten Head-Mesh des Rigs und klicken Sie auf das ⊕-Symbol. Ein Kontextmenü wird angezeigt.
Fügen Sie aus dem Kontextmenü ein BillboardGui ein.
Wählen Sie das neue BillboardGui aus und setzen Sie im Properties-Fenster,
Setzen Sie LightInfluence auf 0, um zu verhindern, dass Umgebungslicht die Farbe des Indikators beeinflusst.
Setzen Sie Name auf OtherPlayerIndicatorPrefab.
Setzen Sie Size auf {0, 10},{0, 10}, um das Label deutlich kleiner zu machen.
Setzen Sie StudsOffsetWorldSpace auf 0, 4, 0, um es über dem Kopf des Rigs zu positionieren.
Fügen Sie ein Frame-Objekt in OtherPlayerIndicatorPrefab ein.
Wählen Sie das neue Frame aus und setzen Sie im Properties-Fenster,
Setzen Sie AnchorPoint auf 0.5, 0.5, um den Ursprungspunkt des Frames in die Mitte zu setzen (50 % von links nach rechts des Labels und 50 % von oben nach unten des Labels).
Setzen Sie BackgroundColor3 auf 255, 3, 0, um die Hintergrundfarbe des Frames rot als Platzhalterfarbe zu setzen.
Setzen Sie Position auf {0.5, 0},{0.5, 0}, um den Frame in die Mitte seines Containers zu setzen (50 % von links nach rechts des übergeordneten BillboardGui und 50 % von oben nach unten des übergeordneten BillboardGui).
Setzen Sie Size auf {1, -2},{1, -2}, um den Frame auf die Fläche des BillboardGui zu verkürzen.
Fügen Sie ein UICorner-Objekt in Frame ein, um die Ecken vollständig abzurunden.
Fügen Sie ein UIStroke-Objekt in Frame ein, um den Kreis des Indikators zu umreißen.
Verschieben Sie OtherPlayerIndicatorPrefab in ReplicatedStorage.
Verweisen Sie auf das folgende ReplicatedStorage-Skript innerhalb der Beispiel Laser Tag 1A-Platzdatei, das programmgesteuert den Team-Indikator für jeden Spieler in einer aktiven Runde anzeigt, es sei denn, sie sind im gegnerischen Team und verdeckt.
Das folgende ReplicatedStorage.OtherPlayerIndicatorGuiSetup-Skript wird ausgeführt, wenn Spieler in die Arena für eine aktive Runde spawnen. Es hängt den Team-Indikator an, indem es die Funktion addIndicatorToCharacter() aufruft, die das Head-Objekt jedes Spielercharakters findet, der an der Runde teilnimmt. Wenn sie noch keinen Team-Indikator haben, klont das Skript den otherPlayerIndicatorPrefab UI-Element und fügt es dem Head des Charakters hinzu und setzt die Farbe des Team-Indikators auf die Teamfarbe.
Wenn andere Spieler im gleichen Team sind, wird der Team-Indikator immer angezeigt, selbst wenn sie sich hinter Objekten im 3D-Raum befinden. Wenn andere Spieler im gegnerischen Team sind, wird der Team-Indikator nur angezeigt, wenn kein Objekt im 3D-Raum vorhanden ist, das sie verdeckt.
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 Indikatoren nur für Spieler hinzu, die an der Runde teilnehmen
if not otherPlayer.Team then
return
end
-- Verhindere das Hinzufügen von doppelten Indikatoren, erstelle nur einen neuen, 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 wird immer oben angezeigt, es sei denn, der Spieler ist freundlich
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 wird immer, wenn ein Spieler in einer aktiven Runde ist, der Team-Indikator über den Köpfen anderer Spieler angezeigt, es sei denn, sie sind im gegnerischen Team und hinter einem Objekt.
Angeschalteter Indikator
Ein ausgeschalteter Indikator ist ein UI-Element, das die Spieler informiert, wenn andere Spieler nicht mehr aktiv in der Runde sind und sich im Prozess des Respawnens zurück zu ihrer Spawnzone befinden. Diese Informationen sind wichtig, da das Gameplay eines First-Person-Shooter-Erlebnisses von den Spielern erfordert, dass sie so schnell wie möglich zu ihrem nächsten Ziel weiterziehen, sobald sie einen Spieler ausschalten, damit sie nicht anfällig in der Arena werden, indem sie zu lange am selben Ort bleiben.
Um den ausgeschalteten Indikator innerhalb des Beispiel Laser Tag-Erlebnisses genau zu erstellen:
Fügen Sie ein BillboardGui-Objekt in ein temporäres Rig ein, um die Änderungen in jedem Schritt des Prozesses zu visualisieren.
Klicken Sie im Home- oder Avatar-Tab der Werkzeugleiste auf Character.
Wählen Sie aus den verfügbaren Optionen. Das Beispiel verwendet einen R15-Rig-Typ, eine maskuline Körperform und einen Rthro-Avatar. Das Rig wird sowohl im 3D-Viewport als auch im Explorer-Fenster unter dem Namen Rig angezeigt.
Navigieren Sie im Explorer-Fenster zum untergeordneten Head-Mesh des Rigs und klicken Sie auf das ⊕-Symbol. Ein Kontextmenü wird angezeigt.
Fügen Sie aus dem Kontextmenü ein BillboardGui hinzu.
Wählen Sie das neue BillboardGui aus und setzen Sie im Properties-Fenster,
Setzen Sie LightInfluence auf 0, um zu verhindern, dass Umgebungslicht die Farbe des Indikators beeinflusst.
Setzen Sie Name auf TaggedOutIndicatorGuiPrefab.
Setzen Sie Size auf {3, 0},{0.5, 0}, um den Raum für ein Label zu erweitern.
Setzen Sie StudsOffset auf 0, 3.25, 0, um es über dem Kopf eines Spielers zu positionieren.
Fügen Sie ein ImageLabel-Objekt in TaggedOutIndicatorGuiPrefab ein.
Wählen Sie das neue Label aus und setzen Sie im Properties-Fenster,
- Setzen Sie AnchorPoint auf 0.5, 0.5, um den Ursprungspunkt des Labels in die Mitte zu setzen (50 % von links nach rechts des Labels und 50 % von oben nach unten des Labels).
- Setzen Sie BackgroundTransparency auf 1, um den Hintergrund des Labels vollständig transparent zu machen.
- Setzen Sie Name auf Frame.
- Setzen Sie Position auf {0.5, 0},{0.5, 0}, um das Label in die Mitte seines Containers zu setzen (50 % von links nach rechts des übergeordneten BillboardGui und 50 % von oben nach unten des übergeordneten BillboardGui).
- Setzen Sie Size auf {1, 0},{1, 0}, um das Label über das gesamte BillboardGui zu verbreitern (100 % horizontal und 100 % vertikal des übergeordneten BillboardGui).
- Setzen Sie Image auf rbxassetid://14304826985, um das Bild zu einem multidirektionalen Verlauf zu machen.
- Setzen Sie ImageColor auf 245, 46, 46, um das Label rot zu tönen.
Um die Leistung zu verbessern, können Sie das Bild-Asset überspringen und stattdessen ein UIGradient-Objekt mit einer benutzerdefinierten Transparenz-Zahlensequenz verwenden. Erfahren Sie mehr über diese Verlaufstechnik in UI Appearance Modifiers - Gradient.
Fügen Sie ein TextLabel-Objekt in Frame ein.
Wählen Sie das neue Label aus und setzen Sie im Properties-Fenster,
Setzen Sie AnchorPoint auf 0.5, 0.5, um den Ursprungspunkt des Labels in die Mitte zu setzen (50 % von links nach rechts des Labels und 50 % von oben nach unten des Labels).
Setzen Sie BackgroundTransparency auf 1, um den Hintergrund des Labels vollständig transparent zu machen.
Setzen Sie Name auf BodyTextLabel.
Setzen Sie Position auf {0.5, 0},{0.5, 0}, um das Label in die Mitte seines Containers zu setzen (50 % von links nach rechts des übergeordneten Labels und 50 % von oben nach unten des übergeordneten Labels).
Setzen Sie Size auf {0.85, 0},{0.7, 0}, damit der Text den größten Teil des Verlaufbereichs einnehmen kann (85 % horizontal und 70 % vertikal des übergeordneten Bild-Labels).
Setzen Sie FontFace auf Montserrat, um die futuristische Ästhetik zu erfüllen.
Setzen Sie Weight auf Bold, um die Schrift zu verdicken.
Setzen Sie Text auf TAGGED.
Setzen Sie TextColor3 auf 255, 255, 255, um den Text weiß zu machen.
Aktivieren Sie TextScaled.
Verschieben Sie TaggedOutIndicatorGuiPrefab in ReplicatedStorage.
Verweisen Sie auf die folgenden ServerScriptService-Skripte innerhalb der Beispiel Laser Tag 1A-Platzdatei, die programmgesteuert den ausgeschalteten Indikator anzeigen, während ein Spieler zurück zu seiner Spawnzone respawnt.
Das folgende ServerScriptService.SetupHumanoid-Server-Skript wird ausgeführt, sobald ein Spieler das Erlebnis lädt. Es stellt sicher, dass jedes Mal, wenn der Charakter eines Spielers zum Datenmodell hinzugefü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
-- Rufe onCharacterAdded für alle zukünftigen Charakterspawns dieses Spielers auf
player.CharacterAdded:Connect(function(character: Model)
onCharacterAdded(player, character)
end)
end
-- Rufe onPlayerAdded für bereits im Spiel befindliche Spieler auf
for _, player in Players:GetPlayers() do
onPlayerAdded(player)
end
-- Rufe onPlayerAdded für alle zukünftigen Spieler auf
Players.PlayerAdded:Connect(onPlayerAdded)
Jetzt zeigt der ausgeschaltete Indikator jedes Mal an, wenn die Gesundheit eines Spielers null erreicht, über ihrem Kopf an, bis sie respawnen.
Glückwunsch, dass Sie das Curriculum zum Benutzeroberflächendesign abgeschlossen haben! Jetzt, da Sie Erfahrung darin haben, einen Stil zu erstellen, Ihre Layouts zu skizzieren und Ihre Designs von Anfang bis Ende im Studio umzusetzen, können Sie Ihr Projekt mit neuen UI und Funktionen erweitern oder zusätzliche Tutorial-Curricula folgen, wie zum Beispiel das Gameplay Scripting Curriculum, das Ihnen die allgemeine Organisation und die wichtigsten Implementierungsdetails des Beispiel-Laser-Tag-Erlebnisses vermittelt. Viel Spaß beim Erstellen!