Crear medidores HUD

Un HUD o Display de Pantalla es un conjunto de elementos de interfaz de usuario (UI) que siempre son visibles o accesibles durante el juego, como las pantallas de puntuación, los medidores de salud y los botones del menú. Incluir un HUD es esencial para la mayoría de las experiencias, ya que muestra información que ayuda a los jugadores a tener éxito en sus objetivos de juego.

Un elemento común de HUD es un medidor de salud con un ícono a la izquierda que se puede adaptar a una barra de temporizador, barra de progreso o algo similar.

Usando Hazardous Space Station como punto de partida y Fundamentos de UI - Medidor HUD como referencia final, este tutorial demuestra:

• Configuración y uso del Emulador de Dispositivos para probar tu diseño en múltiples pantallas emuladas.
• Uso de StarterGui como contenedor tanto de diseño como de almacenamiento.
• Cómo posicionar/tamaño los elementos de UI alrededor de los controles integrados de Roblox y las muescas/islas de los dispositivos, como la muesca de la cámara en teléfonos modernos.
• Cómo reemplazar el medidor de salud predeterminado de Roblox con tu propio medidor y conectarlo al nivel de salud del personaje.
• Cómo animar la parte central del medidor de salud y establecer su color entre cinco puntos clave de color en gradiente (rojo, naranja, amarillo, lima, verde).

Habilitar el Emulador de Dispositivos

Roblox es inherentemente multiplataforma, ya que los jugadores pueden descubrir y unirse a experiencias en su teléfono o tableta, y luego continuar donde lo dejaron en su PC o consola. Los dispositivos móviles (teléfonos y tabletas) tienen la menor cantidad de espacio en pantalla, por lo que es importante que los elementos de UI se ajusten a pantallas más pequeñas y que sean claramente visibles para los jugadores.

La mejor manera de probar diseños de UI en múltiples plataformas es el Emulador de Dispositivos de Studio. Esta herramienta proporciona una selección preestablecida de dispositivos y te permite agregar tus propias configuraciones personalizadas.

1. Abre la plantilla de Hazardous Space Station en Studio.

2. Desde el menú Prueba de Studio, activa el Emulador de Dispositivos.

3. Desde la barra directamente encima de la vista principal, selecciona una emulación de teléfono como iPhone X o Samsung Galaxy A51. Luego, establece el tamaño de vista en Ajustar a Ventana para utilizar el máximo espacio en Studio.

   

Crear un contenedor de pantalla

Un contenedor ScreenGui contiene objetos de UI (GuiObjects) para mostrar en la pantalla de un jugador (en este tutorial, la totalidad del medidor de salud). Para mostrar un ScreenGui y sus objetos secundarios a cada jugador que se une a la experiencia, colócalo dentro del contenedor StarterGui. Cuando un jugador se une y su personaje aparece por primera vez, el ScreenGui y su contenido se clonan en el contenedor PlayerGui para ese jugador, ubicado dentro del contenedor Players.

Para insertar un ScreenGui vacío:

1. En la ventana de Explorador, localiza el contenedor StarterGui.

   

2. Pasa el cursor sobre el contenedor, haz clic en el botón ⊕ y inserta un ScreenGui.

   

3. Cambia el nombre del nuevo contenedor a HUDContainer para reflejar su propósito.

   

Utilizar áreas seguras

Los teléfonos modernos aprovechan toda la pantalla, pero normalmente incluyen muescas, recortes y otros elementos que ocupan espacio en la pantalla. Cada experiencia de Roblox también incluye los controles de la barra superior para un acceso rápido al menú principal, chat, tabla de posiciones, y más.

Para asegurar que los jugadores puedan ver y acceder a todos los elementos de UI sin obstrucciones, Roblox proporciona la propiedad ScreenInsets, que controla los márgenes del área segura para el contenido de un ScreenGui. Cada objeto de UI que posiciones dentro de un ScreenGui es relativo a los límites de los márgenes.

Mientras que el valor predeterminado de CoreUISafeInsets asegura que todos los objetos de UI permanezcan claros de la UI de Roblox y los recortes de dispositivos, DeviceSafeInsets puede ser una mejor opción para utilizar el espacio limitado en pantallas, como se ilustra a continuación.

1. En la ventana de Explorador, selecciona HUDContainer.

   

2. En la ventana de Propiedades, establece la propiedad ScreenInsets en DeviceSafeInsets.

   

Establecer margen en los bordes

Con ScreenInsets configurado en DeviceSafeInsets, el contenido ahora puede extenderse directamente hasta el borde superior físico de la pantalla. Sin embargo, una pequeña cantidad de margen puede ayudar a alejar ligeramente el medidor de salud (y otros objetos dentro del contenedor) de los bordes de la pantalla para una apariencia más limpia y evitar que sean recortados.

Una forma de aplicar margen a un contenedor de UI es a través de la inserción de un modificador UIPadding:

1. Inserta un modificador UIPadding en HUDContainer.

   

2. Con el nuevo objeto UIPadding seleccionado, introduce un valor de 0, 16 para todos los bordes del contenedor (PaddingBottom, PaddingLeft, PaddingRight, PaddingTop). Esto aplica un margen de 16 píxeles alrededor del contenedor, independientemente de la resolución de la pantalla.

   

Construir el medidor de salud

Con el contenedor de pantalla configurado, puedes comenzar a construir el medidor de salud usando objetos de UI de Roblox como marcos y una etiqueta de imagen.

Crear el marco padre

Similar a aplicaciones de diseño como Figma y Photoshop, un Frame en Roblox sirve como contenedor para otros objetos de UI. Para este tutorial, el medidor de salud completo estará contenido en un solo marco padre, lo que facilitará su reposicionamiento a través de varios diseños de HUD.

1. Inserta un Frame en HUDContainer. El nuevo marco aparecerá en la esquina superior izquierda como un cuadrado blanco vacío.

   

   Si el nuevo marco no aparece en la vista, asegúrate de haber activado la superposición de GUI desde el widget de Opciones de Visualización en la esquina superior derecha de la vista 3D.

2. Cambia el nombre de la nueva instancia de marco a MeterBar.

   

Posicionar el marco

En Roblox, la posición de un objeto de UI se representa mediante un conjunto de coordenadas UDim2 que contiene valores de Scale y Offset para ambos ejes X y Y:

• Los valores de Scale representan un porcentaje del tamaño del contenedor a lo largo del eje correspondiente, aditivo de cualquier valor de Offset.
• Los valores de Offset representan cuántos píxeles desplazar el objeto en el eje correspondiente, aditivo de cualquier valor de Scale.

Para posicionar un objeto de UI en la esquina superior derecha del contenedor de pantalla, Scale es el mejor enfoque porque un valor de X de 1 (100%) representa el borde derecho del contenedor, independientemente del tamaño físico en píxeles de la pantalla. De manera similar, un valor de escala Y de 0 (0%) representa el borde superior del contenedor.

Adicionalmente, necesitarás establecer un punto de anclaje superior derecho para el marco padre para definir su punto de origen. Los valores aceptables están entre 0 y 1, relativos al tamaño del objeto, por lo que un valor de anclaje de 1, 0 coloca el punto de anclaje del marco en su esquina superior derecha.

1. En la ventana de Explorador, selecciona el marco MeterBar que inserta previamente.

   

2. En la ventana de Propiedades, introduce 1, 0, 0, 0 para Position y presiona Enter. Studio añadirá automáticamente los corchetes para formar el UDim2 de {1, 0},{0, 0}.

3. Introduce 1, 0 para la propiedad AnchorPoint. El marco debería estar ahora posicionado en la esquina superior derecha del área segura del dispositivo, ligeramente alejado del borde como resultado del margen.

   

Redimensionar el marco

Al igual que la posición, el Size de un objeto de UI se representa mediante un conjunto de coordenadas UDim2 que contiene valores de Scale y Offset para ambos ejes X y Y.

Por defecto, el tamaño del nuevo marco es {0, 100},{0, 100}, lo que significa 100 píxeles en ancho (X) y altura (Y). Si bien un valor de píxel estricto es útil en ciertos casos, muchos elementos de UI se escalan de manera más responsiva a través de múltiples pantallas cuando se establecen como un porcentaje del tamaño total del contenedor de pantalla.

1. Con el marco MeterBar seleccionado, accede a la ventana de Propiedades y navega hasta la propiedad Size.

2. Introduce un valor de 0.35, 0, 0.05, 0 para establecer un tamaño porcentual del 35% de ancho y 5% de alto sin desplazamientos en píxeles añadidos.

   

Estilizar el marco

Por defecto, los Frames están rellenos de blanco sólido. El medidor de salud final debería tener un relleno más oscuro y ligeramente opaco, así como un contorno oscuro, para que se destaque mejor en fondos claros y oscuros.

1. Con el marco MeterBar seleccionado, introduce 0 para la propiedad BackgroundColor3. Studio lo convertirá automáticamente al valor RGB de [0, 0, 0].

2. Introduce 0.75 para la propiedad BackgroundTransparency. En Roblox, la transparencia va de 0 para completamente opaco a 1 para completamente transparente, por lo que 0.75 equivale al 25% de opacidad en otras aplicaciones como Figma o Photoshop.

   

3. Inserta un objeto UIStroke, un poderoso modificador de UI que añade un trazo personalizable al marco.

   

4. Con el nuevo UIStroke seleccionado, establece las siguientes propiedades:

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

   

Para finalizar el estilo del marco del medidor, puedes redondear las esquinas para formar una forma de "pastilla" en lugar de un rectángulo afilado.

1. Inserta una instancia de UICorner en el marco MeterBar.

   

2. Con el nuevo modificador UICorner seleccionado, establece el CornerRadius en 0.5, 0. Usar un valor de escala de 0.5 (50%) en lugar de un valor en píxeles es especialmente conveniente para la barra del medidor porque asegura una curva completamente redondeada sin importar cuán alta o ancha se vuelva el contenedor.

   

Crear el relleno interior

Ahora que el marco contenedor del medidor de salud está completo, puedes añadir una porción de relleno interior para representar la salud variable del personaje. Dado que solo necesita ser una región sólida, un Frame secundario dentro del marco padre es adecuado.

1. Inserta un Frame hijo en el marco MeterBar.

2. Cambia el nombre de la nueva instancia de marco a InnerFill.

   

3. Con InnerFill seleccionado, establece las siguientes propiedades:

   • AnchorPoint = 0, 0.5 (borde izquierdo y centro vertical)
   • Position = 0, 0, 0.5, 0
   • Size = 1, 0, 1, 0

   Dado que los hijos de los marcos se posicionan y dimensionan con respecto a su padre, el uso de escala hace que el marco interior llene todo el ancho y alto del padre, comenzando desde el borde izquierdo del padre.

   

4. Para coincidir con la forma de "pastilla" del marco padre, inserta un UICorner adicional en InnerFill.

   

5. Con el nuevo modificador UICorner seleccionado, establece su propiedad CornerRadius en 0.5, 0 para coincidir con la forma de "pastilla" del marco padre MeterBar.

   

6. Para representar mejor que un medidor lleno indica buena salud, selecciona InnerFill y establece su propiedad BackgroundColor3 en [0, 225, 50] (en una tarea posterior, programarás este color para que cambie en función de la salud real).

   

Añadir el ícono

Para indicar más claramente el propósito del medidor, puedes añadir una etiqueta de imagen al lado izquierdo, en este caso un corazón rojo que comúnmente simboliza salud o vida.

1. Inserta un ImageLabel en el marco MeterBar. Este objeto te permite aplicar un activo de imagen 2D que ha sido subido como un decal a Roblox.

2. Cambia el nombre de la nueva etiqueta a Icon.

   

3. Con Icon seleccionado, establece su propiedad ZIndex en 2. Si bien los objetos de UI recién insertados siempre se colocan frente a objetos insertados anteriormente, este cambio asegura que el ícono siempre se muestre frente a los elementos del marco del medidor.

   

4. Localiza la propiedad Image del ícono e introduce rbxassetid://91715286435585, la referencia a una imagen de corazón previamente subida (si lo deseas, puedes importar tu propia imagen y usar su ID de activo).

   

5. Para asegurarte de que el ImageLabel del ícono siempre mantenga una relación de aspecto de 1:1, inserta un UIAspectRatioConstraint. Aunque esta restricción tiene propiedades personalizables para controlar la relación de aspecto, puedes dejar sus valores predeterminados intactos.

   

6. Con Icon seleccionado, finaliza la apariencia y la posición cambiando las siguientes propiedades:

   • AnchorPoint = 0.5, 0.5 (anclaje central)
   • BackgroundTransparency = 1 (100% transparente)
   • Position = 0, 0, 0.5, 0 (lado izquierdo del medidor y centro vertical)
   • Size = 2, 0, 2, 0 (200% del tamaño total del marco MeterBar, restringido a 1:1 por el UIAspectRatioConstraint)

   

Restringir el tamaño

Mientras que una altura de escala de 0.05 (5%) se ve bien en pantallas de teléfonos modernos y monitores para juegos que son de proporción 16:9 o más ancha, el medidor puede verse ligeramente demasiado alto en pantallas de tabletas y teléfonos más antiguos. Puedes verificar esto simulando una tablet como el iPad 7th Generation desde el Emulador de Dispositivos.

Para mantener la altura de la barra del medidor más consistente en pantallas más anchas, puedes aplicar un UISizeConstraint para limitar la altura máxima en píxeles.

1. Inserta un UISizeConstraint en el marco MeterBar.

   

2. Con la nueva restricción seleccionada, establece la propiedad MaxSize en inf, 20 para restringir su altura a 20 píxeles mientras se aplica ninguna restricción de ancho.

   

Ahora, la barra del medidor mantiene una altura más consistente entre pantallas más anchas y más altas.

Reemplazar el medidor de salud predeterminado

Las experiencias de Roblox incluyen un medidor de salud predeterminado que se vuelve visible cuando los personajes reciben daño. Si mantienes visible el medidor predeterminado, se duplicará y potencialmente se superpondrá al medidor personalizado.

Deshabilitar el medidor predeterminado

Para deshabilitar el medidor de salud predeterminado, utilizarás un script de cliente (LocalScript) dentro de StarterPlayerScripts que llama a StarterGui:SetCoreGuiEnabled().

1. En la ventana de Explorador, expande el contenedor StarterPlayer y localiza el contenedor StarterPlayerScripts dentro de él.

   

2. Inserta un nuevo LocalScript en el contenedor y renómbralo a HideDefaultHealthMeter para describir su propósito. Los scripts dentro de StarterPlayerScripts se ejecutan automáticamente cuando el jugador local se une a una experiencia, lo que lo convierte en un contenedor ideal para ejecutar un script que oculta permanentemente el medidor predeterminado.

   

3. Cuando insertas un nuevo script, se abre automáticamente en una nueva pestaña del editor de scripts (si no es así, haz doble clic en el script en la ventana de Explorador).

   Pega el siguiente código dentro del script HideDefaultHealthMeter:

   HideDefaultHealthMeter
   local StarterGui = game:GetService("StarterGui")
   
   -- Ocultar medidor de salud predeterminado
   StarterGui:SetCoreGuiEnabled(Enum.CoreGuiType.Health, false)

   Explicación del Código

   Línea	Propósito
   1	Obtiene una referencia a un servicio central, StarterGui, que representa el mismo contenedor donde creaste el medidor de salud personalizado y cuyos contenidos se clonarán en el contenedor PlayerGui para cada jugador que se una a la experiencia.
   4	Llama al método SetCoreGuiEnabled() del servicio e instruye que el medidor de salud predeterminado sea deshabilitado (false).

Si pruebas la experiencia ahora y recibes daño, notarás que el medidor predeterminado está deshabilitado y oculto (programarás el medidor personalizado para reflejar cambios de salud en la siguiente sección).

Escuchar cambios de salud

Todos los modelos de personajes predeterminados de Roblox contienen una clase Humanoid que proporciona comportamientos y funcionalidades especiales al personaje, como establecer su velocidad de caminar/correr y gestionar su salud. Los cambios en Health en el servidor se replican a cada cliente del jugador y puedes detectar estos cambios para actualizar tanto el tamaño como el color del medidor de salud personalizado.

1. En la ventana de Explorador, localiza el contenedor StarterCharacterScripts dentro de StarterPlayer.

   

2. Inserta un nuevo LocalScript en el contenedor y renómbralo a UpdateCustomMeter para describir su propósito. Los scripts dentro de StarterCharacterScripts se ejecutan automáticamente cada vez que el personaje del jugador aparece, lo que lo convierte en un contenedor ideal para ejecutar un script que reinicie completamente el medidor de salud en cada respawn.

   

3. En la ventana del editor para el script UpdateCustomMeter, pega el siguiente código:

   UpdateCustomMeter
   local Players = game:GetService("Players")
   
   -- Referencia al jugador local, carácter y humanoide
   local player = Players.LocalPlayer
   local character = player.Character
   local humanoid = character:WaitForChild("Humanoid")
   
   -- Referencia al marco interior de la barra del medidor
   local playerGui = player:WaitForChild("PlayerGui")
   local meterBarInner = playerGui.HUDContainer.MeterBar.InnerFill
   
   -- Colores de la secuencia de gradiente (rojo, naranja, amarillo, lima, 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)
   }
   
   -- Función para obtener el color en la secuencia de gradiente a partir de un punto fraccional
   local function getColorFromSequence(fraction: number): Color3
   	-- Cada color en el gradiente define el comienzo y/o fin de una sección
   	local numSections = #gradient - 1
   
   	-- Cada sección representa una porción de 1
   	local sectionSize = 1 / numSections
   
   	-- Determina en qué sección cae la fracción solicitada
   	local sectionStartIndex = 1 + math.clamp(fraction, 0, 1) // sectionSize
   
   	-- Obtiene los colores en el comienzo y fin de la sección
   	local sectionColorStart = gradient[sectionStartIndex]
   	local sectionColorEnd = gradient[sectionStartIndex + 1] or sectionColorStart
   
   	-- Normaliza la fracción para que sea un número de 0 a 1 dentro de la sección
   	local fractionOfSection = math.clamp(fraction, 0, 1) % sectionSize / sectionSize
   
   	-- Lerp entre el comienzo y el final basado en la fracción normalizada
   	return sectionColorStart:Lerp(sectionColorEnd, fractionOfSection)
   end
   
   local function onHealthChanged()
   	-- Calcula la nueva salud como porcentaje de máximo
   	local healthFraction = math.max(0, humanoid.Health / humanoid.MaxHealth)
   
   	-- Establece la barra en nuevos objetivos de tamaño/color
   	meterBarInner.Size = UDim2.new(healthFraction, 0, 1, 0)
   	meterBarInner.BackgroundColor3 = getColorFromSequence(healthFraction)
   end
   
   -- Escuchar cambios en la salud del humanoide
   humanoid.HealthChanged:Connect(onHealthChanged)
   
   -- Inicialmente establece (o reinicia) el tamaño/color de la barra a la salud actual
   onHealthChanged()

   Explicación del Código

   Líneas	Propósito
   4‑6	Obtiene referencias al Player local, su modelo Character, y la clase Humanoid dentro de él.
   9‑10	Obtiene una referencia al objeto InnerFill del medidor que debe ser redimensionado y recoloreado a medida que la salud del personaje cambia.
   13‑19	Declara un arreglo de cinco colores (rojo, naranja, amarillo, lima, verde) para recolorear el medidor en varios puntos; por ejemplo, verde para 100% de salud, amarillo para 50%, rojo para 0%, o una mezcla en cualquier fracción entre los puntos clave.
   22‑41	Función auxiliar que devuelve el color de mezcla entre cualquiera de los puntos clave de color del gradiente.
   43‑50	Función que maneja cualquier cambio en la salud. Aquí, calcula la nueva salud como un porcentaje del MaxHealth del personaje, redimensiona InnerFill a ese porcentaje de escala, y lo recolorea con el color devuelto de la función getColorFromSequence().
   53	La conexión principal del evento que detecta cambios en la Health replicados del servidor y llama a la función onHealthChanged().
   56	Inicialmente (tras el resurgimiento del personaje) llama a la función onHealthChanged() para dimensionar y colorear InnerFill en el porcentaje correcto. Normalmente, esto será el ancho completo y verde.

Si pruebas la experiencia ahora, notarás que el medidor personalizado actualiza correctamente tanto el tamaño como el color a medida que el personaje recibe daño:

Animar la barra del medidor

Para añadir un extra nivel de pulido al medidor personalizado, puedes animar los cambios de salud a través de tweening, cambiando gradualmente el tamaño y el color de la barra del medidor en ½ segundo.

1. Accede a la pestaña del editor de scripts para el script UpdateCustomMeter que editaste previamente.

2. Selecciona todas las líneas (CtrlA o ⌘A) y luego pégalos sobre ellas (CtrlV o ⌘V) con el siguiente código:

   UpdateCustomMeter
   local Players = game:GetService("Players")
   local TweenService = game:GetService("TweenService")
   
   -- Referencia al jugador local, carácter y humanoide
   local player = Players.LocalPlayer
   local character = player.Character
   local humanoid = character:WaitForChild("Humanoid")
   
   -- Propiedades de tween
   local tweenInfo = TweenInfo.new(0.5, Enum.EasingStyle.Exponential, Enum.EasingDirection.Out)
   
   -- Referencia al marco interior de la barra del medidor
   local playerGui = player:WaitForChild("PlayerGui")
   local meterBarInner = playerGui.HUDContainer.MeterBar.InnerFill
   
   -- Colores de la secuencia de gradiente (rojo, naranja, amarillo, lima, 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)
   }
   
   -- Función para obtener el color en la secuencia de gradiente a partir de un punto fraccional
   local function getColorFromSequence(fraction: number): Color3
   	-- Cada color en el gradiente define el comienzo y/o fin de una sección
   	local numSections = #gradient - 1
   
   	-- Cada sección representa una porción de 1
   	local sectionSize = 1 / numSections
   
   	-- Determina en qué sección cae la fracción solicitada
   	local sectionStartIndex = 1 + math.clamp(fraction, 0, 1) // sectionSize
   
   	-- Obtiene los colores en el comienzo y fin de la sección
   	local sectionColorStart = gradient[sectionStartIndex]
   	local sectionColorEnd = gradient[sectionStartIndex + 1] or sectionColorStart
   
   	-- Normaliza la fracción para que sea un número de 0 a 1 dentro de la sección
   	local fractionOfSection = math.clamp(fraction, 0, 1) % sectionSize / sectionSize
   
   	-- Lerp entre el comienzo y el final basado en la fracción normalizada
   	return sectionColorStart:Lerp(sectionColorEnd, fractionOfSection)
   end
   
   local function onHealthChanged()
   	-- Calcula la nueva salud como porcentaje de máximo
   	local healthFraction = math.max(0, humanoid.Health / humanoid.MaxHealth)
   
   	-- Tween la barra a nuevos objetivos de tamaño/color
   	local tweenGoal = {
   		Size = UDim2.new(healthFraction, 0, 1, 0),
   		BackgroundColor3 = getColorFromSequence(healthFraction)
   	}
   	local meterBarTween = TweenService:Create(meterBarInner, tweenInfo, tweenGoal)
   	meterBarTween:Play()
   end
   
   -- Escuchar cambios en la salud del humanoide
   humanoid.HealthChanged:Connect(onHealthChanged)
   
   -- Inicialmente establece (o reinicia) el tamaño/color de la barra a la salud actual
   onHealthChanged()

   Adiciones/Cambios Clave

   Líneas	Propósito
   2	Obtiene una referencia a TweenService para implementar la funcionalidad de tweening dentro del script.
   10	Crea un constructor TweenInfo que define la duración del tween, estilo de easing, y dirección de easing.
   52‑57	En lugar de simplemente establecer el tamaño y color de la barra como en la versión anterior, declara una tabla tweenGoal con el tamaño/color objetivo, crea un nuevo tween usando los parámetros tweenInfo y tweenGoal, y reproduce el nuevo tween.

Si pruebas la experiencia ahora, notarás que el medidor personalizado hace tween entre cada cambio de salud:

Añadir un efecto de daño

El sistema de medidor de salud predeterminado incluye un breve y sutil tinte rojo en los bordes de la pantalla cuando el personaje es dañado. Al deshabilitar el medidor predeterminado, este efecto se elimina, pero puedes reemplazarlo con tu propia implementación.

1. Accede a la pestaña del editor de scripts para el script UpdateCustomMeter que editaste previamente.

2. Selecciona todas las líneas y pégalos sobre ellas con el siguiente código:

   UpdateCustomMeter
   local Workspace = game:GetService("Workspace")
   local Players = game:GetService("Players")
   local TweenService = game:GetService("TweenService")
   
   -- Referencia al jugador local, carácter y humanoide
   local player = Players.LocalPlayer
   local character = player.Character
   local humanoid = character:WaitForChild("Humanoid")
   
   -- Propiedades de tween
   local tweenInfo = TweenInfo.new(0.5, Enum.EasingStyle.Exponential, Enum.EasingDirection.Out)
   
   -- Variable para almacenar/cache la salud del personaje
   local cachedHealth = humanoid.Health / humanoid.MaxHealth
   
   -- Obtener (o crear un nuevo) efecto de corrección de color dentro de la cámara del jugador
   local colorCorrection = Workspace.CurrentCamera:FindFirstChildWhichIsA("ColorCorrectionEffect") or Instance.new("ColorCorrectionEffect", Workspace.CurrentCamera)
   colorCorrection.Name = "DamageColorEffect"
   
   -- Referencia al marco interior de la barra del medidor
   local playerGui = player:WaitForChild("PlayerGui")
   local meterBarInner = playerGui.HUDContainer.MeterBar.InnerFill
   
   -- Colores de la secuencia de gradiente (rojo, naranja, amarillo, lima, 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)
   }
   
   -- Función para obtener el color en la secuencia de gradiente a partir de un punto fraccional
   local function getColorFromSequence(fraction: number): Color3
   	-- Cada color en el gradiente define el comienzo y/o fin de una sección
   	local numSections = #gradient - 1
   
   	-- Cada sección representa una porción de 1
   	local sectionSize = 1 / numSections
   
   	-- Determina en qué sección cae la fracción solicitada
   	local sectionStartIndex = 1 + math.clamp(fraction, 0, 1) // sectionSize
   
   	-- Obtiene los colores en el comienzo y fin de la sección
   	local sectionColorStart = gradient[sectionStartIndex]
   	local sectionColorEnd = gradient[sectionStartIndex + 1] or sectionColorStart
   
   	-- Normaliza la fracción para que sea un número de 0 a 1 dentro de la sección
   	local fractionOfSection = math.clamp(fraction, 0, 1) % sectionSize / sectionSize
   
   	-- Lerp entre el comienzo y el final basado en la fracción normalizada
   	return sectionColorStart:Lerp(sectionColorEnd, fractionOfSection)
   end
   
   local function onHealthChanged()
   	-- Calcula nueva salud como porcentaje de máximo
   	local healthFraction = math.max(0, humanoid.Health / humanoid.MaxHealth)
   
   	-- Tween la barra a nuevos objetivos de tamaño/color
   	local tweenGoal = {
   		Size = UDim2.new(healthFraction, 0, 1, 0),
   		BackgroundColor3 = getColorFromSequence(healthFraction)
   	}
   	local meterBarTween = TweenService:Create(meterBarInner, tweenInfo, tweenGoal)
   	meterBarTween:Play()
   
   	-- Mostrar efecto de daño si la nueva salud es menor que la salud cacheada
   	if healthFraction < cachedHealth then
   		-- Cachear nuevo valor de salud
   		cachedHealth = healthFraction
   
   		-- Establecer corrección de color a rojo como el tinte inicial antes de hacer tween
   		colorCorrection.TintColor = Color3.fromRGB(255, 25, 25)
   		colorCorrection.Saturation = 2.5
   
   		-- Tween el tinte de vuelta a blanco (neutro y sin cambio de tinte del normal)
   		local colorCorrectionTweenGoal = {
   			TintColor = Color3.fromRGB(255, 255, 255),
   			Saturation = 0
   		}
   		local colorCorrectionTween = TweenService:Create(colorCorrection, tweenInfo, colorCorrectionTweenGoal)
   		colorCorrectionTween:Play()
   	end
   end
   
   -- Escuchar cambios en la salud del humanoide
   humanoid.HealthChanged:Connect(onHealthChanged)
   
   -- Inicialmente establece (o reinicia) el tamaño/color de la barra a la salud actual
   onHealthChanged()

   Adiciones/Cambios Clave

   Líneas	Propósito
   14	Establece una referencia temporal (cachedHealth) para rastrear la cantidad de salud del personaje entre cambios, para que puedas comparar si un cambio es menor (daño).
   17‑18	En el spawn inicial del personaje, crea un nuevo ColorCorrectionEffect dentro de la Camera actual del jugador, o obtiene una referencia a la misma instancia en respawns posteriores. Al parentear este efecto de post-procesamiento a la cámara del jugador, solo se aplica a su pantalla local, no a la pantalla de todos los jugadores en el servidor.
   68‑83	Primero realiza una verificación condicional para confirmar que el cambio de salud es menor que el valor de cachedHealth, indicando daño; si es así, configura cachedHealth al nuevo valor. A continuación, establece el tinte de ColorCorrectionEffect a [255, 25, 25] (rojo) con alta saturación, luego hace tween el tinte de vuelta al valor por defecto de blanco neutro ([255, 255, 255]) sin saturación.

Si pruebas la experiencia ahora, notarás que la pantalla parpadea brevemente en rojo cada vez que el personaje recibe daño: