Crea misuratori HUD

Un HUD o Heads-Up Display è un insieme di elementi UI che sono sempre visibili o accessibili durante il gameplay, come le visualizzazioni del punteggio, i misuratori di salute e i pulsanti di menu. Includere un HUD è essenziale per la maggior parte delle esperienze perché mostra informazioni che aiutano i giocatori a raggiungere i loro obiettivi di gioco.

Un elemento HUD comune è un misuratore di salute con un'icona a sinistra che può essere adattata in una barra di timer, barra di progresso, o simili.

Utilizzando Hazardous Space Station come punto di partenza e UI Fundamentals - HUD Meter come riferimento finito, questo tutorial dimostra:

• Configurazione e utilizzo del Device Emulator per testare il tuo design su più schermi emulati.
• Uso di StarterGui sia come contenitore di design che di archiviazione.
• Come posizionare/dimensionare gli elementi UI attorno ai controlli e alle notches/islands incorporati di Roblox, come la notch della fotocamera sui telefoni moderni.
• Come sostituire il misuratore di salute predefinito di Roblox con il tuo misuratore e collegarlo al livello di salute del personaggio.
• Come animare la parte centrale del misuratore di salute e impostare il suo colore tra cinque punti chiave di gradiente di colore (rosso, arancione, giallo, lime, verde).

Abilita il Device Emulator

Roblox è intrinsecamente cross‑platform, poiché i giocatori possono scoprire e unirsi alle esperienze sul proprio telefono o tablet, per poi continuare da dove avevano lasciato sul proprio PC o console. I dispositivi mobili (telefoni e tablet) hanno la minor quantità di spazio sullo schermo, quindi è importante che i tuoi elementi UI si adattino a schermi più piccoli e che siano chiaramente visibili ai giocatori.

Il modo migliore per testare i design UI tra piattaforme è utilizzare il Device Emulator di Studio. Questo strumento fornisce una selezione preimpostata di dispositivi e consente di aggiungere le proprie impostazioni personalizzate.

1. Apri il modello di Hazardous Space Station in Studio.

2. Dal menu Test di Studio, attiva Device Emulator.

3. Dalla barra direttamente sopra la vista principale, seleziona un'emulazione telefonica come iPhone X o Samsung Galaxy A51. Poi, imposta la dimensione della vista su Fit to Window per utilizzare il massimo spazio in Studio.

   

Crea un contenitore dello schermo

Un contenitore ScreenGui tiene oggetti UI (GuiObjects) da visualizzare sullo schermo di un giocatore (in questo tutorial, l'interezza del misuratore di salute). Per visualizzare un ScreenGui e i suoi oggetti figlio a ogni giocatore che entra nell'esperienza, posizionalo all'interno del contenitore StarterGui. Quando un giocatore entra e il suo personaggio appare per la prima volta, il ScreenGui e i suoi contenuti vengono clonati nel contenitore PlayerGui per quel giocatore, situato all'interno del contenitore Players.

Per inserire un ScreenGui vuoto:

1. Nella finestra Explorer, trova il contenitore StarterGui.

   

2. Passa sopra il contenitore, clicca il pulsante ⊕ e inserisci un ScreenGui.

   

3. Rinomina il nuovo contenitore HUDContainer per riflettere il suo scopo.

   

Utilizza le aree sicure

I telefoni moderni sfruttano l'intero schermo ma in genere includono notch, ritagli e altri elementi che occupano spazio sullo schermo. Ogni esperienza di Roblox include anche i controlli della barra superiore per un accesso rapido al menu principale, chat, leaderboard, e altro ancora.

Per garantire che i giocatori possano vedere e accedere a tutte le UI senza ostacoli, Roblox fornisce la proprietà ScreenInsets che controlla i margini dell'area sicura per il contenuto di un ScreenGui. Ogni oggetto UI che posizioni all'interno di un ScreenGui è relativo ai confini del margine.

Sebbene il valore predefinito di CoreUISafeInsets garantisca che tutti gli oggetti UI rimangano liberi dalle UI di Roblox e dai ritagli dei dispositivi, DeviceSafeInsets può essere una scelta migliore per utilizzare uno spazio limitato sullo schermo, come illustrato di seguito.

1. Nella finestra Explorer, seleziona HUDContainer.

   

2. Nella finestra Properties, imposta la proprietà ScreenInsets su DeviceSafeInsets.

   

Imposta il padding dei bordi

Con ScreenInsets impostato su DeviceSafeInsets, il contenuto può ora estendersi direttamente fino al bordo fisico superiore dello schermo. Tuttavia, una piccola quantità di padding può aiutare a spingere il misuratore di salute (e altri oggetti all'interno del contenitore) leggermente lontano dai bordi dello schermo per un aspetto più pulito e per evitare che vengano tagliati.

Un modo per applicare il padding a un contenitore UI è attraverso l'inserimento di un modificatore UIPadding:

1. Inserisci un modificatore UIPadding in HUDContainer.

   

2. Con il nuovo oggetto UIPadding selezionato, inserisci un valore di 0, 16 per tutti i lati del contenitore (PaddingBottom, PaddingLeft, PaddingRight, PaddingTop). Questo applica un padding di 16 pixel attorno al contenitore, indipendentemente dalla risoluzione dello schermo.

   

Costruisci il misuratore di salute

Con il contenitore dello schermo configurato, puoi iniziare a costruire il misuratore di salute utilizzando oggetti UI di Roblox come frame e un image label.

Crea il frame padre

Simile ad applicazioni di design come Figma e Photoshop, un Frame in Roblox funge da contenitore per altri oggetti UI. Per questo tutorial, l'intero misuratore di salute sarà contenuto in un singolo frame padre, rendendolo semplice da riposizionare attraverso vari layout HUD.

1. Inserisci un Frame in HUDContainer. Il nuovo frame appare nell'angolo in alto a sinistra come un quadrato bianco vuoto.

   

   Se il nuovo frame non appare nella vista, assicurati di aver attivato GUI overlay dal widget delle Opzioni di Visualizzazione nell'angolo in alto a destra della vista 3D.

2. Rinomina la nuova istanza del frame in MeterBar.

   

Posiziona il frame

In Roblox, la posizione di un oggetto UI è rappresentata da un insieme di coordinate UDim2 contenente valori Scale e Offset per entrambi gli assi X e Y:

• I valori Scale rappresentano una percentuale delle dimensioni del contenitore lungo l'asse corrispondente, additiva a qualsiasi valore Offset.
• I valori Offset rappresentano quanti pixel spostare l'oggetto lungo l'asse corrispondente, additiva a qualsiasi valore Scale.

Per posizionare un oggetto UI nell'angolo in alto a destra del contenitore dello schermo, Scale è il miglior approccio poiché un valore X di 1 (100%) rappresenta il bordo destro del contenitore, indipendentemente dalla dimensione fisica in pixel dello schermo. Allo stesso modo, un valore di scala Y di 0 (0%) rappresenta il bordo superiore del contenitore.

Inoltre, dovrai impostare un punto di ancoraggio in alto a destra per il frame padre per definire il suo punto di origine. I valori accettabili sono compresi tra 0 e 1, relativi alla dimensione dell'oggetto, quindi un valore di ancoraggio di 1, 0 mette il punto di ancoraggio del frame nel suo angolo superiore destro.

1. Nella finestra Explorer, seleziona il frame MeterBar che hai inserito in precedenza.

   

2. Nella finestra Properties, inserisci 1, 0, 0, 0 per Position e premi Invio. Studio aggiungerà automaticamente le parentesi per formare il UDim2 di {1, 0},{0, 0}.

3. Inserisci 1, 0 per la proprietà AnchorPoint. Il frame dovrebbe ora essere posizionato nell'angolo in alto a destra dell'area sicura del dispositivo, leggermente indented dal bordo a causa del padding.

   

Ridimensiona il frame

Come la posizione, la Size di un oggetto UI è rappresentata da un insieme di coordinate UDim2 contenente valori Scale e Offset per entrambi gli assi X e Y.

Per impostazione predefinita, la dimensione del nuovo frame è {0, 100},{0, 100}, il che significa 100 pixel sia in larghezza (X) che in altezza (Y). Sebbene un valore pixel rigoroso sia utile in alcuni casi, molti elementi UI si scalano in modo più reattivo su più schermi quando sono impostati su una percentuale delle dimensioni complessive del contenitore dello schermo.

1. Con il frame MeterBar selezionato, accedi alla finestra Properties e naviga fino alla proprietà Size.

2. Inserisci un valore di 0.35, 0, 0.05, 0 per impostare una dimensione percentuale del 35% in larghezza e 5% in altezza senza offset pixel aggiuntivi.

   

Stila il frame

Per impostazione predefinita, i Frames sono riempiti di bianco solido. Il misuratore di salute finale dovrebbe avere un riempimento più scuro e leggermente opaco, oltre a un contorno scuro, in modo che si distin­gua meglio sia su sfondi chiari che scuri.

1. Con il frame MeterBar selezionato, inserisci 0 per la proprietà BackgroundColor3. Studio lo convertirà automaticamente nel valore RGB di [0, 0, 0].

2. Inserisci 0.75 per la proprietà BackgroundTransparency. In Roblox, la trasparenza va da 0 per completamente opaco a 1 per completamente trasparente, quindi 0.75 equivale a 25% di opacità in altre applicazioni come Figma o Photoshop.

   

3. Inserisci un oggetto UIStroke, un potente modificatore UI che aggiunge un tratto personalizzabile al frame.

   

4. Con il nuovo UIStroke selezionato, imposta le seguenti proprietà:

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

   

Per finalizzare lo stile del frame del misuratore, puoi arrotondare gli angoli per formare una forma a "pillola" invece di un rettangolo appuntito.

1. Inserisci un'istanza UICorner nel frame MeterBar.

   

2. Con il nuovo modificatore UICorner selezionato, imposta il CornerRadius su 0.5, 0. Usare un valore di scala di 0.5 (50%) invece di un valore in pixel è particolarmente conveniente per la barra del misuratore perché garantisce una curva completamente arrotondata, indipendentemente da quanto alta o larga diventi il contenitore.

   

Crea il riempimento interno

Ora che il frame contenitore del misuratore di salute è completo, puoi aggiungere una parte di riempimento interno per rappresentare la salute variabile del personaggio. Poiché deve semplicemente essere un'area riempita di colore solido, un frame figlio Frame all'interno del frame padre è adatto.

1. Inserisci un Frame figlio nel frame MeterBar.

2. Rinomina la nuova istanza del frame in InnerFill.

   

3. Con InnerFill selezionato, imposta le seguenti proprietà:

   • AnchorPoint = 0, 0.5 (bordo sinistro e centro verticale)
   • Position = 0, 0, 0.5, 0
   • Size = 1, 0, 1, 0

   Poiché i figli dei frame sono posizionati e dimensionati rispetto al loro genitore, l'uso di scale fa sì che il frame interno riempia l'intera larghezza e altezza del genitore, partendo dal bordo sinistro del genitore.

   

4. Per abbinare la forma "pillola" del frame padre, inserisci un ulteriore UICorner in InnerFill.

   

5. Con il nuovo modificatore UICorner selezionato, imposta la proprietà CornerRadius su 0.5, 0 per abbinare la forma "pillola" del frame padre MeterBar.

   

6. Per rappresentare meglio che un misuratore pieno indica buona salute, seleziona InnerFill e imposta la proprietà BackgroundColor3 su [0, 225, 50] (in un compito successivo, scriptai questo colore per cambiare in base alla salute reale).

   

Aggiungi l'icona

Per indicare più chiaramente lo scopo del misuratore, puoi aggiungere un image label sul lato sinistro, in questo caso un cuore rosso che simboleggia comunemente la salute o la vita.

1. Inserisci un ImageLabel nel frame MeterBar. Questo oggetto consente di applicare un asset di immagine 2D che è stato caricato come decalcomania su Roblox.

2. Rinomina la nuova istanza dell'etichetta in Icon.

   

3. Con Icon selezionato, imposta la proprietà ZIndex su 2. Sebbene gli oggetti UI appena inseriti siano sempre posizionati davanti agli oggetti inseriti precedentemente, questa modifica garantisce che l'icona venga sempre visualizzata davanti agli elementi del frame del misuratore.

   

4. Trova la proprietà Image dell'icona e inserisci rbxassetid://91715286435585, il riferimento a un'immagine di cuore pre‑caricata (se lo desideri, puoi importare la tua immagine e utilizzare il suo asset ID).

   

5. Per garantire che l'icona ImageLabel rimanga sempre a un rapporto d'aspetto di 1:1, inserisci un UIAspectRatioConstraint. Sebbene questo vincolo abbia proprietà personalizzabili per controllare il rapporto d'aspetto, puoi lasciare i valori predefiniti intatti.

   

6. Con Icon selezionato, finalizza l'aspetto e la posizione cambiando le seguenti proprietà:

   • AnchorPoint = 0.5, 0.5 (ancora centrale)
   • BackgroundTransparency = 1 (100% trasparente)
   • Position = 0, 0, 0.5, 0 (lato sinistro del misuratore e centro verticale)
   • Size = 2, 0, 2, 0 (200% della dimensione complessiva del frame MeterBar, vincolata a 1:1 dal UIAspectRatioConstraint)

   

Limita la dimensione

Sebbene un altezza di scala di 0.05 (5%) appaia bene su schermi di telefoni moderni e monitor da gioco che hanno un rapporto d'aspetto 16:9 o più ampio, il misuratore potrebbe sembrare leggermente troppo alto su schermi di tablet e telefoni più vecchi. Puoi verificare questo emulando un tablet come l'iPad 7th Generation dal Device Emulator.

Per mantenere un'altezza della barra del misuratore più consistente con schermi più ampi, puoi applicare un UISizeConstraint per limitare l'altezza massima in pixel.

1. Inserisci un UISizeConstraint nel frame MeterBar.

   

2. Con il nuovo vincolo selezionato, imposta la proprietà MaxSize su inf, 20 per limitare la sua altezza a 20 pixel mentre non imposta alcuna limitazione sulla larghezza.

   

Ora la barra del misuratore mantiene un'altezza più coerente tra schermi più larghi e più alti.

Sostituisci il misuratore di salute predefinito

Le esperienze di Roblox comprendono un misuratore di salute predefinito che diventa visibile quando i personaggi subiscono danni. Se mantieni il misuratore predefinito visibile, si sovrapporrà e potenzialmente si duplicherà rispetto al misuratore personalizzato.

Disabilita il misuratore predefinito

Per disabilitare il misuratore di salute predefinito, utilizzerai uno script client (LocalScript) all'interno di StarterPlayerScripts che chiama StarterGui:SetCoreGuiEnabled().

1. Nella finestra Explorer, espandi il contenitore StarterPlayer e trova il contenitore StarterPlayerScripts al suo interno.

   

2. Inserisci un nuovo LocalScript nel contenitore e rinominalo in HideDefaultHealthMeter per descriverne lo scopo. Gli script all'interno di StarterPlayerScripts vengono eseguiti automaticamente quando il giocatore locale entra in un'esperienza, rendendolo un contenitore ideale per eseguire uno script che nasconde permanentemente il misuratore predefinito.

   

3. Quando inserisci un nuovo script, si apre automaticamente in una nuova scheda dell'editor di script (se non lo fa, fai doppio clic sullo script nella finestra Explorer).

   Incolla il seguente codice all'interno dello script HideDefaultHealthMeter:

   HideDefaultHealthMeter
   local StarterGui = game:GetService("StarterGui")
   
   -- Nascondi il misuratore di salute predefinito
   StarterGui:SetCoreGuiEnabled(Enum.CoreGuiType.Health, false)

   Spiegazione del codice

   Linea	Scopo
   1	Ottiene un riferimento a un servizio core service, StarterGui, che rappresenta lo stesso contenitore dove hai creato il misuratore di salute personalizzato e il cui contenuto si clona nel contenitore PlayerGui per ciascun giocatore che entra nell'esperienza.
   4	Chiama il metodo SetCoreGuiEnabled() del servizio e istruisce per disabilitare il misuratore di salute predefinito (false).

Se ora svolgi un test del gioco e subisci danni, noterai che il misuratore predefinito è disabilitato e nascosto (scriptai il misuratore personalizzato per riflettere le modifiche di salute nella sezione successiva).

Ascolta le modifiche di salute

Tutti i modelli di personaggio predefiniti di Roblox contengono una classe Humanoid che fornisce comportamenti e funzionalità speciali al personaggio, come impostare la sua velocità di camminata/corsa e gestire la sua salute. La Health cambia sul server replicandosi al client di ciascun giocatore e puoi rilevare queste modifiche per aggiornare sia la dimensione che il colore del misuratore di salute personalizzato.

1. Nella finestra Explorer, trova il contenitore StarterCharacterScripts all'interno di StarterPlayer.

   

2. Inserisci un nuovo LocalScript nel contenitore e rinominalo in UpdateCustomMeter per descriverne lo scopo. Gli script all'interno di StarterCharacterScripts vengono eseguiti automaticamente ogni volta che il personaggio del giocatore appare, rendendolo un contenitore ideale per eseguire uno script che ripristina completamente il misuratore di salute a ogni respawn.

   

3. Nella finestra dell'editor per lo script UpdateCustomMeter, incolla il seguente codice:

   UpdateCustomMeter
   local Players = game:GetService("Players")
   
   -- Riferimento al giocatore locale, al personaggio e all'umanoide
   local player = Players.LocalPlayer
   local character = player.Character
   local humanoid = character:WaitForChild("Humanoid")
   
   -- Riferimento al frame interno della barra misuratore
   local playerGui = player:WaitForChild("PlayerGui")
   local meterBarInner = playerGui.HUDContainer.MeterBar.InnerFill
   
   -- Colori della sequenza di gradiente (rosso, arancione, giallo, lime, verde)
   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)
   }
   
   -- Funzione per ottenere il colore nella sequenza di gradiente da un punto frazionario
   local function getColorFromSequence(fraction: number): Color3
   	-- Ogni colore nel gradiente definisce l'inizio e/o la fine di una sezione
   	local numSections = #gradient - 1
   
   	-- Ogni sezione rappresenta una porzione di 1
   	local sectionSize = 1 / numSections
   
   	-- Determina in quale sezione rientra la frazione richiesta
   	local sectionStartIndex = 1 + math.clamp(fraction, 0, 1) // sectionSize
   
   	-- Ottieni i colori all'inizio e alla fine della sezione
   	local sectionColorStart = gradient[sectionStartIndex]
   	local sectionColorEnd = gradient[sectionStartIndex + 1] or sectionColorStart
   
   	-- Normalizza la frazione per essere un numero da 0 a 1 all'interno della sezione
   	local fractionOfSection = math.clamp(fraction, 0, 1) % sectionSize / sectionSize
   
   	-- Lerp tra inizio e fine basato sulla frazione normalizzata
   	return sectionColorStart:Lerp(sectionColorEnd, fractionOfSection)
   end
   
   local function onHealthChanged()
   	-- Calcola la nuova salute come percentuale del massimo
   	local healthFraction = math.max(0, humanoid.Health / humanoid.MaxHealth)
   
   	-- Imposta la barra su nuove dimensioni/colori target
   	meterBarInner.Size = UDim2.new(healthFraction, 0, 1, 0)
   	meterBarInner.BackgroundColor3 = getColorFromSequence(healthFraction)
   end
   
   -- Ascolta le modifiche alla salute dell'umanoide
   humanoid.HealthChanged:Connect(onHealthChanged)
   
   -- Imposta inizialmente (o ripristina) la dimensione/colori della barra alla salute attuale
   onHealthChanged()

   Spiegazione del codice

   Linee	Scopo
   4‑6	Ottiene riferimenti al Player locale, al Character modello, e alla classe Humanoid al suo interno.
   9‑10	Ottiene un riferimento all'oggetto InnerFill del misuratore che deve essere ridimensionato e ripristinato mentre la salute del personaggio cambia.
   13‑19	Dichiarara un array di cinque colori (rosso, arancione, giallo, lime, verde) per ripristinare il colore del misuratore in vari punti; per esempio, verde per il 100% di salute, giallo per il 50%, rosso per il 0%, o una mistura in qualsiasi frazione tra i punti chiave.
   22‑41	Funzione ausiliaria che restituisce la miscela di colore tra qualsiasi dei punti chiave di colore dal gradiente.
   43‑50	Funzione che gestisce eventuali modifiche alla salute. Qui calcola la nuova salute come percentuale del MaxHealth, ripristina InnerFill a quella percentuale e ripristina il colore in base alla funzione getColorFromSequence().
   53	La connessione dell'evento principale che rileva le modifiche alla Health replicate dal server e chiama la funzione onHealthChanged().
   56	Inizialmente (alla spawns o respawns del personaggio) chiama la funzione onHealthChanged() per dimensionare e colorare InnerFill alla percentuale corretta. Tipicamente sarà la larghezza completa e verde.

Se ora svolgi un test del gioco, noterai che il misuratore personalizzato aggiorna correttamente sia le dimensioni che il colore mentre il personaggio subisce danni:

Anima la barra del misuratore

Per aggiungere un ulteriore livello di finitura al misuratore personalizzato, puoi animare le modifiche di salute tramite tweening, cambiando gradualmente la dimensione e il colore della barra del misuratore in mezzo secondo.

1. Accedi alla scheda dell'editor di script per il UpdateCustomMeter script che hai modificato in precedenza.

2. Seleziona tutte le righe (CtrlA o ⌘A) e poi incolla sopra di esse (CtrlV o ⌘V) il seguente codice:

   UpdateCustomMeter
   local Players = game:GetService("Players")
   local TweenService = game:GetService("TweenService")
   
   -- Riferimento al giocatore locale, al personaggio e all'umanoide
   local player = Players.LocalPlayer
   local character = player.Character
   local humanoid = character:WaitForChild("Humanoid")
   
   -- Proprietà di tween
   local tweenInfo = TweenInfo.new(0.5, Enum.EasingStyle.Exponential, Enum.EasingDirection.Out)
   
   -- Riferimento al frame interno della barra misuratore
   local playerGui = player:WaitForChild("PlayerGui")
   local meterBarInner = playerGui.HUDContainer.MeterBar.InnerFill
   
   -- Colori della sequenza di gradiente (rosso, arancione, giallo, lime, verde)
   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)
   }
   
   -- Funzione per ottenere il colore nella sequenza di gradiente da un punto frazionario
   local function getColorFromSequence(fraction: number): Color3
   	-- Ogni colore nel gradiente definisce l'inizio e/o la fine di una sezione
   	local numSections = #gradient - 1
   
   	-- Ogni sezione rappresenta una porzione di 1
   	local sectionSize = 1 / numSections
   
   	-- Determina in quale sezione rientra la frazione richiesta
   	local sectionStartIndex = 1 + math.clamp(fraction, 0, 1) // sectionSize
   
   	-- Ottieni i colori all'inizio e alla fine della sezione
   	local sectionColorStart = gradient[sectionStartIndex]
   	local sectionColorEnd = gradient[sectionStartIndex + 1] or sectionColorStart
   
   	-- Normalizza la frazione per essere un numero da 0 a 1 all'interno della sezione
   	local fractionOfSection = math.clamp(fraction, 0, 1) % sectionSize / sectionSize
   
   	-- Lerp tra inizio e fine basato sulla frazione normalizzata
   	return sectionColorStart:Lerp(sectionColorEnd, fractionOfSection)
   end
   
   local function onHealthChanged()
   	-- Calcola la nuova salute come percentuale del massimo
   	local healthFraction = math.max(0, humanoid.Health / humanoid.MaxHealth)
   
   	-- Tweenizza la barra su nuove dimensioni/colori target
   	local tweenGoal = {
   		Size = UDim2.new(healthFraction, 0, 1, 0),
   		BackgroundColor3 = getColorFromSequence(healthFraction)
   	}
   	local meterBarTween = TweenService:Create(meterBarInner, tweenInfo, tweenGoal)
   	meterBarTween:Play()
   end
   
   -- Ascolta le modifiche alla salute dell'umanoide
   humanoid.HealthChanged:Connect(onHealthChanged)
   
   -- Imposta inizialmente (o ripristina) la dimensione/colori della barra alla salute attuale
   onHealthChanged()

   Principali aggiunte/modifiche

   Linee	Scopo
   2	Ottiene un riferimento a TweenService per implementare la funzionalità di tweening all'interno dello script.
   10	Creato un costruttore TweenInfo che definisce la durata del tween previsto, lo stile di easing, e la direzione di easing.
   52‑57	Invece di impostare semplicemente le dimensioni e il colore della barra come nella versione precedente, dichiara una tabella tweenGoal con la dimensione/colori target, crea un nuovo tween utilizzando i parametri tweenInfo e tweenGoal, e riproduce il nuovo tween.

Se ora svolgi un test del gioco, noterai che il misuratore personalizzato si anima tra ogni cambiamento di salute:

Aggiungi un effetto di danno

Il sistema di misurazione della salute predefinito include una leggera e sottile sfumatura rossa sui bordi dello schermo quando il personaggio subisce danni. Disabilitando il misuratore predefinito, questo effetto viene rimosso, ma puoi sostituirlo con la tua implementazione.

1. Accedi alla scheda dell'editor di script per il UpdateCustomMeter script che hai modificato in precedenza.

2. Seleziona tutte le righe e incolla sopra di esse il seguente codice:

   UpdateCustomMeter
   local Workspace = game:GetService("Workspace")
   local Players = game:GetService("Players")
   local TweenService = game:GetService("TweenService")
   
   -- Riferimento al giocatore locale, al personaggio e all'umanoide
   local player = Players.LocalPlayer
   local character = player.Character
   local humanoid = character:WaitForChild("Humanoid")
   
   -- Proprietà di tween
   local tweenInfo = TweenInfo.new(0.5, Enum.EasingStyle.Exponential, Enum.EasingDirection.Out)
   
   -- Variabile per memorizzare/cache la salute del personaggio
   local cachedHealth = humanoid.Health / humanoid.MaxHealth
   
   -- Ottieni (o crea una nuova) effetto di correzione colore all'interno della fotocamera del giocatore
   local colorCorrection = Workspace.CurrentCamera:FindFirstChildWhichIsA("ColorCorrectionEffect") or Instance.new("ColorCorrectionEffect", Workspace.CurrentCamera)
   colorCorrection.Name = "DamageColorEffect"
   
   -- Riferimento al frame interno della barra misuratore
   local playerGui = player:WaitForChild("PlayerGui")
   local meterBarInner = playerGui.HUDContainer.MeterBar.InnerFill
   
   -- Colori della sequenza di gradiente (rosso, arancione, giallo, lime, verde)
   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)
   }
   
   -- Funzione per ottenere il colore nella sequenza di gradiente da un punto frazionario
   local function getColorFromSequence(fraction: number): Color3
   	-- Ogni colore nel gradiente definisce l'inizio e/o la fine di una sezione
   	local numSections = #gradient - 1
   
   	-- Ogni sezione rappresenta una porzione di 1
   	local sectionSize = 1 / numSections
   
   	-- Determina in quale sezione rientra la frazione richiesta
   	local sectionStartIndex = 1 + math.clamp(fraction, 0, 1) // sectionSize
   
   	-- Ottieni i colori all'inizio e alla fine della sezione
   	local sectionColorStart = gradient[sectionStartIndex]
   	local sectionColorEnd = gradient[sectionStartIndex + 1] or sectionColorStart
   
   	-- Normalizza la frazione per essere un numero da 0 a 1 all'interno della sezione
   	local fractionOfSection = math.clamp(fraction, 0, 1) % sectionSize / sectionSize
   
   	-- Lerp tra inizio e fine basato sulla frazione normalizzata
   	return sectionColorStart:Lerp(sectionColorEnd, fractionOfSection)
   end
   
   local function onHealthChanged()
   	-- Calcola la nuova salute come percentuale del massimo
   	local healthFraction = math.max(0, humanoid.Health / humanoid.MaxHealth)
   
   	-- Tweenizza la barra su nuove dimensioni/colori target
   	local tweenGoal = {
   		Size = UDim2.new(healthFraction, 0, 1, 0),
   		BackgroundColor3 = getColorFromSequence(healthFraction)
   	}
   	local meterBarTween = TweenService:Create(meterBarInner, tweenInfo, tweenGoal)
   	meterBarTween:Play()
   
   	-- Mostra effetto di danno se la nuova salute è inferiore alla salute cache
   	if healthFraction < cachedHealth then
   		-- Memorizza il nuovo valore di salute
   		cachedHealth = healthFraction
   
   		-- Imposta la correzione colore su rosso come sfumatura iniziale prima di tweenizzare
   		colorCorrection.TintColor = Color3.fromRGB(255, 25, 25)
   		colorCorrection.Saturation = 2.5
   
   		-- Tweenizza la sfumatura indietro su bianco (neutro e niente cambiamento da normale)
   		local colorCorrectionTweenGoal = {
   			TintColor = Color3.fromRGB(255, 255, 255),
   			Saturation = 0
   		}
   		local colorCorrectionTween = TweenService:Create(colorCorrection, tweenInfo, colorCorrectionTweenGoal)
   		colorCorrectionTween:Play()
   	end
   end
   
   -- Ascolta le modifiche alla salute dell'umanoide
   humanoid.HealthChanged:Connect(onHealthChanged)
   
   -- Imposta inizialmente (o ripristina) la dimensione/colori della barra alla salute attuale
   onHealthChanged()

   Principali aggiunte/modifiche

   Linee	Scopo
   14	Imposta un riferimento segnaposto (cachedHealth) per monitorare la quantità di salute del personaggio tra le modifiche, in modo da poter confrontare se una modifica è inferiore (danno).
   17‑18	Nello spawn iniziale del personaggio crea un nuovo ColorCorrectionEffect all'interno della Camera attuale del giocatore, oppure ottiene un riferimento alla stessa istanza nei respawn successivi. Collegando questo effetto di post-elaborazione alla fotocamera del giocatore, si applica solo al loro schermo locale, non a quello di ogni giocatore sul server.
   68‑83	Prima esegue un controllo condizionale per confermare che la modifica della salute è inferiore al valore cachedHealth, indicando danno; se sì, imposta cachedHealth sul nuovo valore. Successivamente, imposta la sfumatura dell'ColorCorrectionEffect su [255, 25, 25] (rosso) con saturazione maggiore, quindi tweenizza la sfumatura di nuovo al valore predefinito di bianco neutro ([255, 255, 255]) senza saturazione.

Se ora svolgi un test del gioco, noterai che lo schermo lampeggia brevemente di rosso ogni volta che il personaggio subisce danni: