Erstelle HUD-Meter

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

Ein gemeinsames HUD-Element ist ein Gesundheitsmesser mit einem Icon auf der linken Seite, das in eine Timer-Bar, Progress-Bar oder ähnliches umgewandelt werden kann.

Mit der Verwendung von gefährlicher Raumstation als Ausgangspunkt und UI-Grundlagen - HUD-Meter als abgeschlossener Ortzeigt dieses Tutorial:

• Einrichtung und Verwendung des Geräte-Emulators , um dein Design auf mehreren emulierten Bildschirmen zu testen.
• Verwendung von StarterGui als Design- und Speichercontainer.
• Wie man UI-Elemente so positioniert/grössen, dass sie um integrierte Roblox-Steuerelemente und Geräteknöpfe/Inseln herum passen, wie z. B. den Kameranotch auf modernen Handys.
• Wie du den Standard-Roblox-Gesundheitsmesser durch deinen eigenen Meter ersetzt und ihn mit dem Stufedes Charakters verbindest.
• Wie man den mittleren Teil des Gesundheitsmeters animiert und seine Farbe zwischen fünf Farbgradientenpunkten (rot, orange, gelb, limone, grün) einstellt.

Aktiviere den Geräteemulator

Roblox ist von Natur aus crossplattformübergreifend, da Spieler Erlebnisse auf einem PC oder einer Konsole entdecken und beitreten können, und später ihr Telefon abholen und dort fortfahren, wo sie aufgehört haben.Mobilgeräte (Telefone und Tablets) haben am wenigsten Platz, daher ist es wichtig, dass deine UI-Elemente auf kleineren Bildschirmen passen und dass sie für Spieler deutlich sichtbar sind.

Die beste Art, UI-Designs auf mehreren Plattformen zu testen, ist der Geräteemulator von Studio.Dieses Tool bietet eine voreingestellte Auswahl von Geräten und ermöglicht es Ihnen, Ihre eigenen benutzerdefinierten Voreinstellungen hinzuzufügen.

1. Öffne die gefährliche Raumstation-Vorlage in Studio.

   In Studio bearbeiten

2. Von der Test -Registerkarte wechseln Sie zum Werkzeug Gerät .

   

3. Von der Leiste direkt über dem Ansichtsfensteraus wählen Sie eine Telefon-Emulation wie iPhone X oder Samsung Galaxy A51 .Dann stelle die Ansichtsgröße auf Passend zum Fenster ein, um den maximalen Raum in Studio zu nutzen.

   

Erstelle einen Bildschirmcontainer

Ein ScreenGui Container enthält UI-Objekte (GuiObjects) zur Anzeige auf dem Bildschirm eines Spieler:in(in diesem Tutorial die Gesamtheit des Gesundheitszählers).Um ein ScreenGui und seine Kindobjekte für jeden Spieler anzuzeigen, der der Erlebnisbeitritt, platzieren Sie es innerhalb des StarterGui Containers.Wenn ein Spieler beitritt und sein Charakter zuerst erscheint, klont der ScreenGui und seine Inhalte den PlayerGui -Container für diesen Spieler:in, der sich innerhalb des Players -Containers befindet.

Um eine leere ScreenGui einzufügen:

1. Im Explorer -Fenster suchen Sie den StarterGui-Container.

   

2. Bewegen Sie den Mauszeiger über den Container, klicken Sie auf die Schaltfläche ⊕ und fügen Sie ein ScreenGui ein.

   

3. Benennen Sie den neuen Container HUDContainer um, um seinen Zweck zu widerspiegeln.

   

Nutze sichere Bereiche

Moderne Telefone nutzen den gesamten Bildschirm, aber sie enthalten in der Regel Abstände, Auschnitte und andere Elemente, die den Platzeinnehmen.Jedes Roblox-Erlebnis enthält auch die oberen Menüsteuerelemente für einen schnellen Zugriff auf das Hauptmenü, Chat, Bestenliste und mehr.

Um sicherzustellen, dass Spieler ohne Beeinträchtigung alle UI sehen und zugreifen können, bietet Roblox die ScreenInsets, die die sichere Zone für den Inhalt eines ScreenGui Steuerungsknotens kontrolliert.Jedes UI-Objekt, das du innerhalb eines ScreenGui positionierst, ist relativ zu den Inseritionsgrenzen.

Während der Standard von CoreUISafeInsets sicherstellt, dass alle UI-Objekte frei von der Roblox-UI und Geräteausschnitten sind, kann DeviceSafeInsets eine bessere Option sein, um begrenzten Platzzu nutzen, wie unten dargestellt.

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

   

2. Im Eigenschaften-Fenster stellen Sie die ScreenInsets auf DeviceSafeInsets ein.

   

Randpolsterung festlegen

Mit ScreenInsets festgelegt auf DeviceSafeInsets kann der Inhalt jetzt direkt bis zur physischen oberen Kante des Bildschirms erweitert werden.Allerdings kann eine kleine Menge von Abstand helfen, den Gesundheitszähler (und andere Objekte innerhalb des Containers) leicht von den Bildschirmrändern wegzuschieben, um ein saubereres Aussehen zu erzielen und sie vor dem Beschneiden zu schützen.

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

1. Füge einen UIPadding Modifikator in HUDContainer ein.

   

2. Mit dem neuen UIPadding Objekt ausgewählt, geben Sie einen Wert von 0, 16 für alle Kanten des Containers ein ( PaddingBottom , PaddingLeft , PaddingRight , PaddingTop ).Dies gilt für die Pufferung von 16 Pixeln rund um den Container, unabhängig von der Auflösung des Bildschirms.

   

Konstruieren Sie den Gesundheitsmesser

Mit dem Bildschirmcontainer konfiguriert, kannst du beginnen, den Gesundheitszähler mit Roblox-Benutzeroberflächenobjekten wie Rahmen und einem Bildlauf zu erstellen.

Erstelle den Elternrahmen

Ähnlich wie bei Design-Anwendungen 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 Elternrahmen enthalten sein, was es einfach macht, sich über verschiedene HUD-Layouts neu zu positionieren.

1. Füge 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-Überlagerung von der Visualisierungsoptionen -Widget im oberen rechten Eck des 3D-Ansichtsfensters eingeschaltet haben oder UI-Sichtbarkeit von der Ansicht -Registerkarte.

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

   

Positioniere den Rahmen

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

• Scale werte repräsentieren einen prozentsatz der größe des containers entlang der entsprechenden achse, additiv zu allen Offset werten.
• Offset werte repräsentieren, wie viele pixel sich auf die entsprechende achse verschieben, additiv zu allen Scale.

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%) den rechten Rand des Containers repräsentiert, unabhängig von der physischen Pixelgröße des Bildschirms.Ebenso repräsentiert ein Y -Skalierungswert von 0 (0%) die oberste Kante des Containers.

Zusätzlich musst du einen oberen rechten Ankerpunkt festlegen, damit der übergeordnete Rahmen seinen Ursprungspunkt definieren kann.Akzeptable Werte liegen zwischen 0 und 1 , bezogen auf die Größe des Objekts, sodass ein Ankerwert von 1, 0 den Ankerpunkt des Rahmens in seiner oberen rechten Ecke setzt.

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

   

2. Im Eigenschaften-Fenster geben Sie für und drücken Sie .Studio fügt die Klammern automatisch hinzu, um die UDim2 von zu bilden.

3. Geben Sie 1, 0 für die AnchorPoint Eigenschaftenein.Der Rahmen sollte jetzt in der oberen rechten Ecke des Gerätesicherheitsbereichs positioniert werden, leicht abgeflacht vom Rand als Ergebnis der Füllung.

   

Größe des Rahmens ändern

Wie die Position wird die eines UI-Objekts durch ein Koordinatenset repräsentiert, das Werte für beide Achsen X und Y enthält.

Standardmäßig ist die Größe des neuen Rahmens {0, 100},{0, 100} , was bedeutet, dass 100 Pixel in Breite ( X ) und Höhe ( Y ) enthalten sind.Während ein strenger Pixelwert in bestimmten Fällen nützlich ist, skalieren viele UI-Elemente auf mehrere Bildschirme reaktionsschneller, wenn sie auf einen Prozentsatz der Gesamtgröße des Bildschirmcontainers festgelegt sind.

1. Mit dem MeterBar -Frame ausgewählt, greife auf das Eigenschaften -Fenster zu und navigiere zur Size.

2. Geben Sie einen Wert von 0.35, 0, 0.05, 0 ein, um einen Prozentsatz von 35% breit und 5% hoch mit keinen zusätzlichen Pixelfeldern zu setzen.

   

Stil des Rahmens

Standardmäßig werden Frames mit festem Weiß gefüllt.Die letzte Gesundheitsanzeige sollte eine dunklere und leicht undurchsichtige Füllung sowie einen dunklen Umriss haben, so dass sie sich besser auf hellen und dunklen Hintergründen abhebt.

1. Mit dem MeterBar -Frame ausgewählt, geben Sie 0 für das EigenschaftenBackgroundColor3 ein.Studio konvertiert es automatisch in den RGB-Wert von .

2. Geben Sie 0.75 für die EigenschaftenBackgroundTransparency ein.In Roblox reicht die Transparenz von 0 für vollständig undurchsichtig bis 1 für vollständig durchsichtig, also entspricht 0.75 25% Opazität in anderen Anwendungen wie Figma oder Photoshop.

   

3. Füge ein UIStroke Objekt ein, ein leistungsstarker UI-Modifizierer, der einen anpassbaren Strich zum Rahmen hinzufügt.

   

4. Mit der neuen UIStroke ausgewählt, legen Sie die folgenden Eigenschaften fest:

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

   

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

1. Füge eine UICorner in den MeterBar -Frame ein.

   

2. Mit der neuen UICorner ausgewählt, setze das CornerRadius auf 0.5, 0.Die Verwendung eines Skalierungswerts (50%) von 0.5) anstelle eines Pixelwerts ist besonders für die Anzeigeneinheit geeignet, weil sie eine vollständig abgerundete Kurve gewährleistet, unabhängig davon, wie hoch oder breit der Container wird.

   

Erstelle die innere Füllung

Jetzt, da der Rahmen der Gesundheitsuhr vollständig ist, kannst du einen inneren Füllstand hinzufügen, um die variable Gesundheit des Charakters zu repräsentieren.Da es nur eine mit Feststoff gefüllte Region sein muss, ist ein Unterkind Frame innerhalb des Elternrahmens geeignet.

1. Füge ein Kind Frame in den MeterBar Rahmen ein.

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

   

3. Mit InnerFill ausgewählt, legen Sie die folgenden Eigenschaften fest:

   • AnchorPoint = 0, 0.5 ( linker rand und vertikale mitte)
   • Position = 0, 0, 0.5, 0
   • Size = 1, 0, 1, 0

   Da Kinder von Frames relativ zu ihrem übergeordnetes Teilpositioniert und angepasst sind, füllt die Verwendung von Skalierung den inneren Rahmen die volle Breite und Höhe des übergeordnetes Teil, beginnend mit dem linken Rand des übergeordnetes Teil.

   

4. Um die "Pille"-Form des Elternrahmens zu entsprechen, füge einen zusätzlichen UICorner in InnerFill ein.

   

5. Mit dem neuen UICorner -Modifizierer ausgewählt, setze seine CornerRadius -Eigenschaft auf 0.5, 0 , um die "Pille"-Form des Elternrahmens MeterBar zu entsprechen

   

6. Um besser darzustellen, dass ein volles Messgerät auf gute Gesundheit hinweist, wählen Sie InnerFill und stellen Sie seine Eigenschaft auf (in einer späteren Aufgabe werden Sie diese Farbe ändern, basierend auf der tatsächlichen Gesundheit).

   

Füge das Symbolhinzu

Um den Zweck des Zählers klarer anzugeben, kannst du auf der linken Seite ein Bild-Label hinzufügen, in diesem Fall ein rotes Herz, das üblicherweise Gesundheit oder Leben symbolisiert.

1. Füge ein ImageLabel in den MeterBar Rahmen ein. Dieses Objekt lässt dich ein 2D-Bild-Asset anwenden, das als Etikett auf Roblox hochgeladen wurde.

2. Benenne die neue Label-Instanz in Symbol um.

   

3. Mit Symbol ausgewählt, legen Sie seine ZIndex auf 2.Während neu eingefügte UI-Objekte immer vor vorher eingefügten Objekten angezeigt werden, gewährleistet diese Änderung, dass das Symbol immer vor den Rahmenteilen des Zählers angezeigt wird.

   

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

   

5. Um sicherzustellen, dass das Symbol ImageLabel immer bei einer 1:1-Aspektverhältnis bleibt, füge ein UIAspectRatioConstraint ein.Obwohl diese Einschränkung benutzerdefinierte Eigenschaften hat, um die Aspektverhältnis zu kontrollieren, können Sie ihre Standardwerte unverändert lassen.

   

6. Mit Symbol ausgewählt, vervollständigen Sie das Aussehen und die Position, indem Sie die folgenden Eigenschaften ändern:

   • AnchorPoint = 0.5, 0.5 (anker)
   • BackgroundTransparency = 1 (100% transparent)
   • Position = 0, 0, 0.5, 0 (linker seitenrand und vertikale mitte)
   • Size = 2, 0, 2, 0 (200% der Gesamtgröße des MeterBar -Rahmens, begrenzt auf 1:1 durch die UIAspectRatioConstraint )

   

Größe beschränken

Während eine Skalienhöhe von0.05 auf modernen Telefonbildschirmen und Spielmonitoren mit 16:9-Aspektverhältnis oder breiter aussehen kann, kann der Meter auf Tablet-Bildschirmen und älteren Telefonen leicht zu groß aussehen.Sie können dies überprüfen, indem Sie ein Tablet wie iPad 7. Generation vom Geräte-Emulator emulieren.

Um die Höhe der Anzeigeleiste konsistenter mit breiteren Bildschirmen zu halten, kannst du ein UISizeConstraint anwenden, um die maximale Pixelfhöhe zu begrenzen.

1. Füge einen UISizeConstraint in den MeterBar Rahmen ein.

   

2. Mit der neuen Einschränkung, die ausgewählt wurde, setze ihre Eigenschaft auf um ihre Höhe auf 20 Pixel zu beschränken, während keine Breitenbeschränkung durchgesetzt wird.

   

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

Ersetzen Sie den Standard-Gesundheitsmesser

Roblox-Erlebnisse enthalten einen Standard-Gesundheitszähler, der sichtbar wird, wenn Charaktere Schaden nehmen.Wenn du den Standardzähler sichtbar lässt, wird er sich möglicherweise mit dem benutzerdefinierten Zähler überschneiden und duplizieren.

Deaktiviere den Standardmesser

Um den Standard-Gesundheitszähler zu deaktivieren, verwendest du ein Client-Skript (LocalScript) innerhalb von StarterPlayerScripts, das StarterGui:SetCoreGuiEnabled() aufruft.

1. Im Explorer -Fenster erweitern Sie den StarterPlayer-Container und finden den StarterPlayerScripts-Container darin.

   

2. Füge einen neuen LocalScript in den Container ein und benenne ihn in HideDefaultHealthMeter um, um seinen Zweck zu beschreiben.Skripte innerhalb von StarterPlayerScripts laufen automatisch, wenn der lokale Spieler einer Erlebnisbeitritt, wodurch es sich zu einem idealen Container eignet, ein Skript auszuführen, das die Standarduhr dauerhaft ausblendet.

   

3. Wenn du ein neues Skript, das. PL: die Skriptseinfügst, öffnet es sich automatisch in einem neuen Skript-Editor-Tab (wenn es nicht so ist, klicke doppelt auf das Skript im Explorer -Fenster).

   Füge den folgenden Code in das Skript, das. PL: die Skriptsein:

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

   Code-Erklärung

   Linie	Zweck
   1	Erhalte eine Referenz auf ein Kern-Service, , der den gleichen Container darstellt, in dem du den benutzerdefinierten Gesundheitsmesser erstellt hast, und dessen Inhalt in den --Container für jeden Spieler kopiert wird, der der Erlebnisbeitritt.
   4	Ruft die Methode des Dienstes auf und gibt Anweisungen, dass der Standard-Gesundheitsmesser deaktiviert wird ( ).

Wenn du das Erlebnis jetzt testest und Schaden erleidest, wirst du feststellen, dass der Standardmesser deaktiviert und versteckt ist (du wirst das benutzerdefinierte Messer skripten, um Gesundheitsänderungen zu reflektieren im nächsten Abschnitt).

Auf Gesundheitsänderungen hören

Alle Standard-Roblox-Charaktermodelle enthalten eine Humanoid -Klasse, die dem Charakter spezielle Verhaltensweisen und Funktionen bietet, wie das Festlegen seiner Geh-/Lauftempo und die Verwaltung seiner Gesundheit. Änderungen auf dem Server ändern sich auf den Client jedes Spieler:inund du kannst diese Änderungen erkennen, um sowohl die Größe als auch die Farbe des benutzerdefinierten Gesundheitsmeters zu aktualisieren.

1. Im Explorer -Fenster suchen Sie den StarterCharacterScripts Container innerhalb von StarterPlayer.

   

2. Füge einen neuen LocalScript in den Container ein und benenne ihn zu UpdateCustomMeter um, um seinen Zweck zu beschreiben.Skripte innerhalb von StarterCharacterScripts laufen automatisch jedes Mal, wenn der Charakter des Spieler:inerscheint, wodurch es sich zu einem idealen Container eignet, um ein Skript auszuführen, das die Gesundheitsanzeige bei jedem Respawn vollständig zurücksetzt.

   

3. Füge im Editor-Fenster für das UpdateCustomMeter -Skript den folgenden Codesein:

   AktualisierenCustomMeter
   local Players = game:GetService("Players")
   
   -- Verweis auf lokalen Spieler:in, Charakter und Humanoide
   local player = Players.LocalPlayer
   local character = player.Character
   local humanoid = character:WaitForChild("Humanoid")
   
   -- Verweis auf Innenrahmen der Messleiste
   local playerGui = player:WaitForChild("PlayerGui")
   local meterBarInner = playerGui.HUDContainer.MeterBar.InnerFill
   
   -- Gradientensequenzfarben (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 Farbe in einer Gradientensequenz vom Bruchteilpunkt zu erhalten
   local function getColorFromSequence(fraction: number): Color3
   	-- Jede Farbe in der Gradation definiert den Beginn und/oder das Ende eines Abschnitts
   	local numSections = #gradient - 1
   
   	-- Jeder Abschnitt repräsentiert einen Teil von 1
   	local sectionSize = 1 / numSections
   
   	-- Bestimme, in welchem Abschnitt die angeforderte Fraktion fällt
   	local sectionStartIndex = 1 + math.clamp(fraction, 0, 1) // sectionSize
   
   	-- Holen Sie sich die Farben am Anfang und am Ende des Abschnitts
   	local sectionColorStart = gradient[sectionStartIndex]
   	local sectionColorEnd = gradient[sectionStartIndex + 1] or sectionColorStart
   
   	-- Normalisiere 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 der normalisierten Bruchteil
   	return sectionColorStart:Lerp(sectionColorEnd, fractionOfSection)
   end
   
   local function onHealthChanged()
   	-- Neue Gesundheit als Prozentsatz der maximalen berechnen
   	local healthFraction = math.max(0, humanoid.Health / humanoid.MaxHealth)
   
   	-- Setze die Leiste auf neue Größen-/Farbziele
   	meterBarInner.Size = UDim2.new(healthFraction, 0, 1, 0)
   	meterBarInner.BackgroundColor3 = getColorFromSequence(healthFraction)
   end
   
   -- Auf Änderungen der menschlichen Gesundheit hören
   humanoid.HealthChanged:Connect(onHealthChanged)
   
   -- Bargröße/Farbe zunächst auf aktuelle Gesundheit festlegen (oder zurücksetzen)
   onHealthChanged()

   Code-Erklärung

   Linien	Zweck
   4 ‑ 6	Holen Referenzen auf die lokale Player , ihr Character Modell und die Humanoid Klasse darin.
   9 ‑ 10	Hält eine Referenz zum InnerFill -Objekt des Zählers, das skaliert und neu gefärbt werden muss, wenn sich die Gesundheit des Charakters ändert.
   13 ‑ 19	Erklärt ein Array von fünf Farben (rot, orange, gelb, lila, grün), um den Zähler an verschiedenen Stellen neu zu färben; zum Beispiel grün für 100% Gesundheit, gelb für 50%, rot für 0%, oder eine Mischung in irgendeiner Fraktion zwischen den Tastenpunkten.
   22 ‑ 41	Helferfunktion, die die Farbkombination zwischen einem der Gradientenfarben-Knotenpunkte zurückgibt.
   43 ‑ 50	Funktion, die alle Änderungen an der Gesundheit handhabt.Hier berechnet es die neue Gesundheit als Prozentsatz der MaxHealth des Charakters, skaliert InnerFill auf diesen Skalierungsprozentsatz und färbt es auf die Farbe zurück, die von der getColorFromSequence() -Funktion zurückgegeben wird.
   53	Die Haupt-Veranstaltungs-Verbindung, die Änderungen erkennt, die vom Server repliziert wurden, und die Funktion aufruft.
   56	Anfangs (beim Spawn oder Respawn eines Charakters) ruft die Funktion onHealthChanged() die Größe und Farbe von InnerFill auf den korrekten Prozentsatz.Typischerweise wird dies die volle Breite und grün sein.

Wenn du das Erlebnis jetzt testest, wirst du feststellen, dass der benutzerdefinierte Meter sowohl Größe als auch Farbe korrekt aktualisiert, wenn der Charakter Schaden erleidet:

Animiere die Meterleiste

Um ein zusätzliches polnisches Niveau auf den benutzerdefinierten Meter zu bringen, kannst du die Gesundheitsänderungen durch Tweening animieren, indem du die Größe und Farbe der Meterleiste über ½ Sekunde schrittweise ändert.

1. Greife über die Registerkarte Skriptbearbeitung auf das UpdateCustomMeter -Skript zu, das du zuvor bearbeitet hast.

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

   AktualisierenCustomMeter
   local Players = game:GetService("Players")
   local TweenService = game:GetService("TweenService")
   
   -- Verweis auf lokalen Spieler:in, Charakter und Humanoide
   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 Innenrahmen der Messleiste
   local playerGui = player:WaitForChild("PlayerGui")
   local meterBarInner = playerGui.HUDContainer.MeterBar.InnerFill
   
   -- Gradientensequenzfarben (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 Farbe in einer Gradientensequenz vom Bruchteilpunkt zu erhalten
   local function getColorFromSequence(fraction: number): Color3
   	-- Jede Farbe in der Gradation definiert den Beginn und/oder das Ende eines Abschnitts
   	local numSections = #gradient - 1
   
   	-- Jeder Abschnitt repräsentiert einen Teil von 1
   	local sectionSize = 1 / numSections
   
   	-- Bestimme, in welchem Abschnitt die angeforderte Fraktion fällt
   	local sectionStartIndex = 1 + math.clamp(fraction, 0, 1) // sectionSize
   
   	-- Holen Sie sich die Farben am Anfang und am Ende des Abschnitts
   	local sectionColorStart = gradient[sectionStartIndex]
   	local sectionColorEnd = gradient[sectionStartIndex + 1] or sectionColorStart
   
   	-- Normalisiere 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 der normalisierten Bruchteil
   	return sectionColorStart:Lerp(sectionColorEnd, fractionOfSection)
   end
   
   local function onHealthChanged()
   	-- Neue Gesundheit als Prozentsatz der maximalen berechnen
   	local healthFraction = math.max(0, humanoid.Health / humanoid.MaxHealth)
   
   	-- Zwischen der Bar auf neue 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
   
   -- Auf Änderungen der menschlichen Gesundheit hören
   humanoid.HealthChanged:Connect(onHealthChanged)
   
   -- Bargröße/Farbe zunächst auf aktuelle Gesundheit festlegen (oder zurücksetzen)
   onHealthChanged()

   Schlüsselergänzungen/Änderungen

   Linien	Zweck
   2	Hält eine Referenz auf TweenService, um die Tweening-Funktionalität innerhalb des Skript, das. PL: die Skriptszu implementieren.
   10	Erstellt einen TweenInfo Konstruktor, der die Dauer des beabsichtigten Tween, den Lockerungsstil und die Lockerungsrichtung definiert.
   52 ‑ 57	Anstatt einfach die Größe und Farbe der Leiste wie in der vorherigen Version festzulegen, erklärt eine tweenGoal Tabelle mit der Zielgröße/Farbe, erstellt eine neue Übergangsphase mit den tweenInfo und tweenGoal Parametern und spielt die neue Tweenab.

Wenn du das Erlebnis jetzt testest, wirst du bemerken, dass die benutzerdefinierte Meter-Teenager zwischen jedem Gesundheitswechsel:

Füge einen Schadenseffekt hinzu

Das Standard-Gesundheitsmesssystem enthält eine kurze, subtile rote Tönung an den Bildschirmrändern, wenn der Charakter beschädigt wird.Durch Deaktivierung des Standardmeters wird dieser Effekt beseitigt, aber du kannst ihn durch deine eigene Implementierung ersetzen.

1. Greife über die Registerkarte Skriptbearbeitung auf das UpdateCustomMeter -Skript zu, das du zuvor bearbeitet hast.

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

   AktualisierenCustomMeter
   local Workspace = game:GetService("Workspace")
   local Players = game:GetService("Players")
   local TweenService = game:GetService("TweenService")
   
   -- Verweis auf lokalen Spieler:in, Charakter und Humanoide
   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/Cache von Charaktergesundheit
   local cachedHealth = humanoid.Health / humanoid.MaxHealth
   
   -- Erhalte (oder erstelle einen neuen) Farbkorrektur-Effekt innerhalb der Spieler-Kamera
   local colorCorrection = Workspace.CurrentCamera:FindFirstChildWhichIsA("ColorCorrectionEffect") or Instance.new("ColorCorrectionEffect", Workspace.CurrentCamera)
   colorCorrection.Name = "DamageColorEffect"
   
   -- Verweis auf Innenrahmen der Messleiste
   local playerGui = player:WaitForChild("PlayerGui")
   local meterBarInner = playerGui.HUDContainer.MeterBar.InnerFill
   
   -- Gradientensequenzfarben (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 Farbe in einer Gradientensequenz vom Bruchteilpunkt zu erhalten
   local function getColorFromSequence(fraction: number): Color3
   	-- Jede Farbe in der Gradation definiert den Beginn und/oder das Ende eines Abschnitts
   	local numSections = #gradient - 1
   
   	-- Jeder Abschnitt repräsentiert einen Teil von 1
   	local sectionSize = 1 / numSections
   
   	-- Bestimme, in welchem Abschnitt die angeforderte Fraktion fällt
   	local sectionStartIndex = 1 + math.clamp(fraction, 0, 1) // sectionSize
   
   	-- Holen Sie sich die Farben am Anfang und am Ende des Abschnitts
   	local sectionColorStart = gradient[sectionStartIndex]
   	local sectionColorEnd = gradient[sectionStartIndex + 1] or sectionColorStart
   
   	-- Normalisiere 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 der normalisierten Bruchteil
   	return sectionColorStart:Lerp(sectionColorEnd, fractionOfSection)
   end
   
   local function onHealthChanged()
   	-- Neue Gesundheit als Prozentsatz der maximalen berechnen
   	local healthFraction = math.max(0, humanoid.Health / humanoid.MaxHealth)
   
   	-- Zwischen der Bar auf neue Größen-/Farbziele
   	local tweenGoal = {
   		Size = UDim2.new(healthFraction, 0, 1, 0),
   		BackgroundColor3 = getColorFromSequence(healthFraction)
   	}
   	local meterBarTween = TweenService:Create(meterBarInner, tweenInfo, tweenGoal)
   	meterBarTween:Play()
   
   	-- Schadenseffekt anzeigen, wenn die neue Gesundheit niedriger ist als die gespeicherte Gesundheit
   	if healthFraction < cachedHealth then
   		-- Cache neue Gesundheitswert
   		cachedHealth = healthFraction
   
   		-- Stelle die Farbenkorrektur auf Rot als den ursprünglichen Ton vor der Tönung ein
   		colorCorrection.TintColor = Color3.fromRGB(255, 25, 25)
   		colorCorrection.Saturation = 2.5
   
   		-- Zwischen der Tönung zurück auf Weiß (neutral und keine Tönungsänderung von normal)
   		local colorCorrectionTweenGoal = {
   			TintColor = Color3.fromRGB(255, 255, 255),
   			Saturation = 0
   		}
   		local colorCorrectionTween = TweenService:Create(colorCorrection, tweenInfo, colorCorrectionTweenGoal)
   		colorCorrectionTween:Play()
   	end
   end
   
   -- Auf Änderungen der menschlichen Gesundheit hören
   humanoid.HealthChanged:Connect(onHealthChanged)
   
   -- Bargröße/Farbe zunächst auf aktuelle Gesundheit festlegen (oder zurücksetzen)
   onHealthChanged()

   Schlüsselergänzungen/Änderungen

   Linien	Zweck
   14	Legt eine Platzhalterreferenz ( cachedHealth ) fest, um die Gesundheitsmenge eines Charakters zwischen Änderungen zu verfolgen, damit Sie vergleichen können, ob eine Änderung niedriger ist (Schaden).
   17 ‑ 18	Bei der ersten Spawnerstellt ein neues ColorCorrectionEffect innerhalb des aktuellen Camera des Spieler:inoder erhält eine Referenz auf die gleiche Instanz bei späteren Wiederbelebungen.Durch das Elternen dieses Post-Processing-Effekts an die Kamera des Spielers gilt er nur für den lokalen Bildschirm des Spielers, nicht für den Bildschirm jedes Spieler:inauf dem Server.
   68 ‑ 83	Führen Sie zuerst einen bedingten Check aus, um zu bestätigen, dass die Gesundheitsänderung kleiner als der Wert cachedHealth ist, der Schaden anzeigt; wenn ja, legen Sie cachedHealth auf den neuen Wert fest.Als Nächstes legt es die ColorCorrectionEffect Tönung auf [255, 25, 25] (rot) mit höherer Sättigung fest, dann passt es die Tönung zurück auf die Standardfarbe neutral weiß ([255, 255, 255]) ohne Sättigung.

Wenn du das Erlebnis jetzt testest, wirst du bemerken, dass der Bildschirm kurz rot leuchtet, wenn der Charakter Schaden nimmt: