Criar metros de HUD

Um HUD ou Display de Cabeça-Para-Cabeça é um conjunto de elementos de UI que estão sempre visíveis ou acessíveis durante o jogabilidade, como exibições de pontuação, medidores de saúde e botões de menu.Incluir um HUD é essencial para a maioria das experiências porque ele exibe informações que ajudam os jogadores a ter sucesso em seus objetivos de jogo.

Um elemento comum de HUD é um medidor de saúde com um ícone à esquerda que pode ser adaptado em uma barra de tempo, barra de progresso ou semelhante.

Usando Estação Espacial Perigosa como um local de partida e Fundamentos de UI - Medidor HUD como um local de referência finalizado, este tutorial demonstra:

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

Ativar o Emulador de Dispositivo

O Roblox é intrinsecamente cross-platform, pois os jogadores podem descobrir e se juntar a experiências em um PC ou console, e depois pegar seu telefone e continuar onde desligado.Dispositivos móveis (telefones e tablets) têm a menor quantidade de espaço na tela, por isso é 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 modelo Estação Espacial Perigosa no Studio.

   Editar no Studio

2. Da aba Teste , ative a ferramenta Dispositivo .

   

3. Da barra diretamente acima do campo de visão principal, selecione uma emulação de telefone, como iPhone X ou Samsung Galaxy A51 .Então, defina o tamanho da visualização para Encaixar na janela para utilizar o espaço máximo no Studio.

   

Criar um contêiner de tela

Um contêiner ScreenGui contém objetos de interface de usuário (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 cada jogador que se juntar à experiência, coloque-o dentro do contêiner StarterGui.Quando um jogador se junta e seu personagem é gerado inicialmente, o ScreenGui e seu conteúdo clonam no contêiner PlayerGui para aquele jogador, localizado dentro do contêiner Players.

Para inserir um vazio ScreenGui vazio:

1. Na janela do 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 HUDContainer para refletir seu propósito.

   

Utilize áreas seguras

Telefones modernos aproveitam toda a tela, mas geralmente incluem notas, cortes e outros elementos que ocupam espaço na tela.Cada experiência do Roblox também inclui os controles da barra superior para acesso rápido ao menu principal, chat , tabela de classificação e muito mais.

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

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

1. Na janela Explorer , selecione HUDContainer .

   

2. Na janela Propriedades, defina a propriedade para >.

   

Definir espaço de borda

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

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

1. Insira um modificador UIPadding dentro de HUDContainer .

   

2. Com o novo objeto UIPadding selecionado, insira um valor de 0, 16 para todos os cantos do contêiner ( PaddingBottom , PaddingLeft , PaddingRight , PaddingTop ).Isso se aplica ao acolchoamento de 16 pixels ao redor 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 interface do usuário do Roblox, como quadros e um rótulo de imagem.

Crie o quadro pai

Semelhante ao projeto de aplicações como Figma e Photoshop, um Frame em 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 quadro pai, tornando simples reposicioná-lo em vários layouts do HUD.

1. Insira um Frame dentro de HUDContainer . O novo quadro aparece no canto superior esquerdo como um quadrado branco vazio.

   

   Se o novo quadro não aparecer na janela de visualização, certifique-se de ter ativado sobreposição GUI a partir do widget Opções de Visualização no canto superior direito da janela de visualização 3D ou de ter ativado visibilidade da interface de usuário a partir da aba Visualizar ».

2. Renomeie a nova instância de quadro para MeterBar .

   

Posicione o quadro

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

• Scale valores representam uma porcentagem da tamanho do contêiner ao longo do eixo correspondente, aditivo de qualquer Offset valores.
• Offset valores representam quantos pixels para mover o objeto no eixo correspondente, aditivo de qualquer Scale valores.

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

Além disso, você precisará definir um ponto de âncora superior direito para o quadro pai definir seu ponto de origem.Os valores aceitáveis estão entre e , em relação ao tamanho do Objeto, então um valor de âncora de coloca o ponto de âncora da moldura em seu canto superior direito.

1. Na janela Explorer , selecione o quadro Barra de Medições que você inseriu anteriormente.

   

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

3. Digite 1, 0 para a propriedade AnchorPoint.O quadro agora deve ser posicionado no canto superior direito da área segura do dispositivo , ligeiramente saliente da borda como resultado do preenchimento >.

   

Redimensionar a janela

Como posição, o Size de um objeto de UI é representado por um conjunto de coordenadas UDim2 que contém Scale e Offset valores para ambos os eixos X e Y .

Por padrão, o tamanho do novo quadro é {0, 100},{0, 100} , significando 100 pixels em ambas as larguras ( X ) e alturas ( Y ).Enquanto um valor de pixel rigoroso é útil em alguns casos, muitos elementos de interface de usuário escalam de forma mais responsiva em várias telas quando definidos para um percentagem da tamanho total do contêiner de tela.

1. Com o quadro Barra de Medições 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 de porcentagem de 35% largo e 5% alto sem deslocamentos de pixels adicionados.

   

Estilize o quadro

Por padrão, Frames são preenchidos em 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 ambos os fundos claros e escuros.

1. Com o quadro Barra de Medições selecionado, insira 0 para a propriedade BackgroundColor3.O Studio converterá automaticamente para o valor RGB de .

2. Insira 0.75 para a propriedade BackgroundTransparency.No Roblox, a transparência varia de 0 para totalmente opaca a 1 para totalmente transparente, então 0.75 iguala 25% de opacidade em outras aplicações, como o Figma ou o Photoshop.

   

3. Insira um ObjetoUIStroke poderoso de modificação de UI que adiciona um traço personalizável ao quadro.

   

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

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

   

Para finalizar o estilo do quadro 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 em o quadro Barra de Medições .

   

2. Com o novo selecionado, configure o para .Usar um valor de escala de (50%) em vez de um valor de pixel é especialmente conveniente para a barra de medidor porque garante uma curva totalmente arredondada, não importa quão alta ou larga o recipiente se torne.

   

Crie o preenchimento interno

Agora que a porção de quadro contendo o medidor de saúde está completa, você pode adicionar uma porção de preenchimento interno para representar a saúde variável do personagem .Como só precisa ser uma região preenchida com sólido, um subfilho Frame dentro do quadro pai é adequado.

1. Insira uma criança Frame dentro do quadro Barra de Medições .

2. Renomeie a nova instância de quadro para Preenchimento Interno .

   

3. Com Preenchimento Interno selecionado, defina as seguintes propriedades:

   • AnchorPoint = 0, 0.5 (borde esquerdo e centro vertical)
   • Position = 0, 0, 0.5, 0
   • Size = 1, 0, 1, 0

   Como os filhos de quadros são posicionados e dimensionados em relação ao pai, o uso da escala faz com que o quadro interno preencha a largura e a altura completa do pai, começando a partir da borda esquerda do pai.

   

4. Para combinar a forma de "pílula" da janela pai, insira um adicional UICorner em Preenchimento Interno .

   

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

   

6. Para representar melhor que um medidor completo indica boa saúde, selecione Preenchimento Interno e defina sua propriedade BackgroundColor3 para [0, 225, 50] (em uma tarefa posterior, você vai scriptar essa cor para mudar de acordo com a saúde real).

   

Adicione o ícone

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

1. Insira um ImageLabel dentro do quadro Barra de Medições . Este objeto permite que você aplique um recurso de imagem 2D que foi carregado como um adesivo no Roblox.

2. Renomeie a nova instância de rótulo para Ícone .

   

3. Com Ícone selecionado, defina sua propriedade para >.Enquanto objetos de UI recém-inseridos sempre se sobrepõem a objetos inseridos anteriormente, essa alteração garante que o ícone sempre seja exibido na frente dos elementos de quadro do medidor.

   

4. Localize a propriedade do ícone Image 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 recurso).

   

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

   

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

   • AnchorPoint = 0.5, 0.5 (âncoracentral)
   • 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 geral do quadro MeterBar , limitado a 1:1 pelo UIAspectRatioConstraint )

   

Constraindo o tamanho

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

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

1. Insira um UISizeConstraint dentro do quadro Barra de Medições .

   

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

   

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

Substitua o medidor de saúde padrão

As experiências do Roblox incluem um medidor de saúde padrão que se torna visível quando os personagens recebem dano.Se você manter o medidor padrão visível, ele duplicará e potencialmente substituirá o medidor personalizado.

Desabilite o medidor padrão

Para desativar o medidor de saúde padrão, você usará um script de 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 EsconderMedidor de SaúdePadrão para descrever seu propósito.Scripts dentro de StarterPlayerScripts executam automaticamente quando o jogador local se junta a uma experiência, 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 abre automaticamente em uma nova aba do editor de scripts (se não, clique duas vezes no script na janela Explorer ).

   Cole o seguinte código dentro do script EsconderMedidor de Saúde Padrão :

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

   Explicação de Código

   Linha	Propósito
   1	Obtém uma referência a um serviço de núcleo core, StarterGui, que representa o mesmo contêiner em que você criou o medidor de saúde personalizado e cujo conteúdo é clonado no contêiner PlayerGui para cada jogador que se junta à experiência.
   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 a experiência agora e sofrer dano, você notará que o medidor padrão está desativado e oculto (você vai programar o medidor personalizado para refletir mudanças de saúde na próxima seção).

Monitore 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. Health mudanças 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 AtualizarContadorPersonalizado para descrever seu propósito.Scripts dentro de StarterCharacterScripts executam automaticamente a 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 em cada respawn.

   

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

   AtualizarContador Personalizado
   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 quadro interno da barra de medidor
   local playerGui = player:WaitForChild("PlayerGui")
   local meterBarInner = playerGui.HUDContainer.MeterBar.InnerFill
   
   -- Cores de sequência 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 cor em sequência de gradiente a partir do ponto fracionário
   local function getColorFromSequence(fraction: number): Color3
   	-- Cada cor no gradiente define o começo e/ou fim de uma seção
   	local numSections = #gradient - 1
   
   	-- Cada seção representa uma porção de 1
   	local sectionSize = 1 / numSections
   
   	-- Determine em qual seção a fração solicitada cai
   	local sectionStartIndex = 1 + math.clamp(fraction, 0, 1) // sectionSize
   
   	-- Obtenha as cores no início e no final da seção
   	local sectionColorStart = gradient[sectionStartIndex]
   	local sectionColorEnd = gradient[sectionStartIndex + 1] or sectionColorStart
   
   	-- Normalize 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 começo e o fim com base na fração normalizada
   	return sectionColorStart:Lerp(sectionColorEnd, fractionOfSection)
   end
   
   local function onHealthChanged()
   	-- Calcular nova saúde como porcentagem do máximo
   	local healthFraction = math.max(0, humanoid.Health / humanoid.MaxHealth)
   
   	-- Defina a barra para novos alvos de tamanho/cor
   	meterBarInner.Size = UDim2.new(healthFraction, 0, 1, 0)
   	meterBarInner.BackgroundColor3 = getColorFromSequence(healthFraction)
   end
   
   -- Ouça as mudanças na saúde dos humanóides
   humanoid.HealthChanged:Connect(onHealthChanged)
   
   -- Inicialmente definir (ou redefinir) o tamanho/cor da barra para a saúde atual
   onHealthChanged()

   Explicação de Código

   Linhas	Propósito
   4 ‑ 6	Obtém referências ao local Player , ao seu modelo Character e à classe Humanoid dentro dele.
   9 ‑ 10	Obtém uma referência ao objeto Enchimento Interno do medidor que deve ser redimensionado e recolorido à medida que as alterações na saúde do personagem mudam.
   13 ‑ 19	Declara um array de cinco cores (vermelha, laranja, amarela, limão e 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 de chave.
   22 ‑ 41	Função de auxílio que retorna a mistura de cores entre qualquer um dos pontos de cores degradê.
   43 ‑ 50	Função que lida com quaisquer alterações na saúde.Aqui, ele calcula a nova saúde como uma porcentagem da saúde do personagem MaxHealth, redimensiona Preenchimento Interno para essa porcentagem de escala e recolora-a para a cor retornada da função getColorFromSequence().
   53	A conexão principal de evento que detecta alterações replicadas do servidor e chama a função .
   56	Inicialmente (após o surgimento ou ressurgimento do personagem) chama a função onHealthChanged() para dimensionar e colorir Preenchimento Interno na porcentagem correta.Normalmente, isso será a largura total e verde.

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

Anime a barra de medidor

Para adicionar um nível extra de polonês ao medidor personalizado, você pode animar as alterações de saúde através de transição , alterando gradualmente o tamanho e a cor da barra do medidor por mais de ½ segundo.

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

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

   AtualizarContador Personalizado
   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 de transição
   local tweenInfo = TweenInfo.new(0.5, Enum.EasingStyle.Exponential, Enum.EasingDirection.Out)
   
   -- Referência ao quadro interno da barra de medidor
   local playerGui = player:WaitForChild("PlayerGui")
   local meterBarInner = playerGui.HUDContainer.MeterBar.InnerFill
   
   -- Cores de sequência 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 cor em sequência de gradiente a partir do ponto fracionário
   local function getColorFromSequence(fraction: number): Color3
   	-- Cada cor no gradiente define o começo e/ou fim de uma seção
   	local numSections = #gradient - 1
   
   	-- Cada seção representa uma porção de 1
   	local sectionSize = 1 / numSections
   
   	-- Determine em qual seção a fração solicitada cai
   	local sectionStartIndex = 1 + math.clamp(fraction, 0, 1) // sectionSize
   
   	-- Obtenha as cores no início e no final da seção
   	local sectionColorStart = gradient[sectionStartIndex]
   	local sectionColorEnd = gradient[sectionStartIndex + 1] or sectionColorStart
   
   	-- Normalize 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 começo e o fim com base na fração normalizada
   	return sectionColorStart:Lerp(sectionColorEnd, fractionOfSection)
   end
   
   local function onHealthChanged()
   	-- Calcular nova saúde como porcentagem do máximo
   	local healthFraction = math.max(0, humanoid.Health / humanoid.MaxHealth)
   
   	-- Ajuste a barra para novos alvos de tamanho/cor
   	local tweenGoal = {
   		Size = UDim2.new(healthFraction, 0, 1, 0),
   		BackgroundColor3 = getColorFromSequence(healthFraction)
   	}
   	local meterBarTween = TweenService:Create(meterBarInner, tweenInfo, tweenGoal)
   	meterBarTween:Play()
   end
   
   -- Ouça as mudanças na saúde dos humanóides
   humanoid.HealthChanged:Connect(onHealthChanged)
   
   -- Inicialmente definir (ou redefinir) o tamanho/cor da barra para a saúde atual
   onHealthChanged()

   Adições/Alterações de Chave >

   Linhas	Propósito
   2	Obtém uma referência a TweenService para implementar a funcionalidade de transição dentro do script.
   10	Cria um construtor TweenInfo que define a duração da interseção, estilo de alívio e direção de alívio.
   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/cor alvo, cria uma nova pré-adolescente usando os parâmetros tweenInfo e tweenGoal, e toca a nova interseção.

Se você testar a experiência agora, você notará que os adolescentes metrificados personalizados entre cada mudança na saúde:

Adicione um efeito de dano

O sistema padrão de medidor de saúde inclui um tom vermelho breve e sutil nas bordas da tela quando o personagem é danificado.Por desabilitar o medidor padrão, esse efeito é removido, mas você pode substituí-lo com sua própria implementação.

1. Acesse a aba 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:

   AtualizarContador Personalizado
   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 de transição
   local tweenInfo = TweenInfo.new(0.5, Enum.EasingStyle.Exponential, Enum.EasingDirection.Out)
   
   -- Variável para armazenar/cache a saúde do personagem
   local cachedHealth = humanoid.Health / humanoid.MaxHealth
   
   -- Obter (ou criar novo) efeito de correção de cores dentro da Câmerado jogador
   local colorCorrection = Workspace.CurrentCamera:FindFirstChildWhichIsA("ColorCorrectionEffect") or Instance.new("ColorCorrectionEffect", Workspace.CurrentCamera)
   colorCorrection.Name = "DamageColorEffect"
   
   -- Referência ao quadro interno da barra de medidor
   local playerGui = player:WaitForChild("PlayerGui")
   local meterBarInner = playerGui.HUDContainer.MeterBar.InnerFill
   
   -- Cores de sequência 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 cor em sequência de gradiente a partir do ponto fracionário
   local function getColorFromSequence(fraction: number): Color3
   	-- Cada cor no gradiente define o começo e/ou fim de uma seção
   	local numSections = #gradient - 1
   
   	-- Cada seção representa uma porção de 1
   	local sectionSize = 1 / numSections
   
   	-- Determine em qual seção a fração solicitada cai
   	local sectionStartIndex = 1 + math.clamp(fraction, 0, 1) // sectionSize
   
   	-- Obtenha as cores no início e no final da seção
   	local sectionColorStart = gradient[sectionStartIndex]
   	local sectionColorEnd = gradient[sectionStartIndex + 1] or sectionColorStart
   
   	-- Normalize 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 começo e o fim com base na fração normalizada
   	return sectionColorStart:Lerp(sectionColorEnd, fractionOfSection)
   end
   
   local function onHealthChanged()
   	-- Calcular nova saúde como porcentagem do máximo
   	local healthFraction = math.max(0, humanoid.Health / humanoid.MaxHealth)
   
   	-- Ajuste a barra para novos alvos de tamanho/cor
   	local tweenGoal = {
   		Size = UDim2.new(healthFraction, 0, 1, 0),
   		BackgroundColor3 = getColorFromSequence(healthFraction)
   	}
   	local meterBarTween = TweenService:Create(meterBarInner, tweenInfo, tweenGoal)
   	meterBarTween:Play()
   
   	-- Mostrar efeito de dano se a nova saúde for inferior à saúde armazenada
   	if healthFraction < cachedHealth then
   		-- Armazenar novo valor de saúde
   		cachedHealth = healthFraction
   
   		-- Defina a correção de cores para vermelho como o tom inicial antes de tweening
   		colorCorrection.TintColor = Color3.fromRGB(255, 25, 25)
   		colorCorrection.Saturation = 2.5
   
   		-- Atingir o tom de volta ao branco (neutro e sem mudança de tom de normal)
   		local colorCorrectionTweenGoal = {
   			TintColor = Color3.fromRGB(255, 255, 255),
   			Saturation = 0
   		}
   		local colorCorrectionTween = TweenService:Create(colorCorrection, tweenInfo, colorCorrectionTweenGoal)
   		colorCorrectionTween:Play()
   	end
   end
   
   -- Ouça as mudanças na saúde dos humanóides
   humanoid.HealthChanged:Connect(onHealthChanged)
   
   -- Inicialmente definir (ou redefinir) o tamanho/cor da barra para a saúde atual
   onHealthChanged()

   Adições/alterações de chave >

   Linhas	Propósito
   14	Define uma referência de espaço reservado ( cachedHealth ) para rastrear a quantidade de saúde do personagem entre as alterações, para que você possa comparar se uma alteração é menor (dano).
   17 ‑ 18	No Gerarinicial do personagem, cria um novo ColorCorrectionEffect dentro do player atual Camera, ou obtém uma referência à mesma instância em respawns posteriores.Ao paternar este efeito de pós-processamento para a Câmerado jogador, ele só se aplica à tela local deles, 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 é inferior ao valor cachedHealth , indicando dano; se assim for, define cachedHealth para o novo valor.Em seguida, define o tom para (vermelho) com maior saturação, então tweena o tom de volta para o padrão de branco neutro ( ) sem saturação.

Se você testar a experiência agora, você notará que a tela pisca brevemente em vermelho sempre que o personagem recebe dano: