🎮 UnityDocs

Cómo hacer una barra de vida

Receta para una barra de vida en UI con una Image en modo Filled: cómo actualizarla entre 0 y 1, suavizarla y colocarla sobre un enemigo en el mundo.

🍳 RecetaPrincipiante✅ RevisadoUnity 6.0 LTSActualizado 2026-07-15
DificultadConceptual Código Matemáticas
Tiempo📖 Lectura 5 min · ⌨️ Práctica 15 min

El objetivo#

Una barra que se vacía al recibir daño y se llena al curarse, controlada con un valor entre 0 (vacía) y 1 (llena).

Montaje en el editor#

  1. Crea una Image de fondo (el marco/rojo).
  2. Encima, otra Image para el relleno (verde). En su componente Image, pon Image Type → Filled, Fill Method → Horizontal.
  3. Esa segunda Image es la que controlaremos con fillAmount.
Filled Image o Slider

Dos formas válidas: una Image en modo Filled (más control visual) o un Slider sin interacción (más rápido de montar). Esta receta usa Image; el Slider funciona igual cambiando fillAmount por slider.value.

La receta#

C#
using UnityEngine;
using UnityEngine.UI;

public class BarraVida : MonoBehaviour
{
    [SerializeField] private Image relleno;   // la Image en modo Filled
    [SerializeField] private float vidaMax = 100f;

    private float vidaActual;

    void Start() => vidaActual = vidaMax;

    public void RecibirDaño(float cantidad)
    {
        vidaActual = Mathf.Clamp(vidaActual - cantidad, 0f, vidaMax);
        Refrescar();
    }

    public void Curar(float cantidad)
    {
        vidaActual = Mathf.Clamp(vidaActual + cantidad, 0f, vidaMax);
        Refrescar();
    }

    void Refrescar()
    {
        // fillAmount va de 0 (vacía) a 1 (llena)
        relleno.fillAmount = vidaActual / vidaMax;
    }
}

Suavizar el cambio#

En vez de saltar de golpe, interpola el relleno para un efecto pulido:

C#
[SerializeField] private float velocidad = 3f;
private float objetivo = 1f;

public void RecibirDaño(float cantidad)
{
    vidaActual = Mathf.Clamp(vidaActual - cantidad, 0f, vidaMax);
    objetivo = vidaActual / vidaMax;
}

void Update()
{
    relleno.fillAmount = Mathf.MoveTowards(relleno.fillAmount, objetivo, velocidad * Time.deltaTime);
}

Barra sobre un enemigo (World Space)#

Para una barra flotando encima de un enemigo, usa un Canvas en modo World Space como hijo del enemigo, y haz que mire a la cámara:

C#
void LateUpdate()
{
    transform.forward = Camera.main.transform.forward;  // "billboard"
}
Conéctala con eventos

En vez de que la barra pregunte la vida cada frame, haz que el sistema de vida avise cuando cambia, con eventos. Así la UI solo se actualiza cuando hace falta y queda desacoplada.

Errores frecuentes#

  • Olvidar poner la Image en modo Filled (no se recorta, solo cambia de tamaño raro).
  • No usar Mathf.Clamp/Clamp01 y que fillAmount se salga de 0–1.
  • Colocar la barra de mundo sin orientarla a la cámara (se ve de canto).
  • Actualizar la barra cada frame preguntando la vida en vez de reaccionar a un evento.

Resumen#

Una Image en modo Filled cuyo fillAmount fijas entre 0 y 1 según vidaActual / vidaMax. Suaviza con Mathf.MoveTowards, ponla en World Space y orientada a la cámara para barras sobre enemigos, y conéctala con eventos para no consultar la vida cada frame.

Fuentes y para profundizar