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 dei giochi perché visualizza 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 adattato in una barra temporale, una barra di progresso o simili.

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

• Configurazione e utilizzo del Device Emulator per testare il tuo design su più schermi emulati.
• Utilizzo di StarterGui sia come contenitore di design che di archiviazione.
• Come posizionare/dimensionare gli elementi UI attorno ai controlli Roblox integrati e alle notches/isole dei dispositivi, 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 (rosso, arancione, giallo, lime, verde).

Abilita il Device Emulator

Roblox è intrinsecamente cross‑platform, poiché i giocatori possono scoprire e unirsi ai giochi sul loro telefono o tablet, per poi continuare dove avevano lasciato su 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 su diverse piattaforme è il Device Emulator di Studio. Questo strumento fornisce una selezione preimpostata di dispositivi e ti consente di aggiungere le tue impostazioni personalizzate.

1. Apri il template Hazardous Space Station in Studio.

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

3. Dalla barra direttamente sopra il viewport principale, seleziona un'emulazione telefonica come iPhone X o Samsung Galaxy A51. Quindi, imposta la dimensione della vista su Adatta alla finestra per utilizzare il massimo spazio in Studio.

   

Crea un contenitore per lo schermo

Un contenitore ScreenGui contiene 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 figli a ogni giocatore che si unisce al gioco, posizionalo all'interno del contenitore StarterGui. Quando un giocatore si unisce 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, individua il contenitore StarterGui.

   

2. Passa sopra il contenitore, fai clic sul pulsante ⊕ e inserisci un ScreenGui.

   

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

   

Utilizza aree sicure

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

Per garantire che i giocatori possano vedere e accedere a tutti gli elementi UI senza ostruzioni, Roblox fornisce la proprietà ScreenInsets che controlla gli inset dell'area sicura per i contenuti di un ScreenGui. Ogni oggetto UI che posizioni all'interno di un ScreenGui è relativo ai limiti degli inset.

Mentre il valore predefinito di CoreUISafeInsets garantisce che tutti gli oggetti UI rimangano liberi da UI di Roblox e ritagli del dispositivo, DeviceSafeInsets può essere una scelta migliore per utilizzare lo spazio limitato dello schermo, come illustrato di seguito.

1. Nella finestra Explorer, seleziona HUDContainer.

   

2. Nella finestra Proprietà, 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 superiore fisico 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 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 bordi 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 etichetta immagine.

Crea il frame genitore

Simile alle 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 genitore, rendendo semplice riposizionarlo 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 nel viewport, assicurati di aver attivato GUI overlay dal widget Opzioni di visualizzazione nell'angolo in alto a destra del viewport 3D.

2. Rinomina la nuova istanza del frame in MeterBar.

   

Posiziona il frame

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

• I valori Scale rappresentano una percentuale della dimensione del contenitore lungo l'asse corrispondente, additiva di eventuali valori Offset.
• I valori Offset rappresentano quanti pixel spostare l'oggetto sull'asse corrispondente, additiva di eventuali valori Scale.

Per posizionare un oggetto UI nell'angolo in alto a destra del contenitore dello schermo, Scale è l'approccio migliore perché 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 genitore 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 posiziona il punto di ancoraggio del frame nel suo angolo in alto a destra.

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

   

2. Nella finestra Proprietà, inserisci 1, 0, 0, 0 per Position e premi Enter. 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 indietro dal bordo a causa del padding.

   

Ridimensiona il frame

Come la posizione, la Size di un oggetto UI è rappresentata da un set 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 adattano in modo più reattivo su più schermi quando impostati su una percentuale della dimensione complessiva del contenitore dello schermo.

1. Con il frame MeterBar selezionato, accedi alla finestra Proprietà e vai alla proprietà Size.

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

   

Stile 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, così come un contorno scuro, in modo che si distingua meglio su sfondi chiari e 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 varia da 0 per completamente opaco a 1 per completamente trasparente, quindi 0.75 equivale al 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 "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. Utilizzare un valore di scala di 0.5 (50%) invece di un valore pixel è particolarmente conveniente per la barra del misuratore perché garantisce una curva completamente arrotondata indipendentemente da quanto sia alta o larga il contenitore.

   

Crea il riempimento interno

Ora che il frame contenitore del misuratore di salute è completo, puoi aggiungere una porzione di riempimento interno per rappresentare la salute variabile del personaggio. Poiché deve solo essere una regione riempita solidamente, un frame Frame secondario all'interno del frame genitore è adatto.

1. Inserisci un frame figlio Frame 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 della scala 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 genitore, 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 genitore MeterBar.

   

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

   

Aggiungi l'icona

Per indicare più chiaramente lo scopo del misuratore, puoi aggiungere un'etichetta immagine 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 ti consente di applicare un asset 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 si sovrappongano sempre agli oggetti inseriti in precedenza, questa modifica garantisce che l'icona venga sempre visualizzata davanti agli elementi del frame del misuratore.

   

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

   

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

   

6. Con Icon selezionato, finalizza l'aspetto e la posizione modificando 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, vincolato a 1:1 dal UIAspectRatioConstraint)

   

Vincola la dimensione

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

Per mantenere l'altezza della barra del misuratore più coerente con schermi più larghi, 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 viene imposta alcuna restrizione 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

I giochi Roblox includono un misuratore di salute predefinito che diventa visibile quando i personaggi subiscono danni. Se mantieni visibile il misuratore predefinito, si sovrapporrà e potenzialmente si duplicherà con il 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 individua 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 si unisce a un gioco, 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, StarterGui, che rappresenta lo stesso contenitore in cui hai creato il misuratore di salute personalizzato e i cui contenuti vengono clonati nel contenitore PlayerGui per ogni giocatore che si unisce al gioco.
   4	Chiama il metodo SetCoreGuiEnabled() del servizio e istruisce il misuratore di salute predefinito a essere disabilitato (false).

Se ora provi a giocare al gioco e subisci danni, noterai che il misuratore predefinito è disabilitato e nascosto (programmerai il misuratore personalizzato per riflettere i cambiamenti di salute nella sezione successiva).

Ascolta i cambiamenti 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. I cambiamenti di Health sul server si replicano a ciascun client del giocatore e puoi rilevare questi cambiamenti per aggiornare sia la dimensione che il colore del misuratore di salute personalizzato.

1. Nella finestra Explorer, individua 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 del misuratore
   local playerGui = player:WaitForChild("PlayerGui")
   local meterBarInner = playerGui.HUDContainer.MeterBar.InnerFill
   
   -- Colori della sequenza del 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 del 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 ricade 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 in base alla 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 nuovi obiettivi di dimensione/colore
   	meterBarInner.Size = UDim2.new(healthFraction, 0, 1, 0)
   	meterBarInner.BackgroundColor3 = getColorFromSequence(healthFraction)
   end
   
   -- Ascolta i cambiamenti nella salute dell'umanoide
   humanoid.HealthChanged:Connect(onHealthChanged)
   
   -- Imposta inizialmente (o ripristina) la dimensione/colore della barra alla salute attuale
   onHealthChanged()

   Spiegazione del codice

   Linee	Scopo
   4‑6	Ottiene riferimenti al Player locale, al modello Character e alla classe Humanoid al suo interno.
   9‑10	Ottiene un riferimento all'oggetto InnerFill del misuratore che deve essere ridimensionato e colorato mentre la salute del personaggio cambia.
   13‑19	Dichiara un array di cinque colori (rosso, arancione, giallo, lime, verde) per ricoprire il misuratore in vari punti; ad esempio, verde per il 100% di salute, giallo per il 50%, rosso per il 0%, o una miscela a qualsiasi frazione tra i punti chiave.
   22‑41	Funzione di supporto che restituisce la miscela di colore tra uno qualsiasi dei punti chiave del colore del gradiente.
   43‑50	Funzione che gestisce eventuali cambiamenti nella salute. Qui, calcola la nuova salute come percentuale della MaxHealth del personaggio, ridimensiona InnerFill a quella percentuale di scala e la colora con il colore restituito dalla funzione getColorFromSequence().
   53	La connessione principale all'evento che rileva i cambiamenti di Health replicati dal server e chiama la funzione onHealthChanged().
   56	Inizialmente (al momento della comparsa o del respawn del personaggio) chiama la funzione onHealthChanged() per dimensionare e colorare InnerFill alla percentuale corretta. Tipicamente, questo sarà la larghezza completa e verde.

Se ora provi a giocare al gioco, noterai che il misuratore personalizzato si aggiorna correttamente sia in dimensione che in colore mentre il personaggio subisce danni:

Anima la barra del misuratore

Per aggiungere un ulteriore livello di rifinitura al misuratore personalizzato, puoi animare i cambiamenti di salute attraverso il tweening, cambiando gradualmente la dimensione e il colore della barra del misuratore in ½ secondo.

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

2. Seleziona tutte le righe (CtrlA o ⌘A) e poi incollale sopra (CtrlV o ⌘V) con 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à del tween
   local tweenInfo = TweenInfo.new(0.5, Enum.EasingStyle.Exponential, Enum.EasingDirection.Out)
   
   -- Riferimento al frame interno della barra del misuratore
   local playerGui = player:WaitForChild("PlayerGui")
   local meterBarInner = playerGui.HUDContainer.MeterBar.InnerFill
   
   -- Colori della sequenza del 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 del 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 ricade 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 in base alla 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)
   
   	-- Tween la barra verso nuovi obiettivi di dimensione/colore
   	local tweenGoal = {
   		Size = UDim2.new(healthFraction, 0, 1, 0),
   		BackgroundColor3 = getColorFromSequence(healthFraction)
   	}
   	local meterBarTween = TweenService:Create(meterBarInner, tweenInfo, tweenGoal)
   	meterBarTween:Play()
   end
   
   -- Ascolta i cambiamenti nella salute dell'umanoide
   humanoid.HealthChanged:Connect(onHealthChanged)
   
   -- Imposta inizialmente (o ripristina) la dimensione/colore della barra alla salute attuale
   onHealthChanged()

   Aggiunte/Modifiche chiave

   Linee	Scopo
   2	Ottiene un riferimento a TweenService per implementare la funzionalità di tweening all'interno dello script.
   10	Crea 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 la dimensione e il colore della barra come nella versione precedente, dichiara una tabella tweenGoal con la dimensione/colore target, crea un nuovo tween utilizzando i parametri tweenInfo e tweenGoal, e riproduce il nuovo tween.

Se ora provi a giocare al 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 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 lo script UpdateCustomMeter che hai modificato in precedenza.

2. Seleziona tutte le righe e incollale sopra con 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à del 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 un nuovo) 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 del misuratore
   local playerGui = player:WaitForChild("PlayerGui")
   local meterBarInner = playerGui.HUDContainer.MeterBar.InnerFill
   
   -- Colori della sequenza del 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 del 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 ricade 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 in base alla 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)
   
   	-- Tween la barra verso nuovi obiettivi di dimensione/colore
   	local tweenGoal = {
   		Size = UDim2.new(healthFraction, 0, 1, 0),
   		BackgroundColor3 = getColorFromSequence(healthFraction)
   	}
   	local meterBarTween = TweenService:Create(meterBarInner, tweenInfo, tweenGoal)
   	meterBarTween:Play()
   
   	-- Mostra l'effetto di danno se la nuova salute è inferiore alla salute memorizzata
   	if healthFraction < cachedHealth then
   		-- Memorizza il nuovo valore di salute
   		cachedHealth = healthFraction
   
   		-- Imposta la correzione colore su rosso come sfumatura iniziale prima del tweening
   		colorCorrection.TintColor = Color3.fromRGB(255, 25, 25)
   		colorCorrection.Saturation = 2.5
   
   		-- Tween la sfumatura di nuovo a bianco (neutro e senza cambiamento di sfumatura dal normale)
   		local colorCorrectionTweenGoal = {
   			TintColor = Color3.fromRGB(255, 255, 255),
   			Saturation = 0
   		}
   		local colorCorrectionTween = TweenService:Create(colorCorrection, tweenInfo, colorCorrectionTweenGoal)
   		colorCorrectionTween:Play()
   	end
   end
   
   -- Ascolta i cambiamenti nella salute dell'umanoide
   humanoid.HealthChanged:Connect(onHealthChanged)
   
   -- Imposta inizialmente (o ripristina) la dimensione/colore della barra alla salute attuale
   onHealthChanged()

   Aggiunte/Modifiche chiave

   Linee	Scopo
   14	Imposta un riferimento segnaposto (cachedHealth) per tenere traccia della quantità di salute del personaggio tra i cambiamenti, in modo da poter confrontare se un cambiamento è inferiore (danno).
   17‑18	All'avvio iniziale del personaggio, crea un nuovo ColorCorrectionEffect all'interno della Camera corrente 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 il cambiamento di salute sia inferiore al valore di cachedHealth, indicando danno; se sì, imposta cachedHealth sul nuovo valore. Successivamente, imposta la sfumatura dell'ColorCorrectionEffect su [255, 25, 25] (rosso) con saturazione più alta, quindi tween la sfumatura di nuovo al valore predefinito di bianco neutro ([255, 255, 255]) senza saturazione.

Se ora provi a giocare al gioco, noterai che lo schermo lampeggia brevemente di rosso ogni volta che il personaggio subisce danni: