Crear medidores de HUD

Un HUD o pantalla de cabeceras es un conjunto de elementos de interfaz de usuario que siempre son visibles o accesibles durante el juego, como pantallas de puntuación, medidores de salud y botones de menú.Incluir un HUD es esencial para la mayoría de las experiencias porque 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 icono a la izquierda que se puede adaptar a una barra de tiempo, barra de progreso o similar.

Usando Estación espacial peligrosa como un lugar de partida y Fundamentos de la interfaz de usuario - medidor HUD como un lugar de referencia terminado, este tutorial demuestra:

• Configuración y uso del Emulador de dispositivo para probar tu diseño en múltiples pantallas emuladas.
• Uso de StarterGui como contenedor de diseño y almacenamiento.
• Cómo posicionar/redimensionar elementos de interfaz de usuario alrededor de controles y notas/islas integradas de Roblox, como la ranura de 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 de grado de color (rojo, naranja, amarillo, lima, verde).

Habilitar el emulador de dispositivo

Roblox es inherentemente cross-plataforma, ya que los jugadores pueden descubrir y unirse a experiencias en una PC o consola, luego recoger su teléfono y continuar donde se quedaron.Los dispositivos móviles (teléfonos y tabletas) tienen la menor cantidad de espacio en la pantalla, por lo que es importante que los elementos de tu interfaz de usuario se adapten a pantallas más pequeñas y que sean claramente visibles para los jugadores.

La mejor manera de probar diseños de interfaz de usuario en todas las plataformas es el Emulador de dispositivo de Studio.Esta herramienta proporciona una selección predeterminada de dispositivos y te permite agregar tus propios preajustes personalizados.

1. Abre la plantilla Estación espacial peligrosa en Studio.

   Editar en Studio

2. Desde la pestaña Prueba , activa la herramienta Dispositivo .

   

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

   

Crear un contenedor de pantalla

Un contenedor ScreenGui contiene objetos de interfaz de usuario (GuiObjects) para mostrar en la pantalla de un jugador (en este tutorial, toda la medición de salud).Para mostrar un ScreenGui y sus objetos hijos a todos los jugadores que se unan 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 vacío ScreenGui vacío:

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

   

2. Pase el cursor sobre el contenedor, haga clic en el botón ⊕ y pegue un ScreenGui .

   

3. Renombra el nuevo contenedor HUDContainer para reflejar su propósito.

   

Utilizar zonas seguras

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

Para garantizar que los jugadores puedan ver y acceder a toda la interfaz sin obstrucción, Roblox proporciona la propiedad ScreenInsets que controla las inserciones de zona segura para el contenido de un ScreenGui.Cada objeto de interfaz de usuario que coloques dentro de un ScreenGui es relativo a los límites de inserción.

Si bien el predeterminado de CoreUISafeInsets garantiza que todos los objetos de interfaz de usuario se mantengan libres de la interfaz de usuario y los recortes de dispositivos de Roblox, DeviceSafeInsets puede ser una mejor opción para utilizar el espacio de pantalla limitado, como se ilustra a continuación.

1. En la ventana Explorador , seleccione Contenedor HUD .

   

2. En la ventana Propiedades, establece la propiedad ScreenInsets a DeviceSafeInsets.

   

Establecer la amortiguación de borde

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

Una forma de aplicar espacio a un contenedor de interfaz de usuario 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, ingrese un valor de 0, 16 para todos los bordes del contenedor ( PaddingBottom , PaddingLeft , PaddingRight , PaddingTop ).Esto se aplica al relleno 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 interfaz de usuario de Roblox como marcos y una etiqueta de imagen .

Crear el marco padre

Al igual que las aplicaciones de diseño como Figma y Photoshop, un Frame en Roblox sirve como contenedor para otros objetos de interfaz de usuario.Para este tutorial, el medidor de salud completo se contendrá en un solo marco padre, lo que facilita el reposicionamiento en varios diseños de HUD.

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

   

   Si el nuevo marco no aparece en la ventana de ventanilla, asegúrese de haber activado superposición de GUI desde el widget Opciones de visualización en la esquina superior derecha de la ventana de visualización 3D, o de haber activado visibilidad de la interfaz de usuario desde la pestaña de vista.

2. Renombra la nueva instancia de marco a MeterBar .

   

Posiciona el marco

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

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

Para posicionar un objeto de interfaz de usuario en la esquina superior derecha del contenedor de la 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 de la píxel de la pantalla.Del mismo modo, un valor de escala Y de 0 (0%) representa el borde superior del contenedor.

Además, tendrás que establecer un punto de anclaje superior derecho para que el marco padre defina 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 ancla de 1, 0 pone el punto de ancla del marco en su esquina superior derecha.

1. En la ventana Explorador , seleccione el marco Barra de medidas que insertó previamente.

   

2. En la ventana Propiedades , ingrese 1, 0, 0, 0 para Position y presione Enter .Studio agregará automáticamente los paréntesis para formar el UDim2 de {1, 0},{0, 0} ..

3. Ingrese 1, 0 para la propiedad AnchorPoint.El marco ahora debe posicionarse en la esquina superior derecha del área segura del dispositivo , ligeramente rebajada desde el borde como resultado del relleno >.

   

Redimensionar el marco

Al igual que la posición, el Size de un objeto de interfaz de usuario se representa por un conjunto de coordenadas UDim2 que contiene Scale y Offset valores 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 ambos ancho ( X ) y altura ( Y ).Si bien un valor de píxel estricto es útil en ciertos casos, muchos elementos de interfaz de usuario escalan de manera más responsiva en múltiples pantallas cuando se establece en un porcentaje del tamaño total del contenedor de la pantalla.

1. Con el marco Barra de medidas seleccionado, acceda a la ventana Propiedades y navegue hasta la propiedad ].

2. Ingrese un valor de 0.35, 0, 0.05, 0 para establecer un porcentaje de ancho de 35% y altura de 5% sin desplazamientos adicionales.

   

Estiliza el marco

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

1. Con el marco Barra de medidas seleccionado, ingrese 0 para la propiedad BackgroundColor3.Studio lo convertirá automáticamente al valor RGB de .

2. Ingrese 0.75 para la propiedad BackgroundTransparency.En Roblox, la transparencia varía de 0 para ser completamente opaca a 1 para ser completamente transparente, por lo que 0.75 iguala el 25% de opacidad en otras aplicaciones como Figma o Photoshop.

   

3. Inserta un objeto UIStroke potente modificador de interfaz de usuario que añade un contorno 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 "píldora" en lugar de un rectángulo afilado.

1. Inserta una instancia UICorner en el marco Barra de medidas .

   

2. Con el nuevo UICorner seleccionado, establece el CornerRadius a 0.5, 0.Usar un valor de escala de (50%) en lugar de un valor de píxel es especialmente conveniente para la barra de medidor porque garantiza una curva totalmente redonda sin importar la altura o el ancho del contenedor.

   

Crear el relleno interior

Ahora que el marco que contiene el medidor de salud está completo, puedes agregar una porción de relleno interno para representar la salud variable del personaje .Dado que solo necesita ser una región llena de sólido, un sub-niño Frame dentro del marco padre es adecuado.

1. Inserta un hijo Frame en el marco Barra de medidas .

2. Renombra la nueva instancia de marco a Llenado interior .

   

3. Con relleno interior 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 se miden en relación con su padre, el uso de la escala hace que el marco interior llene la anchura y la altura completa del padre, comenzando por el borde izquierdo del padre.

   

4. Para igualar la forma de "píldora" del marco padre, inserte un UICorner adicional en Llenado interior .

   

5. Con el nuevo modificador seleccionado, establece su propiedad a para que coincida con la forma de "píldora" del marco padre MeterBar .

   

6. Para representar mejor que un medidor completo indica una buena salud, seleccione Rellenado interior y establezca su propiedad BackgroundColor3 en [0, 225, 50] (en una tarea posterior, escribirá guión este color para cambiar según la salud real).

   

Añade el ícono

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

1. Inserte un ImageLabel en el marco Barra de medidas . Este objeto le permite aplicar un recurso de imagen 2D que se ha subido como una etiqueta a Roblox.

2. Renombra la nueva instancia de etiqueta a Icono .

   

3. Con Icono seleccionado, establece su propiedad ZIndex a 2.Aunque los objetos de interfaz de usuario recién insertados siempre se superponen a los objetos insertados anteriormente, este cambio garantiza que el icono siempre se muestre delante de los elementos del marco del medidor.

   

4. Localiza la propiedad de del íconoe ingresa , la referencia a una imagen de corazón previamente cargada (si lo desea, puede importar tu propia imagen y usar su ID de activo).

   

5. Para garantizar que el ícono ImageLabel siempre se mantenga con una relación de aspecto de 1:1, insira un UIAspectRatioConstraint.Aunque esta restricción tenga propiedades personalizables para controlar la proporción de aspecto, puedes dejar sus valores predeterminados intactos.

   

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

   • AnchorPoint = 0.5, 0.5 (ancla 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 Barra de medidas , restringido a 1:1 por el UIAspectRatioConstraint )

   

Constrinja el tamaño

Mientras que una altura de escala de 0.05 (5%) de 5% se ve bien en pantallas de teléfono modernas y monitores de juegos que tienen una relación de aspecto de 16:9 o más amplia, el medidor puede parecer ligeramente demasiado alto en pantallas de tabletas y teléfonos más antiguos.Puedes verificar esto emulando una tableta como iPad de séptima generación desde el Emulador de dispositivo .

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

1. Inserta un UISizeConstraint en el marco Barra de medidas .

   

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

   

Ahora, la barra de medidor mantiene una altura más consistente entre pantallas más amplias 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ños.Si mantienes el medidor predeterminado visible, duplicará y potencialmente se superpondrá al medidor personalizado.

Desactivar el medidor predeterminado

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

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

   

2. Inserta un nuevo LocalScript en el contenedor y renombralo a Ocultar medidor de salud predeterminado para describir su propósito.Los scripts dentro de StarterPlayerScripts se ejecutan automáticamente cuando el jugador local se une a una experiencia, haciéndolo 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 lo hace, haz doble clic en el script en la ventana Explorador .

   Pegue el siguiente código dentro del script Ocultar medidor de salud predeterminado :

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

   Explicación de código

   Línea	Propósito
   1	Obtiene una referencia a un servicio principal core, StarterGui, que representa el mismo contenedor en el que creó el medidor de salud personalizado y cuyo contenido se clona en el contenedor PlayerGui para cada jugador que se una a la experiencia.
   4	Llama al método SetCoreGuiEnabled() del servicio e instruye al medidor de salud predeterminado para que se desactive (false).

Si pruebas la experiencia ahora y recibes daños, notarás que el medidor predeterminado está desactivado 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 funciones especiales al personaje, como establecer su velocidad de caminata/correr y administrar su salud. Health cambios en el servidor 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 Explorador , localiza el contenedor dentro de >.

   

2. Inserte un nuevo LocalScript en el contenedor y renómbrelo a Actualizar medidor personalizado para describir su propósito.Los scripts dentro de StarterCharacterScripts se ejecutan automáticamente cada vez que el personaje del jugador aparece, haciéndolo un contenedor ideal para ejecutar un script que restablezca completamente el medidor de salud en cada reaparición.

   

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

   Actualizar medidor personalizado
   local Players = game:GetService("Players")
   
   -- Referencia al jugador local, personaje y humanoide
   local player = Players.LocalPlayer
   local character = player.Character
   local humanoid = character:WaitForChild("Humanoid")
   
   -- Referencia al marco interior de la barra de medidor
   local playerGui = player:WaitForChild("PlayerGui")
   local meterBarInner = playerGui.HUDContainer.MeterBar.InnerFill
   
   -- Colores de secuencia gradual (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 color en secuencia degradada desde el punto fraccional
   local function getColorFromSequence(fraction: number): Color3
   	-- Cada color en el gradiente define el comienzo y/o el final de una sección
   	local numSections = #gradient - 1
   
   	-- Cada sección representa una porción de 1
   	local sectionSize = 1 / numSections
   
   	-- Determine en qué sección cae la fracción solicitada
   	local sectionStartIndex = 1 + math.clamp(fraction, 0, 1) // sectionSize
   
   	-- Obtenga los colores al comienzo y al final de la sección
   	local sectionColorStart = gradient[sectionStartIndex]
   	local sectionColorEnd = gradient[sectionStartIndex + 1] or sectionColorStart
   
   	-- Normalizar 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()
   	-- Calcular la nueva salud como porcentaje de la máxima
   	local healthFraction = math.max(0, humanoid.Health / humanoid.MaxHealth)
   
   	-- Establecer 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 de los humanoides
   humanoid.HealthChanged:Connect(onHealthChanged)
   
   -- Inicialmente establecer (o restablecer) el tamaño/color de la barra a la salud actual
   onHealthChanged()

   Explicación de código

   Líneas	Propósito
   4 ‑ 6	Obtiene referencias al local Player , su aplicación de modeladoCharacter y la clase Humanoid dentro de él.
   9 ‑ 10	Obtiene una referencia al objeto Llenado interno del medidor que debe cambiarse de tamaño y recolorarse a medida que cambia la salud del personaje.
   13 ‑ 19	Declara un array de cinco colores (rojo, naranja, amarillo, lima, verde) para recolorar el medidor en varios puntos; por ejemplo, verde para el 100% de salud, amarillo para el 50%, rojo para el 0%, o una mezcla en cualquier fracción entre los puntos clave.
   22 ‑ 41	Función ayudante que devuelve la mezcla de colores entre cualquiera de los puntos de color degradado.
   43 ‑ 50	Función que maneja cualquier cambio en la salud.Aquí, calcula la nueva salud como un porcentaje del del personaje, redimensiona relleno interior a ese porcentaje de escala y lo recolorea al color devuelto por la función >.
   53	La conexión principal del evento que detecta cambios replicados desde el servidor y llama a la función .
   56	Inicialmente (al generar o reaparecer un personaje) llama a la función onHealthChanged() para dimensionar y colorear relleno interno al porcentaje correcto.Típicamente, 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 de medidor

Para agregar un nivel adicional de polaco al medidor personalizado, puedes animar los cambios de salud a través de transición , cambiando gradualmente el tamaño y el color de la barra del medidor durante más de ½ segundo.

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

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

   Actualizar medidor personalizado
   local Players = game:GetService("Players")
   local TweenService = game:GetService("TweenService")
   
   -- Referencia al jugador local, personaje 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 de medidor
   local playerGui = player:WaitForChild("PlayerGui")
   local meterBarInner = playerGui.HUDContainer.MeterBar.InnerFill
   
   -- Colores de secuencia gradual (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 color en secuencia degradada desde el punto fraccional
   local function getColorFromSequence(fraction: number): Color3
   	-- Cada color en el gradiente define el comienzo y/o el final de una sección
   	local numSections = #gradient - 1
   
   	-- Cada sección representa una porción de 1
   	local sectionSize = 1 / numSections
   
   	-- Determine en qué sección cae la fracción solicitada
   	local sectionStartIndex = 1 + math.clamp(fraction, 0, 1) // sectionSize
   
   	-- Obtenga los colores al comienzo y al final de la sección
   	local sectionColorStart = gradient[sectionStartIndex]
   	local sectionColorEnd = gradient[sectionStartIndex + 1] or sectionColorStart
   
   	-- Normalizar 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()
   	-- Calcular la nueva salud como porcentaje de la máxima
   	local healthFraction = math.max(0, humanoid.Health / humanoid.MaxHealth)
   
   	-- Intermedio de 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 de los humanoides
   humanoid.HealthChanged:Connect(onHealthChanged)
   
   -- Inicialmente establecer (o restablecer) el tamaño/color de la barra a la salud actual
   onHealthChanged()

   Añadiciones/Cambios de clave

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

Si pruebas la experiencia ahora, notarás que los adolescentes de medidor personalizado entre cada cambio en la salud:

Añade un efecto de daño

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

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

2. Seleccione todas las líneas y pegue sobre ellas con el siguiente código:

   Actualizar medidor personalizado
   local Workspace = game:GetService("Workspace")
   local Players = game:GetService("Players")
   local TweenService = game:GetService("TweenService")
   
   -- Referencia al jugador local, personaje 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/缓存角色健康
   local cachedHealth = humanoid.Health / humanoid.MaxHealth
   
   -- Obtener (o crear 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 de medidor
   local playerGui = player:WaitForChild("PlayerGui")
   local meterBarInner = playerGui.HUDContainer.MeterBar.InnerFill
   
   -- Colores de secuencia gradual (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 color en secuencia degradada desde el punto fraccional
   local function getColorFromSequence(fraction: number): Color3
   	-- Cada color en el gradiente define el comienzo y/o el final de una sección
   	local numSections = #gradient - 1
   
   	-- Cada sección representa una porción de 1
   	local sectionSize = 1 / numSections
   
   	-- Determine en qué sección cae la fracción solicitada
   	local sectionStartIndex = 1 + math.clamp(fraction, 0, 1) // sectionSize
   
   	-- Obtenga los colores al comienzo y al final de la sección
   	local sectionColorStart = gradient[sectionStartIndex]
   	local sectionColorEnd = gradient[sectionStartIndex + 1] or sectionColorStart
   
   	-- Normalizar 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()
   	-- Calcular la nueva salud como porcentaje de la máxima
   	local healthFraction = math.max(0, humanoid.Health / humanoid.MaxHealth)
   
   	-- Intermedio de 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 inferior a la salud almacenada
   	if healthFraction < cachedHealth then
   		-- Almacenar nuevo valor de salud
   		cachedHealth = healthFraction
   
   		-- Establecer la corrección de color en rojo como el tinte inicial antes de la transición
   		colorCorrection.TintColor = Color3.fromRGB(255, 25, 25)
   		colorCorrection.Saturation = 2.5
   
   		-- Medio tono de vuelta a blanco (neutral y sin cambio de tinte desde el 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 de los humanoides
   humanoid.HealthChanged:Connect(onHealthChanged)
   
   -- Inicialmente establecer (o restablecer) el tamaño/color de la barra a la salud actual
   onHealthChanged()

   Añadiciones/cambios de clave

   Líneas	Propósito
   14	Establece una referencia de marcador de posición ( cachedHealth ) para rastrear la cantidad de salud del personaje entre cambios, para que puedas comparar si un cambio es menor (daño).
   17 ‑ 18	Al regeneraciónel personaje inicial, crea un nuevo ColorCorrectionEffect dentro del actual Camera del jugador o obtiene una referencia a la misma instancia en respawns posteriores.Al proporcionar este efecto de postprocesado 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 comprobación condicional para confirmar que el cambio de salud es inferior al valor cachedHealth , indicando daño; si es así, establece cachedHealth al nuevo valor.A continuación, establece el tinte ColorCorrectionEffect en [255, 25, 25] (rojo) con una mayor saturación, luego ajusta el tinte de vuelta al predeterminado de blanco neutral ( [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: