Crea metri HUD

Un HUD o Heads-Up Display è un insieme di elementi UI che sono sempre visibili o accessibili durante il Partita, come schermi di punteggio, contatori di salute e pulsanti di menu.L'inclusione di un HUD è essenziale per la maggior parte delle esperienze perché visualizza le informazioni che aiutano i giocatori a essere di successo nei loro obiettivi di gioco.

Un elemento HUD comune è un misuratore della salute con un'icona a sinistra che può essere adattato in una barra temporale, barra di progresso o simile.

Usando Stazione spaziale pericolosa come luogo di partenza e Fondamenti di interfaccia utente - HUD Meter come Postodi riferimento finito, questo tutorial dimostra:

• Configurazione e uso dell' Emulatore di dispositivo per testare il tuo design su più schermi emulati.
• Uso di StarterGui come sia un contenitore di progettazione e storage.
• Come posizionare/dimensionare gli elementi dell'interfaccia utente intorno ai controlli e alle isole di Roblox integrati, come la nota della fotocamera sui moderni telefoni.
• Come sostituire il contapassi di salute predefinito di Roblox con il tuo contapassi e collegarlo al Livellodi salute del personaggio.
• Come animare la porzione centrale del misuratore della salute e impostare il suo colore tra cinque punti di grado del colore rosso, arancione, giallo, lime, verde.

Abilita l'emulatore del dispositivo

Roblox è intrinsecamente cross-platform, poiché i giocatori possono scoprire e unirsi alle esperienze su un PC o una console, quindi più tardi prendere il telefono e continuare da dove hanno Off.I dispositivi mobili (telefoni e tablet) hanno la minore quantità di Spaziosullo schermo, quindi è importante che gli elementi dell'interfaccia utente si adattino a schermi più piccoli e che siano chiaramente visibili ai giocatori.

Il modo migliore per testare i progetti di interfaccia utente su più piattaforme è l'emulatore di dispositivo di Studio Device Emulator.Questo strumento fornisce una selezione preimpostata di dispositivi e ti consente di aggiungere i tuoi preset personalizzati.

1. Apri il modello Stazione spaziale pericolosa in Studio.

   Modifica in Studio

2. Dalla scheda Test , attiva lo strumento Dispositivo .

   

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

   

Crea un contenitore di schermo

Un container A ScreenGui contiene oggetti UI ( GuiObjects ) da mostrare sullo schermo di un Giocatore(in questo Tutoriale, l'interezza del misuratore della salute).Per visualizzare un ScreenGui e i suoi oggetti figli a ogni giocatore che si unisce all'esperienza, posizionalo all'interno del contenitore StarterGui.Quando un giocatore si unisce e il suo personaggio viene generato per la prima volta, il ScreenGui e i suoi contenuti si clonano nel contenitore PlayerGui per quel Giocatore, situato all'interno del contenitore Players.

Per inserire un vuoto ScreenGui :

1. Nella finestra Explorer , individua il contenitore StarterGui.

   

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

   

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

   

Utilizzare aree sicure

I telefoni moderni approfittano di tutta la schermata ma in genere includono nottolini, tagli e altri elementi che occupano Spaziosullo schermo.Ogni esperienza Roblox include anche i controlli della barra superiore per l'accesso rapido al menu principale, la chat, la classifica, e altro ancora.

Per garantire che i giocatori possano vedere e accedere a tutta l'interfaccia utente senza ostacoli, Roblox fornisce la proprietà che controlla gli inserimenti dell'area sicura per i contenuti di un .Ogni oggetto UI che posizioni all'interno di un ScreenGui è relativo ai confini dell'inserto.

Mentre il predefinito di CoreUISafeInsets garantisce che tutti gli oggetti dell'interfaccia utente rimangano chiari da Roblox UI e tagli di dispositivi, DeviceSafeInsets può essere una migliore opzione per utilizzare lo Spaziolimitato dello schermo, come illustrato qui sotto.

1. Nella finestra Explorer , seleziona HUDContainer .

   

2. Nella finestra Proprietà, imposta la proprietà ScreenInsets a DeviceSafeInsets.

   

Imposta il riempimento del bordo

Con ScreenInsets impostato su DeviceSafeInsets , il contenuto può ora estendersi direttamente fino all'estremità superiore fisica dello schermo.Tuttavia, una piccola quantità di imbottitura può aiutare a spingere il misuratore della salute (e altri oggetti all'interno del contenitore) leggermente lontano dai bordi dello schermo per un aspetto più pulito e per impedire loro di essere clippati.

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

1. Inserisci un modificatore UIPadding in HUDContainer .

   

2. Con l'oggetto nuovo UIPadding selezionato, inserisci un valore di 0, 16 per tutti i bordi del contenitore ( PaddingBottom , PaddingLeft , PaddingRight , PaddingTop ).Questo si applica all'imbottitura di 16 pixel intorno al contenitore, indipendentemente dalla risoluzione dello schermo.

   

Costruisci il misuratore della salute

Con il contenitore di schermo configurato , puoi iniziare a costruire il misuratore di salute utilizzando oggetti dell'interfaccia utente Roblox come frame e un'etichetta immagine.

Crea il quadro padre

Simile a applicazioni di progettazione come Figma e Photoshop, un Frame in Roblox funge da contenitore per altri oggetti UI.Per questo Tutoriale, l'intero misuratore di salute sarà contenuto in un singolo quadro genitore, rendendo semplice riposizionarlo su diversi layout HUD.

1. Inserisci un Frame HUDContainer . Il nuovo frame appare nell'angolo superiore sinistro come un quadrato bianco vuoto.

   

   Se il nuovo frame non appare nella finestra, assicurati di aver attivato sovrapposizione GUI dal widget Opzioni di visualizzazione nell'angolo in alto a destra della vista 3D, o di aver attivato Visibilità dell'interfaccia utente dalla scheda Visualizza ».

2. Rinomina l'istanza del frame nuovo a MeterBar .

   

Posiziona il frame

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

• Scale i valori rappresentano una percentuale della dimensione del contenitore lungo l'asse corrispondente, additiva di qualsiasi Offset valori.
• Offset i valori rappresentano quante pixel per spostare l'oggetto sull'asse corrispondente, additivi di qualsiasi Scale valori.

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 del pixel dello schermo.Allo stesso modo, un valore di scala Y di 0 (0%) rappresenta l'estremità superiore del container.

Inoltre, dovrai impostare un punto di ancoraggio superiore a destra per il frame padre per definire il suo punto di origine.I valori accettabili sono 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 Proprietà , inserisci 1, 0, 0, 0 per Position e premi Enter .Studio aggiungerà automaticamente i bracci 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 superiore destro dell'area sicura del dispositivo , leggermente incassato dal bordo a causa del riempimento >.

   

Ridimensiona il frame

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

Per impostazione predefinita, la dimensione del nuovo frame è {0, 100},{0, 100} , che significa 100 pixel in entrambi la larghezza ( X ) e l'altezza ( Y ).Mentre un valore pixel rigoroso è utile in alcuni casi, molti elementi dell'interfaccia utente si adattano meglio su più schermi quando impostati a un percentuale del complessivo contenitore dello schermo.

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

2. Inserisci un valore di 0.35, 0, 0.05, 0 per impostare una percentuale di dimensione di 35% larga e 5% alta senza pixel offset aggiunti.

   

Stile del frame

Per impostazione predefinita, Frames sono riempiti in bianco solido.Il misuratore della salute finale dovrebbe avere una riempimento più scuro e leggermente opaco, nonché un contorno scuro, in modo che si distingua meglio su entrambi i sfondi leggeri e scuri.

1. Con il frame MeterBar selezionato, inserisci 0 per la ProprietàBackgroundColor3.Studio lo convertirà automaticamente al valore RGB di .

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

   

3. Inserisci un oggetto UIStroke 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 quadro del contatore, puoi arrotondare gli angoli per formare una forma di "pill" invece di un rettangolo acuto.

1. Inserisci un'istanza UICorner in MeterBar frame.

   

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

   

Crea la riempimento interno

Ora che la parte contenente il frame del misuratore della salute è completa, puoi aggiungere una porzione di riempimento interno inner fill per rappresentare la salute variabile del personaggio.Poiché deve essere solo una regione riempita di solido, un sottocorpo Frame all'interno del quadro padre è adatto.

1. Inserisci un figlio Frame nel frame MeterBar .

2. Rinomina l'istanza del frame nuovo a 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 quadri sono posizionati e dimensionati rispetto al loro parent, l'uso della scala riempie il quadro interno con l'intera larghezza e l'altezza del parent, a partire dall'estremità sinistra del parent.

   

4. Per abbinare la forma della "pill" del quadro padre, inserisci un ulteriore UICorner in InnerFill .

   

5. Con il nuovo modificatore selezionato, imposta la sua proprietà a per corrispondere alla forma "pill" del frame padre MeterBar .

   

6. Per rappresentare meglio il fatto che un contatore pieno indica una buona salute, seleziona Riempiimento interno e imposta la sua proprietà BackgroundColor3 a [0, 225, 50] (in un'altra attività, scriverai script questo colore per cambiare in base alla salute reale).

   

Aggiungi l'Icona

Per indicare più chiaramente lo scopo del misuratore, puoi aggiungere un'etichetta immagine a sinistra, in questo caso un cuore rosso che comunemente simboleggia la salute o la vita.

1. Inserisci un ImageLabel nel frame MeterBar . Questo oggetto ti consente di applicare un'immagine 2D che è stata caricata come decalcomania su Roblox.

2. Rinomina l'istanza della nuova etichetta a Icon .

   

3. Con Icone selezionata, imposta la sua proprietà ZIndex a 2.Mentre gli oggetti UI appena inseriti vengono sempre inseriti prima degli oggetti inseriti in precedenza, questo cambiamento garantisce che l'icona venga sempre visualizzata davanti agli elementi del frame del contatore.

   

4. Individua la proprietà dell'IconaImage e inserisci rbxassetid://91715286435585 , il riferimento a un'immagine del cuore pre‑caricata (se lo desideri, puoi importare la tua immagine e utilizzare il suo ID risorsa).

   

5. Per garantire che l'icona ImageLabel rimanga sempre a una proporzione 1:1, inserisci un UIAspectRatioConstraint.Sebbene questa restrizione abbia proprietà personalizzabili per controllare la proporzione aspetto, puoi lasciare i suoi valori predefiniti intatti.

   

6. Con Icone selezionata, 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 , limitata a 1:1 dal UIAspectRatioConstraint )

   

Limitare la dimensione

Mentre un'altezza di scala di 0.05 (5%) di 5% sembra buona su schermi moderni di telefono e monitor da gioco che hanno una proporzione di aspetto di 16:9 o più ampia, il misuratore può sembrare leggermente troppo alto sugli schermi di tablet e telefoni più vecchi.Puoi controllarlo emulando un tablet come iPad 7a generazione dal Emulatore di dispositivi .

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

1. Inserisci un UISizeConstraint nel frame MeterBar .

   

2. Con la nuova restrizione selezionata, imposta la sua proprietà MaxSize property a inf, 20 per limitare l'altezza a 20 pixel mentre si applica nessuna restrizione di larghezza.

   

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

Sostituisci il misuratore di salute predefinito

Le esperienze di Roblox includono un contapassi della salute predefinito che diventa visibile quando i personaggi subiscono danni.Se mantieni il contatore predefinito visibile, duplicherà e potrebbe sovrapporsi al contatore personalizzato.

Disabilita il contatore predefinito

Per disabilitare il contapassi della salute predefinito, utilizzerai uno script cliente () entro () che chiama () .

1. Nella finestra Explorer , espandi il contenitore StarterPlayer e individua il contenitore StarterPlayerScripts all'interno.

   

2. Inserisci un nuovo LocalScript nel contenitore e rinominalo in HideDefaultHealthMeter per descrivere il suo scopo.Gli script entro StarterPlayerScripts vengono eseguiti automaticamente quando il giocatore locale si unisce a un'esperienza, rendendolo un contenitore ideale per eseguire uno script che nasconde permanentemente il contapassi predefinito.

   

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

   Incolla il seguente codice all'interno dello script HideDefaultHealthMeter :

   Nascondi il contapassi della salute predefinita
   local StarterGui = game:GetService("StarterGui")
   
   -- Nascondi il contapassi della salute predefinito
   StarterGui:SetCoreGuiEnabled(Enum.CoreGuiType.Health, false)

   Spiegazione del codice

   Linea	Scopo
   1	Ottiene un riferimento a un servizio di base core, StarterGui, che rappresenta lo stesso contenitore in cui hai creato il contapassi di salute personalizzato e il cui contenuto viene clonato nel contenitore PlayerGui per ogni giocatore che si unisce all'esperienza.
   4	Chiama il metodo SetCoreGuiEnabled() del servizio e istruisce il misuratore di salute predefinito a essere disabilitato ( false ).

Se giochi l'esperienza ora e subisci danni, noterai che il contatore predefinito è disabilitato e nascosto (scriverai il contatore personalizzato per riflettere le modifiche alla salute nella sezione successiva).

Ascolta i cambiamenti di salute

Tutti i modelli di personaggio Roblox predefiniti contengono una classe Humanoid che fornisce comportamenti e funzionalità speciali al personaggio, come la regolazione della sua velocità di camminata/corsa e la gestione della sua salute.Health modifiche sul server replica ai client di ciascun Giocatoree puoi rilevare queste modifiche per aggiornare sia la dimensione che il colore del contapassi della salute personalizzata.

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

   

2. Inserisci un nuovo LocalScript nel contenitore e rinominalo in UpdateCustomMeter per descrivere il suo scopo.Gli script entro StarterCharacterScripts vengono eseguiti automaticamente ogni volta che il personaggio del Giocatoresi genera, rendendolo un contenitore ideale per eseguire uno script che ripristina completamente il misuratore della salute ad ogni respawn.

   

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

   AggiornaCustomMeter
   local Players = game:GetService("Players")
   
   -- Riferimento al Giocatorelocale, al personaggio e all'umanoide
   local player = Players.LocalPlayer
   local character = player.Character
   local humanoid = character:WaitForChild("Humanoid")
   
   -- Riferimento al telaio interno della barra del misuratore
   local playerGui = player:WaitForChild("PlayerGui")
   local meterBarInner = playerGui.HUDContainer.MeterBar.InnerFill
   
   -- Colori della sequenza 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 in sequenza gradiente dal punto frazionale
   local function getColorFromSequence(fraction: number): Color3
   	-- Ogni colore in 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 quale sezione la frazione richiesta appartiene
   	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 a 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 degli umanoidi
   humanoid.HealthChanged:Connect(onHealthChanged)
   
   -- Inizialmente impostare (o Ripristina) la dimensione/il colore della barra a quello attuale della salute
   onHealthChanged()

   Spiegazione del codice

   Linee	Scopo
   4 ‑ 6	Ottiene riferimenti al locale Player , al loro modello Character e alla classe Humanoid all'interno.
   9 ‑ 10	Ottiene un riferimento all'oggetto InerFill del contatore che deve essere ridimensionato e ricolorato come le modifiche alla salute del personaggio.
   13 ‑ 19	Dichiara un array di cinque colori (rosso, arancione, giallo, lime, verde) per colorare il misuratore a diversi punti; ad esempio, verde per il 100% di salute, giallo per il 50%, rosso per 0%, o una miscela a qualsiasi frazione tra i punti chiave.
   22 ‑ 41	Funzione ausiliaria che restituisce il mix di colori tra qualsiasi punto di colore gradiente.
   43 ‑ 50	Funzione che gestisce qualsiasi modifica alla salute.Qui, calcola la nuova salute come percentuale del carattere di MaxHealth, ridimensiona InnerFill a quella percentuale di scala e lo ricolora al colore restituito dalla funzione getColorFromSequence().
   53	La connessione principale evento che rileva Health replicate dal server e chiama la funzione onHealthChanged().
   56	Inizialmente (al momento della generazione o del respawn del personaggio) chiama la funzione onHealthChanged() per ridimensionare e colorare InnerFill nella percentuale corretta.Tipicamente questo sarà l'intera larghezza e verde.

Se giochi l'esperienza ora, noterai che il metro personalizzato aggiorna correttamente sia la dimensione che il colore mentre il personaggio subisce danni:

Animare la barra del misuratore

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

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

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

   AggiornaCustomMeter
   local Players = game:GetService("Players")
   local TweenService = game:GetService("TweenService")
   
   -- Riferimento al Giocatorelocale, 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 telaio interno della barra del misuratore
   local playerGui = player:WaitForChild("PlayerGui")
   local meterBarInner = playerGui.HUDContainer.MeterBar.InnerFill
   
   -- Colori della sequenza 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 in sequenza gradiente dal punto frazionale
   local function getColorFromSequence(fraction: number): Color3
   	-- Ogni colore in 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 quale sezione la frazione richiesta appartiene
   	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 a 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)
   
   	-- Ridimensiona 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 degli umanoidi
   humanoid.HealthChanged:Connect(onHealthChanged)
   
   -- Inizialmente impostare (o Ripristina) la dimensione/il colore della barra a quello attuale della salute
   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 che definisce la durata del gemellatiprevisto, lo stile di alleggerimento e la direzione di alleggerimento .
   52 ‑ 57	Invece di semplicemente impostare la dimensione e il colore della barra come nella versione precedente, dichiara una tabella tweenGoal con la dimensione/colore target, crea una nuova transizione utilizzando i parametri tweenInfo e tweenGoal, e riproduce la nuova gemellati.

Se giochi l'esperienza ora, noterai che i teenager del metro personalizzato tra ogni cambiamento della salute:

Aggiungi un effetto di danno

Il sistema di misurazione della salute predefinito include una breve e sottile tinta rossa sugli bordi dello schermo quando il personaggio è danneggiato.Disabilitando il contatore predefinito di , questo effetto viene rimosso, ma puoi sostituirlo con la tua implementazione.

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

2. Seleziona tutte le linee e pasta sopra di esse con il seguente codice:

   AggiornaCustomMeter
   local Workspace = game:GetService("Workspace")
   local Players = game:GetService("Players")
   local TweenService = game:GetService("TweenService")
   
   -- Riferimento al Giocatorelocale, 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 archiviare/cached la salute del personaggio
   local cachedHealth = humanoid.Health / humanoid.MaxHealth
   
   -- Ottieni (o crea un nuovo) effetto di correzione del colore all'interno della Telecameradel giocatore
   local colorCorrection = Workspace.CurrentCamera:FindFirstChildWhichIsA("ColorCorrectionEffect") or Instance.new("ColorCorrectionEffect", Workspace.CurrentCamera)
   colorCorrection.Name = "DamageColorEffect"
   
   -- Riferimento al telaio interno della barra del misuratore
   local playerGui = player:WaitForChild("PlayerGui")
   local meterBarInner = playerGui.HUDContainer.MeterBar.InnerFill
   
   -- Colori della sequenza 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 in sequenza gradiente dal punto frazionale
   local function getColorFromSequence(fraction: number): Color3
   	-- Ogni colore in 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 quale sezione la frazione richiesta appartiene
   	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 a 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)
   
   	-- Ridimensiona 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 danno se la nuova salute è inferiore alla salute memorizzata
   	if healthFraction < cachedHealth then
   		-- Memoria nuovo valore della salute
   		cachedHealth = healthFraction
   
   		-- Imposta la correzione del colore a rosso come tinta iniziale prima del tweening
   		colorCorrection.TintColor = Color3.fromRGB(255, 25, 25)
   		colorCorrection.Saturation = 2.5
   
   		-- Ritorna il tint al bianco (neutrale e senza cambiamento di tinta rispetto al 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 degli umanoidi
   humanoid.HealthChanged:Connect(onHealthChanged)
   
   -- Inizialmente impostare (o Ripristina) la dimensione/il colore della barra a quello attuale della salute
   onHealthChanged()

   Aggiunte/modifiche chiave

   Linee	Scopo
   14	Imposta un riferimento placeholder ( cachedHealth ) per tracciare l'importo della salute del personaggio tra le modifiche, in modo da poter confrontare se una modifica è inferiore (danni).
   17 ‑ 18	Durante lo Rigeneraredel personaggio iniziale, crea un nuovo ColorCorrectionEffect all'interno dell'attuale Camera del Giocatoreo ottiene un riferimento allo stesso istanza in respawn successivi.Dando in pasto questo effetto di post-elaborazione alla Telecameradel Giocatore, si applica solo alla sua schermata locale, non a ogni schermata del Giocatoresul Server.
   68 ‑ 83	Per prima cosa esegue un controllo condizionale per confermare che il cambiamento della salute è inferiore al valore cachedHealth , indicando danni; se è così, imposta cachedHealth al nuovo valore.Successivamente, imposta il tint ColorCorrectionEffect a [255, 25, 25] (rosso) con una saturazione maggiore, quindi tweens il tint torna al predefinito di bianco neutro ( [255, 255, 255] ) senza saturazione.

Se giochi l'esperienza ora, noterai che lo schermo lampeggia brevemente in rosso ogni volta che il personaggio subisce danni: