FASE 3 - CREAR INTERFAZ Y MENSAJE INICIAL ⏰ 15' aprox
Esta página contiene las instrucciones específicas de la Tercera Fase de la quinta sesión para desarrollar el juego del Puente de las Flores.
Con las mecánicas del juego ya completas, vamos a crear la interfaz del juego.
Para ello, en la Jerarquía, Click derecho > UI > Canvas. En el inspector, en la pestaña Canvas Scaler, cambiamos los valores para que queden de la siguiente manera:
Esto es importante para que nuestro juego mantenga la resolución 16 : 9.
Después, hacemos click derecho en el Canvas que acabamos de crear y seleccionamos la opción UI > TextMeshPro. Nos aparecerá un mensaje para importar el paquete TextMesh Pro.
Importamos los dos packs y cerramos el mensaje. Cambiamos el nombre de nuestro texto a Mensaje_inicio, lo seleccionamos, y en el inspector, cambiamos el texto por “¡EVITA QUE ROBEN LAS FLORES!”.
Este será el mensaje inicial, que haremos desaparecer más adelante. Podemos ver como quedaría en nuestro juego final pulsando la pestaña Game.
Vamos a cambiar la apariencia del texto.
Primero, modificamos la fuente de nuestro texto. En nuestro caso, hemos utilizado la fuente de Supercell, pero podemos utilizar cualquier otra a partir del archivo .ttf o .otf.
Para crear una fuente, en el menú superior nos vamos a Window > TextMeshPro > Font Asset Creator.
Arrastramos nuestro archivo .ttf al campo Source Font File, pulsamos el botón Generate Font Atlas y cuando se haya generado, la guardamos pulsando Save.
Para utilizar la fuente en nuestro texto, en el inspector, en el componente Text Mesh Pro - Text (UI), arrastramos la fuente que acabamos de crear al campo Font Asset.
Mantenemos el color del texto en blanco, y le ponemos bordes negros.
Para ello, en la pestaña de nuestra fuente, en el inspector, Outline y cambiamos el valor de Thickness a 0.5.
Después, en la ventana de escena, hacemos grande el espacio del texto para que quepa en una línea.
Para ello movemos los cuadrados blancos sobre las líneas amarillas.
También vamos a centrarlo con las flechas roja y verde. Comprobamos como se ve en nuestro juego en la pestaña de Game.
