Designs im Studio umsetzen | Dokumentation

Die Umsetzung Ihrer Designs ist der Prozess, bei dem Sie Ihre Wireframes im Studio mit sowohl integrierten als auch benutzerdefinierten UI-Elementen erstellen, die Ihre UI kontextuell auslösen. Dieser aufregende Schritt des Tutorials ist der Moment, in dem Sie all Ihre Designs und harte Arbeit in einem kohärenten Set von Workflows sehen, die vollständig sind und bereit für die Interaktion der Spieler.

Mit der Beispiel-Laser-Tag-Spiel .rbxl-Datei als Referenz zeigt Ihnen dieser Abschnitt des Benutzeroberflächendesign-Curriculums, wie Sie Ihre UI-Planung zum Leben erwecken, einschließlich Anleitungen zu:

Abrufen von Asset-IDs aus der UI-Asset-Bibliothek, damit Sie die UI-Komponenten des Beispiel-Laser-Tag-Spiels nachbauen können.
Emulieren verschiedener Geräte direkt im Studio, um zu sehen, wie Ihre UI auf unterschiedlichen Bildschirmen und Seitenverhältnissen angezeigt wird.
Erstellen von ScreenGui, SurfaceGui und BillboardGui-Objekten, um Ihre UI auf den Bildschirmen der Spieler, auf Teileoberflä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 Spielen tun können.

Die Anweisungen in diesem Abschnitt des Tutorials zeigen Ihnen, wie Sie die UI-Komponenten genau mit der UI-Design-Asset-Bibliothek nachbauen. 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 an die Spezifikationen Ihres eigenen Spiels anpassen oder das Beispiel selbst für den Rest des Tutorials verwenden.

Asset-Bibliothek abrufen

Asset-Bibliotheken sind Sammlungen von Assets, die Sie in Ihr 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 sowie die endgültigen Versionen der Ziel-, Blaster-Auswahl- und Spieler-Info-Komponenten, die Sie in diesem Abschnitt des Tutorials erstellen.

**MultiBlaster-Icon**
rbxassetid://14309094777

**SingleBlaster-Icon**
rbxassetid://14309094641

**Pink Team-Icon**
rbxassetid://14309678581

**Umgekehrter Trapez**
rbxassetid://14304827304

**Grünes Team-Icon**
rbxassetid://14309678701

**Multidirektionales Verblassen**
rbxassetid://14304827147

**Blast-Button-Icon - Standard**
rbxassetid://18308375067

**Blast-Button-Icon - Gedrückt**
rbxassetid://18308372597

**Fadenkreuz-Icon**
rbxassetid://14400935532

Treffer-Marker-Icon
rbxassetid://14401148777

**Auswahlpfeil-Icon**
rbxassetid://14309187282

**Randverblassen**
rbxassetid://14309518632

Um die Asset-Bibliothek von Ihrem Inventar in Ihr Spiel zu bekommen:

Fügen Sie die Asset-Bibliothek zu Ihrem Inventar hinzu.
1. Navigieren Sie zur Detailseite der Asset-Bibliothek im Creator Store.
2. Klicken Sie in der oberen rechten Ecke auf die Schaltfläche Modell erhalten. 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 zur Registerkarte Start, und klicken Sie dann auf die Schaltfläche Toolbox. Das Fenster Toolbox öffnet sich.
Klicken Sie im Fenster Toolbox auf die Registerkarte 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, wählen Sie im Fenster Explorer Abgeschlossene Komponenten aus und ziehen Sie diese in den Dienst StarterGui. Sie können jetzt beliebige der endgültigen Komponenten aktivieren, um auf ihr Design zuzugreifen.

Geräte emulieren

Der Geräteemulator von Studio ermöglicht es Ihnen, zu testen, wie Spieler Ihre UI auf verschiedenen Geräten sehen und damit interagieren. Dieses Tool ist ein wesentlicher Bestandteil des Implementierungsprozesses, da das Seitenverhältnis Ihres Viewports im Studio nicht unbedingt das Seitenverhältnis der Bildschirme widerspiegelt, die die Spieler verwenden, um auf Ihr Spiel zuzugreifen, und es wichtig ist, dass Ihre UI auf jedem Gerät sowohl lesbar als auch zugänglich ist.

Wenn Sie beispielsweise Ihre UI nicht auf einer Reihe von Bildschirmgrößen testen, können Spieler mit großen Bildschirmen möglicherweise Ihren Text nicht lesen oder Ihre Symbole nicht entschlüsseln, und Spieler mit kleinen Bildschirmen können möglicherweise den 3D-Raum nicht sehen, weil Ihre UI-Elemente zu viel Platz auf dem Display einnehmen.

Um Ihre UI auf verschiedenen Bildschirmgrößen zu emulieren:

Aktivieren Sie im Menü Test von Studio den Geräteemulator.
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 Gerät sehen, das Sie emulieren.
Wählen Sie im Dropdown-Menü mindestens ein Gerät aus den Abschnitten Telefon, Tablet, Desktop und Konsole aus.

ScreenGui-Objekte erstellen

Um UI-Elemente auf dem Bildschirm jedes Spielers anzuzeigen, können Sie ein ScreenGui-Objekt im Dienst StarterGui erstellen. ScreenGui-Objekte sind die primären Container für die On-Screen-UI, und der Dienst StarterGui kopiert seinen Inhalt in den PlayerGui-Container jedes Spielers, wenn sie ein Spiel betreten.

Sie können mehrere ScreenGui-Objekte erstellen, um Gruppen von UI-Elementen kontextuell während des Spiels zu organisieren und anzuzeigen. Beispielsweise enthält das Beispiel-Laser-Tag-Spiel fünf separate ScreenGui-Objekte, die zunächst deaktiviert sind, bis die Spieler während des Haupt-Benutzerflusses des Spiels verschiedene Bedingungen erfüllen:

HUDGui - Zeigt wichtige Informationen über das Gameplay an, wenn die Spieler aktiv in einer Runde sind, wie das Ziel und die Gesamtpunkte jedes Teams.
PickABlasterGui - Zeigt alle Blaster-Optionen an, wenn die Spieler eine Runde starten oder wieder beitreten.
ForceFieldGui - Zeigt ein hexagonales Gitter an, wenn die Spieler einen Blaster auswählen und während sie vorübergehend unverwundbar sind.
OutStateGui - Zeigt einen dunklen Rand um den Bildschirm an, wenn die Spieler ausgetaggt werden.
RoundResultsGui - Zeigt eine dunkle Überlagerung oben auf 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, werden Sie in den folgenden Abschnitten lernen, wie Sie UI-Elemente für die drei Kategorien von Informationen implementieren, die die Spieler wissen müssen, um im Beispiel-Laser-Tag-Spiel erfolgreich zu sein. Sie können jeden Teil des Prozesses an die Spezifikationen Ihres eigenen Spiels anpassen.

Um ein ScreenGui-Objekt zu erstellen:

Bewegen Sie im Fenster Explorer den Mauszeiger über den Dienst StarterGui und klicken Sie dann auf das ⊕-Symbol. Ein kontextuelles Menü wird angezeigt.
Fügen Sie ein ScreenGui ein.
Benennen Sie das ScreenGui entsprechend dem Kontext seiner untergeordneten UI-Elemente um.
Wiederholen Sie diesen Prozess für jede Gruppe von UI-Elementen, die Sie auf dem Bildschirm jedes Spielers anzeigen müssen.

Ziel-UI

Nach den besten Praktiken der visuellen Hierarchie aus Wireframe Your Layouts lehrt Sie dieser Abschnitt, wie Sie alle On-Screen-UI-Elemente in Bezug auf das Ziel des Spiels umsetzen. Diese Gruppe 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.

Das Beispiel bietet beispielsweise eine 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 Mitglieder des gegnerischen Teams austaggen und Punkte sammeln, verfolgt diese Komponente die Punktzahl jedes Teams im Vergleich zum Gesamtziel innerhalb der Aufforderung des Headers. Für eine hochrangige Übersicht über alle Client- und Server-Skripte, die zusammenarbeiten, um Punkte zu verfolgen, siehe Punkte verfolgen im Gameplay-Scripting-Curriculum.

Um die Ziel-UI genau im Beispiel Laser Tag Spiel nachzubauen:

Erstellen Sie einen Container für die gesamte Komponente.
1. Fügen Sie ein Frame in das HUDGui ScreenGui-Objekt ein.
  1. Navigieren Sie im Fenster Explorer zum Dienst StarterGui.
  2. Bewegen Sie den Mauszeiger über das untergeordnete HUDGui-Objekt und klicken Sie dann auf das ⊕-Symbol. Ein kontextuelles Menü wird angezeigt.
  3. Fügen Sie aus dem kontextuellen Menü ein Frame ein.
2. Wählen Sie das neue Frame aus und setzen Sie im Fenster Eigenschaften,
  1. Setzen Sie AnchorPoint auf 0.5, 0, um den Ursprungspunkt des Rahmens in der oberen Mitte zu setzen (50 % von links nach rechts des Rahmens und 0 % von oben nach unten des Rahmens).
  2. Setzen Sie BackgroundTransparency auf 1, um den Hintergrund des Rahmens vollständig transparent zu machen.
  3. Setzen Sie Position auf {0.5, 0},{0.03, 0}, um den Rahmen nahe der oberen Mitte des Bildschirms zu platzieren (50 % von links nach rechts des Bildschirms und 3 % von oben nach unten des Bildschirms, damit es einen kleinen Puffer gibt).
  4. Setzen Sie Size auf {0.5, 0},{0.13, 0}, damit die Elemente des Rahmens einen großen Teil der oberen Bildschirmhälfte einnehmen, um die Aufmerksamkeit der Spieler zu erregen (50 % horizontal und 13 % vertikal).
  5. Setzen Sie Name auf Objective.
3. 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. Das Beispiel setzt die UIAspectRatioConstraint.AspectRatio-Eigenschaft auf 7.
Erstellen Sie einen Container für die Aufforderungsobjekte des Ziels.
1. Fügen Sie ein Frame in Objective ein.
2. Wählen Sie das neue Frame aus und setzen Sie im Fenster Eigenschaften,
  1. Setzen Sie AnchorPoint auf 0.5, 0, um den Ursprungspunkt des Rahmens in der oberen Mitte zu setzen (50 % von links nach rechts des Rahmens und 0 % von oben nach unten des Rahmens).
  2. Setzen Sie BackgroundTransparency auf 1, um den Hintergrund des Rahmens vollständig transparent zu machen.
  3. Setzen Sie Position auf {0.5, 0},{0, 0}, um den Rahmen in der Mitte des Containers zu platzieren (50 % von links nach rechts des übergeordneten Rahmens und 0 % von oben nach unten des übergeordneten Rahmens).
  4. Setzen Sie Size auf {1, 0},{0.67, 0}, damit die Auswahl-UI-Komponenten mehr als die Hälfte des Containers von oben nach unten einnehmen (100 % horizontal und 67 % vertikal des übergeordneten Rahmens).
  5. Setzen Sie Name auf ObjectiveDisplay.
Erstellen Sie die Titel-Elemente.
1. Fügen Sie ein ImageLabel in ObjectiveDisplay ein.
2. Wählen Sie das ImageLabel aus und setzen Sie im Fenster Eigenschaften,
  1. 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).
  2. Setzen Sie BackgroundTransparency auf 1, um den Hintergrund des Labels vollständig transparent zu machen.
  3. Setzen Sie LayoutOrder auf -1.
  4. Setzen Sie Position auf {0.5, 0},{0.34, 0}, um das Label nahe der oberen Mitte des Rahmens zu platzieren (50 % von links nach rechts des übergeordneten Rahmens und 34 % von oben nach unten des übergeordneten Rahmens).
  5. Setzen Sie Size auf {0.46, 0},{0.34, 0}, um den Aufforderungsbereich auf fast die Hälfte des Rahmens zu erweitern (46 % horizontal und 34 % vertikal des übergeordneten Rahmens).
  6. Setzen Sie Name auf Header.
  7. Setzen Sie Image auf rbxassetid://14304828123, um ein Trapez anzuzeigen.
  8. Setzen Sie ImageTransparency auf 0.15, um den Header halbtransparent zu machen.
3. 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. Das Beispiel setzt die UIAspectRatioConstraint.AspectRatio-Eigenschaft auf 13.781.
4. Fügen Sie ein TextLabel in Header ein, um einen Titel anzuzeigen.
5. Wählen Sie das neue Label aus und setzen Sie im Fenster Eigenschaften,
  1. Setzen Sie AnchorPoint auf 0.5, 0.5, um den Ursprungspunkt des neuen Labels in der Mitte zu setzen (50 % von links nach rechts des Labels und 50 % von oben nach unten des Labels).
  2. Setzen Sie BackgroundTransparency auf 1, um den Hintergrund des Labels vollständig transparent zu machen.
  3. Setzen Sie Position auf {0.5, 0},{0.5, 0}, um das Label in die Mitte seines übergeordneten Labels zu verschieben (50 % von links nach rechts des übergeordneten Labels und 50 % von oben nach unten des übergeordneten Labels).
  4. Setzen Sie Size auf {0.62, 0},{0.55, 0}, um den Textbereich auf mehr als die Hälfte des übergeordneten Labels zu erweitern (62 % horizontal und 55 % vertikal des übergeordneten Labels).
  5. Setzen Sie Name auf HeaderTextLabel.
  6. Setzen Sie FontFace auf Montserrat, um die futuristische Ästhetik zu unterstützen.
  7. Setzen Sie Weight auf Medium, um die Schrift zu verdicken.
  8. Setzen Sie Text auf ZIEL.
  9. Aktivieren Sie TextScaled.
Erstellen Sie die Aufforderungselemente.
1. Fügen Sie ein ImageLabel in ObjectiveDisplay ein.
2. Wählen Sie das ImageLabel aus und setzen Sie im Fenster Eigenschaften,
  1. 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).
  2. Setzen Sie BackgroundTransparency auf 1, um den Hintergrund des Labels vollständig transparent zu machen.
  3. Setzen Sie Position auf {0.5, 0},{1, 0}, um das Label in die untere Mitte seines übergeordneten Rahmens zu verschieben (50 % von links nach rechts des übergeordneten Rahmens und 100 % von oben nach unten des übergeordneten Rahmens).
  4. Setzen Sie Size auf {0.89, 0},{0.66, 0}, um den Textbereich auf fast die volle Breite des übergeordneten Rahmens zu erweitern (89 % horizontal und 66 % vertikal des übergeordneten Rahmens).
  5. Setzen Sie Name auf Body.
  6. Setzen Sie Image auf rbxassetid://14304827265, um ein umgekehrtes Trapez anzuzeigen.
  7. Setzen Sie ImageColor3 auf 0, 0, 0, um das Bild schwarz zu färben.
  8. Setzen Sie ImageTransparency auf 0.3, um den Header halbtransparent zu machen.
3. 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. Das Beispiel setzt die UIAspectRatioConstraint.AspectRatio-Eigenschaft auf 13.781.
4. Fügen Sie ein TextLabel in Body ein, um eine Aufforderung anzuzeigen.
5. Wählen Sie das neue Label aus und setzen Sie im Fenster Eigenschaften,
  1. Setzen Sie AnchorPoint auf 0.5, 0.5, um den Ursprungspunkt des neuen Labels in der Mitte zu setzen (50 % von links nach rechts des Labels und 50 % von oben nach unten des Labels).
  2. Setzen Sie BackgroundTransparency auf 1, um den Hintergrund des Labels vollständig transparent zu machen.
  3. Setzen Sie Position auf {0.5, 0},{0.5, 0}, um das Label in die Mitte seines übergeordneten Labels zu verschieben (50 % von links nach rechts des übergeordneten Labels und 50 % von oben nach unten des übergeordneten Labels).
  4. Setzen Sie Size auf {0.85, 0},{0.39, 0}, um den Textbereich auf mehr als die Hälfte des übergeordneten Labels zu erweitern (85 % horizontal und 39 % vertikal des übergeordneten Labels).
  5. Setzen Sie Name auf BodyTextLabel.
  6. Setzen Sie FontFace auf Montserrat, um die futuristische Ästhetik zu unterstützen.
  7. Setzen Sie Weight auf Medium, um die Schrift zu verdicken.
  8. Setzen Sie TextColor3 auf 255, 255, 255, um den Text weiß gegen den dunklen Hintergrund zu machen.
  9. Setzen Sie Text auf Tagge gegnerische Spieler, um Punkte zu erzielen! Das erste Team, das %d Punkte erreicht, gewinnt..
  10. Aktivieren Sie TextScaled.
Erstellen Sie einen Container für die Zähler der Teams des Ziels.
1. Fügen Sie ein Frame in Objective ein.
2. Wählen Sie das neue Frame aus und setzen Sie im Fenster Eigenschaften,
  1. Setzen Sie AnchorPoint auf 0.5, 1, um den Ursprungspunkt des Rahmens in der unteren Mitte zu setzen (50 % von links nach rechts des Rahmens und 100 % von oben nach unten des Rahmens).
  2. Setzen Sie BackgroundTransparency auf 1, um den Hintergrund des Rahmens vollständig transparent zu machen.
  3. Setzen Sie Position auf {0.5, 0},{1, 0}, um den Rahmen in die untere Mitte des Containers zu platzieren (50 % von links nach rechts des übergeordneten Rahmens und 100 % von oben nach unten des übergeordneten Rahmens).
  4. Setzen Sie Size auf {0.44, 0},{0.27, 0}, damit die Auswahl-UI-Komponenten weniger als die Hälfte des Containers von links nach rechts einnehmen (44 % horizontal und 27 % vertikal des übergeordneten Rahmens).
  5. Setzen Sie Name auf TeamPointCounter.
Erstellen Sie einen Abstand für die Teamzähler.
1. Fügen Sie ein UIListLayout-Objekt in den Rahmen aus Schritt 5 ein.
2. Wählen Sie das UIListLayout-Objekt aus und setzen Sie im Fenster Eigenschaften,
  1. Setzen Sie Padding auf 0.025, 0, um Platz zwischen den zukünftigen Teamzählern zu schaffen.
  2. Setzen Sie FillDirection auf Horizontal, damit jeder Teamzähler nebeneinander angezeigt wird.
  3. Setzen Sie HorizontalAlignment auf Center, damit jeder Teamzähler in der Mitte ausgerichtet ist.
Erstellen Sie die Zähler-Elemente für das grüne Team.
1. Fügen Sie ein ImageLabel in TeamPointCounter ein.
2. Wählen Sie das ImageLabel aus und setzen Sie im Fenster Eigenschaften,
  1. Setzen Sie BackgroundTransparency auf 1, um den Hintergrund des Labels vollständig transparent zu machen.
  2. Setzen Sie Position auf {0.5, 0},{1, 0}, um das Label in die untere Mitte seines übergeordneten Rahmens zu verschieben (50 % von links nach rechts des übergeordneten Rahmens und 100 % von oben nach unten des übergeordneten Rahmens).
  3. Setzen Sie Size auf {0.5, 0},{1, 0}, um das Label auf die halbe Breite des übergeordneten Rahmens zu erweitern (50 % horizontal und 100 % vertikal des übergeordneten Rahmens).
  4. Setzen Sie Name auf TeamACounter.
  5. Setzen Sie Image auf rbxassetid://14304826831, um ein gerichtetes Verblassen anzuzeigen.
  6. Setzen Sie ImageColor3 auf 88, 218, 171, um das Bild mintgrün zu färben.
3. Konfigurieren Sie ein benutzerdefiniertes Attribut, um zu verfolgen, dass dieses Label für das grüne Team ist.
  1. Navigieren Sie im Fenster Eigenschaften zum Abschnitt Attribute und klicken Sie auf das Plus-Symbol. Ein Popup-Dialog wird angezeigt.
  2. Geben Sie im Feld Name teamColor ein.
  3. Wählen Sie im Dropdown-Menü Typ BrickColor aus.
  4. Klicken Sie auf die Schaltfläche Speichern.
  5. Setzen Sie das neue teamColor-Attribut auf Mint.
4. Fügen Sie ein TextLabel in TeamACounter ein, um eine Aufforderung anzuzeigen.
5. Wählen Sie das neue Label aus und setzen Sie im Fenster Eigenschaften,
  1. Setzen Sie AnchorPoint auf 1, 0.5, um den Ursprungspunkt des neuen Labels in der rechten Mitte zu setzen (100 % von links nach rechts des Labels und 50 % von oben nach unten des Labels).
  2. Setzen Sie BackgroundTransparency auf 1, um den Hintergrund des Labels vollständig transparent zu machen.
  3. Setzen Sie Position auf {0.95, 0},{0.5, 0}, um das Label rechts von seinem übergeordneten Label zu verschieben (95 % von links nach rechts des übergeordneten Labels und 50 % von oben nach unten des übergeordneten Labels).
  4. Setzen Sie Size auf {0.85, 0},{0.39, 0}, um den Textbereich auf mehr als die Hälfte des übergeordneten Labels zu erweitern (85 % horizontal und 39 % vertikal des übergeordneten Labels).
  5. Setzen Sie FontFace auf Montserrat, um die futuristische Ästhetik zu unterstützen.
  6. Setzen Sie Weight auf Bold, um die Schrift zu verdicken.
  7. Setzen Sie TextColor3 auf 255, 255, 255, um den Text weiß gegen den dunklen Hintergrund zu machen.
  8. Setzen Sie Text auf -.
  9. Aktivieren Sie TextScaled.
  10. Setzen Sie TextXAlignment auf Right.
6. Fügen Sie ein UIStroke-Objekt in das TextLabel ein und setzen Sie im Fenster Eigenschaften die Farbe auf 8, 78, 52, um den Strich mit einem dunklen grünen Rand zu umreißen.
Erstellen Sie die Zähler-Elemente für das pinke Team.
1. Duplizieren Sie TeamAICounter und seine Kinder.
2. Wählen Sie den duplizierten TeamACounter aus und setzen Sie im Fenster Eigenschaften,
  1. Setzen Sie Name auf TeamBCounter.
  2. Setzen Sie Image auf rbxassetid://14305849451, um ein gerichtetes Verblassen in die entgegengesetzte Richtung anzuzeigen.
  3. Setzen Sie ImageColor3 auf 255, 170, 255, um das Bild in der Farbe der Nelke rosa zu färben.
  4. Setzen Sie das teamColor-Attribut auf Nelkenrosa.
3. Wählen Sie das duplizierte TextLabel-Kind von TeamBCounter aus und setzen Sie im Fenster Eigenschaften,
  1. Setzen Sie AnchorPoint auf 0, 0.5, um den Ursprungspunkt des neuen Labels in der linken Mitte zu setzen (0 % von links nach rechts des Labels und 50 % von oben nach unten des Labels).
  2. Setzen Sie Position auf {0.05, 0},{0.5, 0}, um das Label links von seinem übergeordneten Label zu verschieben (5 % von links nach rechts des übergeordneten Labels und 50 % von oben nach unten des übergeordneten Labels).
  3. Setzen Sie TextXAlignment auf Left.
4. Wählen Sie das duplizierte UIStroke-Kind von TeamBCounter aus und setzen Sie im Fenster Eigenschaften die Farbe auf 158, 18, 94, um den Strich mit einem dunklen rosa Rand zu umreißen.
Verweisen Sie auf die folgenden ReplicatedStorage-Skripte innerhalb der Beispiel-Laser Tag Platzdatei, die programmgesteuert die Zielaufforderung aktualisieren und die Team-Punkte verfolgen.

Das folgende Skript erfordert eine Reihe von Modulscripten, die zusammenarbeiten, um das Haupt-Head-Up-Display (HUD) einzurichten, einschließlich setObjective und startSyncingTeamPoints. Nachdem ein Spieler einer Runde beigetreten ist und seinen Blaster ausgewählt hat, stellt dieses Skript sicher, dass alle HUD-UI-Elemente entsprechend dem Status des Spielers, dem Gerät und dem Teamstatus angezeigt werden.

local Players = game:GetService("Players")

local setPlayerPortrait = require(script.setPlayerPortrait)
local setPlayerName = require(script.setPlayerName)
local startSyncingTeamColor = require(script.startSyncingTeamColor)
local setObjective = require(script.setObjective)
local setupTouchButtonAsync = require(script.setupTouchButtonAsync)
local startSyncingTeamPoints = require(script.startSyncingTeamPoints)
local disableMouseWhileGuiEnabled = require(script.disableMouseWhileGuiEnabled)
local setupHitmarker = require(script.setupHitmarker)

local localPlayer = Players.LocalPlayer
local gui = localPlayer.PlayerGui:WaitForChild("HUDGui")

setPlayerPortrait(gui)
setPlayerName(gui)
startSyncingTeamColor(gui)
setObjective(gui)
startSyncingTeamPoints(gui)
disableMouseWhileGuiEnabled(gui)
setupHitmarker(gui)
setupTouchButtonAsync(gui)

Jetzt wird, nachdem ein Spieler seinen Blaster ausgewählt hat, die Ziel-UI oben auf ihrem Bildschirm angezeigt und verfolgt die Punkte jedes Teams.

Blaster-UI

Nach 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 Gruppe von UI-Elementen nimmt den Großteil des Bildschirmraums in der Mitte des Bildschirms ein, da sie als Fokuspunkt dient, um die Aufmerksamkeit der Spieler auf die Aktionen im 3D-Raum zu lenken, und sie hat die größte Bedeutung für das Spielen des Spiels.

Fadenkreuz

Ein Fadenkreuz ist ein UI-Element, das die Spieler darüber informiert, wo sie treffen werden, wenn sie ihre Waffe abfeuern. Dieses UI-Element ist eine wesentliche Gameplay-Anforderung für Ego-Shooter-Spiele, da die Spieler in der Lage sein müssen, genau zu zielen und gegnerische Teammitglieder auszutaggen.

Wie die meisten anderen Spiele im Ego-Shooter-Genre positioniert das Beispiel-Laser-Tag-Spiel das Fadenkreuz in der Mitte des Bildschirms, damit die Spieler etwas Statisches haben, auf das sie sich konzentrieren können, während sich ihr Avatar durch den 3D-Raum bewegt. Neben der Verringerung von Übelkeit ermöglicht diese Platzierung, dass das Fadenkreuz wahrnehmbar ist und gleichzeitig in die gesamte Umgebung integriert wird.

Um das Fadenkreuz genau im Beispiel Laser Tag Spiel nachzubauen:

Fügen Sie ein ImageLabel in das HUDGui ScreenGui-Objekt ein.
1. Navigieren Sie im Fenster Explorer zum Dienst StarterGui.
2. Bewegen Sie den Mauszeiger über das untergeordnete HUDGui-Objekt und klicken Sie dann auf das ⊕-Symbol. Ein kontextuelles Menü wird angezeigt.
3. Fügen Sie aus dem kontextuellen Menü ein ImageLabel ein.
Wählen Sie das neue ImageLabel aus und setzen Sie im Fenster Eigenschaften,
1. Setzen Sie Image auf rbxassetid://14400935446.
2. Setzen Sie AnchorPoint auf 0.5, 0.5, um den Ursprungspunkt des Labels in der Mitte des Labels zu setzen (50 % von links nach rechts des Labels und 50 % von oben nach unten des Labels).
3. Setzen Sie BackgroundTransparency auf 1, um den Hintergrund des Labels vollständig transparent zu machen.
4. Setzen Sie Name auf Fadenkreuz.
5. Setzen Sie Position auf {0.5,0},{0.5,0}, um das Label in die Mitte des Bildschirms zu setzen.
6. 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. Das Beispiel setzt die UIAspectRatioConstraint.AspectRatio-Eigenschaft auf 0.895.

Treffer-Marker

Ein Treffer-Marker ist ein UI-Element, das nur angezeigt wird, wenn ein Schuss einen anderen Spieler des gegnerischen Teams trifft. Wie das Fadenkreuz ist dieses UI-Element eine wesentliche Gameplay-Anforderung für Ego-Shooter-Spiele, da es visuelles Feedback darüber gibt, wann die Spieler erfolgreich ihre Gegner ausgetaggt haben.

Um den Treffer-Marker genau im Beispiel Laser Tag Spiel nachzubauen:

Fügen Sie ein ImageLabel in das Crosshair ImageLabel-Objekt ein.
1. Navigieren Sie im Fenster Explorer zum Dienst StarterGui.
2. Bewegen Sie den Mauszeiger über das untergeordnete Crosshair-Objekt und klicken Sie dann auf das ⊕-Symbol. Ein kontextuelles Menü wird angezeigt.
3. Fügen Sie aus dem kontextuellen Menü ein ImageLabel ein.
Wählen Sie das neue ImageLabel aus und setzen Sie im Fenster Eigenschaften,
1. Setzen Sie Image auf rbxassetid://14401148736, um das rechteckige Treffer-Marker-Icon anzuzeigen.
2. Setzen Sie AnchorPoint auf 0.5, 0.5, um den Ursprungspunkt des Labels in der Mitte des Labels zu setzen.
3. Setzen Sie BackgroundTransparency auf 1, um den Hintergrund des Labels vollständig transparent zu machen.
4. Setzen Sie Position auf {0.5,0},{0.5,0}, um das Label in die Mitte des Bildschirms zu setzen.
5. Setzen Sie Name auf Hitmarker.
6. Setzen Sie Size auf {0.6, 0},{0.06, 0}, um die Größe der Rechtecke um die Mitte des Fadenkreuzes zu reduzieren.
7. Setzen Sie ImageTransparency auf 1, um den Treffer-Marker vollständig transparent zu machen. Die Skripte im folgenden Schritt setzen die Transparenz jedes Mal auf 0 zurück, wenn der Schuss eines Spielers einen anderen Spieler des gegnerischen Teams trifft.
Verweisen Sie auf die folgenden ReplicatedStorage-Skripte innerhalb der Beispiel-Laser Tag Platzdatei, die programmgesteuert den Treffer-Marker anzeigen, wenn ein Schuss einen 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, stellt dieses Skript sicher, dass alle HUD-UI-Elemente entsprechend dem Status des Spielers, dem Gerät und dem Teamstatus angezeigt werden.

local Players = game:GetService("Players")

local setPlayerPortrait = require(script.setPlayerPortrait)
local setPlayerName = require(script.setPlayerName)
local startSyncingTeamColor = require(script.startSyncingTeamColor)
local setObjective = require(script.setObjective)
local setupTouchButtonAsync = require(script.setupTouchButtonAsync)
local startSyncingTeamPoints = require(script.startSyncingTeamPoints)
local disableMouseWhileGuiEnabled = require(script.disableMouseWhileGuiEnabled)
local setupHitmarker = require(script.setupHitmarker)

local localPlayer = Players.LocalPlayer
local gui = localPlayer.PlayerGui:WaitForChild("HUDGui")

setPlayerPortrait(gui)
setPlayerName(gui)
startSyncingTeamColor(gui)
setObjective(gui)
startSyncingTeamPoints(gui)
disableMouseWhileGuiEnabled(gui)
setupHitmarker(gui)
setupTouchButtonAsync(gui)

Jetzt wird, wann immer ein Spieler seinen Blaster abfeuert und der Schuss einen anderen Spieler trifft, der Treffer-Marker vorübergehend angezeigt.

Blaster-Auswahl

Ein Blaster-Auswahl ist eine UI-Komponente, die die Spieler verwenden, um ihren Blastertyp auszuwählen, bevor sie einer Runde beitreten oder wieder beitreten. Das Beispiel-Laser-Tag-Spiel bietet zwei Arten von Blastern: einen, der mehrere Strahlen mit einer breiten, horizontalen Streuung erzeugt, und einen anderen, der einen einzelnen Strahl erzeugt. Der Typ des Blasters, den die Spieler auswählen, beeinflusst ihre Strategie während der Runde, wodurch diese UI-Komponente ein wesentlicher Workflow für das gesamte Spiel ist.

Die folgenden Schritte beschreiben, wie Sie mehrere Container für die verschiedenen UI-Elementgruppen, einen Header mit einer Aufforderung, die Navigations- und Auswahlknöpfe sowie eine Blaster-Button-Vorlage erstellen. Die Skriptlogik für die gesamte Komponente füllt verschiedene visuelle Eigenschaften in die Blaster-Button-Vorlage gemäß den Configuration-Instanzen ein, die jeden Blastertyp repräsentieren.

Diese Einrichtung ermöglicht es Ihnen, zusätzliche Configuration-Instanzen für weitere Blastertypen zu erstellen, die automatisch korrekt innerhalb der Blaster-Auswahl angezeigt werden, ohne dass Sie individuelle Knöpfe innerhalb von StarterGui.PickABlasterGui erstellen müssen.

Um die Blaster-Auswahl genau im Beispiel Laser Tag Spiel nachzubauen:

Erstellen Sie einen Container für die gesamte Komponente.
1. Fügen Sie ein Frame in das PickABlaster ScreenGui-Objekt ein.
  1. Navigieren Sie im Fenster Explorer zum Dienst StarterGui.
  2. Bewegen Sie den Mauszeiger über das untergeordnete PickABlaster-Objekt und klicken Sie dann auf das ⊕-Symbol. Ein kontextuelles Menü wird angezeigt.
  3. Fügen Sie aus dem kontextuellen Menü ein Frame ein.
2. Wählen Sie das neue Frame aus und setzen Sie im Fenster Eigenschaften,
  1. Setzen Sie AnchorPoint auf 0.5, 1, um den Ursprungspunkt des Rahmens in der unteren Mitte zu setzen (50 % von links nach rechts des Rahmens und 100 % von oben nach unten des Rahmens).
  2. Setzen Sie BackgroundTransparency auf 1, um den Hintergrund des Rahmens vollständig transparent zu machen.
  3. Setzen Sie Position auf {0.5, 0},{0.9, 0}, um den Rahmen nahe der unteren Mitte des Bildschirms zu platzieren (50 % von links nach rechts des Bildschirms und 92,4 % von oben nach unten des Bildschirms).
  4. Setzen Sie Size auf {0.8, 0},{0.25, 0}, damit die UI-Komponenten der Blaster-Auswahl einen großen Teil des Bildschirms einnehmen, um die Aufmerksamkeit der Spieler zu erregen (80 % horizontal und 25 % vertikal).
  5. Setzen Sie Name auf Component.
3. OPTIONAL
  Fügen Sie ein UIAspectRatioConstraint in Component ein, um sicherzustellen, dass das Seitenverhältnis des Rahmens und seiner untergeordneten UI-Elemente unabhängig von der Bildschirmgröße des Spielers gleich bleibt. Das Beispiel setzt die UIAspectRatioConstraint.AspectRatio-Eigenschaft auf 5.
Erstellen Sie einen Container, um UI-Elementgruppen zu halten.
1. Fügen Sie ein Frame in Component ein.
2. Wählen Sie das neue Frame aus und setzen Sie im Fenster Eigenschaften,
  1. Setzen Sie AnchorPoint auf 0.5, 0.5, um den Ursprungspunkt des Rahmens in der Mitte zu setzen (50 % von links nach rechts des Rahmens und 50 % von oben nach unten des Rahmens).
  2. Setzen Sie BackgroundTransparency auf 1, um den Hintergrund des Rahmens vollständig transparent zu machen.
  3. Setzen Sie Position auf {0.5, 0},{0.375, 0}, um den Rahmen nahe der oberen Mitte des Containers zu platzieren (50 % von links nach rechts des übergeordneten Rahmens und 37,5 % von oben nach unten des übergeordneten Rahmens).
  4. Setzen Sie Size auf {1, 0},{0.75, 0}, damit die Auswahl-UI-Komponenten 3/4 des Containers einnehmen (100 % horizontal und 75 % vertikal des übergeordneten Rahmens).
  5. Setzen Sie Name auf SelectionFrame.
Erstellen Sie eine Aufforderung für die Blaster-Auswahl.
1. Fügen Sie ein ImageLabel in SelectionFrame ein.
2. Wählen Sie das neue Label aus und setzen Sie im Fenster Eigenschaften,
  1. 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).
  2. Setzen Sie BackgroundTransparency auf 1, um den Hintergrund des Labels vollständig transparent zu machen.
  3. Setzen Sie LayoutOrder auf -1.
  4. Setzen Sie Position auf {0.5, 0},{0.22, 0}, um das Label nahe der oberen Mitte des Rahmens zu platzieren (50 % von links nach rechts des übergeordneten Rahmens und 22 % von oben nach unten des übergeordneten Rahmens).
  5. Setzen Sie Size auf {0.45, 0},{0.22, 0}, um den Aufforderungsbereich auf fast die Hälfte des Rahmens zu erweitern (45 % horizontal und 22 % vertikal des übergeordneten Rahmens).
  6. Setzen Sie Name auf Header.
  7. Setzen Sie Image auf rbxassetid://14304828123, um ein Trapez anzuzeigen.
  8. Setzen Sie ImageTransparency auf 0.15, um den Header halbtransparent zu machen.
3. 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. Das Beispiel setzt die UIAspectRatioConstraint.AspectRatio-Eigenschaft auf 13.78.
4. Fügen Sie ein TextLabel in Header ein, um eine Aufforderung anzuzeigen.
5. Wählen Sie das neue Label aus und setzen Sie im Fenster Eigenschaften,
  1. Setzen Sie AnchorPoint auf 0.5, 0.5, um den Ursprungspunkt des neuen Labels in der Mitte zu setzen (50 % von links nach rechts des Labels und 50 % von oben nach unten des Labels).
  2. Setzen Sie BackgroundTransparency auf 1, um den Hintergrund des Labels vollständig transparent zu machen.
  3. Setzen Sie Position auf {0.5, 0},{0.5, 0}, um das Label in die Mitte seines übergeordneten Labels zu verschieben (50 % von links nach rechts des übergeordneten Labels und 50 % von oben nach unten des übergeordneten Labels).
  4. Setzen Sie Size auf {0.6, 0},{0.55, 0}, um den Textbereich auf mehr als die Hälfte des übergeordneten Labels zu erweitern (60 % horizontal und 55 % vertikal des übergeordneten Labels).
  5. Setzen Sie Name auf HeaderTextLabel.
  6. Setzen Sie FontFace auf Montserrat, um die futuristische Ästhetik zu unterstützen.
  7. Setzen Sie Weight auf Medium, um die Schrift zu verdicken.
  8. Setzen Sie Text auf WÄHLEN SIE EINEN BLASTER.
  9. Aktivieren Sie TextScaled.
Erstellen Sie den Container für Ihre Blaster-Button-Container und Auswahlpfeile.
1. Fügen Sie ein ImageLabel in SelectionFrame ein.
2. Wählen Sie das neue Label aus und setzen Sie im Fenster Eigenschaften,
  1. Entfernen Sie den Standardwert für Image.
  2. 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).
  3. Setzen Sie BackgroundColor auf 0, 0, 0, um das Label schwarz zu machen.
  4. Setzen Sie BackgroundTransparency auf 0.3, um die Opazität des Labels um 30 % zu reduzieren und alle schwarzen UI-Elemente im Spiel anzupassen.
  5. 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).
  6. Setzen Sie Size auf {1, 0},{0.77, 0}, um den Bereich des Labels unter der Aufforderung zu erweitern (100 % horizontal und 77 % vertikal des übergeordneten Rahmens).
3. Runden Sie die Ecken des Containers ab.
  1. Fügen Sie ein UICorner-Objekt in das Label ein.
  2. Wählen Sie das neue Eckobjekt aus und setzen Sie im Fenster Eigenschaften den CornerRadius auf 0.075, 0, um die Ecken abzurunden.
Erstellen Sie den Container für Ihre Blaster-Buttons.
1. Fügen Sie ein Frame in das Label aus Schritt 4 ein.
2. Wählen Sie das neue Frame aus und setzen Sie im Fenster Eigenschaften,
  1. Setzen Sie AnchorPoint auf 0.5, 0.5, um den Ursprungspunkt des neuen Rahmens in der Mitte zu setzen (50 % von links nach rechts des Rahmens und 50 % von oben nach unten des Rahmens).
  2. Setzen Sie BackgroundTransparency auf 1, um den Hintergrund des Rahmens vollständig transparent zu machen.
  3. 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).
  4. Setzen Sie Size auf {0.85, 0},{0.77, 0}, um den Rahmenbereich auf den Großteil des Labels zu erweitern (85 % horizontal und 77 % vertikal des übergeordneten Labels).
  5. Setzen Sie Name auf Container.
Erstellen Sie einen Abstand für alle zukünftigen Blaster-Buttons.
1. Fügen Sie ein UIListLayout-Objekt in den Rahmen aus Schritt 5 ein.
2. Wählen Sie das neue Layout-Objekt aus und setzen Sie im Fenster Eigenschaften,
  1. Setzen Sie Padding auf 0.035, 0, um Platz zwischen allen zukünftigen Knöpfen zu schaffen.
  2. Setzen Sie FillDirection auf Horizontal, damit jeder Knopf nebeneinander angezeigt wird.
  3. Setzen Sie sowohl HorizontalAlignment als auch VerticalAlignment auf Center, damit jeder Knopf in der Mitte ausgerichtet ist.
Erstellen Sie den linken Navigationsknopf.
1. Fügen Sie ein ImageButton-Objekt in das ImageLabel aus Schritt 4 ein.
2. Wählen Sie den neuen Knopf aus und setzen Sie im Fenster Eigenschaften,
  1. Entfernen Sie den Standardwert für Image.
  2. Setzen Sie AnchorPoint auf 0, 0.5, um den Ursprungspunkt des neuen Knopfes in der linken Mitte zu setzen (0 % von links nach rechts des Knopfes und 50 % von oben nach unten des Knopfes).
  3. Setzen Sie BackgroundTransparency auf 0.15, um visuelles Feedback beim Hover zu geben, dass der Knopf auswählbar ist.
  4. Setzen Sie Position auf {0.02, 0},{0.5, 0}, um den Abstand links vom Knopf von seinem übergeordneten Container zu schaffen (2 % von links nach rechts des übergeordneten Labels und 50 % von oben nach unten des übergeordneten Labels).1. Set Größe auf {0.04, 0},{0.33, 0} um die Auswahltaste viel kleiner als die Blastertasten zu machen (4% horizontal und 33% vertikal des übergeordneten Rahmens).
Setze Name auf NavigationButtonLeft.
Runde die Ecken des Buttons ab.
1. Füge ein UICorner-Objekt in den Button ein.
2. 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,
1. 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).
2. Setze Position auf {0.45, 0},{0.5, 0}, um das Label nahe der Mitte seines übergeordneten Buttons zu positionieren (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}.
3. Setze Größe auf {0.8, 0},{0.8, 0}, um den Bereich des Labels zu verbreitern, um Platz unter dem Hinweis zu schaffen (80% horizontal und 80% vertikal des übergeordneten Rahmens).
4. Setze BackgroundTransparency auf 1, um den Hintergrund des Bildes vollständig transparent zu machen.
5. Setze Image auf rbxassetid://14309187238.
6. Setze ScaleType auf Fit.
Erstelle die rechte Navigationstaste.
1. Dupliziere NavigationButtonLeft.
2. Wähle die duplizierte Taste aus und setze im Eigenschaften-Fenster,
  1. Setze AnchorPoint auf 1, 0.5, um den Ursprungspunkt der neuen Taste in die rechte Mitte von sich selbst zu setzen (100% von links nach rechts der Taste und 50% von oben nach unten der Taste).
  2. Setze Position auf {0.98, 0},{0.5, 0}, um einen Abstand zur rechten Seite der Taste von ihrem übergeordneten Container zu schaffen (98% von links nach rechts des übergeordneten Labels und 50% von oben nach unten des übergeordneten Labels).
  3. Setze Name auf NavigationButtonRight.
3. Wähle das ImageLabel-Kindobjekt aus.
  1. Setze Rotation auf 180, um das Bild zu drehen.
  2. Setze Position auf {0.55, 0},{0.5, 0}, um das Label nahe der Mitte seines übergeordneten Buttons zu positionieren (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 die SELECT-Taste.
1. Füge ein ImageButton in Component ein. Beachte, wie dieser Prozess die Auswahltaste von SelectionFrame trennt, sodass du einen Abstand zwischen dem Hauptteil der Komponente und der Auswahltaste hinzufügen kannst.
2. Wähle den neuen Button aus und setze im Eigenschaften-Fenster,
  1. Entferne den Standardwert für Image.
  2. Setze AnchorPoint auf 0.5, 1, um den Ursprungspunkt des neuen Buttons in die untere Mitte von sich selbst zu setzen (50% von links nach rechts der Taste und 100% von oben nach unten der Taste).
  3. Setze BackgroundTransparency auf 0.15, um visuelles Feedback beim Hover zu geben, dass der Button auswählbar ist.
  4. Setze Position auf {0.5, 0},{0.99, 0}, um den Button nahe der unteren Mitte seines Containers zu positionieren (50% von links nach rechts des übergeordneten Rahmens und 99% von oben nach unten des übergeordneten Rahmens).
  5. Setze Größe auf {0.17, 0},{0.18, 0}, um die Taste unter den Blastertasten zu verlängern (17% horizontal und 18% vertikal des übergeordneten Rahmens).
  6. Setze Name auf SelectButton.
3. Runde die Ecken des Buttons ab.
  1. Füge ein UICorner-Objekt in den Button ein.
  2. Wähle das neue Eckenobjekt aus und setze im Eigenschaften-Fenster CornerRadius auf 0.2, 0, um die Ecken abzurunden.
4. Füge ein TextLabel-Objekt in den Button ein, damit du einen Aufruf zur Aktion anzeigen kannst.
5. Wähle das neue Label aus und setze im Eigenschaften-Fenster,
  1. 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).
  2. Setze BackgroundTransparency auf 1, um den Hintergrund des Labels vollständig transparent zu machen.
  3. 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).
  4. Setze Größe auf {0.9, 0},{0.55, 0}, um den Textbereich fast auf die gesamte Breite des übergeordneten Labels zu verbreitern (90% horizontal und 55% vertikal des übergeordneten Labels).
  5. Setze Name auf SelectTextLabel.
  6. Setze FontFace auf Montserrat, um die futuristische Ästhetik zu passen.
  7. Setze Weight auf Medium, um die Schrift zu verdicken.
  8. Setze Text auf SELECT.
  9. Aktiviere TextScaled.
Erstelle ein Blaster-Button-Prefab.
1. Erstelle im ReplicatedStorage-Dienst eine Ordnerstruktur, um deine UI-Objekte zu organisieren. Das Beispiel verwendet einen Instances-Ordner mit einem untergeordneten Guis-Ordner.
2. Füge ein ImageButton-Objekt in den Guis-Ordner ein.
3. Wähle den neuen Button aus und setze im Eigenschaften-Fenster,
  1. Entferne den Standardwert für Image.
  2. 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 der Taste und 50% von oben nach unten der Taste).
  3. Setze BackgroundTransparency auf 0.65, um visuelles Feedback zu geben, dass der Button nicht im Fokus ist. Skripte in Schritt 12 bieten programmatisches visuelles Feedback, wenn der Button im Fokus ist.
  4. Setze LayoutOrder auf 2.
  5. Setze Name auf BlasterButtonPrefab.
  6. Setze Größe auf {0.8, 0},{0.8, 0}.
  7. Setze ImageTransparency auf 1, um das Bild vollständig transparent zu machen.
4. Füge ein UIAspectRatioConstraint in BlasterButtonPrefab ein, um sicherzustellen, dass das Seitenverhältnis des Buttons innerhalb der Komponente unabhängig von der Bildschirmgröße des Spielers gleich bleibt.
5. Runde die Ecken des Buttons ab.
  1. Füge ein UICorner-Objekt in BlasterButtonPrefab ein.
  2. Wähle das UICorner aus und setze im Eigenschaften-Fenster CornerRadius auf 0.05, 0, um die Ecken abzurunden.
6. Füge ein ImageLabel in BlasterButtonPrefab ein.
7. Wähle das neue Label aus und setze im Eigenschaften-Fenster,
  1. Entferne den Standardwert für Image.
  2. 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).
  3. Setze BackgroundTransparency auf 1, um den Hintergrund des Labels vollständig transparent zu machen.
  4. Setze Position auf {0.52, 0},{0.497, 0}, um das Label nahe der Mitte seines übergeordneten Buttons zu positionieren (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}.
  5. Setze Größe auf {1.20, 0},{0.9, 0}, um den Bereich des Labels außerhalb des Buttons zu verbreitern (120% horizontal und 90% vertikal des übergeordneten Buttons).
  6. Setze ScaleType auf Fit.
Referenziere die folgenden ReplicatedStorage-Skripte innerhalb der Beispiel Laser Tag Platzdatei, die programmatisch Tasten für jeden Blaster anzeigen, die Tasten skalieren, wenn ein Spieler eine Taste auswählt, die nicht im Fokus ist, und die Blasterauswahl eines Spielers an ihren Avatar anhängen.

Das folgende Skript erfordert eine Reihe von Modulscripten, die zusammenarbeiten, um den Blasterauswähler zu erstellen. Wenn ein Spieler dem Spiel beitritt oder nach dem Erreichen von null Gesundheit wieder in eine Runde respawnt, aktiviert dieses Skript alle UI-Elemente des Blasterauswählers, bis der Spieler seine Auswahl trifft.

local Players = game:GetService("Players")
local ReplicatedStorage = game:GetService("ReplicatedStorage")

local GuiAttribute = require(ReplicatedStorage.GuiAttribute)
local setupBlasterButtons = require(script.setupBlasterButtons)
local connectResetSelectionOnEnabled = require(script.connectResetSelectionOnEnabled)

local localPlayer = Players.LocalPlayer
local gui = localPlayer.PlayerGui:WaitForChild("PickABlasterGui")

setupBlasterButtons(gui)
connectResetSelectionOnEnabled(gui)
gui:SetAttribute(GuiAttribute.selectedIndex, 1)

Jetzt zeigt die Blasterauswahl-UI immer an, wenn ein Spieler dem Spiel beitritt oder nach dem Respawn in eine Runde zurückkehrt, sie können eine Auswahl treffen, und jede Taste funktioniert wie erwartet.

Blast-Taste

Eine Blast-Taste ist eine UI-Komponente, die Spieler verwenden, um ihren Blaster zu feuern, wenn sie auf das Spiel über ein mobiles oder Tablet-Gerät zugreifen. Das Beispiel-Laser-Tag-Spiel verwendet eine Blastertaste mit einem Symbol, das sowohl ein Fadenkreuz als auch eine Explosion darstellt, um die Funktion der Taste ohne Text zu kommunizieren.

Um die Blast-Taste genau im Beispiel Laser Tag Spiel zu reproduzieren:

Füge ein ImageButton in das HUDGui ScreenGui-Objekt ein.
1. Navigiere im Explorer-Fenster zum StarterGui-Dienst.
2. Fahre mit der Maus über das untergeordnete HUDGui-Objekt und klicke dann auf das ⊕-Symbol. Ein Kontextmenü wird angezeigt.
3. Füge aus dem Kontextmenü ein ImageButton ein.
Bewege den Button im Ansichtsfenster dorthin, wo der Daumen eines Spielers natürlich ruht, damit du ein visuelles Gefühl dafür bekommst, wie der Button auf dem Gerät eines Spielers aussehen wird, und setze dann im Eigenschaften-Fenster,
1. Setze Image auf rbxassetid://18308375035, um das Symbol der Blast-Taste anzuzeigen.
2. Setze PressedImage auf rbxassetid://18308372558, um eine invertierte Version des Symbols der Blast-Taste anzuzeigen, wenn ein Spieler die Taste drückt.
3. Setze BackgroundTransparency auf 1, um den Hintergrund des Labels vollständig transparent zu machen.
4. Setze Name auf BlastButton.
5. Setze ScaleType auf Fit, damit das Bild in seinen Container passt und sich auf verschiedenen Bildschirmgrößen nicht dehnt.
6. Setze ImageTransparency auf 0.3, um die Opazität des Labels zu reduzieren, sodass es mit allen schwarzen UI-Elementen im Spiel übereinstimmt.
Füge ein UIAspectRatioConstraint in BlastButton ein, um sicherzustellen, dass das Seitenverhältnis des Buttons unabhängig von der Bildschirmgröße des Spielers gleich bleibt.
Referenziere die folgenden ReplicatedStorage-Skripte innerhalb der Beispiel Laser Tag Platzdatei, die programmatisch die Blastertaste anzeigen, wenn ein Spieler Touch-Eingaben auf einem Gerät verwendet, das Touch-Steuerungen akzeptiert.

Das folgende Skript erfordert eine Reihe von Modulscripten, die zusammenarbeiten, um das Haupt Heads 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, das Gerät und den Teamstatus des Spielers angezeigt werden.

local Players = game:GetService("Players")

local setPlayerPortrait = require(script.setPlayerPortrait)
local setPlayerName = require(script.setPlayerName)
local startSyncingTeamColor = require(script.startSyncingTeamColor)
local setObjective = require(script.setObjective)
local setupTouchButtonAsync = require(script.setupTouchButtonAsync)
local startSyncingTeamPoints = require(script.startSyncingTeamPoints)
local disableMouseWhileGuiEnabled = require(script.disableMouseWhileGuiEnabled)
local setupHitmarker = require(script.setupHitmarker)

local localPlayer = Players.LocalPlayer
local gui = localPlayer.PlayerGui:WaitForChild("HUDGui")

setPlayerPortrait(gui)
setPlayerName(gui)
startSyncingTeamColor(gui)
setObjective(gui)
startSyncingTeamPoints(gui)
disableMouseWhileGuiEnabled(gui)
setupHitmarker(gui)
setupTouchButtonAsync(gui)

Jetzt wird die Blastertaste angezeigt, wenn ein Spieler dem Spiel beitritt und Touch-Eingaben auf einem Gerät verwendet, das Touch-Steuerungen akzeptiert, oben rechts von der Sprungtaste.

Spieler-UI

Folgend den besten Praktiken der visuellen Hierarchie aus Wireframe Your Layouts, lehrt dich dieser Abschnitt, wie du alle UI-Elemente auf dem Bildschirm implementierst, die sich auf den Status 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 sich beziehen, um schnell zu erkennen, zu welchem Team sie gehören, sobald sie in die Spawnzone ihres Teams spawnen. Das Beispiel-Laser-Tag-Spiel bietet zwei Versionen des Spielerindikators, abhängig davon, ob der Spieler im grünen oder rosa Team ist.

Folge den Anweisungen aus Wähle ein Farbschema, kombinieren beide Versionen des Spielerindikators die Teamfarbe mit einem einzigartigen, einfachen Symbol mit minimalen Details, damit sie auf kleinen Bildschirmen lesbar bleiben. Die Bereitstellung von zwei Formen visuellen Feedbacks ist wichtig, da sie das Design für Spieler mit Farbenblindheit zugänglich hält.

Um die Spielerindikator-Komponente genau im Beispiel Laser Tag Spiel zu reproduzieren:

Füge ein Frame in das HUDGui ScreenGui-Objekt ein.
1. Navigiere im Explorer-Fenster zum StarterGui-Dienst.
2. Fahre mit der Maus über das untergeordnete HUDGui-Objekt und klicke dann auf das ⊕-Symbol. Ein Kontextmenü wird angezeigt.
3. Füge aus dem Kontextmenü ein Frame ein.
Wähle das neue Frame aus und setze im Eigenschaften-Fenster,
1. Setze AnchorPoint auf 0, 1, um den Ursprungspunkt des Rahmens in die untere Mitte von sich selbst zu setzen (0% von links nach rechts des Rahmens und 100% von oben nach unten des Rahmens).
2. Setze BackgroundTransparency auf 1, um den Hintergrund des Labels vollständig transparent zu machen.
3. Setze Name auf PlayerDisplay.
4. Setze Position auf {0.02, 0},{0.97, 0}, um den Rahmen nahe der unteren linken Ecke des Bildschirms zu positionieren.
5. Setze Größe auf {0.23, 0},{0.08, 0}, um den Rahmen sowohl zu verkürzen als auch zu verbreitern.
6. Aktiviere ClipsDescendants, um untergeordnete GuiObjects zu trimmen, die über den Rahmen hinausgehen.
Erstelle die polygonale Form.
1. Füge ein ImageLabel in PlayerDisplay ein.
2. Wähle das neue Label aus und setze im Eigenschaften-Fenster,
  1. Setze Image auf rbxassetid://14304828123, um das Trapez-Symbol anzuzeigen.
  2. 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).
  3. Setze BackgroundTransparency auf 1, um den Hintergrund des Labels vollständig transparent zu machen.
  4. Setze Name auf Block.
  5. Setze Position auf {1,0},{1,0}, um das Label an die rechte Seite des Rahmens zu setzen.
  6. Setze Größe 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.
  7. Setze ImageTransparency auf 0.15, um das Label leicht transparent zu machen.
  8. Setze ScaleType auf Fit, damit das Bild in seinen Container passt und sich auf verschiedenen Bildschirmgrößen nicht dehnt.
  1. 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.
  2. 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.
1. Füge ein ImageLabel in PlayerDisplay ein.
2. Wähle das neue Label aus und setze im Eigenschaften-Fenster,
  1. Entferne die Platzhalter-Asset-ID innerhalb der Image-Eigenschaft. Die Skripte in Schritt 7 fügen programmgesteuert das Porträt des Spielers in das Bildlabel ein.
  2. 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).
  3. Setze BackgroundColor3 auf 0, 0, 0, um die Hintergrundfarbe des Labels auf schwarz zu setzen.
  4. Setze BackgroundTransparency auf 0.3, um die Opazität des Labels um 30% zu reduzieren und mit allen schwarzen UI-Elementen im Spiel übereinzustimmen.
  5. Setze Name auf PlayerPortrait.
  6. Setze Position auf {0.11, 0},{1, 0}, um das Label an die linke Seite der polygonalen Form zu setzen.
  7. Setze Größe auf {0.23, 0},{1, 0}, um das Label zu verkleinern.
  8. Setze ImageTransparency auf 0.15, um das Label leicht transparent zu machen.
  9. Setze ScaleType auf Fit, damit das Bild in seinen Container passt und sich auf verschiedenen Bildschirmgrößen nicht dehnt.
  1. 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.
  2. 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.
1. Füge ein TextLabel-Objekt in PlayerDisplay ein.
2. Wähle das neue Label aus und setze im Eigenschaften-Fenster,
  1. 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).
  2. Setze BackgroundTransparency auf 1, um den Hintergrund des Labels vollständig transparent zu machen.
  3. Setze Name auf PlayerNameTextLabel.
  4. 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).
  5. Setze Größe auf {0.52, 0},{0.3, 0}, damit der Text den größten Teil des Bereichs der polygonalen Form einnehmen kann (52% horizontal und 30% vertikal des übergeordneten Rahmens).
  6. Setze FontFace auf Montserrat, um die futuristische Ästhetik zu passen.
  7. Setze Weight auf Bold, um die Schrift zu verdicken.
  8. Entferne den Platzhaltertext innerhalb der Text-Eigenschaft. Die Skripte in Schritt 7 fügen programmgesteuert den Namen des Spielers in das Textlabel ein.
  9. Aktiviere TextScaled.
  10. Setze TextXAlignment auf Left.
Erstelle die Team-Icons und -Farben, die links vom Porträt des Spielers angezeigt werden.
1. Füge einen Ordner in PlayerDisplay ein und benenne ihn in TeamIcons um.
2. Erstelle das grüne Team-Icon und die Farbe.
  1. Füge ein ImageLabel in TeamIcons ein.
  2. 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 Größe auf {0.135, 0},{0.58, 0}, um das Label links vom Spielerporträt zu verkleinern.
    
    Setze ImageTransparency auf 1, um das Label transparent zu machen.
  1. Konfiguriere ein benutzerdefiniertes Attribut, um zu verfolgen, dass dieses Label für das grüne Team ist. Dieser Schritt ist sehr wichtig für die Skripte in Schritt 7.
    
    Navigiere im Eigenschaften-Fenster zum Abschnitt Attribute, klicke dann auf das Plus-Symbol. Ein Pop-up-Dialog wird angezeigt.
    
    Gib im Name-Feld teamColor ein.
    
    Wähle im Dropdown-Menü Typ BrickColor aus.
    
    Klicke auf die Speichern-Schaltfläche.
    
    Setze das neue teamColor-Attribut auf Mint.
  2. 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.
  3. Erstelle das Icon.
    
    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 grüne Team-Icon 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 Größe auf {0.7, 0},{0.6, 0}, um das Label zu verkleinern.
    
    Setze ScaleType auf Fit, damit das Bild in seinen Container passt und sich auf verschiedenen Bildschirmgrößen nicht dehnt.
3. Erstelle das rosa Team-Icon und die Farbe.
  1. Dupliziere TeamAIcon und seine Kinder.
  2. Wähle das duplizierte TeamAIcon aus und setze im Eigenschaften-Fenster,
    
    Setze BackgroundColor3 auf 255, 170, 255, um die Hintergrundfarbe des Labels auf fleischrosa 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-Icon anzuzeigen.
Referenziere die folgenden ReplicatedStorage-Skripte innerhalb der Beispiel Laser Tag Platzdatei, die programmatisch den Spielerindikator mit der entsprechenden Teamfarbe und dem Icon anzeigen, während ein Spieler aktiv in einer Runde ist.

Das folgende Skript erfordert eine Reihe von Modulscripten, die zusammenarbeiten, um das Haupt Heads 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, das Gerät und den Teamstatus des Spielers angezeigt werden.

local Players = game:GetService("Players")

local setPlayerPortrait = require(script.setPlayerPortrait)
local setPlayerName = require(script.setPlayerName)
local startSyncingTeamColor = require(script.startSyncingTeamColor)
local setObjective = require(script.setObjective)
local setupTouchButtonAsync = require(script.setupTouchButtonAsync)
local startSyncingTeamPoints = require(script.startSyncingTeamPoints)
local disableMouseWhileGuiEnabled = require(script.disableMouseWhileGuiEnabled)
local setupHitmarker = require(script.setupHitmarker)

local localPlayer = Players.LocalPlayer
local gui = localPlayer.PlayerGui:WaitForChild("HUDGui")

setPlayerPortrait(gui)
setPlayerName(gui)
startSyncingTeamColor(gui)
setObjective(gui)
startSyncingTeamPoints(gui)
disableMouseWhileGuiEnabled(gui)
setupHitmarker(gui)
setupTouchButtonAsync(gui)

Jetzt wird der Spielerindikator immer angezeigt, wenn ein Spieler der Runde beitritt oder wieder beitritt, nachdem er respawnt ist, unten links auf ihrem Bildschirm.

Kraftfeldschirm

Ein Kraftfeldschirm ist ein UI-Element, das den Ansichtsbereich überlagert, um die Spieler darüber zu informieren, dass sie vor dem Feuer des feindlichen Teams sicher sind, während sie einer Runde beitreten oder wieder beitreten. In Übereinstimmung mit den ästhetischen Richtlinien für Icons aus Wähle einen Kunststil nutzt das Beispiel-Laser-Tag-Spiel ein halbtransparentes sechseckiges Muster, um ein Kraftfeld zu symbolisieren. Diese Designentscheidung verstärkt nicht nur den futuristischen Kunststil für alle UI im Spiel, sondern kommuniziert auch den Status des Spielers ohne Text oder zusätzliche Anleitungen.

Um den Kraftfeldschirm genau im Beispiel Laser Tag Spiel zu reproduzieren:

Füge ein ImageLabel in das ForceFieldGui ScreenGui-Objekt ein.
1. Navigiere im Explorer-Fenster zum StarterGui-Dienst.
2. Fahre mit der Maus über das untergeordnete ForceFieldGui-Objekt und klicke dann auf das ⊕-Symbol. Ein Kontextmenü wird angezeigt.
3. Füge aus dem Kontextmenü ein ImageLabel ein.
Wähle das neue Label aus und setze im Eigenschaften-Fenster,
1. Setze Image auf rbxassetid://14462567888.
2. Setze BackgroundTransparency auf 0.8, um das Kraftfeld durchscheinend zu machen.
3. Setze Größe auf {1, 0},{1, 0}, um das Bild den gesamten Bildschirm ausfüllen zu lassen (100% horizontal und 100% vertikal des übergeordneten ScreenGui).
4. Setze ScaleType auf Tile, um das Sechseck über den gesamten Bildschirm zu fliesen.
5. Setze TileSize auf {0, 104},{0, 180}.
Füge ein UIGradient-Objekt in das Label ein.
Wähle das neue Gradientobjekt aus und setze im Eigenschaften-Fenster,
1. Setze Color auf eine Farbsequenz, die mit Blau beginnt, dann Weiß wird und dann wieder Blau wird.
  1. Setze Color auf 120, 192, 250, um allen Sechsecken einen hellblauen Farbton zu verleihen.
  2. Klicke auf die Color-Eigenschaft und dann auf die ⋯-Schaltfläche. Ein Farbsequenz-Pop-up wird angezeigt.
    
    Jeder Punkt 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.
  3. Klicke und ziehe auf der Farbsequenz, bis du einen Zeit-Wert von 0.05 erreichst, und klicke dann auf das kleine Quadrat neben Color, um das Colors-Pop-up-Fenster zu öffnen.
  4. Wähle ein helles Weiß und schließe das Pop-up-Fenster.
  5. Klicke und ziehe auf der Farbsequenz, bis du einen Zeit-Wert von 0.95 erreichst, öffne dann erneut das Colors-Pop-up-Fenster und wähle die gleiche Farbe Weiß wie zuvor aus.
2. Setze Rotation auf 225, um den blauen Teil deiner Farbsequenz in den oberen linken und unteren rechten Ecken anzuzeigen.
3. Setze Transparency auf eine Zahlenfolge, die das Kraftfeld wie schimmernd aussehen lässt.
  1. Klicke auf die Transparency-Eigenschaft und dann auf die ⋯-Schaltfläche. Ein Zahlenfolge-Pop-up wird angezeigt. Jeder Punkt am Anfang und Ende der Zahlenfolge ist ein Schlüsselpunkt, der den Transparenzwert der Eigenschaft an diesem Punkt des Bildes von links nach rechts bestimmt.
  2. Setze die folgenden Zeit- und Wert-Eigenschaften in der Zahlenfolge:
  - Zeit = 0, Wert = 0.25
  - Zeit = .101, Wert = 0.875
  - Zeit = .183, Wert = 0
  - Zeit = .3, Wert = 1
  - Zeit = .7, Wert = 1
  - Zeit = 1, Wert = 0.9
Dupliziere das ImageLabel aus Schritt 2.
Wähle das UIGradient-Objekt innerhalb des duplizierten Labels aus und setze im Eigenschaften-Fenster,
1. Setze Rotation auf -45, um das Bild zu drehen, sodass es sich entlang der Y-Achse fast spiegelt.
2. Ändere Transparency, um das Schimmern organischer aussehen zu lassen.
  1. Klicke auf die Transparency-Eigenschaft und dann auf die ⋯-Schaltfläche. Ein Zahlenfolge-Pop-up wird angezeigt.
  2. Wähle den dritten Schlüsselrahmen aus und klicke auf die Löschen-Schaltfläche.
Referenziere die folgenden ReplicatedStorage-Skripte innerhalb der Beispiel Laser Tag Platzdatei, die programmatisch den Kraftfeldschirm anzeigen, während ein Spieler einer Runde beitritt oder wieder beitritt.

Das folgende ReplicatedStorage.ForceFieldClientVisuals-Client-Skript ersetzt die Standardvisualisierung von ForceField durch StarterGui.ForceFieldGui. Wenn Spieler in ein Spiel laden und an einem SpawnLocation mit einer Duration-Eigenschaft, die größer als 0 ist, erscheinen, besteht das Standardverhalten in jedem Spiel darin, ihrem Avatar eine schützende blaue Kugel zu geben, die sie vorübergehend daran hindert, Gesundheit zu verlieren.

Dieses Skript beginnt damit, zuzuhören, wann das ForceField zu einem Charakter hinzugefügt wird, deaktiviert die Standardvisualisierungen des Force Fields aus der Ego-Perspektive und aktiviert dann das ForceFieldGui ScreenGui-Objekt. Beachten Sie, dass dies keine Auswirkungen auf die Visualisierungen aus der dritten Person hat, wenn Spieler andere Spieler sehen, die ins Spiel zurückkehren.

Die Visualisierungen des Force Fields aus der Ego-Perspektive umfassen ein futuristisches sechseckiges Gitter am Rand des Bildschirms. — Visualisierungen des Force Fields aus der Ego-Perspektive

Die Visualisierungen des Force Fields aus der dritten Person umfassen eine blaue funkelnde Kugel um den Spieler, der ins Spiel zurückkehrt. — Visualisierungen des Force Fields aus der dritten Person

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 erscheint
		return
	end

	forceField.Visible = false
	localPlayer.PlayerGui:WaitForChild("ForceFieldGui").Enabled = true
	forceField.Destroying:Wait()
	localPlayer.PlayerGui.ForceFieldGui.Enabled = false
end

if localPlayer.Character then
	onCharacterAddedAsync(localPlayer.Character)
end

localPlayer.CharacterAdded:Connect(onCharacterAddedAsync)

Jetzt wird immer, wenn ein Spieler dem Spiel beitritt oder nach dem Respawn wieder dem Spiel beitritt, die neue Force Field-Bildschirm-UI anstelle der Standardvisualisierungen des Force Fields aus der Ego-Perspektive angezeigt.

Respawn-Bildschirm

Ein Respawn-Bildschirm ist ein UI-Element, das die Ansicht dimmt, um die Spieler darüber zu informieren, dass sie ausgeschieden sind und der Server dabei ist, sie zurück zu ihrer Spawnzone zu respawnen. Dieses UI-Element ist wichtig, da es den Spielern Zeit gibt, zu verarbeiten, dass sie ausgeschieden sind, und ihre nächste Bewegung zu strategisieren, bevor sie wieder in die aktive Runde eintreten.

Für weitere Informationen zum benutzerdefinierten Respawn-Verhalten im Beispiel-Laser-Tag-Spiel siehe Respawn Characters aus dem Gameplay-Scripting-Lehrplan.

Um den Respawn-Bildschirm genau im Beispiel Laser Tag Spiel zu reproduzieren:

Erstellen Sie das zentrale Informationsbanner.
1. Fügen Sie ein ImageLabel in das OutStateGui ScreenGui-Objekt ein.
  1. Navigieren Sie im Explorer-Fenster zum StarterGui-Dienst.
  2. Fahren Sie mit der Maus über das untergeordnete OutStateGui-Objekt und klicken Sie dann auf das ⊕-Symbol. Ein Kontextmenü wird angezeigt.
  3. Fügen Sie aus dem Kontextmenü ein ImageLabel ein.
2. Wählen Sie das neue Label aus und setzen Sie im Properties-Fenster,
  1. Setzen Sie AnchorPoint auf 0.5, 0.5, um den Ursprungspunkt des neuen Buttons in die Mitte zu setzen (50 % von links nach rechts des Labels und 50 % von oben nach unten des Labels).
  2. Setzen Sie BackgroundTransparency auf 1, um den Hintergrund des Labels vollständig transparent zu machen.
  3. 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).
  4. Setzen Sie Size auf {0.48, 0},{0.06, 0}, um das Label zu verbreitern (48 % horizontal und 6 % vertikal des übergeordneten ScreenGui).
  5. Setzen Sie Name auf Block.
  6. Setzen Sie Image auf rbxassetid://14304827265, um das Bild zu einem Trapez zu machen.
  7. Setzen Sie ImageColor auf 0,0,0, um das Trapez schwarz zu machen.
  8. Setzen Sie ImageTransparency auf 0.3, um die Opazität des Labels um 30 % zu reduzieren und alle schwarzen UI-Elemente im Spiel anzupassen.
3. Fügen Sie ein UIAspectRatioConstraint in Block ein, um sicherzustellen, dass das Label und die UI-Elemente seiner Kinder das gleiche Seitenverhältnis beibehalten, unabhängig von der Bildschirmgröße des Spielers.
4. Wählen Sie die neue Einschränkung aus und setzen Sie im Properties-Fenster AspectRatio auf 13.78.
5. Fügen Sie ein TextLabel in Block für den Informationstext ein.
6. Wählen Sie das neue Label aus und setzen Sie im Properties-Fenster,
  1. 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).
  2. Setzen Sie BackgroundTransparency auf 1, um den Hintergrund des Labels vollständig transparent zu machen.
  3. 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).
  4. 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).
  5. Setzen Sie Name auf BodyTextLabel.
  6. Setzen Sie FontFace auf Montserrat, um die futuristische Ästhetik zu treffen.
  7. Setzen Sie Weight auf Bold, um die Schrift zu verdicken.
  8. Setzen Sie Text auf Respawning….
  9. Setzen Sie TextColor3 auf 255, 255, 255, um den Text weiß zu machen.
  10. Aktivieren Sie TextScaled.
Erstellen Sie die Kopfzeile.
1. Fügen Sie ein ImageLabel in Block ein.
2. Wählen Sie das neue Label aus und setzen Sie im Properties-Fenster,
  1. Setzen Sie AnchorPoint auf 0.5, 1, um den Ursprungspunkt des Labels in die untere Mitte zu setzen (50 % von links nach rechts des Labels und 100 % von oben nach unten des Labels).
  2. Setzen Sie BackgroundTransparency auf 1, um den Hintergrund des Labels vollständig transparent zu machen.
  3. Setzen Sie Position auf {0.5, 0},{0, 0}, um das Label in die obere Mitte seines übergeordneten Labels zu setzen (50 % von links nach rechts des übergeordneten Labels und 0 % von oben nach unten des übergeordneten Labels).
  4. Setzen Sie Size auf {0.46, 0},{0.56, 0}, um das Label zu verbreitern (46 % horizontal und 56 % vertikal des übergeordneten Labels).
  5. Setzen Sie Name auf Header.
  6. Setzen Sie Image auf rbxassetid://14304826985, um das Bild zu einem mehrdimensionalen Fade zu machen.
  7. Setzen Sie ImageColor auf 245, 46, 46, um den Fade rot zu machen, um anzuzeigen, dass der Spieler vorübergehend inaktiv ist, während er aus der Runde ausgeschieden ist.
3. Fügen Sie ein TextLabel in Header für den Informationstext ein.
4. Wählen Sie das neue Label aus und setzen Sie im Properties-Fenster,
  1. 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).
  2. Setzen Sie BackgroundTransparency auf 1, um den Hintergrund des Labels vollständig transparent zu machen.
  3. 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).
  4. Setzen Sie Size auf {.85, 0},{0.55, 0}, damit der Text den größten Teil des Fade-Bereichs einnehmen kann (85 % horizontal und 55 % vertikal des übergeordneten Labels).
  5. Setzen Sie Name auf HeaderTextLabel.
  6. Setzen Sie FontFace auf Montserrat, um die futuristische Ästhetik zu treffen.
  7. Setzen Sie Weight auf Black, um die Schrift zu verdicken.
  8. Setzen Sie Text auf TAGGED - DU BIST RAUS!
  9. Setzen Sie TextColor3 auf 255, 255, 255, um den Text weiß zu machen.
  10. Aktivieren Sie TextScaled.
Erstellen Sie den Fade um die Ränder des Bildschirms.
1. Fügen Sie ein ImageLabel in OutStateGui ein.
2. Wählen Sie das neue Label aus und setzen Sie im Properties-Fenster,
  1. 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).
  2. Setzen Sie BackgroundColor3 auf 0,0,0, um die Hintergrundfarbe des Labels auf schwarz zu setzen.
  3. Setzen Sie BackgroundTransparency auf 0.5, um den Hintergrund des Labels halbtransparent zu machen.
  4. 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).
  5. Setzen Sie Size auf {1, 0},{1, 0}, um das Label auf den gesamten Bildschirm zu verbreitern (100 % horizontal und 100 % vertikal des übergeordneten ScreenGui).
  6. Setzen Sie ZIndex auf -1, um den Fade hinter den anderen UI-Elementen anzuzeigen.
  7. Setzen Sie Name auf Header.
  8. Setzen Sie Image auf rbxassetid://14309518613, um das Bild zu einem Randfade zu machen.
  9. Setzen Sie ImageTransparency auf 0.1, um den Fade leicht durchscheinend zu machen.
Um die Leistung zu verbessern, können Sie das Bild-Asset überspringen und stattdessen ein UIGradient-Objekt mit einer benutzerdefinierten Transparenznummernsequenz verwenden. Um mehr über diese Fade-Technik zu erfahren, siehe 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 er sich im Prozess des Respawnens zurück zu seiner Spawnzone befindet.

Das folgende ReplicatedStorage.PlayerStateHandler-Client-Skript enthält Funktionen, die verschiedene Arten von Verhalten gemäß dem playerState-Attribut auslösen. Alle Ereignisantworten sind logisch in diesem Skript gruppiert, da sie ein ähnliches Verhalten erfordern, um die Spielersteuerung, die Kamerabewegung und welche UI-Ebene sichtbar ist, zu aktivieren oder zu deaktivieren.

Wenn die Gesundheit eines Spielers null erreicht, wird ihr playerState zu TaggedOut, was die Funktion onTaggedOut() auslöst. onTaggedOut() löst sofort 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 verwenden.
Das StarterGui.OutStateGui wird ausschließlich aktiviert.

Wenn der Spieler respawnt, wird ihr playerState zu SelectingBlaster, was die Funktion onSelectingBlaster() auslöst. onSelectingBlaster() aktiviert dann ausschließlich das StarterGui.PickABlasterGui, das automatisch den Respawn-Bildschirm deaktiviert. Weitere Informationen zu diesen Bedingungen finden Sie in Handle Client State aus dem Gameplay-Scripting-Lehrplan.

local ReplicatedStorage = game:GetService("ReplicatedStorage")
local Players = game:GetService("Players")

local PlayerState = require(ReplicatedStorage.PlayerState)
local PlayerAttribute = require(ReplicatedStorage.PlayerAttribute)
local BlasterState = require(ReplicatedStorage.Blaster.BlasterState)
local togglePlayerMovement = require(script.togglePlayerMovement)
local togglePlayerCamera = require(script.togglePlayerCamera)
local scheduleDestroyForceField = require(ReplicatedStorage.scheduleDestroyForceField)

local localPlayer = Players.LocalPlayer

local playerGui = localPlayer.PlayerGui
local guiLayers = {
	playerGui:WaitForChild("HUDGui"),
	playerGui:WaitForChild("OutStateGui"),
	playerGui:WaitForChild("PickABlasterGui"),
}

-- Deaktivieren Sie alle UI-Ebenen 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()
	-- Aktivieren Sie die Kamera, damit die Spieler sich umsehen können, während sie einen Blaster auswählen
	togglePlayerCamera(true)
	togglePlayerMovement(false)
	setGuiExclusivelyEnabled(playerGui.PickABlasterGui)

	-- Deaktivieren Sie den Blaster, während Sie einen Blaster auswählen
	localPlayer:SetAttribute(PlayerAttribute.blasterStateClient, BlasterState.Disabled)
end

local function onPlaying()
	-- Aktivieren Sie die Spielerbewegung, nachdem ein Blaster ausgewählt wurde
	togglePlayerMovement(true)
	setGuiExclusivelyEnabled(playerGui.HUDGui)

	-- Aktivieren Sie den Blaster, während Sie spielen
	localPlayer:SetAttribute(PlayerAttribute.blasterStateClient, BlasterState.Ready)

	-- Planen Sie die Logik zum Zerstören des Force Fields, wenn der Spieler mit dem Spielen beginnt
	scheduleDestroyForceField()
end

local function onTaggedOut()
	-- Deaktivieren Sie die Steuerung, während Sie ausgeschieden sind
	togglePlayerMovement(false)
	togglePlayerCamera(false)
	setGuiExclusivelyEnabled(playerGui.OutStateGui)

	-- Deaktivieren Sie den Blaster, während Sie ausgeschieden sind
	localPlayer:SetAttribute(PlayerAttribute.blasterStateClient, BlasterState.Disabled)
end

local function onInLobby()
	-- Aktivieren Sie die Steuerung, während Sie in der Lobby sind
	togglePlayerMovement(true)
	togglePlayerCamera(true)

	-- Blenden Sie alle HUDs aus, während Sie in der Lobby sind
	setGuiExclusivelyEnabled(nil)

	-- Deaktivieren Sie den Blaster, während Sie in der Lobby sind
	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

-- Behandeln Sie den anfänglichen Spielerstatus, wenn er gesetzt ist
local initialPlayerState = localPlayer:GetAttribute(PlayerAttribute.playerState)
onPlayerStateChanged(initialPlayerState)

local function updateFromPlayerState()
	onPlayerStateChanged(localPlayer:GetAttribute(PlayerAttribute.playerState))
end

-- Behandeln Sie zukünftige Updates des Spielerstatus
localPlayer:GetAttributeChangedSignal(PlayerAttribute.playerState):Connect(updateFromPlayerState)

-- Stellen Sie sicher, dass Änderungen auch nach dem Respawn angewendet werden
localPlayer.CharacterAdded:Connect(updateFromPlayerState)

Jetzt wird immer, wenn die Gesundheit eines Spielers null erreicht, der Respawn-Bildschirm angezeigt, bis der Spieler wieder in seine Spawnzone respawnt.

Jetzt, da Sie mit den gängigen GuiObjects für die Bildschirm-UI vertraut sind, versuchen Sie, das RoundResultsGui ScreenGui-Objekt und alle seine Kinder für die Bildschirmdarstellung zu reproduzieren, wenn Spieler ein Match gewinnen oder verlieren. Sie können die Beispiel-Laser-Tag-Spiel .rbxl-Datei als Referenz verwenden oder die Werte anpassen, um die Gameplay-Anforderungen Ihres eigenen Spiels zu erfüllen.

Erstellen Sie SurfaceGui-Objekte

Um UI auf der Oberfläche eines Teils im 3D-Raum anzuzeigen, die auf die Skriptlogik für jeden einzelnen Spieler reagiert, können Sie ein SurfaceGui-Objekt an das Teil anhängen, in dem Sie Ihre UI innerhalb des ReplicatedStorage-Dienstes anzeigen möchten. Diese Technik stellt sicher, dass Ihre UI und ihre Skriptlogik sowohl dem Server als auch dem Client jedes Spielers zur Verfügung stehen.

SurfaceGui-Objekte enthalten alle GuiObjects, die auf der Oberfläche eines Teils im 3D-Raum angezeigt werden. Das Beispiel-Laser-Tag-Spiel enthält nur eine Instanz eines SurfaceGui-Objekts: den Abklingzeitmesser, 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 reagiert und visuelles Feedback gibt, wann sie ihren Blaster erneut abfeuern können.

Um ein SurfaceGui-Objekt zu erstellen:

Navigieren Sie im Explorer-Fenster ü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 das SurfaceGui gemäß dem Kontext seiner 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.

Abklingzeitmesser

Ein Abklingzeitmesser 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 Spieler so schnell abfeuern können, wie sie klicken oder eine Taste drücken, was für das Gameplay von Laser-Tag unrealistisch ist.

Um den Abklingzeitmesser genau im Beispiel Laser Tag Spiel zu reproduzieren:

Erstellen Sie ein Teil, um Ihr SurfaceGui-Objekt zu halten.
1. Navigieren Sie im Explorer-Fenster über den Workspace und klicken Sie dann auf das ⊕-Symbol. Ein Kontextmenü wird angezeigt.
2. Fügen Sie aus dem Kontextmenü ein Block-Teil ein. Dies ist ein temporärer Standort für das Teil, damit 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, und setzen Sie dann im Properties-Fenster,
1. Setzen Sie Transparency auf 1, um das Teil vollständig transparent zu machen.
2. Setzen Sie Name auf CooldownBarPrefab.
3. 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.
4. 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,
1. Setzen Sie Face auf Top, damit die UI nach oben zeigt.
2. Setzen Sie LightInfluence und MaxDistance auf 0.
3. Setzen Sie PixelsPerStud auf 200.
Erstellen Sie die schwarze Leiste.
1. Fügen Sie ein ImageLabel in das SurfaceGui ein.
2. Wählen Sie das neue Label aus und setzen Sie im Properties-Fenster,
  1. Entfernen Sie den Standardwert für Image.
  2. 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).
  3. Setzen Sie BackgroundColor3 auf 0,0,0, um die Hintergrundfarbe des Labels auf schwarz zu setzen.
  4. Setzen Sie BackgroundTransparency auf 0.4, um den Hintergrund des Labels halbtransparent zu machen.
  5. 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).
  6. Setzen Sie Size auf {1, 0},{1, 0}, um das Label auf das gesamte Teil zu verbreitern (100 % horizontal und 100 % vertikal des übergeordneten SurfaceGui).
  7. Setzen Sie Name auf Container.
Runden Sie die Ecken des Containers ab.
1. Fügen Sie ein UICorner-Objekt in Container ein.
2. Wählen Sie die UICorner aus und setzen Sie im Properties-Fenster CornerRadius auf 0.15, 0, um die Ecken leicht abzurunden.
Erstellen Sie die rote Leiste.
1. Fügen Sie ein ImageLabel in Container ein.
2. Wählen Sie das neue Label aus und setzen Sie im Properties-Fenster,
  1. Entfernen Sie den Standardwert für Image.
  2. Setzen Sie AnchorPoint auf 1, 0.5, um den Ursprungspunkt des Labels in die rechte Mitte zu setzen (100 % von links nach rechts des Labels und 50 % von oben nach unten des Labels).
  3. Setzen Sie BackgroundColor3 auf 172, 13, 13, um die Hintergrundfarbe des Labels auf ein dunkles Rot zu setzen.
  4. Setzen Sie BackgroundTransparency auf 0.2, um den Hintergrund des Labels leicht transparent zu machen.
  5. Setzen Sie Name auf Bar.
  6. Setzen Sie Position auf {1, 0},{0.5, 0}, um das Label in die rechte Mitte seines Containers zu setzen (100 % von links nach rechts des übergeordneten Labels und 50 % von oben nach unten des übergeordneten Labels).
  7. Setzen Sie Size auf {0, 0},{1, 0}, um das Label 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.
1. Fügen Sie ein UICorner-Objekt in Bar ein.
2. Wählen Sie die UICorner aus und setzen Sie im Properties-Fenster CornerRadius auf 0.15, 0, um die Ecken leicht abzurunden.
Verschieben Sie CooldownBarPrefab in ReplicatedStorage.
1. Erstellen Sie eine Ordnerstruktur, um Ihre UI-Objekte zu organisieren. Das Beispiel verwendet einen Instances-Ordner mit einem untergeordneten Guis-Ordner.
2. Verschieben Sie CooldownBarPrefab in Guis.
Verweisen Sie auf die folgenden ReplicatedStorage-Skripte innerhalb der Beispiel Laser Tag Platzdatei, die programmgesteuert den Abklingzeitmesser am Blaster des Spielers anbringen und dann die rote Leiste animieren, nachdem ein Spieler seinen Blaster abgefeuert hat.

Das folgende ReplicatedStorage.FirstPersonBlasterVisuals-Client-Skript behandelt alle visuellen Logiken für den Blaster des Spielers aus der Ego-Perspektive. Es erfordert eine Reihe von Modulscripten, die zusammenarbeiten, um Blastervisualisierungen einzurichten, 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ügen Sie das Rig für die Ego-Perspektive hinzu
	rigModel = blasterConfig.RigModel:Clone()
	rigModel.Parent = Workspace

	-- Fügen Sie 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 Abklingzeitleiste, da sie am Rig angehängt ist
		rigModel:Destroy()
		rigModel = nil
	end
end

-- Führen Sie visuelle Effekte aus der Ego-Perspektive aus, wenn ein Schuss erfolgt
laserBlastedBindableEvent.Event:Connect(function(blastData: BlastData.Type)
	runBlastVisuals(rigModel.PrimaryPart.TipAttachment, blastData, animations.blastAnimation)
	runCooldownBarEffect(cooldownBar)
end)

-- Bindet das Rig an die Kamera, wenn sie existiert
RunService.RenderStepped:Connect(function()
	if rigModel then
		-- Aktualisieren Sie das Rig's CFrame relativ zur Position der Kamera und RIG_OFFSET_FROM_CAMERA
		rigModel:PivotTo(currentCamera.CFrame * RIG_OFFSET_FROM_CAMERA)
	end
end)

-- Behandelt das Ändern der Visualisierungen, 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 das Ändern der Visualisierungen, wenn sich der playerState ändert
localPlayer:GetAttributeChangedSignal(PlayerAttribute.playerState):Connect(function()
	local newPlayerState = localPlayer:GetAttribute(PlayerAttribute.playerState)
	-- Entfernen Sie die Visualisierungen, wenn der Spieler einen Blaster auswählt oder in der Lobby ist
	if newPlayerState == PlayerState.SelectingBlaster or newPlayerState == PlayerState.InLobby then
		removeFirstPersonVisuals()
	-- Fügen Sie die Visualisierungen wieder hinzu, wenn der Spieler mit der Auswahl des Blasters fertig ist.
	elseif newPlayerState == PlayerState.Playing then
		addFirstPersonVisuals()
	end
end)

Jetzt wird immer, wenn ein Spieler seinen Blaster abfeuert, die Abklingzeitleiste animiert, um zu kommunizieren, wann der Spieler erneut abfeuern kann.

Erstellen Sie BillboardGui-Objekte

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 erstellen, das im 3D-Raum existiert.

Das Beispiel-Laser-Tag-Spiel enthält zwei separate BillboardGui-Objekte innerhalb des ReplicatedStorage-Dienstes:

OtherPlayerIndicatorGuiPrefab - Zeigt einen pinken oder grünen Kreis über dem Kopf jedes Spielers an, wenn sie aktiv in einer Runde sind.
TaggedOutIndicatorGuiPrefab - Wird über dem Kopf eines Spielers angezeigt, wenn sie aus der Runde ausgeschieden sind.

Nachdem Sie ein BillboardGui-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 folgenden Abschnitten, wie Sie UI-Elemente für beide Indikatortypen im Beispiel-Laser-Tag-Spiel implementieren. Sie können jeden Teil des Prozesses anpassen, um die Spezifikationen Ihres eigenen Spiels zu erfüllen.

Um ein BillboardGui-Objekt zu erstellen:

Navigieren Sie im Explorer-Fenster ü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 gemäß dem 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öchten.

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 den Mitgliedern des feindlichen Teams unterscheiden können. Diese Informationen sind wichtig, da das Gameplay eines Ego-Shooter-Spiels erfordert, dass die Spieler schnelle strategische Entscheidungen treffen, während sie sich in Kampfzonen befinden, damit sie nicht ausgeschieden werden und das Match verlieren.

Um den Team-Indikator genau im Beispiel Laser Tag Spiel zu reproduzieren:

Fügen Sie ein BillboardGui-Objekt in ein temporäres Rig ein.
1. Klicken Sie im Menüband auf die Registerkarte Home oder Avatar und dann auf Character.
2. 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.
3. Navigieren Sie im Explorer-Fenster zum untergeordneten Head-Mesh des Rigs und klicken Sie dann auf das ⊕-Symbol. Ein Kontextmenü wird angezeigt.
4. Fügen Sie aus dem Kontextmenü ein BillboardGui ein.
Wählen Sie das neue BillboardGui aus und setzen Sie im Properties-Fenster,
1. Setzen Sie LightInfluence auf 0, um zu verhindern, dass Umgebungslicht die Farbe des Indikators beeinflusst.
2. Setzen Sie Name auf OtherPlayerIndicatorPrefab.
3. Setzen Sie Size auf {0, 10},{0, 10}, um das Label erheblich kleiner zu machen.
4. 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,
1. 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).
2. Setzen Sie BackgroundColor3 auf 255, 3, 0, um die Hintergrundfarbe des Frames als Platzhalterfarbe auf rot zu setzen.
3. 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).
4. 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 feindlichen Team und verdeckt.

Das folgende ReplicatedStorage.OtherPlayerIndicatorGuiSetup-Skript wird ausgeführt, wenn Spieler in die Arena für eine aktive Runde erscheinen. Es fügt den Team-Indikator hinzu, indem es die Funktion addIndicatorToCharacter() aufruft, die das Head-Objekt jedes Spielercharakters, der an der Runde teilnimmt, lokalisiert. Wenn sie noch keinen Team-Indikator haben, klont das Skript den otherPlayerIndicatorPrefab-UI und fügt ihn dem Head des Charakters hinzu und setzt die Farbe des Team-Indikators auf die Teamfarbe.

Wenn andere Spieler im selben Team sind, wird der Team-Indikator immer angezeigt, auch wenn sie sich hinter Objekten im 3D-Raum verstecken; wenn andere Spieler im feindlichen Team sind, wird der Team-Indikator nur angezeigt, wenn sich kein Objekt im 3D-Raum befindet, 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ügen Sie nur Indikatoren zu Spielern hinzu, die an der Runde teilnehmen
		if not otherPlayer.Team then
			return
		end

		-- Vermeiden Sie das Hinzufügen doppelter Indikatoren, erstellen Sie einen neuen, nur wenn er nicht existiert
		local gui = otherHead:FindFirstChild(otherPlayerIndicatorPrefab.Name)
		if not gui then
			gui = otherPlayerIndicatorPrefab:Clone()
			gui.Frame.BackgroundColor3 = otherPlayer.TeamColor.Color
			gui.Parent = otherHead
		end

		-- Der Indikator ist immer oben, wenn der Spieler freundlich ist

		local isFriendly = otherPlayer.Team == localPlayer.Team
		gui.AlwaysOnTop = isFriendly
	end)
end

local function addIndicatorWhenCharacterSpawns(player: Player)
	if characterSpawnConnectionsByPlayer[player] then
		return
	end
	local connection = player.CharacterAdded:Connect(addIndicatorToCharacter)
	characterSpawnConnectionsByPlayer[player] = connection
end

local function stopSyncingIndicators()
	for _, connection in characterSpawnConnectionsByPlayer do
		connection:Disconnect()
	end
	table.clear(characterSpawnConnectionsByPlayer)

	if playerAddedConnection then
		playerAddedConnection:Disconnect()
		playerAddedConnection = nil
	end

	for _, player in Players:GetPlayers() do
		removeIndicatorFromPlayer(player)
	end
end

local function addIndicatorToPlayer(player: Player)
	if player == localPlayer then
		return
	end

	addIndicatorToCharacter(player.Character)
	addIndicatorWhenCharacterSpawns(player)
end

local function startSyncingIndicators()
	for _, player in Players:GetPlayers() do
		addIndicatorToPlayer(player)
	end

	if not playerAddedConnection then
		playerAddedConnection = Players.PlayerAdded:Connect(addIndicatorToPlayer)
	end
end

local function onLocalTeamChanged()
	local localTeam = localPlayer.Team
	if localTeam then
		startSyncingIndicators()
	else
		stopSyncingIndicators()
	end
end

localPlayer:GetPropertyChangedSignal("Team"):Connect(onLocalTeamChanged)
onLocalTeamChanged()

Jetzt 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 feindlichen Team und hinter einem Objekt.

Ausgeschiedener Indikator

Ein ausgeschiedener 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 Ego-Shooter-Spiels erfordert, dass die Spieler sofort zu ihrem nächsten Ziel übergehen, sobald sie einen Spieler ausschalten, damit sie nicht verwundbar in der Arena werden, indem sie zu lange am selben Ort bleiben.

Um den ausgeschiedenen Indikator genau im Beispiel Laser Tag Spiel zu reproduzieren:

Fügen Sie ein BillboardGui-Objekt in ein temporäres Rig ein, damit Sie die Änderungen in jedem Schritt des Prozesses visualisieren können.
1. Klicken Sie im Menüband auf die Registerkarte Home oder Avatar und dann auf Character.
2. 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.
3. Navigieren Sie im Explorer-Fenster zum untergeordneten Head-Mesh des Rigs und klicken Sie dann auf das ⊕-Symbol. Ein Kontextmenü wird angezeigt.
4. Fügen Sie aus dem Kontextmenü ein BillboardGui ein.
Wählen Sie das neue BillboardGui aus und setzen Sie im Properties-Fenster,
1. Setzen Sie LightInfluence auf 0, um zu verhindern, dass Umgebungslicht die Farbe des Indikators beeinflusst.
2. Setzen Sie Name auf TaggedOutIndicatorGuiPrefab.
3. Setzen Sie Size auf {3, 0},{0.5, 0}, um den Platz für ein Label zu verbreitern.
4. 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,
1. 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).
2. Setzen Sie BackgroundTransparency auf 1, um den Hintergrund des Labels vollständig transparent zu machen.
3. Setzen Sie Name auf Frame.
4. 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).
5. Setzen Sie Size auf {1, 0},{1, 0}, um das Label auf das gesamte BillboardGui zu verbreitern (100 % horizontal und 100 % vertikal des übergeordneten BillboardGui).
6. Setzen Sie Image auf rbxassetid://14304826985, um das Bild zu einem mehrdimensionalen Fade zu machen.
7. Setzen Sie ImageColor auf 245, 46, 46, um das Label rot zu färben.
Um die Leistung zu verbessern, können Sie das Bild-Asset überspringen und stattdessen ein UIGradient-Objekt mit einer benutzerdefinierten Transparenznummernsequenz verwenden. Um mehr über diese Fade-Technik zu erfahren, siehe 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,
1. 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).
2. Setzen Sie BackgroundTransparency auf 1, um den Hintergrund des Labels vollständig transparent zu machen.
3. Setzen Sie Name auf BodyTextLabel.
4. 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).
5. Setzen Sie Size auf {0.85, 0},{0.7, 0}, damit der Text den größten Teil des Fade-Bereichs einnehmen kann (85 % horizontal und 70 % vertikal des übergeordneten Bildlabels).
6. Setzen Sie FontFace auf Montserrat, um die futuristische Ästhetik zu treffen.
7. Setzen Sie Weight auf Bold, um die Schrift zu verdicken.
8. Setzen Sie Text auf TAGGED.
9. Setzen Sie TextColor3 auf 255, 255, 255, um den Text weiß zu machen.
10. 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 ausgeschiedenen 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 Spiel lädt. Es stellt sicher, dass immer, 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)
	-- Rufen Sie onCharacterAdded auf, wenn der Spieler bereits einen Charakter hat
	if player.Character then
		onCharacterAdded(player, player.Character)
	end
	-- Rufen Sie onCharacterAdded für alle zukünftigen Charakterspawns für diesen Spieler auf
	player.CharacterAdded:Connect(function(character: Model)
		onCharacterAdded(player, character)
	end)
end

-- Rufen Sie onPlayerAdded für alle Spieler auf, die bereits im Spiel sind
for _, player in Players:GetPlayers() do
	onPlayerAdded(player)
end
-- Rufen Sie onPlayerAdded für alle zukünftigen Spieler auf
Players.PlayerAdded:Connect(onPlayerAdded)

Jetzt wird immer, wenn die Gesundheit eines Spielers null erreicht, der ausgeschiedene Indikator über ihrem Kopf angezeigt, bis sie respawnen.

Herzlichen Glückwunsch zum Abschluss des Lehrplans für Benutzeroberflächendesign! Jetzt, da Sie Erfahrung im Erstellen eines Kunststils, im Wireframing Ihrer Layouts und in der Implementierung Ihrer Designs in Studio von Anfang bis Ende haben, können Sie Ihr Projekt mit neuen UI und Funktionen erweitern oder zusätzliche Tutorial-Lehrpläne befolgen, wie z. B. den Gameplay Scripting Curriculum, der Ihnen die allgemeine Organisation und wichtige Implementierungsdetails des Beispiel-Laser-Tag-Spiels beibringt. Viel Spaß beim Erstellen!