Maak HUD-meters

Een HUD of Heads-Up Display is een set UI-elementen die altijd zichtbaar of toegankelijk zijn tijdens het spelen, zoals scoreweergaven, gezondheidsmeters en menu-knoppen. Het opnemen van een HUD is essentieel voor de meeste games omdat het informatie weergeeft die spelers helpt om succesvol te zijn in hun speeldoelen.

Een veelvoorkomend HUD-element is een gezondheidsmeter met een pictogram aan de linkerkant, die kan worden aangepast tot een timerbalk, voortgangsbalk of iets dergelijks.

Met Hazardous Space Station als startpunt en UI Fundamentals - HUD Meter als een voltooide referentie, laat deze tutorial zien:

• Opzetten en gebruiken van de Device Emulator om je ontwerp op meerdere geëmuleerde schermen te testen.
• Gebruik van StarterGui als zowel een ontwerp- als opslagcontainer.
• Hoe je UI-elementen kunt positioneren/formatteren rond ingebouwde Roblox-controles en apparaatsnotches/eilanden, zoals de cameraknip op moderne telefoons.
• Hoe je de standaard Roblox-gezondheidsmeter kunt vervangen door je eigen meter en deze kunt koppelen aan het gezondheidsniveau van het personage.
• Hoe je het middenstuk van de gezondheidsmeter kunt animeren en de kleur kunt instellen tussen vijf kleurverloop-kernpunten (rood, oranje, geel, limoen, groen).

Schakel de Device Emulator in

Roblox is van nature cross-platform, omdat spelers games kunnen ontdekken en joinen op hun telefoon of tablet, en later kunnen doorgaan waar ze waren gebleven op hun pc of console. Mobiele apparaten (telefoons en tablets) hebben de minste schermruimte, dus het is belangrijk dat je UI-elementen passen op kleinere schermen en dat ze duidelijk zichtbaar zijn voor spelers.

De beste manier om UI-ontwerpen op verschillende platforms te testen is met de Device Emulator van Studio. Deze tool biedt een vooraf ingestelde selectie van apparaten en stelt je in staat om je eigen aangepaste presets toe te voegen.

1. Open de Hazardous Space Station template in Studio.

2. Schakel in het Test-menu van Studio de Device Emulator in.

3. Selecteer in de balk direct boven het hoofdvenster een telefoonemulatie zoals iPhone X of Samsung Galaxy A51. Stel vervolgens de weergavegrootte in op Fit to Window om de maximale ruimte in Studio te benutten.

   

Maak een schermcontainer

Een ScreenGui container houdt UI-objecten (GuiObjects) vast om weer te geven op het scherm van een speler (in deze tutorial, de gehele gezondheidsmeter). Om een ScreenGui en zijn kindobjecten weer te geven aan elke speler die de game join, plaats je het binnen de StarterGui container. Wanneer een speler zich aansluit en hun personage voor het eerst spawnt, worden de ScreenGui en zijn inhoud gekloond naar de PlayerGui container voor die speler, die zich binnen de Players container bevindt.

Om een lege ScreenGui in te voegen:

1. Zoek in het Explorer-venster de StarterGui container.

   

2. Hover over de container, klik op de ⊕ knop en voeg een ScreenGui in.

   

3. Hernoem de nieuwe container naar HUDContainer om het doel ervan weer te geven.

   

Maak gebruik van veilige gebieden

Moderne telefoons maken gebruik van het volledige scherm, maar bevatten doorgaans inkepingen, uitsparingen en andere elementen die schermruimte innemen. Elke Roblox-game bevat ook de bovenste balkcontroles voor snelle toegang tot het hoofdmenu, chat, leaderboard, en meer.

Om ervoor te zorgen dat spelers alle UI kunnen zien en toegang hebben zonder obstructie, biedt Roblox de ScreenInsets eigenschap die de veilige gebied insets voor de inhoud van een ScreenGui beheert. Elk UI-object dat je binnen een ScreenGui positioneert, is relatief ten opzichte van de insetgrenzen.

Terwijl de standaardwaarde van CoreUISafeInsets ervoor zorgt dat alle UI-objecten vrij blijven van Roblox UI en apparaatscutouts, kan DeviceSafeInsets een betere optie zijn om beperkte schermruimte te benutten, zoals hieronder geïllustreerd.

1. Selecteer in het Explorer-venster HUDContainer.

   

2. Stel in het Properties venster de ScreenInsets eigenschap in op DeviceSafeInsets.

   

Stel randopvulling in

Met ScreenInsets ingesteld op DeviceSafeInsets, kan de inhoud nu direct tot de fysieke bovenrand van het scherm reiken. Een kleine hoeveelheid opvulling kan echter helpen om de gezondheidsmeter (en andere objecten binnen de container) iets van de schermranden weg te duwen voor een schoner uiterlijk en om te voorkomen dat ze worden afgesneden.

Een manier om opvulling toe te passen op een UI-container is door het invoegen van een UIPadding modifier:

1. Voeg een UIPadding modifier toe aan HUDContainer.

   

2. Selecteer het nieuwe UIPadding object en voer een waarde in van 0, 16 voor alle randen van de container (PaddingBottom, PaddingLeft, PaddingRight, PaddingTop). Dit past 16 pixels opvulling rondom de container toe, ongeacht de resolutie van het scherm.

   

Construct de gezondheidsmeter

Met de schermcontainer geconfigureerd, kun je beginnen met het construeren van de gezondheidsmeter met behulp van Roblox UI-objecten zoals frames en een afbeeldingslabel.

Maak het bovenliggende frame

Net als bij ontwerptoepassingen zoals Figma en Photoshop, dient een Frame in Roblox als een container voor andere UI-objecten. Voor deze tutorial zal de gehele gezondheidsmeter worden contained in een enkel bovenliggend frame, waardoor het eenvoudig is om het opnieuw te positioneren over verschillende HUD-indelingen.

1. Voeg een Frame toe aan HUDContainer. Het nieuwe frame verschijnt in de linkerbovenhoek als een leeg wit vierkant.

   

   Als het nieuwe frame niet in het viewport verschijnt, zorg er dan voor dat je GUI overlay hebt ingeschakeld vanuit de Visualisatie Opties widget in de rechterbovenhoek van het 3D viewport.

2. Hernoem de nieuwe frame-instantie naar MeterBar.

   

Positioneer het frame

In Roblox wordt de positie van een UI-object weergegeven door een UDim2 coördinaten set die Scale en Offset waarden bevat voor zowel de X als Y assen:

• Scale waarden vertegenwoordigen een percentage van de grootte van de container langs de overeenkomstige as, optellend bij eventuele Offset waarden.
• Offset waarden vertegenwoordigen hoeveel pixels het object op de overeenkomstige as moet verschuiven, optellend bij eventuele Scale waarden.

Om een UI-object in de rechterbovenhoek van de schermcontainer te positioneren, is Scale de beste benadering omdat een X waarde van 1 (100%) de rechterrand van de container vertegenwoordigt, ongeacht de fysieke pixelgrootte van het scherm. Evenzo vertegenwoordigt een Y schaalwaarde van 0 (0%) de bovenrand van de container.

Bovendien moet je een bovenste rechter ankerpunt voor het bovenliggende frame instellen om het oorsprongspunt te definiëren. Acceptabele waarden liggen tussen 0 en 1, relatief ten opzichte van de grootte van het object, dus een ankerwaarde van 1, 0 plaatst het ankerpunt van het frame in de rechterbovenhoek.

1. Selecteer in het Explorer-venster het MeterBar frame dat je eerder hebt ingevoegd.

   

2. Voer in het Properties-venster 1, 0, 0, 0 in voor Position en druk op Enter. Studio zal automatisch de haakjes toevoegen om de UDim2 van {1, 0},{0, 0} te vormen.

3. Voer 1, 0 in voor de AnchorPoint eigenschap. Het frame zou nu in de rechterbovenhoek van het veilige gebied van het apparaat moeten zijn gepositioneerd, iets ingedrukt vanaf de rand als gevolg van de opvulling.

   

Wijzig de grootte van het frame

Net als de positie wordt de Size van een UI-object weergegeven door een UDim2 coördinaten set die Scale en Offset waarden bevat voor zowel de X als Y assen.

Standaard is de grootte van het nieuwe frame {0, 100},{0, 100}, wat betekent 100 pixels in zowel breedte (X) als hoogte (Y). Hoewel een strikte pixelwaarde in bepaalde gevallen nuttig is, schalen veel UI-elementen responsiever over meerdere schermen wanneer ze zijn ingesteld op een percentage van de totale grootte van de schermcontainer.

1. Met het MeterBar frame geselecteerd, open je het Properties-venster en ga je naar de Size eigenschap.

2. Voer een waarde in van 0.35, 0, 0.05, 0 om een percentagegrootte van 35% breed en 5% hoog in te stellen zonder extra pixel-offsets.

   

Style het frame

Standaard zijn Frames gevuld met solide wit. De uiteindelijke gezondheidsmeter moet een donkerdere en iets doorzichtige vulling hebben, evenals een donkere rand, zodat deze beter opvalt tegen zowel lichte als donkere achtergronden.

1. Met het MeterBar frame geselecteerd, voer je 0 in voor de BackgroundColor3 eigenschap. Studio zal dit automatisch omzetten naar de RGB-waarde van [0, 0, 0].

2. Voer 0.75 in voor de BackgroundTransparency eigenschap. In Roblox varieert de transparantie van 0 voor volledig ondoorzichtig tot 1 voor volledig transparant, dus 0.75 is gelijk aan 25% opaciteit in andere toepassingen zoals Figma of Photoshop.

   

3. Voeg een UIStroke object toe, een krachtige UI-modifier die een aanpasbare rand aan het frame toevoegt.

   

4. Met de nieuwe UIStroke geselecteerd, stel je de volgende eigenschappen in:

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

   

Om de styling van het meterframe te voltooien, kun je de hoeken afronden om een "pil" vorm te vormen in plaats van een scherpe rechthoek.

1. Voeg een UICorner instantie toe aan het MeterBar frame.

   

2. Met de nieuwe UICorner geselecteerd, stel je de CornerRadius in op 0.5, 0. Het gebruik van een schaal waarde van 0.5 (50%) in plaats van een pixelwaarde is vooral handig voor de meterbalk omdat het zorgt voor een volledig afgeronde curve, ongeacht hoe hoog of breed de container wordt.

   

Maak de binnenste vulling

Nu het omhulsel van de gezondheidsmeter compleet is, kun je een binnenste vulling toevoegen om de variabele gezondheid van het personage weer te geven. Aangezien het alleen een solide opgevulde regio hoeft te zijn, is een sub-kind Frame binnen het bovenliggende frame geschikt.

1. Voeg een kind Frame toe aan het MeterBar frame.

2. Hernoem de nieuwe frame-instantie naar InnerFill.

   

3. Met InnerFill geselecteerd, stel je de volgende eigenschappen in:

   • AnchorPoint = 0, 0.5 (linker rand en verticale midden)
   • Position = 0, 0, 0.5, 0
   • Size = 1, 0, 1, 0

   Aangezien kinderen van frames worden gepositioneerd en geformatteerd ten opzichte van hun ouder, zorgt het gebruik van schaal ervoor dat het binnenste frame de volledige breedte en hoogte van de ouder opvult, beginnend vanaf de linker rand van de ouder.

   

4. Om de "pil" vorm van het bovenliggende frame te matchen, voeg je een extra UICorner toe aan InnerFill.

   

5. Met de nieuwe UICorner modifier geselecteerd, stel je de CornerRadius eigenschap in op 0.5, 0 om de "pil" vorm van het bovenliggende MeterBar frame te matchen.

   

6. Om beter weer te geven dat een volle meter goede gezondheid aangeeft, selecteer je InnerFill en stel je de BackgroundColor3 eigenschap in op [0, 225, 50] (in een latere taak zul je script deze kleur laten veranderen op basis van de werkelijke gezondheid).

   

Voeg het pictogram toe

Om het doel van de meter duidelijker aan te geven, kun je een afbeeldingslabel aan de linkerkant toevoegen, in dit geval een rode hart die vaak gezondheid of leven symboliseert.

1. Voeg een ImageLabel toe aan het MeterBar frame. Dit object stelt je in staat om een 2D-afbeeldingselement toe te passen dat als een decal naar Roblox is geüpload.

2. Hernoem de nieuwe label-instantie naar Icon.

   

3. Met Icon geselecteerd, stel je de ZIndex eigenschap in op 2. Terwijl nieuw ingevoegde UI-objecten altijd voor eerder ingevoegde objecten worden gelaagd, zorgt deze wijziging ervoor dat het pictogram altijd voor de frame-elementen van de meter wordt weergegeven.

   

4. Zoek de Image eigenschap van het pictogram en voer rbxassetid://91715286435585 in, de referentie naar een vooraf geüpload hartafbeelding (indien gewenst, kun je je eigen afbeelding importeren en de asset-ID gebruiken).

   

5. Om ervoor te zorgen dat het pictogram ImageLabel altijd een 1:1 beeldverhouding behoudt, voeg je een UIAspectRatioConstraint toe. Hoewel deze constraint aanpasbare eigenschappen heeft om de beeldverhouding te beheersen, kun je de standaardwaarden intact laten.

   

6. Met Icon geselecteerd, rond je het uiterlijk en de positie af door de volgende eigenschappen te wijzigen:

   • AnchorPoint = 0.5, 0.5 (centraal anker)
   • BackgroundTransparency = 1 (100% transparant)
   • Position = 0, 0, 0.5, 0 (linkerkant van de meter en verticale midden)
   • Size = 2, 0, 2, 0 (200% van de totale grootte van het MeterBar frame, beperkt tot 1:1 door de UIAspectRatioConstraint)

   

Beperk de grootte

Hoewel een schaalhoogte van 0.05 (5%) er goed uitziet op moderne telefoons en gamingmonitoren met een 16:9 beeldverhouding of breder, kan de meter er iets te hoog uitzien op tablet schermen en oudere telefoons. Je kunt dit controleren door een tablet zoals iPad 7e Generatie te emuleren vanuit de Device Emulator.

Om de hoogte van de meterbalk consistenter te houden met bredere schermen, kun je een UISizeConstraint toepassen om de maximale pixelhoogte te beperken.

1. Voeg een UISizeConstraint toe aan het MeterBar frame.

   

2. Met de nieuwe constraint geselecteerd, stel je de MaxSize eigenschap in op inf, 20 om de hoogte te beperken tot 20 pixels terwijl er geen breedtebeperkingen worden opgelegd.

   

Nu behoudt de meterbalk een consistenter hoogte tussen bredere en hogere schermen.

Vervang de standaard gezondheidsmeter

Roblox-games bevatten een standaard gezondheidsmeter die zichtbaar wordt wanneer personages schade oplopen. Als je de standaard meter zichtbaar houdt, zal deze dupliceren en mogelijk overlappen met de aangepaste meter.

Schakel de standaard meter uit

Om de standaard gezondheidsmeter uit te schakelen, gebruik je een client script (LocalScript) binnen StarterPlayerScripts dat StarterGui:SetCoreGuiEnabled() aanroept.

1. Zoek in het Explorer-venster de StarterPlayer container en zoek de StarterPlayerScripts container daarin.

   

2. Voeg een nieuw LocalScript toe aan de container en hernoem het naar HideDefaultHealthMeter om het doel ervan te beschrijven. Scripts binnen StarterPlayerScripts worden automatisch uitgevoerd wanneer de lokale speler een game join, waardoor het een ideale container is om een script uit te voeren dat de standaard meter permanent verbergt.

   

3. Wanneer je een nieuw script invoegt, opent het automatisch in een nieuw scripteditor-tabblad (als dat niet gebeurt, dubbelklik dan op het script in het Explorer-venster).

   Plak de volgende code in het HideDefaultHealthMeter script:

   HideDefaultHealthMeter

   local StarterGui = game:GetService("StarterGui")
   
   -- Verberg standaard gezondheidsmeter
   StarterGui:SetCoreGuiEnabled(Enum.CoreGuiType.Health, false)

   Code Uitleg

   Regel	Doel
   1	Verkrijgt een referentie naar een kern service, StarterGui, die dezelfde container vertegenwoordigt waar je de aangepaste gezondheidsmeter hebt gemaakt en waarvan de inhoud in de PlayerGui container voor elke speler die de game join, wordt gekloond.
   4	Roep de methode SetCoreGuiEnabled() van de service aan en instrueert de standaard gezondheidsmeter om uitgeschakeld te worden (false).

Als je nu de game test en schade oploopt, zul je merken dat de standaard meter is uitgeschakeld en verborgen (je zult de aangepaste meter script om de gezondheidsveranderingen in de volgende sectie weer te geven).

Luister naar gezondheidsveranderingen

Alle standaard Roblox-personagemodellen bevatten een Humanoid klasse die speciale gedragingen en functionaliteit aan het personage biedt, zoals het instellen van de loop-/ren-snelheid en het beheren van de gezondheid. Health veranderingen op de server repliceren naar de client van elke speler en je kunt deze veranderingen detecteren om zowel de grootte als de kleur van de aangepaste gezondheidsmeter bij te werken.

1. Zoek in het Explorer-venster de StarterCharacterScripts container binnen StarterPlayer.

   

2. Voeg een nieuw LocalScript toe aan de container en hernoem het naar UpdateCustomMeter om het doel ervan te beschrijven. Scripts binnen StarterCharacterScripts worden automatisch uitgevoerd elke keer dat het personage van de speler spawnt, waardoor het een ideale container is om een script uit te voeren dat de gezondheidsmeter volledig reset bij elke respawn.

   

3. Plak de volgende code in het editorvenster voor het UpdateCustomMeter script:

   UpdateCustomMeter

   local Players = game:GetService("Players")
   
   -- Referentie naar lokale speler, personage en humanoïde
   local player = Players.LocalPlayer
   local character = player.Character
   local humanoid = character:WaitForChild("Humanoid")
   
   -- Referentie naar meterbalk binnenste frame
   local playerGui = player:WaitForChild("PlayerGui")
   local meterBarInner = playerGui.HUDContainer.MeterBar.InnerFill
   
   -- Kleurverloop sequentie kleuren (rood, oranje, geel, limoen, groen)
   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)
   }
   
   -- Functie om kleur in kleurverloop sequentie te krijgen van fractiepunt
   local function getColorFromSequence(fraction: number): Color3
   	-- Elke kleur in het kleurverloop definieert het begin en/of einde van een sectie
   	local numSections = #gradient - 1
   
   	-- Elke sectie vertegenwoordigt een deel van 1
   	local sectionSize = 1 / numSections
   
   	-- Bepaal in welke sectie de gevraagde fractie valt
   	local sectionStartIndex = 1 + math.clamp(fraction, 0, 1) // sectionSize
   
   	-- Verkrijg de kleuren aan het begin en einde van de sectie
   	local sectionColorStart = gradient[sectionStartIndex]
   	local sectionColorEnd = gradient[sectionStartIndex + 1] or sectionColorStart
   
   	-- Normaliseer fractie tot een getal van 0 tot 1 binnen de sectie
   	local fractionOfSection = math.clamp(fraction, 0, 1) % sectionSize / sectionSize
   
   	-- Lerp tussen begin en einde op basis van de genormaliseerde fractie
   	return sectionColorStart:Lerp(sectionColorEnd, fractionOfSection)
   end
   
   local function onHealthChanged()
   	-- Bereken nieuwe gezondheid als percentage van max
   	local healthFraction = math.max(0, humanoid.Health / humanoid.MaxHealth)
   
   	-- Stel de balk in op nieuwe grootte/kleurdoelen
   	meterBarInner.Size = UDim2.new(healthFraction, 0, 1, 0)
   	meterBarInner.BackgroundColor3 = getColorFromSequence(healthFraction)
   end
   
   -- Luister naar veranderingen in de gezondheid van de humanoïde
   humanoid.HealthChanged:Connect(onHealthChanged)
   
   -- Stel aanvankelijk (of reset) de balkgrootte/kleur in op de huidige gezondheid
   onHealthChanged()

   Code Uitleg

   Regels	Doel
   4‑6	Verkrijgt referenties naar de lokale Player, hun Character model, en de Humanoid klasse daarin.
   9‑10	Verkrijgt een referentie naar het InnerFill object van de meter dat moet worden aangepast in grootte en kleur naarmate de gezondheid van het personage verandert.
   13‑19	Declareert een array van vijf kleuren (rood, oranje, geel, limoen, groen) om de meter op verschillende punten opnieuw te kleuren; bijvoorbeeld, groen voor 100% gezondheid, geel voor 50%, rood voor 0%, of een mengsel op een fractie tussen de kernpunten.
   22‑41	Helperfunctie die de kleurblend tussen een van de kleurverloop-kernpunten retourneert.
   43‑50	Functie die alle veranderingen in de gezondheid afhandelt. Hier berekent het de nieuwe gezondheid als een percentage van de MaxHealth van het personage, past InnerFill aan naar dat schaalpercentage, en kleurt het opnieuw naar de kleur die wordt geretourneerd door de getColorFromSequence() functie.
   53	De belangrijkste evenement verbinding die Health veranderingen detecteert die van de server zijn gerepliceerd en roept de onHealthChanged() functie aan.
   56	Initieel (bij het spawnen of respawnen van het personage) roept de onHealthChanged() functie aan om InnerFill in te stellen op de juiste percentagegrootte en kleur. Gewoonlijk zal dit de volledige breedte en groen zijn.

Als je nu de game test, zul je merken dat de aangepaste meter correct de grootte en kleur bijwerkt naarmate het personage schade oploopt:

Animeer de meterbalk

Om een extra niveau van verfijning aan de aangepaste meter toe te voegen, kun je gezondheidsveranderingen animeren door middel van tweening, waarbij de grootte en kleur van de meterbalk geleidelijk over ½ seconde veranderen.

1. Open het scripteditor-tabblad voor het UpdateCustomMeter script dat je eerder hebt bewerkt.

2. Selecteer alle regels (CtrlA of ⌘A) en plak ze vervolgens over elkaar (CtrlV of ⌘V) met de volgende code:

   UpdateCustomMeter

   local Players = game:GetService("Players")
   local TweenService = game:GetService("TweenService")
   
   -- Referentie naar lokale speler, personage en humanoïde
   local player = Players.LocalPlayer
   local character = player.Character
   local humanoid = character:WaitForChild("Humanoid")
   
   -- Tween-eigenschappen
   local tweenInfo = TweenInfo.new(0.5, Enum.EasingStyle.Exponential, Enum.EasingDirection.Out)
   
   -- Referentie naar meterbalk binnenste frame
   local playerGui = player:WaitForChild("PlayerGui")
   local meterBarInner = playerGui.HUDContainer.MeterBar.InnerFill
   
   -- Kleurverloop sequentie kleuren (rood, oranje, geel, limoen, groen)
   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)
   }
   
   -- Functie om kleur in kleurverloop sequentie te krijgen van fractiepunt
   local function getColorFromSequence(fraction: number): Color3
   	-- Elke kleur in het kleurverloop definieert het begin en/of einde van een sectie
   	local numSections = #gradient - 1
   
   	-- Elke sectie vertegenwoordigt een deel van 1
   	local sectionSize = 1 / numSections
   
   	-- Bepaal in welke sectie de gevraagde fractie valt
   	local sectionStartIndex = 1 + math.clamp(fraction, 0, 1) // sectionSize
   
   	-- Verkrijg de kleuren aan het begin en einde van de sectie
   	local sectionColorStart = gradient[sectionStartIndex]
   	local sectionColorEnd = gradient[sectionStartIndex + 1] or sectionColorStart
   
   	-- Normaliseer fractie tot een getal van 0 tot 1 binnen de sectie
   	local fractionOfSection = math.clamp(fraction, 0, 1) % sectionSize / sectionSize
   
   	-- Lerp tussen begin en einde op basis van de genormaliseerde fractie
   	return sectionColorStart:Lerp(sectionColorEnd, fractionOfSection)
   end
   
   local function onHealthChanged()
   	-- Bereken nieuwe gezondheid als percentage van max
   	local healthFraction = math.max(0, humanoid.Health / humanoid.MaxHealth)
   
   	-- Tween de balk naar nieuwe grootte/kleurdoelen
   	local tweenGoal = {
   		Size = UDim2.new(healthFraction, 0, 1, 0),
   		BackgroundColor3 = getColorFromSequence(healthFraction)
   	}
   	local meterBarTween = TweenService:Create(meterBarInner, tweenInfo, tweenGoal)
   	meterBarTween:Play()
   end
   
   -- Luister naar veranderingen in de gezondheid van de humanoïde
   humanoid.HealthChanged:Connect(onHealthChanged)
   
   -- Initieel stel (of reset) de balkgrootte/kleur in op de huidige gezondheid
   onHealthChanged()

   Belangrijke toevoegingen/wijzigingen

   Regels	Doel
   2	Verkrijgt een referentie naar TweenService om tweeningfunctionaliteit binnen het script te implementeren.
   10	Creëert een TweenInfo constructor die de beoogde duur van de tween, easingstijl, en easingrichting definieert.
   52‑57	In plaats van simpelweg de grootte en kleur van de balk in te stellen zoals in de vorige versie, declareert een tweenGoal tabel met de doelgrootte/kleur, creëert een nieuwe tween met behulp van de tweenInfo en tweenGoal parameters, en speelt de nieuwe tween af.

Als je nu de game test, zul je merken dat de aangepaste meter tussen elke verandering in gezondheid tweent:

Voeg een schade-effect toe

Het standaard gezondheidsmetersysteem bevat een korte, subtiele rode tint op de schermranden wanneer het personage schade oploopt. Door de standaard meter uit te schakelen, wordt dit effect verwijderd, maar je kunt het vervangen door je eigen implementatie.

1. Open het scripteditor-tabblad voor het UpdateCustomMeter script dat je eerder hebt bewerkt.

2. Selecteer alle regels en plak ze met de volgende code over elkaar:

   UpdateCustomMeter

   local Workspace = game:GetService("Workspace")
   local Players = game:GetService("Players")
   local TweenService = game:GetService("TweenService")
   
   -- Referentie naar lokale speler, personage en humanoïde
   local player = Players.LocalPlayer
   local character = player.Character
   local humanoid = character:WaitForChild("Humanoid")
   
   -- Tween-eigenschappen
   local tweenInfo = TweenInfo.new(0.5, Enum.EasingStyle.Exponential, Enum.EasingDirection.Out)
   
   -- Variabele om de gezondheid van het personage op te slaan/cache
   local cachedHealth = humanoid.Health / humanoid.MaxHealth
   
   -- Verkrijg (of maak nieuwe) kleurcorrectie-effect binnen de camera van de speler
   local colorCorrection = Workspace.CurrentCamera:FindFirstChildWhichIsA("ColorCorrectionEffect") or Instance.new("ColorCorrectionEffect", Workspace.CurrentCamera)
   colorCorrection.Name = "DamageColorEffect"
   
   -- Referentie naar meterbalk binnenste frame
   local playerGui = player:WaitForChild("PlayerGui")
   local meterBarInner = playerGui.HUDContainer.MeterBar.InnerFill
   
   -- Kleurverloop sequentie kleuren (rood, oranje, geel, limoen, groen)
   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)
   }
   
   -- Functie om kleur in kleurverloop sequentie te krijgen van fractiepunt
   local function getColorFromSequence(fraction: number): Color3
   	-- Elke kleur in het kleurverloop definieert het begin en/of einde van een sectie
   	local numSections = #gradient - 1
   
   	-- Elke sectie vertegenwoordigt een deel van 1
   	local sectionSize = 1 / numSections
   
   	-- Bepaal in welke sectie de gevraagde fractie valt
   	local sectionStartIndex = 1 + math.clamp(fraction, 0, 1) // sectionSize
   
   	-- Verkrijg de kleuren aan het begin en einde van de sectie
   	local sectionColorStart = gradient[sectionStartIndex]
   	local sectionColorEnd = gradient[sectionStartIndex + 1] or sectionColorStart
   
   	-- Normaliseer fractie tot een getal van 0 tot 1 binnen de sectie
   	local fractionOfSection = math.clamp(fraction, 0, 1) % sectionSize / sectionSize
   
   	-- Lerp tussen begin en einde op basis van de genormaliseerde fractie
   	return sectionColorStart:Lerp(sectionColorEnd, fractionOfSection)
   end
   
   local function onHealthChanged()
   	-- Bereken nieuwe gezondheid als percentage van max
   	local healthFraction = math.max(0, humanoid.Health / humanoid.MaxHealth)
   
   	-- Tween de balk naar nieuwe grootte/kleurdoelen
   	local tweenGoal = {
   		Size = UDim2.new(healthFraction, 0, 1, 0),
   		BackgroundColor3 = getColorFromSequence(healthFraction)
   	}
   	local meterBarTween = TweenService:Create(meterBarInner, tweenInfo, tweenGoal)
   	meterBarTween:Play()
   
   	-- Toon schade-effect als de nieuwe gezondheid lager is dan de gecachete gezondheid
   	if healthFraction < cachedHealth then
   		-- Cache nieuwe gezondheidswaarde
   		cachedHealth = healthFraction
   
   		-- Stel kleurcorrectie in op rood als de initiële tint voordat je tweent
   		colorCorrection.TintColor = Color3.fromRGB(255, 25, 25)
   		colorCorrection.Saturation = 2.5
   
   		-- Tween de tint terug naar wit (neutraal en geen tintverandering van normaal)
   		local colorCorrectionTweenGoal = {
   			TintColor = Color3.fromRGB(255, 255, 255),
   			Saturation = 0
   		}
   		local colorCorrectionTween = TweenService:Create(colorCorrection, tweenInfo, colorCorrectionTweenGoal)
   		colorCorrectionTween:Play()
   	end
   end
   
   -- Luister naar veranderingen in de gezondheid van de humanoïde
   humanoid.HealthChanged:Connect(onHealthChanged)
   
   -- Initieel stel (of reset) de balkgrootte/kleur in op de huidige gezondheid
   onHealthChanged()

   Belangrijke toevoegingen/wijzigingen

   Regels	Doel
   14	Stelt een tijdelijke referentie (cachedHealth) in om de hoeveelheid gezondheid van het personage tussen veranderingen bij te houden, zodat je kunt vergelijken of een verandering lager is (schade).
   17‑18	Bij de initiële spawnen van het personage, maakt een nieuwe ColorCorrectionEffect aan binnen de huidige Camera van de speler, of verkrijgt een referentie naar dezelfde instantie bij latere respawns. Door dit post-processing effect aan de camera van de speler te koppelen, wordt het alleen toegepast op hun lokale scherm, niet op het scherm van elke speler op de server.
   68‑83	Voert eerst een voorwaardelijke controle uit om te bevestigen dat de gezondheidsverandering lager is dan de waarde van cachedHealth, wat schade aangeeft; als dat zo is, stelt het cachedHealth in op de nieuwe waarde. Vervolgens stelt het de tint van de ColorCorrectionEffect in op [255, 25, 25] (rood) met een hogere verzadiging, en tweent vervolgens de tint terug naar de standaard neutrale witte tint ([255, 255, 255]) zonder verzadiging.

Als je nu de game test, zul je merken dat het scherm kort rood flitst telkens wanneer het personage schade oploopt: