Creación y Gestión de un UI Manager en Unity para Videojuegos

Clase 37 de 60 • Curso Avanzado de Creación de RPGs con Unity

Resumen

¿Cómo crear un UI Manager en Unity?

En el mundo del desarrollo de videojuegos, una interfaz de usuario (UI) eficiente puede hacer la diferencia en la experiencia del jugador. En este artículo, exploraremos cómo implementar un UI Manager en Unity para gestionar efectivamente elementos como la barra de vida y textos en el HUD (Heads Up Display) de un videojuego.

¿Qué es un UI Manager y cómo se implementa en Unity?

Un UI Manager es un componente encargado de coordinar la interfaz gráfica de un videojuego, integrando los datos del juego con los elementos visuales que ve el jugador. Para crear un UI Manager en Unity, sigue estos pasos:

Crear un nuevo script llamado UI Manager:

Ve al editor de Unity y crea un nuevo script llamado UIManager.

Asociar el script al canvas:

Puedes asociar el script a un objeto GameObject vacío o directamente al Canvas que contendrá los elementos UI del juego.

Referenciar las librerías necesarias:

Asegúrate de incluir las librerías necesarias para gestionar la interfaz gráfica: csharp using UnityEngine.UI; // Para manejar elementos de UI como sliders y texto. using System.Text; // Para formatear texto dinámicamente.

Establecer referencias a los componentes de UI:

Declara las variables públicas para el slider y el texto que presentarán la vida del jugador: csharp public Slider playerHealthBar; public Text playerHealthText; public HealthManager playerHealthManager;

¿Cómo sincronizar la interfaz con el juego?

Una vez que hayamos creado y referenciado nuestro UI Manager, es fundamental sincronizar los elementos de la interfaz con los datos del juego. Aquí te mostramos cómo hacerlo:

Actualizar el slider de la barra de vida:

En el método Update, asegura que el valor máximo del slider corresponda con la vida máxima del jugador: csharp playerHealthBar.maxValue = playerHealthManager.maxHealth; playerHealthBar.value = playerHealthManager.currentHealth;

Formatear y actualizar el texto de la vida:

Utiliza el StringBuilder para crear un texto dinámico que muestre vida actual y máxima: csharp StringBuilder sb = new StringBuilder(); sb.Append("HP: ").Append(playerHealthManager.currentHealth).Append("/").Append(playerHealthManager.maxHealth); playerHealthText.text = sb.ToString();

¿Cómo gestionar la persistencia entre escenas?

Para garantizar que los elementos de UI no se destruyan al cambiar de escena, sigue estos consejos:

Utilizar el script Don't Destroy On Load:

Implementa el script para mantener los elementos UI entre cambios de escena: csharp DontDestroyOnLoad(transform.gameObject);

Configurar el orden de ejecución de scripts:

Ajusta el orden de ejecución para asegurar que el jugador se inicialice después de los elementos de UI:
- Ve a Edit > Project Settings > Script Execution Order y asigna el script del jugador para inicializarse más tarde.

Estas prácticas aseguran que los elementos de UI sean consistentes y eficientes en todo momento. Nunca subestimes la importancia de una interfaz bien gestionada, ya que contribuye a una experiencia de juego inmersiva y fluida.

¡Sigue explorando y aplicando estas técnicas para crear interfaces más dinámicas y efectivas en tus proyectos de Unity!

Alirio Alejandro Angel Arenas

student•

En vez de crear un script para el dontDestroyOnLoad añado esta propiedad en el awake del script maneger del UI. lo mismo cuando necesito destruir algo simplemente en el awake pongo Destroy(gameObject, 1.5f) <-- el tiempo que quieras.

Wandy Rafael Santana Evangelista

student•

Con la el orden de ejecución de los Scripts, me ha salvado un Bug que llevaba varias clases con él y no sabía cómo rayos solucionarlo.😄

Ricardo Rito Anguiano

student•

Tengo una duda sobre el Script Execution Order. ¿Estos scripts siempre se ejecutan en el juego?

Pregunto porque en mi caso tengo el paquete de CineMachine y quisiera saber si esto afectaria al rendmiento de mi juego

Pedro Muñoz Becerra

student•

Como opción al String Builder, podemos usar la misma clase string para crear un texto con formato, acá mi ejemplo:

void Update()
    {
        int maxHealth = playerHealthManager.maxHealth;
        int currentHealth = playerHealthManager.currentHealth;

        playerHealthBar.maxValue = maxHealth;
        playerHealthBar.value = currentHealth;

        playerHealthText.text = string.Format("HP {0} / {1}", currentHealth, maxHealth);
    }

Leonel Grisaleña

student•

Me encanta que el profesor se tome el tiempo de pensar y explicar problemas que a él no le suceden pero que podrían suceder. Es clave, porque he hecho cursos donde los profesores no explican estas cosas, o peor aún, errores que se ven en pantalla y no los solucionan. Gran profesor!

Leonardo Gutierrez

student•

Genial

Alejandro Jáuregui Salamanca

student•

Tuve un problema al ejecutar el juego, simplemente agregandole el DontDestroyOnLoad e incluso cambiando el orden de ejecución de scripts. Así que decidí que lo mejor era agregar en el OnDestroyOnLoad, el código para asegurarme que el canvas fuese creado y que no se destruyese, les copio mi código por si a alguien le surge el mismo problema.

Martin Mendez

student•

Funciona asi tambien, creo que en su codigo estav en start en lugar de awake

void Awake() {

	//Si el player no esta cargado, no destruye el objecto que trae este script
	if (!PlayerController.playerCreated) {
		DontDestroyOnLoad(this.transform.gameObject);
	} else {
		Destroy(gameObject);
	}

}

Samar Jaffal

student•

Excelente el dato Juan!!

Adrian Gutierrez Ramirez

student•

Buen tip poner tiempo de espera a la creación de los elementos.

Luis Castañeira

student•

Para que me funcione tuve que quitarle el DontDestroy a la cámara, y convertirla en hijo del player.

Cristian Romero Martínez

student•

Buenos días, ¿Podrías explicarme porque utilizamos el ++"System.Text;"++ y que ventajas tiene con respecto a meterle el texto directamente como hacíamos anteriormente? Muchas gracias

Ricardo Rito Anguiano

student•

Es una librearia que nos ayuda a formatear el texto de mejor manera, con mas opciones para el mismo, aunque sin problemas puedes hacerlo de otra manera. Como $" Este es tu id: {id}";