Crea metri HUD

*Questo contenuto è tradotto usando AI (Beta) e potrebbe contenere errori. Per visualizzare questa pagina in inglese, clicca qui.

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.

In-game view showing custom health meter in upper-right region.

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.

  2. Dalla scheda Test , attiva lo strumento Dispositivo .

    Device button indicated in Test tab
  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.

    Device Emulator settings options indicated at top of viewport window.

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.

Diagram of how a ScreenGui clones from StarterGui to a player's PlayerGui

Per inserire un vuoto ScreenGui :

  1. Nella finestra Explorer , individua il contenitore StarterGui.

    Explorer window showing the StarterGui container.
  2. Passa il mouse sul contenitore, clicca il pulsante ⊕ e inserisci un ScreenGui .

    ScreenGui inserted into the StarterGui container.
  3. Rinomina il nuovo container HUDContainer per riflettere il suo scopo.

    ScreenGui renamed to HUDContainer.

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.

Mobile device showing Roblox top bar buttons and device cutout.

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.

Mobile device showing the core UI safe area.

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.

ScreenInsets set to CoreUISafeInsets.
  1. Nella finestra Explorer , seleziona HUDContainer .

    Explorer window showing the HUDContainer selected.
  2. Nella finestra Proprietà, imposta la proprietà ScreenInsets a DeviceSafeInsets.

    ScreenInsets set to DeviceSafeInsets in the Properties window.

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.

Screen container with padding around all edges.

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

  1. Inserisci un modificatore UIPadding in HUDContainer .

    HUDContainer with UIPadding modifier inserted.
  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.

    Properties window showing the UIPadding modifier with 0, 16 set for all edges.

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.

Basic components used for the health meter.

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.

    New frame in viewport.
  2. Rinomina l'istanza del frame nuovo a MeterBar .

    New frame inserted and renamed to 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.

Scale ranges for the X and Y axes of a 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.

Frame anchor point in its upper-right corner.
  1. Nella finestra Explorer , seleziona il frame MeterBar che hai inserito in precedenza.

    Explorer window showing the MeterBar frame selected.
  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 >.

    Frame repositioned in upper-right corner of container.

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.

    Frame resized to 35% wide and 5% tall.

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.

Frame styled with opacity, border, and rounded corners.
  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.

    Frame restyled with dark background and 25% opacity.
  3. Inserisci un oggetto UIStroke potente modificatore UI che aggiunge un tratto personalizzabile al frame.

    Explorer window showing the MeterBar frame with a child UIStroke modifier.
  4. Con il nuovo UIStroke selezionato, imposta le seguenti proprietà:

    Frame restyled with a UIStroke modifier.

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.

    Explorer window showing the MeterBar frame with a child UICorner modifier.
  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.

    Frame corners rounded with a UICorner modifier.

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.

Inner fill frame added to parent frame to represent the character's variable health.
  1. Inserisci un figlio Frame nel frame MeterBar .

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

    Explorer window showing the parent MeterBar frame with a child frame named InnerFill.
  3. Con InnerFill selezionato, imposta le seguenti proprietà:

    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.

    Inner fill frame repositioned and resized to fill entire parent frame.
  4. Per abbinare la forma della "pill" del quadro padre, inserisci un ulteriore UICorner in InnerFill .

    Explorer window showing the InnerFill frame with a child UICorner modifier.
  5. Con il nuovo modificatore selezionato, imposta la sua proprietà a per corrispondere alla forma "pill" del frame padre MeterBar .

    Inner fill frame corners rounded with a UICorner modifier.
  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).

    Inner fill frame recolored green to represent good health.

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.

Image label of heart added to more clearly indicate a health meter.
  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 .

    Explorer window showing the MeterBar frame with a child ImageLabel.
  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.

    Properties window showing the ZIndex of the ImageLabel set to 2.
  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).

    Image label of heart added to MeterBar frame.
  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.

    Explorer window showing the ImageLabel with a child UIAspectRatioConstraint.
  6. Con Icone selezionata, finalizza l'aspetto e la posizione modificando le seguenti proprietà:

    Image label of heart repositioned and resized with background fill made transparent.

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 .

Device Emulator set to emulate a tablet device. Emulation on tablet device with meter bar taller than desired.

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 .

    Explorer window showing the MeterBar frame with a child UISizeConstraint.
  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.

    Properties window showing the MaxSize of the UISizeConstraint set to inf, 20.

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

Emulation on phone.

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.

Default health meter overlapping and duplicating the custom health meter.

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.

    Explorer window showing the StarterPlayerScripts container inside the StarterPlayer container.
  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.

    Explorer window showing the new HideDefaultHealthMeter client script inside the StarterPlayerScripts container.
  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)
    LineaScopo
    1Ottiene 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.
    4Chiama 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).

Default health meter disabled.

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 .

    Explorer window showing the StarterCharacterScripts container inside the StarterPlayer container.
  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.

    Explorer window showing the new UpdateCustomMeter client script inside the StarterCharacterScripts container.
  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()
    LineeScopo
    46Ottiene riferimenti al locale Player , al loro modello Character e alla classe Humanoid all'interno.
    910Ottiene un riferimento all'oggetto InerFill del contatore che deve essere ridimensionato e ricolorato come le modifiche alla salute del personaggio.
    1319Dichiara 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.
    2241Funzione ausiliaria che restituisce il mix di colori tra qualsiasi punto di colore gradiente.
    4350Funzione 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().
    53La connessione principale evento che rileva Health replicate dal server e chiama la funzione onHealthChanged().
    56Inizialmente (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()
    LineeScopo
    2Ottiene un riferimento a TweenService per implementare la funzionalità di tweening all'interno dello script.
    10Crea un costruttore che definisce la durata del gemellatiprevisto, lo stile di alleggerimento e la direzione di alleggerimento .
    5257Invece 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()
    LineeScopo
    14Imposta 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).
    1718Durante 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.
    6883Per 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: