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.
Apri il modello Stazione spaziale pericolosa in Studio.
Dalla scheda Test , attiva lo strumento Dispositivo .
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 :
Nella finestra Explorer , individua il contenitore StarterGui.
Passa il mouse sul contenitore, clicca il pulsante ⊕ e inserisci un ScreenGui .
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.

Nella finestra Explorer , seleziona HUDContainer .
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 :
Inserisci un modificatore UIPadding in HUDContainer .
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.
Inserisci un Frame HUDContainer . Il nuovo frame appare nell'angolo superiore sinistro come un quadrato bianco vuoto.
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 :


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.

Nella finestra Explorer , seleziona il frame MeterBar che hai inserito in precedenza.
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.
Con il frame MeterBar selezionato, accedi alla finestra Proprietà e naviga alla proprietà Size.
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.

Con il frame MeterBar selezionato, inserisci 0 per la ProprietàBackgroundColor3.Studio lo convertirà automaticamente al valore RGB di .
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.
Inserisci un oggetto UIStroke potente modificatore UI che aggiunge un tratto personalizzabile al frame.
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.
Inserisci un'istanza UICorner in MeterBar frame.
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.

Inserisci un figlio Frame nel frame MeterBar .
Rinomina l'istanza del frame nuovo a InnerFill .
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.
Per abbinare la forma della "pill" del quadro padre, inserisci un ulteriore UICorner in InnerFill .
Con il nuovo modificatore selezionato, imposta la sua proprietà a per corrispondere alla forma "pill" del frame padre MeterBar .
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.

Inserisci un ImageLabel nel frame MeterBar . Questo oggetto ti consente di applicare un'immagine 2D che è stata caricata come decalcomania su Roblox.
Rinomina l'istanza della nuova etichetta a Icon .
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.
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.
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.
Inserisci un UISizeConstraint nel frame MeterBar .
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 () .
Nella finestra Explorer , espandi il contenitore StarterPlayer e individua il contenitore StarterPlayerScripts all'interno.
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.
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 predefinitalocal StarterGui = game:GetService("StarterGui")-- Nascondi il contapassi della salute predefinitoStarterGui:SetCoreGuiEnabled(Enum.CoreGuiType.Health, false)Spiegazione del codiceLinea 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.
Nella finestra Explorer , individua il contenitore StarterCharacterScripts all'interno di StarterPlayer .
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.
Nella finestra dell'editor per lo script UpdateCustomMeter , incolla il seguente codice:
AggiornaCustomMeterlocal Players = game:GetService("Players")-- Riferimento al Giocatorelocale, al personaggio e all'umanoidelocal player = Players.LocalPlayerlocal character = player.Characterlocal humanoid = character:WaitForChild("Humanoid")-- Riferimento al telaio interno della barra del misuratorelocal 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 frazionalelocal function getColorFromSequence(fraction: number): Color3-- Ogni colore in gradiente definisce l'inizio e/o la fine di una sezionelocal numSections = #gradient - 1-- Ogni sezione rappresenta una porzione di 1local sectionSize = 1 / numSections-- Determina quale sezione la frazione richiesta appartienelocal sectionStartIndex = 1 + math.clamp(fraction, 0, 1) // sectionSize-- Ottieni i colori all'inizio e alla fine della sezionelocal sectionColorStart = gradient[sectionStartIndex]local sectionColorEnd = gradient[sectionStartIndex + 1] or sectionColorStart-- Normalizza la frazione a essere un numero da 0 a 1 all'interno della sezionelocal fractionOfSection = math.clamp(fraction, 0, 1) % sectionSize / sectionSize-- Lerp tra inizio e fine in base alla frazione normalizzatareturn sectionColorStart:Lerp(sectionColorEnd, fractionOfSection)endlocal function onHealthChanged()-- Calcola la nuova salute come percentuale del massimolocal healthFraction = math.max(0, humanoid.Health / humanoid.MaxHealth)-- Imposta la barra su nuovi obiettivi di dimensione/coloremeterBarInner.Size = UDim2.new(healthFraction, 0, 1, 0)meterBarInner.BackgroundColor3 = getColorFromSequence(healthFraction)end-- Ascolta i cambiamenti nella salute degli umanoidihumanoid.HealthChanged:Connect(onHealthChanged)-- Inizialmente impostare (o Ripristina) la dimensione/il colore della barra a quello attuale della saluteonHealthChanged()Spiegazione del codiceLinee 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.
Accedi alla scheda editor di script per lo script UpdateCustomMeter che hai modificato in precedenza.
Seleziona tutte le linee ( CtrlA o ⌘A ) e poi incolla sopra di loro ( CtrlV o ⌘V ) con il seguente codice:
AggiornaCustomMeterlocal Players = game:GetService("Players")local TweenService = game:GetService("TweenService")-- Riferimento al Giocatorelocale, al personaggio e all'umanoidelocal player = Players.LocalPlayerlocal character = player.Characterlocal humanoid = character:WaitForChild("Humanoid")-- Proprietà di Tweenlocal tweenInfo = TweenInfo.new(0.5, Enum.EasingStyle.Exponential, Enum.EasingDirection.Out)-- Riferimento al telaio interno della barra del misuratorelocal 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 frazionalelocal function getColorFromSequence(fraction: number): Color3-- Ogni colore in gradiente definisce l'inizio e/o la fine di una sezionelocal numSections = #gradient - 1-- Ogni sezione rappresenta una porzione di 1local sectionSize = 1 / numSections-- Determina quale sezione la frazione richiesta appartienelocal sectionStartIndex = 1 + math.clamp(fraction, 0, 1) // sectionSize-- Ottieni i colori all'inizio e alla fine della sezionelocal sectionColorStart = gradient[sectionStartIndex]local sectionColorEnd = gradient[sectionStartIndex + 1] or sectionColorStart-- Normalizza la frazione a essere un numero da 0 a 1 all'interno della sezionelocal fractionOfSection = math.clamp(fraction, 0, 1) % sectionSize / sectionSize-- Lerp tra inizio e fine in base alla frazione normalizzatareturn sectionColorStart:Lerp(sectionColorEnd, fractionOfSection)endlocal function onHealthChanged()-- Calcola la nuova salute come percentuale del massimolocal healthFraction = math.max(0, humanoid.Health / humanoid.MaxHealth)-- Ridimensiona la barra verso nuovi obiettivi di dimensione/colorelocal 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 umanoidihumanoid.HealthChanged:Connect(onHealthChanged)-- Inizialmente impostare (o Ripristina) la dimensione/il colore della barra a quello attuale della saluteonHealthChanged()Aggiunte/Modifiche chiaveLinee 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.
Accedi alla scheda editor di script per lo script UpdateCustomMeter che hai modificato in precedenza.
Seleziona tutte le linee e pasta sopra di esse con il seguente codice:
AggiornaCustomMeterlocal Workspace = game:GetService("Workspace")local Players = game:GetService("Players")local TweenService = game:GetService("TweenService")-- Riferimento al Giocatorelocale, al personaggio e all'umanoidelocal player = Players.LocalPlayerlocal character = player.Characterlocal humanoid = character:WaitForChild("Humanoid")-- Proprietà di Tweenlocal tweenInfo = TweenInfo.new(0.5, Enum.EasingStyle.Exponential, Enum.EasingDirection.Out)-- Variabile per archiviare/cached la salute del personaggiolocal cachedHealth = humanoid.Health / humanoid.MaxHealth-- Ottieni (o crea un nuovo) effetto di correzione del colore all'interno della Telecameradel giocatorelocal colorCorrection = Workspace.CurrentCamera:FindFirstChildWhichIsA("ColorCorrectionEffect") or Instance.new("ColorCorrectionEffect", Workspace.CurrentCamera)colorCorrection.Name = "DamageColorEffect"-- Riferimento al telaio interno della barra del misuratorelocal 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 frazionalelocal function getColorFromSequence(fraction: number): Color3-- Ogni colore in gradiente definisce l'inizio e/o la fine di una sezionelocal numSections = #gradient - 1-- Ogni sezione rappresenta una porzione di 1local sectionSize = 1 / numSections-- Determina quale sezione la frazione richiesta appartienelocal sectionStartIndex = 1 + math.clamp(fraction, 0, 1) // sectionSize-- Ottieni i colori all'inizio e alla fine della sezionelocal sectionColorStart = gradient[sectionStartIndex]local sectionColorEnd = gradient[sectionStartIndex + 1] or sectionColorStart-- Normalizza la frazione a essere un numero da 0 a 1 all'interno della sezionelocal fractionOfSection = math.clamp(fraction, 0, 1) % sectionSize / sectionSize-- Lerp tra inizio e fine in base alla frazione normalizzatareturn sectionColorStart:Lerp(sectionColorEnd, fractionOfSection)endlocal function onHealthChanged()-- Calcola la nuova salute come percentuale del massimolocal healthFraction = math.max(0, humanoid.Health / humanoid.MaxHealth)-- Ridimensiona la barra verso nuovi obiettivi di dimensione/colorelocal 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 memorizzataif healthFraction < cachedHealth then-- Memoria nuovo valore della salutecachedHealth = healthFraction-- Imposta la correzione del colore a rosso come tinta iniziale prima del tweeningcolorCorrection.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()endend-- Ascolta i cambiamenti nella salute degli umanoidihumanoid.HealthChanged:Connect(onHealthChanged)-- Inizialmente impostare (o Ripristina) la dimensione/il colore della barra a quello attuale della saluteonHealthChanged()Aggiunte/modifiche chiaveLinee 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: