Un heads up display bien diseñado mejora la experiencia y permite ver la vida del jugador en todo momento. Aquí aprenderás a crear un HUD reutilizable con canvas y slider, configurar sus límites a puntos enteros y ajustar el background y el relleno para que el mínimo y máximo se mapeen con precisión.
¿Cómo preparar el canvas y el slider para la barra de vida?
Crear un canvas con un slider es la base. Aunque el slider está pensado para interacción, funciona perfecto como barra de vida al mostrar progreso visual.
- Crea un canvas con un slider.
- Colócalo arriba a la izquierda con la herramienta rect transform usando Shift y Alt para reposicionar de forma automática.
- Ajusta márgenes: por ejemplo, x en 20 puntos y y en −20 puntos.
- Modifica tamaño según necesidad: ancho de 160 puntos y más altura para legibilidad, por ejemplo 50 puntos.
- Compila y prueba para ver cambios en tiempo real.
¿Qué ajustes visuales iniciales mejoran la lectura?
El contraste y la simplicidad ayudan a leer mejor la vida restante.
- Configura el color del background como rojo oscuro o granate para representar vida perdida.
- Define el relleno en la fill area con un verde no brillante para evitar fatiga visual.
- Evita colores demasiado saturados: cansan y distraen.
- Revisa la source image del background: puedes mantenerla para tener borde o quitarla para un fondo uniforme.
- Si usas imagen, que sea nine sided para evitar distorsión al escalar bordes y esquinas.
¿Cómo configurar los valores del slider para vida del jugador?
La vida se expresa en puntos enteros. El slider debe reflejarlo sin permitir decimales y sin controles manuales visibles.
- Elimina la maneta: borra el nodo del handle slide area, ya que el jugador no ajusta su vida.
- Define valores del slider: mínimo en 0 y máximo en 100 para simbolizar 100 puntos de vida.
- Activa que solo acepte números enteros.
- Prueba el mínimo y el máximo para validar el comportamiento visual.
¿Cómo alinear background y relleno para que mínimo y máximo coincidan?
Si el relleno no ocupa todo en el máximo o no desaparece en el mínimo, hay desajuste entre background y fill.
- Selecciona la fill area y ajusta sus bordes para que la bolita azul llegue exactamente a cada esquina indicada por las flechas.
- Ajusta después el fill interno para que coincida con las mismas esquinas.
- Verifica que en la jerarquía padre e hijo ambos alineen flechas y bolitas en los mismos puntos.
- Comprueba el resultado: en el valor máximo, el relleno ocupa toda la barra; en el mínimo, desaparece por completo.
¿Qué extensiones y buenas prácticas puedes aplicar?
Estos detalles afinan el HUD y te preparan para programar cambios al recibir daño o al subir de nivel.
- Itera con frecuencia: da a play y revisa si el tamaño y color funcionan bien.
- Ajusta márgenes y tamaño si notas deformaciones o poca legibilidad.
- Mantén colores intermedios y no brillantes para una interfaz cómoda de ver.
- Añade un texto dentro de la barra como ejercicio: mostrará vida actual y total.
- Reutiliza el HUD en cualquier pantalla del videojuego para mostrar estadísticas.
¿Tienes dudas o quieres compartir tu configuración de colores y tamaños? Deja tu comentario y cuenta cómo has resuelto la alineación del relleno con el fondo.
