Erstellen von HUD-Metern

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, Gesundheitsmeter und Menüschaltflächen. Ein HUD ist für die meisten Spiele unerlässlich, da es Informationen anzeigt, die den Spielern helfen, ihre Spielziele erfolgreich zu erreichen.

Ein häufiges HUD-Element ist ein Gesundheitsmeter mit einem Symbol auf der linken Seite, das in eine Timerleiste, Fortschrittsleiste oder Ähnliches umgewandelt werden kann.

Mit Hazardous Space Station als Ausgangspunkt und UI-Grundlagen - HUD-Meter als fertigem 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 die integrierten Roblox-Steuerelemente und Geräteschnitte/Inseln positioniert/größert, wie z. B. den Kameraschnitt auf modernen Handys.
• Wie man das standardmäßige Roblox-Gesundheitsmeter durch sein eigenes Meter ersetzt und es mit dem Gesundheitslevel des Charakters verbindet.
• Wie man den mittleren Teil des Gesundheitsmeters animiert und seine Farbe zwischen fünf Farbverlaufsschlüsselpunkten (rot, orange, gelb, limette, grün) einstellt.

Aktivieren Sie den Gerätesimulator

Roblox ist von Natur aus plattformübergreifend, da Spieler Spiele auf ihrem Telefon oder Tablet entdecken und beitreten können, um später dort fortzufahren, 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 deutlich sichtbar sind.

Der beste Weg, um UI-Designs plattformübergreifend zu testen, ist der Gerätesimulator von Studio. Dieses Tool bietet eine vordefinierte Auswahl an Geräten und ermöglicht es Ihnen, eigene benutzerdefinierte Voreinstellungen hinzuzufügen.

1. Öffnen Sie die Hazardous Space Station-Vorlage in Studio.

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

3. Wählen Sie in der Leiste direkt über dem Hauptansichtsfenster eine Telefonemulation wie iPhone X oder Samsung Galaxy A51 aus. Stellen Sie dann die Ansicht auf An Fenster anpassen ein, um den maximalen Platz in 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 das gesamte Gesundheitsmeter). Um ein ScreenGui und seine untergeordneten Objekte für jeden Spieler, der dem Spiel beitritt, anzuzeigen, platzieren Sie es im StarterGui-Container. Wenn ein Spieler beitritt und sein Charakter zum ersten Mal erscheint, wird das ScreenGui und sein Inhalt 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 jedoch typischerweise Ausschnitte, Aussparungen und andere Elemente, die Bildschirmplatz beanspruchen. Jedes Roblox-Spiel enthält auch die oberen Steuerungen, um schnellen Zugriff auf das Hauptmenü, Chat, Leaderboard und mehr zu ermöglichen.

Um sicherzustellen, dass die Spieler alle UI ohne Behinderung sehen und darauf zugreifen können, bietet Roblox die ScreenInsets-Eigenschaft, die die sicheren Bereich-Insets für den Inhalt eines ScreenGui steuert. Jedes UI-Objekt, das Sie innerhalb eines ScreenGui positionieren, ist relativ zu den Inset-Grenzen.

Während die Standardeinstellung von CoreUISafeInsets sicherstellt, dass alle UI-Objekte von der Roblox-UI und den Geräteausschnitten ferngehalten werden, kann DeviceSafeInsets eine bessere Option sein, um den begrenzten Bildschirmplatz zu nutzen, wie unten dargestellt.

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

   

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

   

Setzen Sie die Randpolsterung

Mit ScreenInsets, das auf DeviceSafeInsets gesetzt ist, kann der Inhalt jetzt direkt bis zur physischen oberen Kante des Bildschirms reichen. Eine kleine Menge an Polsterung kann jedoch helfen, das Gesundheitsmeter (und andere Objekte im Container) leicht von den Bildschirmrändern wegzuschieben, um ein saubereres Erscheinungsbild zu erzielen und zu verhindern, dass sie abgeschnitten werden.

Eine Möglichkeit, Polsterung zu einem UI-Container hinzuzufügen, 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 Ränder des Containers einen Wert von 0, 16 ein (PaddingBottom, PaddingLeft, PaddingRight, PaddingTop). Dies wendet eine Polsterung von 16 Pixeln rund um den Container an, unabhängig von der Bildschirmauflösung.

   

Konstruiere das Gesundheitsmeter

Nachdem der Bildschirmcontainer konfiguriert ist, können Sie mit dem Bau des Gesundheitsmeters unter Verwendung von Roblox UI-Objekten wie Frames und einem Bildlabel beginnen.

Erstellen Sie den übergeordneten Rahmen

Ähnlich wie Designanwendungen wie Figma und Photoshop dient ein Frame in Roblox als Container für andere UI-Objekte. Für dieses Tutorial wird das gesamte Gesundheitsmeter in einem einzigen übergeordneten Rahmen enthalten sein, was es einfach macht, es über verschiedene HUD-Layouts hinweg neu zu positionieren.

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

   

   Wenn der neue Rahmen 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 Rahmeninstanz 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 sowohl die X- als auch die Y-Achse 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, 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 darstellt, unabhängig von der physischen Pixelgröße des Bildschirms. Ebenso repräsentiert ein Y-Skalierungswert von 0 (0%) die obere Kante des Containers.

Zusätzlich müssen Sie einen oberen rechten Ankerpunkt für den übergeordneten Rahmen festlegen, um seinen 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 Rahmens in die obere rechte Ecke setzt.

1. Wählen Sie im Explorer-Fenster den MeterBar-Rahmen 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 Rahmen sollte jetzt in der oberen rechten Ecke des sicheren Bereichs des Geräts positioniert sein, leicht von der Kante zurückgesetzt 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 sowohl die X- als auch die Y-Achse enthält.

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

1. Wählen Sie den MeterBar-Rahmen 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 % Breite und 5 % Höhe ohne zusätzliche Pixel-Offsets festzulegen.

   

Stylen Sie den Rahmen

Standardmäßig sind Frames in solidem Weiß gefüllt. Das endgültige Gesundheitsmeter sollte eine dunklere und leicht durchsichtige Füllung sowie einen dunklen Rand haben, damit es sich besser von hellen und dunklen Hintergründen abhebt.

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

2. Geben Sie 0.75 für die BackgroundTransparency-Eigenschaft ein. In Roblox reicht die Transparenz 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 ein, einen leistungsstarken UI-Modifikator, der einen anpassbaren Strich zum Rahmen hinzufügt.

   

4. Wählen Sie den neuen UIStroke aus und setzen Sie die folgenden Eigenschaften:

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

   

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

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

   

2. Wählen Sie den neuen UICorner aus und setzen Sie den CornerRadius auf 0.5, 0. Die Verwendung eines Skalenwerts von 0.5 (50 %) anstelle eines Pixelwerts ist besonders praktisch für die Meterleiste, da sie eine vollständig abgerundete Kurve gewährleistet, unabhängig davon, wie hoch oder breit der Container wird.

   

Erstellen Sie die innere Füllung

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

1. Fügen Sie einen untergeordneten Frame in den MeterBar-Rahmen ein.

2. Benennen Sie die neue Rahmeninstanz in InnerFill um.

   

3. Wählen Sie InnerFill aus und setzen Sie die folgenden Eigenschaften:

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

   Da die Kinder von Rahmen relativ zu ihrem Elternteil positioniert und dimensioniert werden, sorgt die Verwendung von Skalen dafür, dass der innere Rahmen die volle Breite und Höhe des Elternteils ausfüllt, beginnend von der linken Kante des Elternteils.

   

4. Um die "Pill"-Form des übergeordneten Rahmens zu entsprechen, fügen Sie einen zusätzlichen UICorner in InnerFill ein.

   

5. Wählen Sie den neuen UICorner-Modifikator aus und setzen Sie die CornerRadius-Eigenschaft auf 0.5, 0, um die "Pill"-Form des übergeordneten MeterBar-Rahmens zu entsprechen.

   

6. Um besser darzustellen, dass ein volles Meter gute Gesundheit anzeigt, wählen Sie InnerFill aus und setzen Sie die BackgroundColor3-Eigenschaft auf [0, 225, 50] (in einer späteren Aufgabe werden Sie script diese Farbe ändern, basierend auf der tatsächlichen Gesundheit).

   

Fügen Sie das Symbol hinzu

Um den Zweck des Meters deutlicher anzuzeigen, können Sie ein Bildlabel auf der linken Seite hinzufügen, in diesem Fall ein rotes Herz, das häufig Gesundheit oder Leben symbolisiert.

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

2. Benennen Sie die neue Label-Instanz in Icon um.

   

3. Wählen Sie Icon aus und setzen Sie die ZIndex-Eigenschaft auf 2. Während neu eingefügte UI-Objekte immer vor zuvor eingefügten Objekten geschichtet werden, stellt diese Änderung sicher, dass das Symbol immer vor den Rahmenelementen des Meters angezeigt wird.

   

4. Suchen Sie die Image-Eigenschaft des Symbols und geben Sie rbxassetid://91715286435585 ein, den Verweis auf ein vorab hochgeladenes Herzbild (wenn gewünscht, können Sie Ihr eigenes Bild importieren und dessen Asset-ID verwenden).

   

5. Um sicherzustellen, dass das Symbol ImageLabel immer im Verhältnis 1:1 bleibt, fügen Sie einen UIAspectRatioConstraint ein. Obwohl dieser Constraint anpassbare Eigenschaften zur Steuerung des Seitenverhältnisses hat, können Sie die Standardwerte unverändert lassen.

   

6. Wählen Sie Icon aus und finalisieren Sie das Aussehen und die Position, indem Sie die folgenden Eigenschaften ändern:

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

   

Beschränken Sie die Größe

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

Um die Höhe des Meterbalkens konsistenter mit breiteren Bildschirmen zu halten, können Sie einen UISizeConstraint anwenden, um die maximale Pixelhöhe zu begrenzen.

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

   

2. Wählen Sie den neuen Constraint aus und setzen Sie die MaxSize-Eigenschaft auf inf, 20, um die Höhe auf 20 Pixel zu beschränken, während keine Breitenbeschränkung durchgesetzt wird.

   

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

Ersetzen Sie das standardmäßige Gesundheitsmeter

Roblox-Spiele enthalten ein standardmäßiges Gesundheitsmeter, das sichtbar wird, wenn Charaktere Schaden nehmen. Wenn Sie das standardmäßige Meter sichtbar lassen, wird es dupliziert und könnte potenziell mit dem benutzerdefinierten Meter überlappen.

Deaktivieren Sie das standardmäßige Meter

Um das standardmäßige Gesundheitsmeter zu deaktivieren, verwenden Sie ein Client-Skript (LocalScript) innerhalb von StarterPlayerScripts, das StarterGui:SetCoreGuiEnabled() aufruft.

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

   

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 einem Spiel beitritt, was es zu einem idealen Container macht, um ein Skript auszuführen, das das standardmäßige Meter 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")
   
   -- Standardgesundheitsmeter ausblenden
   StarterGui:SetCoreGuiEnabled(Enum.CoreGuiType.Health, false)

   Codeerklärung

   Zeile	Zweck
   1	Erhält einen Verweis auf einen Kern-Dienst, StarterGui, der denselben Container darstellt, in dem Sie das benutzerdefinierte Gesundheitsmeter erstellt haben und dessen Inhalte in den PlayerGui-Container für jeden Spieler, der dem Spiel beitritt, geklont werden.
   4	Ruft die Methode SetCoreGuiEnabled() des Dienstes auf und weist an, dass das standardmäßige Gesundheitsmeter deaktiviert (false) werden soll.

Wenn Sie das Spiel jetzt testen und Schaden nehmen, werden Sie feststellen, dass das standardmäßige Meter deaktiviert und verborgen ist (Sie werden das benutzerdefinierte Meter so skripten, dass es Gesundheitsänderungen widerspiegelt im nächsten Abschnitt).

Hören Sie auf Gesundheitsänderungen

Alle standardmäßigen Roblox-Charaktermodelle enthalten eine Humanoid-Klasse, die dem Charakter spezielle Verhaltensweisen und Funktionen bietet, wie z. B. das Festlegen seiner Geh-/Laufgeschwindigkeit und das Verwalten seiner Gesundheit. Health-Änderungen auf dem Server replizieren sich auf jeden Client des Spielers, und Sie können diese Änderungen erkennen, um sowohl die Größe als auch die Farbe des benutzerdefinierten Gesundheitsmeters 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 erscheint, was es zu einem idealen Container macht, um ein Skript auszuführen, das das Gesundheitsmeter bei jedem Respawn vollständig zurücksetzt.

   

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

   UpdateCustomMeter

   local Players = game:GetService("Players")
   
   -- Verweis auf lokalen Spieler, Charakter und Humanoid
   local player = Players.LocalPlayer
   local character = player.Character
   local humanoid = character:WaitForChild("Humanoid")
   
   -- Verweis auf das innere Rahmen des Meterbalkens
   local playerGui = player:WaitForChild("PlayerGui")
   local meterBarInner = playerGui.HUDContainer.MeterBar.InnerFill
   
   -- Farbverlaufsequenzfarben (rot, orange, gelb, limette, 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 aus dem Bruchteilspunkt 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
   
   	-- Bestimmen Sie, in welchen Abschnitt der angeforderte Bruchteil fällt
   	local sectionStartIndex = 1 + math.clamp(fraction, 0, 1) // sectionSize
   
   	-- Holen Sie sich die Farben am Anfang und Ende des Abschnitts
   	local sectionColorStart = gradient[sectionStartIndex]
   	local sectionColorEnd = gradient[sectionStartIndex + 1] or sectionColorStart
   
   	-- Normalisieren Sie den Bruchteil, 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 Bruchteil
   	return sectionColorStart:Lerp(sectionColorEnd, fractionOfSection)
   end
   
   local function onHealthChanged()
   	-- Berechnen Sie die neue Gesundheit als Prozentsatz des Maximums
   	local healthFraction = math.max(0, humanoid.Health / humanoid.MaxHealth)
   
   	-- Setzen Sie die Leiste auf neue Größen-/Farbziele
   	meterBarInner.Size = UDim2.new(healthFraction, 0, 1, 0)
   	meterBarInner.BackgroundColor3 = getColorFromSequence(healthFraction)
   end
   
   -- Hören Sie auf Änderungen der Humanoid-Gesundheit
   humanoid.HealthChanged:Connect(onHealthChanged)
   
   -- Setzen Sie die Größe/Farbe der Leiste initial (oder zurücksetzen) auf die aktuelle Gesundheit
   onHealthChanged()

   Codeerklärung

   Zeilen	Zweck
   4‑6	Erhält Verweise auf den lokalen Player, sein Character-Modell und die Humanoid-Klasse darin.
   9‑10	Erhält einen Verweis auf das InnerFill-Objekt des Meters, das in der Größe geändert und umgefärbt werden muss, wenn sich die Gesundheit des Charakters ändert.
   13‑19	Deklariert ein Array von fünf Farben (rot, orange, gelb, limette, grün), um das Meter an verschiedenen Punkten umzufärben; zum Beispiel grün für 100 % Gesundheit, gelb für 50 %, rot für 0 % oder eine Mischung an jedem Bruchteil zwischen den Schlüsselpunkten.
   22‑41	Hilfsfunktion, die die Farbblende zwischen beliebigen der Farbverlaufsschlüsselpunkte zurückgibt.
   43‑50	Funktion, die Änderungen der Gesundheit behandelt. Hier wird die neue Gesundheit als Prozentsatz der MaxHealth des Charakters berechnet, InnerFill auf diesen Skalierungsprozentsatz in der Größe geändert und umgefärbt, um die Farbe zurückzugeben, die von der Funktion getColorFromSequence() zurückgegeben wird.
   53	Die Haupt-Ereignis-Verbindung, die Health-Änderungen erkennt, die vom Server repliziert werden, und die Funktion onHealthChanged() aufruft.
   56	Ruft zunächst (beim Erscheinen oder Respawn des Charakters) die Funktion onHealthChanged() auf, um die Größe und Farbe von InnerFill auf den richtigen Prozentsatz einzustellen. Typischerweise wird dies die volle Breite und grün sein.

Wenn Sie das Spiel jetzt testen, werden Sie feststellen, dass das benutzerdefinierte Meter sowohl in der Größe als auch in der Farbe korrekt aktualisiert wird, wenn der Charakter Schaden nimmt:

Animieren Sie den Meterbalken

Um dem benutzerdefinierten Meter eine zusätzliche Politur zu verleihen, können Sie Gesundheitsänderungen durch Tweening animieren, indem Sie die Größe und Farbe des Meterbalkens über ½ Sekunde allmählich ändern.

1. Greifen Sie auf den Skripteditor-Tab 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")
   
   -- Verweis 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)
   
   -- Verweis auf das innere Rahmen des Meterbalkens
   local playerGui = player:WaitForChild("PlayerGui")
   local meterBarInner = playerGui.HUDContainer.MeterBar.InnerFill
   
   -- Farbverlaufsequenzfarben (rot, orange, gelb, limette, 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 aus dem Bruchteilspunkt 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
   
   	-- Bestimmen Sie, in welchen Abschnitt der angeforderte Bruchteil fällt
   	local sectionStartIndex = 1 + math.clamp(fraction, 0, 1) // sectionSize
   
   	-- Holen Sie sich die Farben am Anfang und Ende des Abschnitts
   	local sectionColorStart = gradient[sectionStartIndex]
   	local sectionColorEnd = gradient[sectionStartIndex + 1] or sectionColorStart
   
   	-- Normalisieren Sie den Bruchteil, 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 Bruchteil
   	return sectionColorStart:Lerp(sectionColorEnd, fractionOfSection)
   end
   
   local function onHealthChanged()
   	-- Berechnen Sie die neue Gesundheit als Prozentsatz des Maximums
   	local healthFraction = math.max(0, humanoid.Health / humanoid.MaxHealth)
   
   	-- Tween die Leiste zu neuen Größen-/Farbzielen
   	local tweenGoal = {
   		Size = UDim2.new(healthFraction, 0, 1, 0),
   		BackgroundColor3 = getColorFromSequence(healthFraction)
   	}
   	local meterBarTween = TweenService:Create(meterBarInner, tweenInfo, tweenGoal)
   	meterBarTween:Play()
   end
   
   -- Hören Sie auf Änderungen der Humanoid-Gesundheit
   humanoid.HealthChanged:Connect(onHealthChanged)
   
   -- Setzen Sie die Größe/Farbe der Leiste initial (oder zurücksetzen) auf die aktuelle Gesundheit
   onHealthChanged()

   Wichtige Ergänzungen/Änderungen

   Zeilen	Zweck
   2	Erhält einen Verweis auf TweenService, um Tweening-Funktionalität innerhalb des Skripts zu implementieren.
   10	Erstellt einen TweenInfo-Konstruktor, der die beabsichtigte Tween-Dauer, Easing-Stil und Easing-Richtung definiert.
   52‑57	Statt die Größe und Farbe der Leiste einfach wie in der vorherigen Version festzulegen, wird eine tweenGoal-Tabelle mit der Zielgröße/-farbe deklariert, ein neuer Tween unter Verwendung der tweenInfo- und tweenGoal-Parameter erstellt und der neue Tween abgespielt.

Wenn Sie das Spiel jetzt testen, werden Sie feststellen, dass das benutzerdefinierte Meter zwischen jeder Gesundheitsänderung tweened:

Fügen Sie einen Schadenseffekt hinzu

Das standardmäßige Gesundheitsmesssystem enthält einen kurzen, subtilen roten Farbton an den Bildschirmrändern, wenn der Charakter Schaden nimmt. Durch das Deaktivieren des standardmäßigen Meters wird dieser Effekt entfernt, aber Sie können ihn durch Ihre eigene Implementierung ersetzen.

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

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

   UpdateCustomMeter

   local Workspace = game:GetService("Workspace")
   local Players = game:GetService("Players")
   local TweenService = game:GetService("TweenService")
   
   -- Verweis 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 der Charaktergesundheit
   local cachedHealth = humanoid.Health / humanoid.MaxHealth
   
   -- Holen Sie sich (oder erstellen Sie einen neuen) Farbeffekte innerhalb der Spieler-Kamera
   local colorCorrection = Workspace.CurrentCamera:FindFirstChildWhichIsA("ColorCorrectionEffect") or Instance.new("ColorCorrectionEffect", Workspace.CurrentCamera)
   colorCorrection.Name = "DamageColorEffect"
   
   -- Verweis auf das innere Rahmen des Meterbalkens
   local playerGui = player:WaitForChild("PlayerGui")
   local meterBarInner = playerGui.HUDContainer.MeterBar.InnerFill
   
   -- Farbverlaufsequenzfarben (rot, orange, gelb, limette, 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 aus dem Bruchteilspunkt 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
   
   	-- Bestimmen Sie, in welchen Abschnitt der angeforderte Bruchteil fällt
   	local sectionStartIndex = 1 + math.clamp(fraction, 0, 1) // sectionSize
   
   	-- Holen Sie sich die Farben am Anfang und Ende des Abschnitts
   	local sectionColorStart = gradient[sectionStartIndex]
   	local sectionColorEnd = gradient[sectionStartIndex + 1] or sectionColorStart
   
   	-- Normalisieren Sie den Bruchteil, 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 Bruchteil
   	return sectionColorStart:Lerp(sectionColorEnd, fractionOfSection)
   end
   
   local function onHealthChanged()
   	-- Berechnen Sie die neue Gesundheit als Prozentsatz des Maximums
   	local healthFraction = math.max(0, humanoid.Health / humanoid.MaxHealth)
   
   	-- Tween die Leiste zu neuen Größen-/Farbzielen
   	local tweenGoal = {
   		Size = UDim2.new(healthFraction, 0, 1, 0),
   		BackgroundColor3 = getColorFromSequence(healthFraction)
   	}
   	local meterBarTween = TweenService:Create(meterBarInner, tweenInfo, tweenGoal)
   	meterBarTween:Play()
   
   	-- Zeigen Sie den Schadenseffekt an, wenn die neue Gesundheit niedriger ist als die zwischengespeicherte Gesundheit
   	if healthFraction < cachedHealth then
   		-- Zwischenspeichern des neuen Gesundheitswerts
   		cachedHealth = healthFraction
   
   		-- Setzen Sie die Farbkorrektur 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 und keine Farbä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ören Sie auf Änderungen der Humanoid-Gesundheit
   humanoid.HealthChanged:Connect(onHealthChanged)
   
   -- Setzen Sie die Größe/Farbe der Leiste initial (oder zurücksetzen) auf die aktuelle Gesundheit
   onHealthChanged()

   Wichtige Ergänzungen/Änderungen

   Zeilen	Zweck
   14	Setzt einen Platzhalterverweis (cachedHealth), um die Gesundheitsmenge des Charakters zwischen Änderungen zu verfolgen, damit Sie vergleichen können, ob eine Änderung niedriger ist (Schaden).
   17‑18	Beim ersten Erscheinen des Charakters wird ein neuer ColorCorrectionEffect innerhalb der aktuellen Camera des Spielers erstellt oder ein Verweis auf dieselbe Instanz bei späteren Respawns erhalten. Durch das Anheften dieses Post-Processing-Effekts an die Kamera des Spielers wird sichergestellt, dass er nur auf ihrem lokalen Bildschirm angewendet wird, nicht auf dem Bildschirm jedes Spielers auf dem Server.
   68‑83	Führt zunächst eine bedingte Überprüfung durch, um zu bestätigen, dass die Gesundheitsänderung niedriger ist als der cachedHealth-Wert, was auf Schaden hinweist; falls ja, wird cachedHealth auf den neuen Wert gesetzt. Als nächstes wird die ColorCorrectionEffect-Färbung auf [255, 25, 25] (rot) mit höherer Sättigung gesetzt und dann die Färbung zurück auf die Standardfarbe neutral weiß ([255, 255, 255]) ohne Sättigung tweened.

Wenn Sie das Spiel jetzt testen, werden Sie feststellen, dass der Bildschirm kurz rot aufblitzt, wann immer der Charakter Schaden nimmt: