Criar medidores HUD

Um HUD ou Heads-Up Display é um conjunto de elementos de UI que estão sempre visíveis ou acessíveis durante o jogo, como exibições de pontuação, medidores de saúde e botões de menu. Incluir um HUD é essencial para a maioria dos jogos, pois exibe informações que ajudam os jogadores a serem bem-sucedidos em seus objetivos de jogo.

Um elemento comum do HUD é um medidor de saúde com um ícone à esquerda, que pode ser adaptado para uma barra de temporizador, barra de progresso ou similar.

Usando Hazardous Space Station como ponto de partida e Fundamentos de UI - Medidor HUD como referência final, este tutorial demonstra:

• Configuração e uso do Emulador de Dispositivo para testar seu design em várias telas emuladas.
• Uso de StarterGui como um contêiner de design e armazenamento.
• Como posicionar/tamanho os elementos de UI em torno dos controles integrados do Roblox e entalhes/ilhas de dispositivos, como o entalhe da câmera em telefones modernos.
• Como substituir o medidor de saúde padrão do Roblox pelo seu próprio medidor e conectá-lo ao nível de saúde do personagem.
• Como animar a parte central do medidor de saúde e definir sua cor entre cinco pontos-chave de gradiente de cor (vermelho, laranja, amarelo, limão, verde).

Ativar o Emulador de Dispositivo

O Roblox é inerentemente multiplataforma, pois os jogadores podem descobrir e entrar em jogos em seus telefones ou tablets e, em seguida, continuar de onde pararam em seu PC ou console. Dispositivos móveis (telefones e tablets) têm a menor quantidade de espaço na tela, portanto, é importante que seus elementos de UI se encaixem em telas menores e que sejam claramente visíveis para os jogadores.

A melhor maneira de testar designs de UI em várias plataformas é o Emulador de Dispositivo do Studio. Esta ferramenta fornece uma seleção predefinida de dispositivos e permite que você adicione suas próprias predefinições personalizadas.

1. Abra o template Hazardous Space Station no Studio.

2. No menu Testar do Studio, ative o Emulador de Dispositivo.

3. Na barra logo acima da área de visualização principal, selecione uma emulação de telefone, como iPhone X ou Samsung Galaxy A51. Em seguida, defina o tamanho da visualização para Ajustar à Janela para utilizar o máximo de espaço no Studio.

   

Criar um contêiner de tela

Um contêiner ScreenGui contém objetos de UI (GuiObjects) para exibir na tela de um jogador (neste tutorial, a totalidade do medidor de saúde). Para exibir um ScreenGui e seus objetos filhos para todos os jogadores que entram no jogo, coloque-o dentro do contêiner StarterGui. Quando um jogador entra e seu personagem aparece pela primeira vez, o ScreenGui e seu conteúdo são clonados no contêiner PlayerGui para aquele jogador, localizado dentro do contêiner Players.

Para inserir um ScreenGui vazio:

1. Na janela Explorer, localize o contêiner StarterGui.

   

2. Passe o mouse sobre o contêiner, clique no botão ⊕ e insira um ScreenGui.

   

3. Renomeie o novo contêiner para HUDContainer para refletir seu propósito.

   

Utilizar áreas seguras

Os telefones modernos aproveitam toda a tela, mas normalmente incluem entalhes, recortes e outros elementos que ocupam espaço na tela. Todo jogo Roblox também inclui os controles da barra superior para acesso rápido ao menu principal, chat, placar e mais.

Para garantir que os jogadores possam ver e acessar toda a UI sem obstruções, o Roblox fornece a propriedade ScreenInsets, que controla os insets da área segura para o conteúdo de um ScreenGui. Cada objeto de UI que você posiciona dentro de um ScreenGui é relativo aos limites do inset.

Enquanto o padrão de CoreUISafeInsets garante que todos os objetos de UI permaneçam livres de UI do Roblox e recortes de dispositivos, DeviceSafeInsets pode ser uma opção melhor para utilizar o espaço limitado da tela, como ilustrado abaixo.

1. Na janela Explorer, selecione HUDContainer.

   

2. Na janela Propriedades, defina a propriedade ScreenInsets para DeviceSafeInsets.

   

Definir preenchimento nas bordas

Com ScreenInsets definido como DeviceSafeInsets, o conteúdo agora pode se estender diretamente até a borda superior física da tela. No entanto, uma pequena quantidade de preenchimento pode ajudar a afastar o medidor de saúde (e outros objetos dentro do contêiner) ligeiramente das bordas da tela para uma aparência mais limpa e para evitar que sejam cortados.

Uma maneira de aplicar preenchimento a um contêiner de UI é através da inserção de um modificador UIPadding:

1. Insira um modificador UIPadding em HUDContainer.

   

2. Com o novo objeto UIPadding selecionado, insira um valor de 0, 16 para todas as bordas do contêiner (PaddingBottom, PaddingLeft, PaddingRight, PaddingTop). Isso aplica um preenchimento de 16 pixels em toda a volta do contêiner, independentemente da resolução da tela.

   

Construir o medidor de saúde

Com o contêiner de tela configurado, você pode começar a construir o medidor de saúde usando objetos de UI do Roblox, como frames e um rótulo de imagem.

Criar o frame pai

Semelhante a aplicativos de design como Figma e Photoshop, um Frame no Roblox serve como um contêiner para outros objetos de UI. Para este tutorial, todo o medidor de saúde será contido em um único frame pai, facilitando o reposicionamento em vários layouts de HUD.

1. Insira um Frame em HUDContainer. O novo frame aparece no canto superior esquerdo como um quadrado branco vazio.

   

   Se o novo frame não aparecer na área de visualização, certifique-se de que você ativou sobreposição de GUI no widget de Opções de Visualização no canto superior direito da área de visualização 3D.

2. Renomeie a nova instância do frame para MeterBar.

   

Posicionar o frame

No Roblox, a posição de um objeto de UI é representada por um conjunto de coordenadas UDim2 contendo valores Scale e Offset para os eixos X e Y:

• Os valores Scale representam uma porcentagem do tamanho do contêiner ao longo do eixo correspondente, aditivo de quaisquer valores Offset.
• Os valores Offset representam quantos pixels deslocar o objeto no eixo correspondente, aditivo de quaisquer valores Scale.

Para posicionar um objeto de UI no canto superior direito do contêiner de tela, Scale é a melhor abordagem, pois um valor X de 1 (100%) representa a borda direita do contêiner, independentemente do tamanho físico em pixels da tela. Da mesma forma, um valor de escala Y de 0 (0%) representa a borda superior do contêiner.

Além disso, você precisará definir um ponto de ancoragem superior direita para o frame pai para definir seu ponto de origem. Valores aceitáveis estão entre 0 e 1, relativos ao tamanho do objeto, então um valor de ancoragem de 1, 0 coloca o ponto de ancoragem do frame em seu canto superior direito.

1. Na janela Explorer, selecione o frame MeterBar que você inseriu anteriormente.

   

2. Na janela Propriedades, insira 1, 0, 0, 0 para Position e pressione Enter. O Studio adicionará automaticamente os colchetes para formar o UDim2 de {1, 0},{0, 0}.

3. Insira 1, 0 para a propriedade AnchorPoint. O frame agora deve estar posicionado no canto superior direito da área segura do dispositivo, ligeiramente afastado da borda como resultado do preenchimento.

   

Redimensionar o frame

Assim como a posição, o Size de um objeto de UI é representado por um conjunto de coordenadas UDim2 contendo valores Scale e Offset para os eixos X e Y.

Por padrão, o tamanho do novo frame é {0, 100},{0, 100}, significando 100 pixels tanto de largura (X) quanto de altura (Y). Embora um valor de pixel estrito seja útil em certos casos, muitos elementos de UI escalam de forma mais responsiva em várias telas quando definidos como uma porcentagem do tamanho total do contêiner de tela.

1. Com o frame MeterBar selecionado, acesse a janela Propriedades e navegue até a propriedade Size.

2. Insira um valor de 0.35, 0, 0.05, 0 para definir um tamanho percentual de 35% de largura e 5% de altura, sem offsets de pixel adicionais.

   

Estilizar o frame

Por padrão, Frames são preenchidos com branco sólido. O medidor de saúde final deve ter um preenchimento mais escuro e ligeiramente opaco, bem como um contorno escuro, para que se destaque melhor em fundos claros e escuros.

1. Com o frame MeterBar selecionado, insira 0 para a propriedade BackgroundColor3. O Studio converterá automaticamente para o valor RGB de [0, 0, 0].

2. Insira 0.75 para a propriedade BackgroundTransparency. No Roblox, a transparência varia de 0 para totalmente opaco a 1 para totalmente transparente, então 0.75 equivale a 25% de opacidade em outros aplicativos, como Figma ou Photoshop.

   

3. Insira um objeto UIStroke, um poderoso modificador de UI que adiciona um contorno personalizável ao frame.

   

4. Com o novo UIStroke selecionado, defina as seguintes propriedades:

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

   

Para finalizar o estilo do frame do medidor, você pode arredondar os cantos para formar uma forma de "pílula" em vez de um retângulo afiado.

1. Insira uma instância UICorner no frame MeterBar.

   

2. Com o novo modificador UICorner selecionado, defina o CornerRadius para 0.5, 0. Usar um valor de escala de 0.5 (50%) em vez de um valor em pixels é especialmente conveniente para a barra do medidor, pois garante uma curva totalmente arredondada, não importa quão alta ou larga a contêiner se torne.

   

Criar o preenchimento interno

Agora que o frame que contém o medidor de saúde está completo, você pode adicionar uma parte de preenchimento interno para representar a saúde variável do personagem. Como precisa ser apenas uma região preenchida sólida, um Frame filho dentro do frame pai é adequado.

1. Insira um Frame filho no frame MeterBar.

2. Renomeie a nova instância do frame para InnerFill.

   

3. Com InnerFill selecionado, defina as seguintes propriedades:

   • AnchorPoint = 0, 0.5 (borda esquerda e centro vertical)
   • Position = 0, 0, 0.5, 0
   • Size = 1, 0, 1, 0

   Como os filhos dos frames são posicionados e dimensionados em relação ao seu pai, o uso de escala faz com que o frame interno preencha toda a largura e altura do pai, começando pela borda esquerda do pai.

   

4. Para combinar com a forma de "pílula" do frame pai, insira um UICorner adicional em InnerFill.

   

5. Com o novo modificador UICorner selecionado, defina sua propriedade CornerRadius para 0.5, 0 para combinar com a forma de "pílula" do frame pai MeterBar.

   

6. Para representar melhor que um medidor cheio indica boa saúde, selecione InnerFill e defina sua propriedade BackgroundColor3 para [0, 225, 50] (em uma tarefa posterior, você scriptará essa cor para mudar com base na saúde real).

   

Adicionar o ícone

Para indicar mais claramente o propósito do medidor, você pode adicionar um rótulo de imagem ao lado esquerdo, neste caso, um coração vermelho que comumente simboliza saúde ou vida.

1. Insira um ImageLabel no frame MeterBar. Este objeto permite que você aplique um ativo de imagem 2D que foi carregado como um decalque no Roblox.

2. Renomeie a nova instância do rótulo para Icon.

   

3. Com Icon selecionado, defina sua propriedade ZIndex para 2. Embora objetos de UI recém-inseridos sempre se sobreponham a objetos inseridos anteriormente, essa mudança garante que o ícone sempre seja exibido à frente dos elementos do frame do medidor.

   

4. Localize a propriedade Image do ícone e insira rbxassetid://91715286435585, a referência a uma imagem de coração pré-carregada (se desejar, você pode importar sua própria imagem e usar seu ID de ativo).

   

5. Para garantir que o ícone ImageLabel sempre mantenha uma proporção de aspecto de 1:1, insira um UIAspectRatioConstraint. Embora essa restrição tenha propriedades personalizáveis para controlar a proporção de aspecto, você pode deixar seus valores padrão intactos.

   

6. Com Icon selecionado, finalize a aparência e a posição alterando as seguintes propriedades:

   • AnchorPoint = 0.5, 0.5 (âncora central)
   • BackgroundTransparency = 1 (100% transparente)
   • Position = 0, 0, 0.5, 0 (lado esquerdo do medidor e centro vertical)
   • Size = 2, 0, 2, 0 (200% do tamanho total do frame MeterBar, restringido a 1:1 pelo UIAspectRatioConstraint)

   

Restringir o tamanho

Enquanto uma altura de escala de 0.05 (5%) parece boa em telas de telefones modernos e monitores de jogos que têm uma proporção de aspecto de 16:9 ou mais larga, o medidor pode parecer ligeiramente alto demais em telas de tablet e telefones mais antigos. Você pode verificar isso emulando um tablet como o iPad 7ª Geração no Emulador de Dispositivo.

Para manter a altura da barra do medidor mais consistente com telas mais largas, você pode aplicar um UISizeConstraint para limitar a altura máxima em pixels.

1. Insira um UISizeConstraint no frame MeterBar.

   

2. Com a nova restrição selecionada, defina sua propriedade MaxSize para inf, 20 para restringir sua altura a 20 pixels enquanto não impõe restrição de largura.

   

Agora, a barra do medidor mantém uma altura mais consistente entre telas mais largas e mais altas.

Substituir o medidor de saúde padrão

Os jogos Roblox incluem um medidor de saúde padrão que se torna visível quando os personagens sofrem dano. Se você mantiver o medidor padrão visível, ele se duplicará e potencialmente se sobrepor ao medidor personalizado.

Desativar o medidor padrão

Para desativar o medidor de saúde padrão, você usará um script do cliente (LocalScript) dentro de StarterPlayerScripts que chama StarterGui:SetCoreGuiEnabled().

1. Na janela Explorer, expanda o contêiner StarterPlayer e localize o contêiner StarterPlayerScripts dentro dele.

   

2. Insira um novo LocalScript no contêiner e renomeie-o para HideDefaultHealthMeter para descrever seu propósito. Scripts dentro de StarterPlayerScripts são executados automaticamente quando o jogador local entra em um jogo, tornando-o um contêiner ideal para executar um script que oculta permanentemente o medidor padrão.

   

3. Quando você insere um novo script, ele é aberto automaticamente em uma nova aba do editor de scripts (se não abrir, clique duas vezes no script na janela Explorer).

   Cole o seguinte código dentro do script HideDefaultHealthMeter:

   HideDefaultHealthMeter

   local StarterGui = game:GetService("StarterGui")
   
   -- Ocultar medidor de saúde padrão
   StarterGui:SetCoreGuiEnabled(Enum.CoreGuiType.Health, false)

   Explicação do Código

   Linha	Propósito
   1	Obtém uma referência a um serviço central, StarterGui, que representa o mesmo contêiner onde você criou o medidor de saúde personalizado e cujo conteúdo é clonado no contêiner PlayerGui para cada jogador que entra no jogo.
   4	Chama o método SetCoreGuiEnabled() do serviço e instrui o medidor de saúde padrão a ser desativado (false).

Se você testar o jogo agora e sofrer dano, notará que o medidor padrão está desativado e oculto (você scriptará o medidor personalizado para refletir mudanças de saúde na próxima seção).

Ouvir mudanças de saúde

Todos os modelos de personagem padrão do Roblox contêm uma classe Humanoid que fornece comportamentos e funcionalidades especiais ao personagem, como definir sua velocidade de caminhada/corrida e gerenciar sua saúde. As mudanças em Health no servidor replicam para o cliente de cada jogador e você pode detectar essas mudanças para atualizar tanto o tamanho quanto a cor do medidor de saúde personalizado.

1. Na janela Explorer, localize o contêiner StarterCharacterScripts dentro de StarterPlayer.

   

2. Insira um novo LocalScript no contêiner e renomeie-o para UpdateCustomMeter para descrever seu propósito. Scripts dentro de StarterCharacterScripts são executados automaticamente cada vez que o personagem do jogador aparece, tornando-o um contêiner ideal para executar um script que redefine completamente o medidor de saúde a cada respawn.

   

3. Na janela do editor para o script UpdateCustomMeter, cole o seguinte código:

   UpdateCustomMeter

   local Players = game:GetService("Players")
   
   -- Referência ao jogador local, personagem e humanoide
   local player = Players.LocalPlayer
   local character = player.Character
   local humanoid = character:WaitForChild("Humanoid")
   
   -- Referência ao frame interno da barra do medidor
   local playerGui = player:WaitForChild("PlayerGui")
   local meterBarInner = playerGui.HUDContainer.MeterBar.InnerFill
   
   -- Cores da sequência de gradiente (vermelho, laranja, amarelo, limão, 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)
   }
   
   -- Função para obter a cor na sequência de gradiente a partir de um ponto fracionário
   local function getColorFromSequence(fraction: number): Color3
   	-- Cada cor no gradiente define o início e/ou o fim de uma seção
   	local numSections = #gradient - 1
   
   	-- Cada seção representa uma porção de 1
   	local sectionSize = 1 / numSections
   
   	-- Determina em qual seção a fração solicitada se encontra
   	local sectionStartIndex = 1 + math.clamp(fraction, 0, 1) // sectionSize
   
   	-- Obtém as cores no início e no fim da seção
   	local sectionColorStart = gradient[sectionStartIndex]
   	local sectionColorEnd = gradient[sectionStartIndex + 1] or sectionColorStart
   
   	-- Normaliza a fração para ser um número de 0 a 1 dentro da seção
   	local fractionOfSection = math.clamp(fraction, 0, 1) % sectionSize / sectionSize
   
   	-- Lerp entre o início e o fim com base na fração normalizada
   	return sectionColorStart:Lerp(sectionColorEnd, fractionOfSection)
   end
   
   local function onHealthChanged()
   	-- Calcula a nova saúde como porcentagem do máximo
   	local healthFraction = math.max(0, humanoid.Health / humanoid.MaxHealth)
   
   	-- Define a barra para novos tamanhos/cores
   	meterBarInner.Size = UDim2.new(healthFraction, 0, 1, 0)
   	meterBarInner.BackgroundColor3 = getColorFromSequence(healthFraction)
   end
   
   -- Ouve mudanças na saúde do humanoide
   humanoid.HealthChanged:Connect(onHealthChanged)
   
   -- Inicialmente define (ou redefine) o tamanho/ a cor da barra para a saúde atual
   onHealthChanged()

   Explicação do Código

   Linhas	Propósito
   4‑6	Obtém referências ao Player local, seu modelo Character e à classe Humanoid dentro dele.
   9‑10	Obtém uma referência ao objeto InnerFill do medidor que deve ser redimensionado e recolorido à medida que a saúde do personagem muda.
   13‑19	Declara um array de cinco cores (vermelho, laranja, amarelo, limão, verde) para recolorir o medidor em vários pontos; por exemplo, verde para 100% de saúde, amarelo para 50%, vermelho para 0% ou uma mistura em qualquer fração entre os pontos-chave.
   22‑41	Função auxiliar que retorna a mistura de cor entre qualquer um dos pontos-chave de cor do gradiente.
   43‑50	Função que lida com quaisquer mudanças na saúde. Aqui, calcula a nova saúde como uma porcentagem do MaxHealth do personagem, redimensiona InnerFill para essa porcentagem de escala e a recolore para a cor retornada pela função getColorFromSequence().
   53	A conexão principal de evento que detecta mudanças em Health replicadas do servidor e chama a função onHealthChanged().
   56	Inicialmente (após o spawn ou respawn do personagem) chama a função onHealthChanged() para dimensionar e colorir InnerFill para a porcentagem correta. Normalmente, isso será a largura total e verde.

Se você testar o jogo agora, notará que o medidor personalizado atualiza corretamente tanto o tamanho quanto a cor à medida que o personagem sofre dano:

Animar a barra do medidor

Para adicionar um nível extra de polimento ao medidor personalizado, você pode animar as mudanças de saúde através de tweening, mudando gradualmente o tamanho e a cor da barra do medidor ao longo de ½ segundo.

1. Acesse a aba do editor de scripts para o script UpdateCustomMeter que você editou anteriormente.

2. Selecione todas as linhas (CtrlA ou ⌘A) e, em seguida, cole sobre elas (CtrlV ou ⌘V) com o seguinte código:

   UpdateCustomMeter

   local Players = game:GetService("Players")
   local TweenService = game:GetService("TweenService")
   
   -- Referência ao jogador local, personagem e humanoide
   local player = Players.LocalPlayer
   local character = player.Character
   local humanoid = character:WaitForChild("Humanoid")
   
   -- Propriedades do tween
   local tweenInfo = TweenInfo.new(0.5, Enum.EasingStyle.Exponential, Enum.EasingDirection.Out)
   
   -- Referência ao frame interno da barra do medidor
   local playerGui = player:WaitForChild("PlayerGui")
   local meterBarInner = playerGui.HUDContainer.MeterBar.InnerFill
   
   -- Cores da sequência de gradiente (vermelho, laranja, amarelo, limão, 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)
   }
   
   -- Função para obter a cor na sequência de gradiente a partir de um ponto fracionário
   local function getColorFromSequence(fraction: number): Color3
   	-- Cada cor no gradiente define o início e/ou o fim de uma seção
   	local numSections = #gradient - 1
   
   	-- Cada seção representa uma porção de 1
   	local sectionSize = 1 / numSections
   
   	-- Determina em qual seção a fração solicitada se encontra
   	local sectionStartIndex = 1 + math.clamp(fraction, 0, 1) // sectionSize
   
   	-- Obtém as cores no início e no fim da seção
   	local sectionColorStart = gradient[sectionStartIndex]
   	local sectionColorEnd = gradient[sectionStartIndex + 1] or sectionColorStart
   
   	-- Normaliza a fração para ser um número de 0 a 1 dentro da seção
   	local fractionOfSection = math.clamp(fraction, 0, 1) % sectionSize / sectionSize
   
   	-- Lerp entre o início e o fim com base na fração normalizada
   	return sectionColorStart:Lerp(sectionColorEnd, fractionOfSection)
   end
   
   local function onHealthChanged()
   	-- Calcula nova saúde como porcentagem do máximo
   	local healthFraction = math.max(0, humanoid.Health / humanoid.MaxHealth)
   
   	-- Tween a barra para novos tamanhos/cores
   	local tweenGoal = {
   		Size = UDim2.new(healthFraction, 0, 1, 0),
   		BackgroundColor3 = getColorFromSequence(healthFraction)
   	}
   	local meterBarTween = TweenService:Create(meterBarInner, tweenInfo, tweenGoal)
   	meterBarTween:Play()
   end
   
   -- Ouve mudanças na saúde do humanoide
   humanoid.HealthChanged:Connect(onHealthChanged)
   
   -- Inicialmente define (ou redefine) o tamanho/ a cor da barra para a saúde atual
   onHealthChanged()

   Principais Adições/Mudanças

   Linhas	Propósito
   2	Obtém uma referência ao TweenService para implementar a funcionalidade de tweening dentro do script.
   10	Cria um construtor TweenInfo que define a duração pretendida do tween, estilo de easing e direção de easing.
   52‑57	Em vez de simplesmente definir o tamanho e a cor da barra como na versão anterior, declara uma tabela tweenGoal com o tamanho/ a cor alvo, cria um novo tween usando os parâmetros tweenInfo e tweenGoal e reproduz o novo tween.

Se você testar o jogo agora, notará que o medidor personalizado faz tween entre cada mudança de saúde:

Adicionar um efeito de dano

O sistema de medição de saúde padrão inclui um leve tom vermelho nas bordas da tela quando o personagem é danificado. Ao desativar o medidor padrão, esse efeito é removido, mas você pode substituí-lo por sua própria implementação.

1. Acesse a aba do editor de scripts para o script UpdateCustomMeter que você editou anteriormente.

2. Selecione todas as linhas e cole sobre elas com o seguinte código:

   UpdateCustomMeter

   local Workspace = game:GetService("Workspace")
   local Players = game:GetService("Players")
   local TweenService = game:GetService("TweenService")
   
   -- Referência ao jogador local, personagem e humanoide
   local player = Players.LocalPlayer
   local character = player.Character
   local humanoid = character:WaitForChild("Humanoid")
   
   -- Propriedades do tween
   local tweenInfo = TweenInfo.new(0.5, Enum.EasingStyle.Exponential, Enum.EasingDirection.Out)
   
   -- Variável para armazenar/cachear a saúde do personagem
   local cachedHealth = humanoid.Health / humanoid.MaxHealth
   
   -- Obtém (ou cria nova) correção de cor dentro da câmera do jogador
   local colorCorrection = Workspace.CurrentCamera:FindFirstChildWhichIsA("ColorCorrectionEffect") or Instance.new("ColorCorrectionEffect", Workspace.CurrentCamera)
   colorCorrection.Name = "DamageColorEffect"
   
   -- Referência ao frame interno da barra do medidor
   local playerGui = player:WaitForChild("PlayerGui")
   local meterBarInner = playerGui.HUDContainer.MeterBar.InnerFill
   
   -- Cores da sequência de gradiente (vermelho, laranja, amarelo, limão, 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)
   }
   
   -- Função para obter a cor na sequência de gradiente a partir de um ponto fracionário
   local function getColorFromSequence(fraction: number): Color3
   	-- Cada cor no gradiente define o início e/ou o fim de uma seção
   	local numSections = #gradient - 1
   
   	-- Cada seção representa uma porção de 1
   	local sectionSize = 1 / numSections
   
   	-- Determina em qual seção a fração solicitada se encontra
   	local sectionStartIndex = 1 + math.clamp(fraction, 0, 1) // sectionSize
   
   	-- Obtém as cores no início e no fim da seção
   	local sectionColorStart = gradient[sectionStartIndex]
   	local sectionColorEnd = gradient[sectionStartIndex + 1] or sectionColorStart
   
   	-- Normaliza a fração para ser um número de 0 a 1 dentro da seção
   	local fractionOfSection = math.clamp(fraction, 0, 1) % sectionSize / sectionSize
   
   	-- Lerp entre o início e o fim com base na fração normalizada
   	return sectionColorStart:Lerp(sectionColorEnd, fractionOfSection)
   end
   
   local function onHealthChanged()
   	-- Calcula nova saúde como porcentagem do máximo
   	local healthFraction = math.max(0, humanoid.Health / humanoid.MaxHealth)
   
   	-- Tween a barra para novos tamanhos/cores
   	local tweenGoal = {
   		Size = UDim2.new(healthFraction, 0, 1, 0),
   		BackgroundColor3 = getColorFromSequence(healthFraction)
   	}
   	local meterBarTween = TweenService:Create(meterBarInner, tweenInfo, tweenGoal)
   	meterBarTween:Play()
   
   	-- Mostra efeito de dano se a nova saúde for menor que a saúde cacheada
   	if healthFraction < cachedHealth then
   		-- Cacheia o novo valor de saúde
   		cachedHealth = healthFraction
   
   		-- Define a correção de cor para vermelho como o tom inicial antes do tweening
   		colorCorrection.TintColor = Color3.fromRGB(255, 25, 25)
   		colorCorrection.Saturation = 2.5
   
   		-- Tween o tom de volta para branco (neutro e sem mudança de tom do normal)
   		local colorCorrectionTweenGoal = {
   			TintColor = Color3.fromRGB(255, 255, 255),
   			Saturation = 0
   		}
   		local colorCorrectionTween = TweenService:Create(colorCorrection, tweenInfo, colorCorrectionTweenGoal)
   		colorCorrectionTween:Play()
   	end
   end
   
   -- Ouve mudanças na saúde do humanoide
   humanoid.HealthChanged:Connect(onHealthChanged)
   
   -- Inicialmente define (ou redefine) o tamanho/ a cor da barra para a saúde atual
   onHealthChanged()

   Principais Adições/Mudanças

   Linhas	Propósito
   14	Define uma referência de espaço reservado (cachedHealth) para rastrear a quantidade de saúde do personagem entre as mudanças, para que você possa comparar se uma mudança é menor (dano).
   17‑18	Na inicialização do personagem, cria um novo ColorCorrectionEffect dentro da Camera atual do jogador, ou obtém uma referência à mesma instância em respawns posteriores. Ao parentar esse efeito de pós-processamento à câmera do jogador, ele se aplica apenas à tela local dele, não à tela de todos os jogadores no servidor.
   68‑83	Primeiro realiza uma verificação condicional para confirmar que a mudança de saúde é menor que o valor de cachedHealth, indicando dano; se sim, define cachedHealth para o novo valor. Em seguida, define o tom do ColorCorrectionEffect para [255, 25, 25] (vermelho) com saturação mais alta, e então faz tween do tom de volta para o padrão de branco neutro ([255, 255, 255]) sem saturação.

Se você testar o jogo agora, notará que a tela pisca brevemente de vermelho sempre que o personagem sofre dano: