Erstelle HUD-Anzeigen

Ein HUD oder Heads-Up-Display ist eine Reihe von UI-Elementen, die während des Spiels immer sichtbar oder zugänglich sind, wie z. B. Punktestände, Gesundheitsanzeigen und Menüschaltflächen. Ein HUD einzuschließen, ist für die meisten Erlebnisse unerlässlich, da es Informationen anzeigt, die den Spielern helfen, erfolgreich bei ihren Spielzielen zu sein.

Ein häufiges HUD-Element ist eine Gesundheitsanzeige mit einem Symbol auf der linken Seite, die in eine Timer-Leiste, Fortschrittsanzeige oder ähnliches umgewandelt werden kann.

Anhand der Gefährlichen Raumstation als Ausgangspunkt und UI-Grundlagen - HUD-Anzeige als fertigen Referenzpunkt zeigt dieses Tutorial:

• Einrichtung und Verwendung des Gerätesimulators, um Ihr Design auf mehreren emulierten Bildschirmen zu testen.
• Verwendung von StarterGui sowohl als Design- als auch als Speichercontainer.
• Wie man UI-Elemente um integrierte Roblox-Steuerelemente und Geräteschnitte/Inseln positioniert/vergrößert, wie z. B. den Kameraschnitt bei modernen Smartphones.
• Wie man die standardmäßige Roblox-Gesundheitsanzeige durch die eigene Anzeige ersetzt und mit dem Gesundheitsniveau des Charakters verbindet.
• Wie man den mittleren Teil der Gesundheitsanzeige animiert und seine Farbe zwischen fünf Farbtastpunkten (rot, orange, gelb, limettengrün, grün) festlegt.

Aktivieren Sie den Gerätesimulator

Roblox ist von Natur aus plattformübergreifend, da Spieler Erlebnisse auf ihrem Handy oder Tablet entdecken und beitreten können und später dort weitermachen, wo sie auf ihrem PC oder ihrer Konsole aufgehört haben. Mobile Geräte (Telefone und Tablets) haben den geringsten Bildschirmplatz, daher ist es wichtig, dass Ihre UI-Elemente auf kleineren Bildschirmen passen und für die Spieler klar sichtbar sind.

Der beste Weg, UI-Designs auf verschiedenen Plattformen zu testen, ist der Gerätesimulator von Studio. Dieses Tool bietet eine vordefinierte Auswahl von Geräten und ermöglicht es Ihnen, Ihre eigenen benutzerdefinierten Presets hinzuzufügen.

1. Öffnen Sie die Gefährliche Raumstation-Vorlage in Studio.

2. Aktivieren Sie im Test-Menü von Studio den Gerätesimulator.

3. Wählen Sie aus der Leiste direkt über der Hauptansicht ein Telefonsimulation wie iPhone X oder Samsung Galaxy A51. Stellen Sie dann die Ansicht auf An Fenster anpassen ein, um den maximalen Platz im Studio zu nutzen.

   

Erstellen Sie einen Bildschirmcontainer

Ein ScreenGui-Container hält UI-Objekte (GuiObjects), die auf dem Bildschirm eines Spielers angezeigt werden (in diesem Tutorial die gesamte Gesundheitsanzeige). Um ein ScreenGui und seine untergeordneten Objekte für jeden Spieler, der das Erlebnis betritt, anzuzeigen, platzieren Sie es im StarterGui-Container. Wenn ein Spieler eintritt und sein Charakter zum ersten Mal erscheint, wird das ScreenGui und dessen Inhalte in den PlayerGui-Container für diesen Spieler geklont, der sich im Players-Container befindet.

Um ein leeres ScreenGui einzufügen:

1. Suchen Sie im Explorer-Fenster den StarterGui-Container.

   

2. Fahren Sie mit der Maus über den Container, klicken Sie auf die ⊕-Schaltfläche und fügen Sie ein ScreenGui ein.

   

3. Benennen Sie den neuen Container in HUDContainer um, um seinen Zweck widerzuspiegeln.

   

Nutzen Sie sichere Bereiche

Moderne Telefone nutzen den gesamten Bildschirm, enthalten aber typischerweise Einschnitte, Aussparungen und andere Elemente, die Bildschirmplatz beanspruchen. Jedes Roblox-Erlebnis enthält auch die oberen Steuerleisten für einen schnellen Zugriff auf das Hauptmenü, Chat, Leaderboard und mehr.

Um sicherzustellen, dass die Spieler alle UI sehen und ohne Hindernisse darauf zugreifen können, bietet Roblox die ScreenInsets-Eigenschaft, die die sicheren Bereich-Abstände für die Inhalte eines ScreenGui steuert. Jedes UI-Objekt, das Sie innerhalb eines ScreenGui positionieren, ist relativ zu den Abstandsgrenzen.

Während der Standardwert von CoreUISafeInsets sicherstellt, dass alle UI-Elemente außerhalb der Roblox-UI und Geräteschnitte bleiben, kann DeviceSafeInsets eine bessere Option sein, um den begrenzten Bildschirmplatz zu nutzen, wie die Abbildung unten zeigt.

1. Wählen Sie im Explorer-Fenster HUDContainer aus.

   

2. Setzen Sie im Eigenschaften Fenster die ScreenInsets-Eigenschaft auf DeviceSafeInsets.

   

Kantenpolsterung festlegen

Ist ScreenInsets auf DeviceSafeInsets gesetzt, kann der Inhalt nun direkt bis zur physischen oberen Kante des Bildschirms reichen. Eine kleine Menge an Polsterung kann jedoch helfen, die Gesundheitsanzeige (und andere Objekte im Container) leicht von den Bildschirmkanten wegzuschieben für ein saubereres Aussehen und um zu verhindern, dass sie abgeschnitten werden.

Eine Möglichkeit, Polsterung auf einen UI-Container anzuwenden, besteht darin, einen UIPadding-Modifikator einzufügen:

1. Fügen Sie einen UIPadding-Modifikator in HUDContainer ein.

   

2. Wählen Sie das neue UIPadding-Objekt aus und geben Sie für alle Kanten des Containers (PaddingBottom, PaddingLeft, PaddingRight, PaddingTop) den Wert 0, 16 ein. Damit wird eine Polsterung von 16 Pixeln um den Container herum angewendet, unabhängig von der Auflösung des Bildschirms.

   

Konstruktion der Gesundheitsanzeige

Nachdem der Bildschirmcontainer konfiguriert wurde, können Sie mit dem Bau der Gesundheitsanzeige beginnen, indem Sie Roblox-UI-Objekte wie Rahmen und eine Bildbeschriftung verwenden.

Erstellen Sie das übergeordnete Frame

Ähnlich wie in Designanwendungen wie Figma und Photoshop dient ein Frame in Roblox als Container für andere UI-Objekte. Für dieses Tutorial wird die gesamte Gesundheitsanzeige in einem einzigen übergeordneten Frame enthalten sein, wodurch es einfach ist, sie in verschiedenen HUD-Layouts neu zu positionieren.

1. Fügen Sie ein Frame in HUDContainer ein. Der neue Frame erscheint in der oberen linken Ecke als leeres weißes Quadrat.

   

   Wenn der neue Frame nicht im Ansichtsfenster erscheint, stellen Sie sicher, dass Sie GUI-Overlay im Visualisierungsoptionen Widget in der oberen rechten Ecke des 3D-Ansichtsfensters aktiviert haben.

2. Benennen Sie die neue Frame-Instanz in MeterBar um.

   

Positionieren Sie den Rahmen

In Roblox wird die Position eines UI-Objekts durch ein UDim2-Koordinatenset dargestellt, das Scale und Offset-Werte für die X- und Y-Achsen enthält:

• Scale-Werte repräsentieren einen Prozentsatz der Größe des Containers entlang der entsprechenden Achse, additiv zu den Offset-Werten.
• Offset-Werte repräsentieren, um wie viele Pixel das Objekt auf der entsprechenden Achse verschoben werden soll, additiv zu den Scale-Werten.

Um ein UI-Objekt in der oberen rechten Ecke des Bildschirmcontainers zu positionieren, ist Scale der beste Ansatz, da ein X-Wert von 1 (100%) die rechte Kante des Containers unabhängig von der physischen Pixelgröße des Bildschirms darstellt. Ebenso stellt ein Y-Skalenwert von 0 (0%) die obere Kante des Containers dar.

Zusätzlich müssen Sie einen oberen Ankerpunkt für den übergeordneten Frame festlegen, um dessen Ursprungspunkt zu definieren. Akzeptable Werte liegen zwischen 0 und 1, relativ zur Größe des Objekts, sodass ein Ankerwert von 1, 0 den Ankerpunkt des Frames in seine obere rechte Ecke setzt.

1. Wählen Sie im Explorer-Fenster den MeterBar-Frame aus, den Sie zuvor eingefügt haben.

   

2. Geben Sie im Eigenschaften-Fenster 1, 0, 0, 0 für Position ein und drücken Sie Enter. Studio fügt automatisch die Klammern hinzu, um das UDim2 von {1, 0},{0, 0} zu bilden.

3. Geben Sie 1, 0 für die AnchorPoint-Eigenschaft ein. Der Frame sollte nun in der oberen rechten Ecke des gerätesicheren Bereichs positioniert sein, leicht von der Kante versetzt aufgrund der Polsterung.

   

Ändern Sie die Größe des Rahmens

Wie die Position wird die Size eines UI-Objekts durch ein UDim2-Koordinatenset dargestellt, das Scale und Offset-Werte für die X- und Y-Achsen enthält.

Standardmäßig beträgt die Größe des neuen Frames {0, 100},{0, 100}, was 100 Pixel sowohl in Breite (X) als auch in Höhe (Y) bedeutet. Während ein strikter Pixelwert in bestimmten Fällen nützlich ist, skalieren viele UI-Elemente responsiver auf mehreren Bildschirmen, wenn sie als Prozentsatz der Gesamtgröße des Bildschirmcontainers eingestellt sind.

1. Wählen Sie den MeterBar-Frame aus, greifen Sie auf das Eigenschaften-Fenster zu und navigieren Sie zur Size-Eigenschaft.

2. Geben Sie einen Wert von 0.35, 0, 0.05, 0 ein, um eine prozentuale Größe von 35 % breit und 5 % hoch ohne zusätzliche Pixelverschiebungen festzulegen.

   

Stylen Sie den Rahmen

Standardmäßig sind Frames in solidem Weiß gefüllt. Die endgültige Gesundheitsanzeige sollte eine dunklere und leicht transparente Füllung sowie eine dunkle Umrandung haben, damit sie sich besser auf hellen und dunklen Hintergründen abhebt.

1. Wählen Sie den MeterBar-Frame aus und geben Sie 0 für die BackgroundColor3-Eigenschaft ein. Studio konvertiert es automatisch in den RGB-Wert von [0, 0, 0].

2. Geben Sie 0.75 für die BackgroundTransparency-Eigenschaft ein. In Roblox reicht der Transparenzwert von 0 für vollständig undurchsichtig bis 1 für vollständig transparent, sodass 0.75 25 % Opazität in anderen Anwendungen wie Figma oder Photoshop entspricht.

   

3. Fügen Sie ein UIStroke-Objekt hinzu, ein leistungsfähiger UI-Modifikator, der einen anpassbaren Strich zum Frame hinzufügt.

   

4. Stellen Sie bei der Auswahl des neuen UIStroke die folgenden Eigenschaften ein:

   • Thickness = 3
   • Transparency = 0.25 (75 % undurchsichtig)

   

Um das Styling des Meterrahmens abzuschließen, können Sie die Ecken abrunden, um eine "Pille" anstelle eines scharfen Rechtecks zu formen.

1. Fügen Sie eine UICorner-Instanz in den MeterBar-Frame ein.

   

2. Stellen Sie mit dem neuen UICorner die CornerRadius-Eigenschaft auf 0.5, 0 ein. Die Verwendung eines Skalenwerts von 0.5 (50 %) anstelle eines Pixelwerts ist besonders praktisch für die Meteranzeige, da dies eine vollständig runde Kurve gewährleistet, unabhängig davon, wie hoch oder breit der Container wird.

   

Erstellen Sie die innere Füllung

Jetzt, wo der Containerrahmen der Gesundheitsanzeige abgeschlossen ist, können Sie einen inneren Füllbereich hinzufügen, um die variable Gesundheit des Charakters darzustellen. Da es sich nur um einen fest gefüllten Bereich handeln muss, ist ein untergeordnetes Frame innerhalb des übergeordneten Frames geeignet.

1. Fügen Sie ein untergeordnetes Frame in den MeterBar-Frame ein.

2. Benennen Sie die neue Frame-Instanz in InnerFill um.

   

3. Stellen Sie bei der Auswahl von InnerFill die folgenden Eigenschaften ein:

   • AnchorPoint = 0, 0.5 (linke Kante und vertikales Zentrum)
   • Position = 0, 0, 0.5, 0
   • Size = 1, 0, 1, 0

   Da Kinder von Frames relativ zu ihrem übergeordneten Rahmen positioniert und in der Größe angepasst werden, sorgt die Verwendung von Skalenwerten dafür, dass der innere Rahmen die gesamte Breite und Höhe des übergeordneten Rahmens ausfüllt, beginnend von der linken Kante des übergeordneten Rahmens.

   

4. Um die "Pillenform" des übergeordneten Rahmens zu matchen, fügen Sie einen weiteren UICorner in InnerFill ein.

   

5. Stellen Sie mit dem neuen UICorner-Modifikator die CornerRadius-Eigenschaft auf 0.5, 0 ein, um die "Pillenform" des übergeordneten MeterBar-Rahmens zu matchen.

   

6. Um besser darzustellen, dass eine volle Anzeige eine gute Gesundheit anzeigt, wählen Sie InnerFill aus und setzen Sie die Eigenschaft BackgroundColor3 auf [0, 225, 50] (in einer späteren Aufgabe werden Sie script, damit sich diese Farbe je nach tatsächlicher Gesundheit ändert).

   

Fügen Sie das Symbol hinzu

Um den Zweck der Anzeige deutlicher anzuzeigen, können Sie eine Bildbeschriftung auf der linken Seite hinzufügen, in diesem Fall ein rotes Herz, das normalerweise Gesundheit oder Leben symbolisiert.

1. Fügen Sie eine ImageLabel in den MeterBar-Frame ein. Dieses Objekt ermöglicht es Ihnen, ein 2D-Bild-Asset anzuwenden, das als Dekal auf Roblox hochgeladen wurde.

2. Benennen Sie die neue Beschriftungsinstanz in Icon um.

   

3. Stellen Sie bei der Auswahl von Icon die ZIndex-Eigenschaft auf 2 ein. Während neu eingefügte UI-Objekte immer vor zuvor eingefügten Objekten liegen, stellt diese Änderung sicher, dass das Symbol immer vor den Elemente des Rahmens der Anzeige angezeigt wird.

   

4. Suchen Sie die Image-Eigenschaft des Symbols und geben Sie rbxassetid://91715286435585 ein, die Referenz zu einem bereits hochgeladenen Bild eines Herzens (falls gewünscht, können Sie Ihr eigenes Bild importieren und dessen Asset-ID verwenden).

   

5. Um sicherzustellen, dass das Symbol ImageLabel immer im Seitenverhältnis 1:1 bleibt, fügen Sie ein UIAspectRatioConstraint hinzu. Obwohl dieses Constraint anpassbare Eigenschaften zur Kontrolle des Seitenverhältnisses hat, können Sie deren Standardwerte beibehalten.

   

6. Wählen Sie Icon aus und passen Sie das Erscheinungsbild und die Position an, indem Sie die folgenden Eigenschaften ändern:

   • AnchorPoint = 0.5, 0.5 (Zentralanker)
   • BackgroundTransparency = 1 (100 % transparent)
   • Position = 0, 0, 0.5, 0 (linke Seite der Anzeige und vertikales Zentrum)
   • Size = 2, 0, 2, 0 (200 % der Gesamtgröße des MeterBar-Rahmens, auf 1:1 durch die UIAspectRatioConstraint beschränkt)

   

Einschränkung der Größe

Während eine Höhenskala von 0.05 (5 %) auf modernen Telefonbildschirmen und Gaming-Monitoren, die ein Seitenverhältnis von 16:9 oder breiter haben, gut aussieht, könnte die Anzeige auf Tablet-Bildschirmen und älteren Telefonen etwas zu hoch wirken. Sie können dies überprüfen, indem Sie ein Tablet wie das iPad der 7. Generation im Gerätesimulator emulieren.

Um die Höhe der Meteranzeige konstanter mit breiteren Bildschirmen zu halten, können Sie ein UISizeConstraint anwenden, um die maximale Pixelhöhe einzuschränken.

1. Fügen Sie ein UISizeConstraint in den MeterBar-Frame ein.

   

2. Stellen Sie beim Auswählen des neuen Constraints die MaxSize-Eigenschaft auf inf, 20 ein, um die Höhe auf 20 Pixel zu beschränken, während keine Breitenbeschränkung durchgesetzt wird.

   

Jetzt behält die Meteranzeige eine konsistentere Höhe zwischen breiteren und höheren Bildschirmen bei.

Ersetzen Sie die standardmäßige Gesundheitsanzeige

Roblox-Erlebnisse enthalten eine standardmäßige Gesundheitsanzeige, die sichtbar wird, wenn Charaktere Schaden nehmen. Wenn Sie die standardmäßige Anzeige sichtbar lassen, wird sie dupliziert und potenziell die benutzerdefinierte Anzeige überlappen.

Deaktivieren Sie die standardmäßige Anzeige

Um die standardmäßige Gesundheitsanzeige zu deaktivieren, verwenden Sie ein Clientscript (LocalScript) innerhalb von StarterPlayerScripts, das StarterGui:SetCoreGuiEnabled() aufruft.

1. Erweitern Sie im Explorer-Fenster den StarterPlayer-Container und suchen Sie den Container StarterPlayerScripts innerhalb davon.

   

2. Fügen Sie ein neues LocalScript in den Container ein und benennen Sie es in HideDefaultHealthMeter um, um seinen Zweck zu beschreiben. Skripte innerhalb von StarterPlayerScripts werden automatisch ausgeführt, wenn der lokale Spieler ein Erlebnis betritt, was es zu einem idealen Container macht, um ein Skript auszuführen, das die standardmäßige Anzeige dauerhaft ausblendet.

   

3. Wenn Sie ein neues Skript einfügen, wird es automatisch in einem neuen Skripteditor-Tab geöffnet (wenn nicht, doppelklicken Sie auf das Skript im Explorer-Fenster).

   Fügen Sie den folgenden Code in das HideDefaultHealthMeter-Skript ein:

   HideDefaultHealthMeter
   local StarterGui = game:GetService("StarterGui")
   
   -- Standardgesundheitsanzeige ausblenden
   StarterGui:SetCoreGuiEnabled(Enum.CoreGuiType.Health, false)

   Codeerklärung

   Zeile	Zweck
   1	Erwirbt eine Referenz zu einem zugehörigen Service, StarterGui, der denselben Container darstellt, in dem Sie die benutzerdefinierte Gesundheitsanzeige erstellt haben und dessen Inhalte in den PlayerGui-Container für jeden Spieler geklont werden, der das Erlebnis betritt.
   4	Ruft die Methode SetCoreGuiEnabled() des Services auf und weist die standardmäßige Gesundheitsanzeige an, deaktiviert zu werden (false).

Wenn Sie das Erlebnis jetzt testen und Schaden nehmen, werden Sie feststellen, dass die standardmäßige Anzeige deaktiviert und ausgeblendet ist (Sie werden die benutzerdefinierte Anzeige so programmieren, dass sie Gesundheitsänderungen widerspiegelt im nächsten Abschnitt).

Auf Gesundheitsänderungen hören

Alle standardmäßigen Roblox-Charaktermodelle enthalten eine Humanoid-Klasse, die dem Charakter spezielle Verhaltensweisen und Funktionen bereitstellt, wie das Festlegen seiner Lauf-/Sprunghöhe und die Verwaltung seiner Gesundheit. Health-Änderungen auf dem Server replicieren sich auf den Client jedes Spielers, und Sie können diese Änderungen erkennen, um sowohl die Größe als auch die Farbe der benutzerdefinierten Gesundheitsanzeige zu aktualisieren.

1. Suchen Sie im Explorer-Fenster den StarterCharacterScripts-Container innerhalb von StarterPlayer.

   

2. Fügen Sie ein neues LocalScript in den Container ein und benennen Sie es in UpdateCustomMeter um, um seinen Zweck zu beschreiben. Skripte innerhalb von StarterCharacterScripts werden automatisch jedes Mal ausgeführt, wenn der Charakter des Spielers erscheinen, was es zu einem idealen Container macht, um ein Skript auszuführen, das die Gesundheitsanzeige bei jeder Wiederbelebung vollständig zurücksetzt.

   

3. Fügen Sie im Editor-Fenster für das UpdateCustomMeter-Skript den folgenden Code ein:

   UpdateCustomMeter
   local Players = game:GetService("Players")
   
   -- Referenz auf lokalen Spieler, Charakter und Humanoid
   local player = Players.LocalPlayer
   local character = player.Character
   local humanoid = character:WaitForChild("Humanoid")
   
   -- Referenz auf den inneren Rahmen der Anzeige
   local playerGui = player:WaitForChild("PlayerGui")
   local meterBarInner = playerGui.HUDContainer.MeterBar.InnerFill
   
   -- Farbverlauf-Sequenzfarben (rot, orange, gelb, limettengrün, grün)
   local gradient = {
   	Color3.fromRGB(225, 50, 0),
   	Color3.fromRGB(255, 100, 0),
   	Color3.fromRGB(255, 200, 0),
   	Color3.fromRGB(150, 225, 0),
   	Color3.fromRGB(0, 225, 50)
   }
   
   -- Funktion zum Abrufen der Farbe in der Farbverlaufsequenz aus einem fraktionalen Punkt
   local function getColorFromSequence(fraction: number): Color3
   	-- Jede Farbe im Farbverlauf definiert den Anfang und/oder das Ende eines Abschnitts
   	local numSections = #gradient - 1
   
   	-- Jeder Abschnitt repräsentiert einen Teil von 1
   	local sectionSize = 1 / numSections
   
   	-- Bestimme, in welchen Abschnitt der angeforderte Bruch fällt
   	local sectionStartIndex = 1 + math.clamp(fraction, 0, 1) // sectionSize
   
   	-- Hole die Farben am Anfang und Ende des Abschnitts
   	local sectionColorStart = gradient[sectionStartIndex]
   	local sectionColorEnd = gradient[sectionStartIndex + 1] or sectionColorStart
   
   	-- Normalisiere den Bruch, um eine Zahl von 0 bis 1 innerhalb des Abschnitts zu sein
   	local fractionOfSection = math.clamp(fraction, 0, 1) % sectionSize / sectionSize
   
   	-- Lerp zwischen Anfang und Ende basierend auf dem normalisierten Bruch
   	return sectionColorStart:Lerp(sectionColorEnd, fractionOfSection)
   end
   
   local function onHealthChanged()
   	-- Berechne neuen Gesundheitswert als Prozentsatz von max
   	local healthFraction = math.max(0, humanoid.Health / humanoid.MaxHealth)
   
   	-- Setze die Anzeige auf neue Größen-/Farbziele
   	meterBarInner.Size = UDim2.new(healthFraction, 0, 1, 0)
   	meterBarInner.BackgroundColor3 = getColorFromSequence(healthFraction)
   end
   
   -- Höre auf Änderungen der Humanoid-Gesundheit
   humanoid.HealthChanged:Connect(onHealthChanged)
   
   -- Setze (oder zurücksetze) die Größe/Farbe der Anzeige auf die aktuelle Gesundheit
   onHealthChanged()

   Codeerklärung

   Zeilen	Zweck
   4‑6	Erwirbt Referenzen auf den lokalen Player, sein Character-Modell und die Humanoid-Klasse innerhalb davon.
   9‑10	Erwirbt eine Referenz auf das InnerFill-Objekt der Anzeige, das in Größe und Farbe angepasst werden muss, wenn sich die Gesundheit des Charakters ändert.
   13‑19	Erklärt ein Array von fünf Farben (rot, orange, gelb, limettengrün, grün), um die Anzeige an verschiedenen Punkten neu zu färben; z. B. grün für 100 % Gesundheit, gelb für 50 %, rot für 0 % oder eine Mischung bei jedem Bruchwert zwischen den Tastpunkten.
   22‑41	Hilfsfunktion, die die Farbblende zwischen jedem der Farbverlauf hervorhebt.
   43‑50	Funktion, die Änderungen an der Gesundheit behandelt. Hier berechnet sie die neue Gesundheit als Prozentsatz der MaxHealth, verkleinert InnerFill auf diesen Skalenwert und färbt es neu gemäß der Rückgabe der getColorFromSequence()-Funktion.
   53	Die Haupt-Ereignisanbindung, die Änderungen der Health aus dem Server erkennt und die Funktion onHealthChanged() aufruft.
   56	Zu Beginn (beim Erscheinen oder Wiederbeleben des Charakters) wird die onHealthChanged()-Funktion aufgerufen, um InnerFill auf den korrekten Prozentsatz in Größe und Farbe einzustellen. Typischerweise wird dies die volle Breite und grün sein.

Wenn Sie das Erlebnis jetzt testen, werden Sie feststellen, dass die benutzerdefinierte Anzeige sowohl in Größe als auch Farbe korrekt aktualisiert wird, während der Charakter Schaden nimmt:

Animieren Sie die Anzeige

Um ein zusätzliches Maß an Feinarbeit an der benutzerdefinierten Anzeige hinzuzufügen, können Sie Gesundheitsänderungen durch Tweening animieren, die Größe und Farbe der Anzeige über ½ Sekunde allmählich ändern.

1. Greifen Sie auf die Skripteditor-Registerkarte für das UpdateCustomMeter-Skript zu, das Sie zuvor bearbeitet haben.

2. Wählen Sie alle Zeilen aus (CtrlA oder ⌘A) und fügen Sie sie dann mit dem folgenden Code ein (CtrlV oder ⌘V):

   UpdateCustomMeter
   local Players = game:GetService("Players")
   local TweenService = game:GetService("TweenService")
   
   -- Referenz auf lokalen Spieler, Charakter und Humanoid
   local player = Players.LocalPlayer
   local character = player.Character
   local humanoid = character:WaitForChild("Humanoid")
   
   -- Tween-Eigenschaften
   local tweenInfo = TweenInfo.new(0.5, Enum.EasingStyle.Exponential, Enum.EasingDirection.Out)
   
   -- Referenz auf den inneren Rahmen der Anzeige
   local playerGui = player:WaitForChild("PlayerGui")
   local meterBarInner = playerGui.HUDContainer.MeterBar.InnerFill
   
   -- Farbverlauf-Sequenzfarben (rot, orange, gelb, limettengrün, grün)
   local gradient = {
   	Color3.fromRGB(225, 50, 0),
   	Color3.fromRGB(255, 100, 0),
   	Color3.fromRGB(255, 200, 0),
   	Color3.fromRGB(150, 225, 0),
   	Color3.fromRGB(0, 225, 50)
   }
   
   -- Funktion, um die Farbe in der Farbverlaufsequenz anhand des Bruchwerts zu erhalten
   local function getColorFromSequence(fraction: number): Color3
   	-- Jede Farbe im Farbverlauf definiert den Anfang und/oder das Ende eines Abschnitts
   	local numSections = #gradient - 1
   
   	-- Jeder Abschnitt repräsentiert einen Teil von 1
   	local sectionSize = 1 / numSections
   
   	-- Bestimme, in welchen Abschnitt der angeforderte Bruch fällt
   	local sectionStartIndex = 1 + math.clamp(fraction, 0, 1) // sectionSize
   
   	-- Hole die Farben am Anfang und Ende des Abschnitts
   	local sectionColorStart = gradient[sectionStartIndex]
   	local sectionColorEnd = gradient[sectionStartIndex + 1] or sectionColorStart
   
   	-- Normalisiere den Bruch, um eine Zahl von 0 bis 1 innerhalb des Abschnitts zu sein
   	local fractionOfSection = math.clamp(fraction, 0, 1) % sectionSize / sectionSize
   
   	-- Lerp zwischen Anfang und Endë basierend auf dem normalisierten Bruch
   	return sectionColorStart:Lerp(sectionColorEnd, fractionOfSection)
   end
   
   local function onHealthChanged()
   	-- Berechne neue Gesundheit als Prozentsatz von max
   	local healthFraction = math.max(0, humanoid.Health / humanoid.MaxHealth)
   
   	-- Tween die Anzeige zu neuen Größen-/Farbziele
   	local tweenGoal = {
   		Size = UDim2.new(healthFraction, 0, 1, 0),
   		BackgroundColor3 = getColorFromSequence(healthFraction)
   	}
   	local meterBarTween = TweenService:Create(meterBarInner, tweenInfo, tweenGoal)
   	meterBarTween:Play()
   end
   
   -- Höre auf Änderungen der Humanoid-Gesundheit
   humanoid.HealthChanged:Connect(onHealthChanged)
   
   -- Setze (oder zurücksetze) die Anzeige auf die aktuelle Gesundheit
   onHealthChanged()

   Wesentliche Änderungen/Ergänzungen

   Zeilen	Zweck
   2	Erwirbt eine Referenz auf TweenService, um die Tweening-Funktionen innerhalb des Skripts zu implementieren.
   10	Erstellt einen TweenInfo-Konstruktor, der die Dauer des beabsichtigten Tweens, den Easing-Stil und die Easing-Richtung definiert.
   52‑57	Statt die Größe und Farbe der Anzeige wie in der vorherigen Version einfach einzustellen, wird ein tweenGoal-Tisch mit der Zielgröße/-farbe deklariert, ein neuer Tween mithilfe der tweenInfo- und tweenGoal-Parameter erstellt und der neue Tween abgespielt.

Wenn Sie das Erlebnis jetzt testen, werden Sie feststellen, dass die benutzerdefinierte Anzeige zwischen jeder Gesundheitsänderung weich übergeht:

Fügen Sie einen Schadenseffekt hinzu

Das Standardgesundheitsmessesystem beinhaltet einen kurzen, subtilen roten Farbton am Bildschirmrand, wenn der Charakter Schaden nimmt. Durch das Deaktivieren der standardmäßigen Anzeige wird dieser Effekt entfernt, aber Sie können ihn durch Ihre eigene Implementierung ersetzen.

1. Greifen Sie auf die Skripteditor-Registerkarte für das UpdateCustomMeter-Skript zu, das Sie vorher bearbeitet haben.

2. Wählen Sie alle Zeilen aus und fügen Sie sie mit dem folgenden Code erneut ein:

   UpdateCustomMeter
   local Workspace = game:GetService("Workspace")
   local Players = game:GetService("Players")
   local TweenService = game:GetService("TweenService")
   
   -- Referenz auf lokalen Spieler, Charakter und Humanoid
   local player = Players.LocalPlayer
   local character = player.Character
   local humanoid = character:WaitForChild("Humanoid")
   
   -- Tween-Eigenschaften
   local tweenInfo = TweenInfo.new(0.5, Enum.EasingStyle.Exponential, Enum.EasingDirection.Out)
   
   -- Variable zum Speichern/Cachen des Charaktergesundheitswerts
   local cachedHealth = humanoid.Health / humanoid.MaxHealth
   
   -- Hole (oder erstelle neue) Farbeffektkorrektur im Spieler-Camera
   local colorCorrection = Workspace.CurrentCamera:FindFirstChildWhichIsA("ColorCorrectionEffect") or Instance.new("ColorCorrectionEffect", Workspace.CurrentCamera)
   colorCorrection.Name = "DamageColorEffect"
   
   -- Referenz auf den inneren Rahmen der Anzeige
   local playerGui = player:WaitForChild("PlayerGui")
   local meterBarInner = playerGui.HUDContainer.MeterBar.InnerFill
   
   -- Farbverlauf-Sequenzfarben (rot, orange, gelb, limettengrün, grün)
   local gradient = {
   	Color3.fromRGB(225, 50, 0),
   	Color3.fromRGB(255, 100, 0),
   	Color3.fromRGB(255, 200, 0),
   	Color3.fromRGB(150, 225, 0),
   	Color3.fromRGB(0, 225, 50)
   }
   
   -- Funktion zum Abrufen der Farbe in der Farbverlaufsequenz anhand des Bruchwerts
   local function getColorFromSequence(fraction: number): Color3
   	-- Jede Farbe im Farbverlauf definiert den Anfang und/oder das Ende eines Abschnitts
   	local numSections = #gradient - 1
   
   	-- Jeder Abschnitt repräsentiert einen Teil von 1
   	local sectionSize = 1 / numSections
   
   	-- Bestimme, in welchen Abschnitt der angeforderte Bruch fällt
   	local sectionStartIndex = 1 + math.clamp(fraction, 0, 1) // sectionSize
   
   	-- Hole die Farben am Anfang und Ende des Abschnitts
   	local sectionColorStart = gradient[sectionStartIndex]
   	local sectionColorEnd = gradient[sectionStartIndex + 1] or sectionColorStart
   
   	-- Normalisiere den Bruch, um eine Zahl von 0 bis 1 innerhalb des Abschnitts zu sein
   	local fractionOfSection = math.clamp(fraction, 0, 1) % sectionSize / sectionSize
   
   	-- Lerp zwischen Anfang und Ende basierend auf dem normalisierten Bruch
   	return sectionColorStart:Lerp(sectionColorEnd, fractionOfSection)
   end
   
   local function onHealthChanged()
   	-- Berechne neue Gesundheit als Prozentsatz von max
   	local healthFraction = math.max(0, humanoid.Health / humanoid.MaxHealth)
   
   	-- Tween die Anzeige zu neuen Größen-/Farbziele
   	local tweenGoal = {
   		Size = UDim2.new(healthFraction, 0, 1, 0),
   		BackgroundColor3 = getColorFromSequence(healthFraction)
   	}
   	local meterBarTween = TweenService:Create(meterBarInner, tweenInfo, tweenGoal)
   	meterBarTween:Play()
   
   	-- Zeige den Schadeffekt an, wenn die neue Gesundheit niedriger ist als der gecachte Gesundheitswert
   	if healthFraction < cachedHealth then
   		-- Caches den neuen Gesundheitswert
   		cachedHealth = healthFraction
   
   		-- Setze die Farbeffekte auf rot als den anfänglichen Farbton vor dem Tweening
   		colorCorrection.TintColor = Color3.fromRGB(255, 25, 25)
   		colorCorrection.Saturation = 2.5
   
   		-- Tween den Farbton zurück zu weiß (neutral ohne Farbtonänderung von normal)
   		local colorCorrectionTweenGoal = {
   			TintColor = Color3.fromRGB(255, 255, 255),
   			Saturation = 0
   		}
   		local colorCorrectionTween = TweenService:Create(colorCorrection, tweenInfo, colorCorrectionTweenGoal)
   		colorCorrectionTween:Play()
   	end
   end
   
   -- Höre auf Änderungen der Humanoid-Gesundheit
   humanoid.HealthChanged:Connect(onHealthChanged)
   
   -- Setze (oder zurücksetze) die Anzeige auf die aktuelle Gesundheit
   onHealthChanged()

   Wesentliche Änderungen/Ergänzungen

   Zeilen	Zweck
   14	Setzt eine Platzhalterreferenz (cachedHealth), um die Menge der Gesundheit des Charakters zwischen Änderungen zu verfolgen, damit Sie erkennen können, ob eine Änderung niedriger ist (Schaden).
   17‑18	Erstellt beim ersten Erscheinen des Charakters einen neuen ColorCorrectionEffect im aktuellen Camera des Spielers oder erhält bei späteren Wiederbelebungen eine Referenz auf dieselbe Instanz. Durch das Anbringen dieses Post-Processing-Effekts an der Kamera des Spielers wird sichergestellt, dass er nur für ihren lokalen Bildschirm gilt und nicht für den Bildschirm aller Spieler auf dem Server.
   68‑83	Prüft zuerst bedingt, ob die Gesundheitsänderung niedriger ist als der cachedHealth-Wert, was Schaden anzeigt; falls ja, wird cachedHealth auf den neuen Wert gesetzt. Danach wird die ColorCorrectionEffect-Tönung auf [255, 25, 25] (rot) mit höherer Sättigung gesetzt, bevor sie zurück auf den neutralen weißen Farbton ([255, 255, 255]) mit keiner Sättigung getweent wird.

Wenn Sie das Erlebnis jetzt testen, werden Sie feststellen, dass der Bildschirm kurz rot aufblitzt, wenn der Charakter Schaden nimmt: