En esta sesión vamos a mostrar el tiempo dentro del juego a través de una interfaz gráfica, en lugar de hacerlo solo por consola.
Creamos la escena TimeGUI que sera el reloj y su interfaz gráfica.
Tendrá esta estructura.
Vamos ir rellenando los nodos poco a poco.
Cargamos la textura en el primer nodo NinePatchRect y modificamos el Region Rect y el Patch Margin.
Lo estiraremos hasta que mida 48px de alto y 64px de ancho, este nodo representara el background.
Modificaremos el inspector de DayClock\Day, cargaremos la fuente y pondremos el color en #262b44 y Horizontal Align en Right.
Aunque en el inspector aparezca como que es el nodo Label, en realidad es el nodo DayClock/Dia.
Guardaremos la configuración Label Setting para aplicárselo a los otros Labels.
Vamos a cargar la imagen en el nodo Sun y modificar el inspector.
Vamos a cargar la imagen al nodo SunBG y modificar su Rect para mostrar el fondo del icono del sol. Es posible que las imágenes Sun y SunBG no encajen del todo, así que habrá que ajustar un poco la posición y escala desde Transform > Position y Transform > Scale de ambos nodos.
Encajamos la caja de cada nodo a su contenido.
Vamos a cargar la fuente que hemos creado previamente para los nodos label de ClockBG\ClockControl, ademas de modificar la propiedad text para tener una hora como placeholder:
ClockBG\ClockControl\Hora, Text = 23
ClockBG\ClockControl\Espacio, Text = :
ClockBG\ClockControl\Minuto, Text 59
Cargamos la imagen para ClockBG\ClockControl\Hourglass y de nuevo modificaremos el Inspector.
Y como ultimo nodo que modificaremos en esta pagina de apuntes, cargaremos la imagen a ClockBG y volveremos a seleccionar la imagen en el inspector.
Finalmente, lo ajustaremos a nuestro gusto.
Agregaremos nuestro nuevo TimeGUI al canvas layer del mundo del juego.
Modificaremos el AnchorPreset como mejor nos guste.
En mi caso lo he puesto en el Bottom Right para que no se solape.
Ya está empezando a parecerse al meme.
Ahora vamos hacer que todo lo que hemos hecho empiece a funcionar.
Actualizarmes primero el script de TimeSystem.
Vamos adjuntarle un nuevo script a la escena TimeGUI.
Ahora vamos a utilizar el signal updated de TimeSystem para conectarlo con la función _on_time_system_updated de TimeGUI
Vamos aumentar los Ticks PR Seconds a6000 de TimeGUI para que el tiempo vaya mucho mas rápido y poder comprobar si funciona.
Y eso es todo. He omitido las partes donde se seleccionan las imágenes con el botón Edit Region, porque me parece una herramienta imprecisa. Sabiendo las dimensiones de cada sprite y cambiando los parámetros a mano permite trabajar mucho más rápido y con mayor precisión.
No hay comentarios:
Publicar un comentario