Interfaz para el sistema de tiempo

¿Cómo agregar una barra de tiempo en Unity?

El diseño de juegos en Unity ofrece un mundo de posibilidades para personalizar la experiencia del usuario. En esta clase, exploraremos cómo agregar un elemento visual que le indicará al jugador cuánto tiempo le queda antes de completar un objetivo: una barra de tiempo. Este tipo de indicador no solo mejora el feedback que obtiene el jugador, sino que también intensifica la urgencia y el desafío del juego.

¿Cómo configurar la barra de tiempo?

Para empezar, necesitarás crear una imagen en Unity que servirá como el fondo de la barra de tiempo. Sigue estos pasos para configurarla correctamente:

1. Crear la imagen: Selecciona tu elemento general de UI, haz clic derecho y selecciona UI > Image. Nombra esta imagen "time bar".

2. Configurar las propiedades visuales:

   • Cambia el color de fondo a gris.
   • Ajusta el alineamiento para que sea Stretch en la parte superior.
   • Configura las propiedades de posición: 0 píxeles de la izquierda, derecha y en el eje Y.
   • Ajusta el punto de pivote en Y a 1 para que esté en la parte superior.
   • Define el alto en 90.

3. Agregar una barra interna: Dentro de la barra de tiempo, crea una segunda imagen mediante UI > Image. Nómbrala "Fill", y configúrala para que sea la encargada de mostrar el tiempo restante.

¿Cómo controlar el tamaño y color de la barra con C#?

Una vez que tengas la barra visual en su lugar, es tiempo de agregar lógica para que su tamaño y color se ajusten dinámicamente según el tiempo restante. Aquí te explicamos cómo hacerlo:

1. Crear un script C# nuevo: Haz clic derecho en la carpeta de scripts y selecciona Nuevo Script de C#, nómbralo "UI Time Bar".

2. Configurar el script:

   • Borrar la función Start() y en su lugar declara tres propiedades principales:

     public RectTransform fillRect;
     public Image fillColor;
     public Gradient gradient;
     

   • Asegúrate de importar la librería UnityEngine.UI.

3. Implementar la lógica de actualización:

   • Dentro de Update(), calcula el factor de tiempo restante:

     float factor = GameManager.instance.currentTimeToMatch / GameManager.instance.timeToMatch;
     factor = Mathf.Clamp(1 - factor, 0, 1);
     

   • Cambia la escala y el color de la barra:

     fillRect.localScale = new Vector3(factor, 1, 1);
     fillColor.color = gradient.Evaluate(factor);
     

¿Cómo configurar el tiempo y probar el juego?

Tras implementar el script, regresa a Unity para configurarlo y verificar que funcione correctamente:

1. Asigna las referencias:

   • Arrastra el Rect Transform y la Image de "Fill" a los campos fillRect y fillColor respectivamente.
   • Configura el Gradient para que varíe del verde al rojo, pasando por el amarillo a mitad de camino.

2. Prueba el juego:

   • Ejecuta el juego y observa cómo la barra cambia de color y disminuye su longitud a medida que se reduce el tiempo.

¡Y ahí lo tienes! Una barra de tiempo en tu interfaz que le proporcionará al jugador la información necesaria para medir el tiempo restante en sus partidas. Innovar y crear diferentes formas de representación visual del tiempo puede enriquecer muchísimo la experiencia de juego. ¿Tienes alguna idea creativa? ¡Nos encantaría ver tu interpretación! Comparte una captura de pantalla de tu proyecto en los comentarios.