Hola, a todos sean bienvenidos a mi nuevo post. Hoy continuaremos con lo empezado en el post anterior. En este caso pasaremos a diseñar nuestra GUI, Graphical User Interface, donde ahora pondremos manos a la obra con los participantes, la barra de energia y todos los datos pertinentes del juego en la pantalla.
Comencemos descargando este archivo ui_gui_design, una vez descargado deben descomprimirlo en su carpeta de proyectos e importarlo, les recomiendo este post para ver el procedimiento, y como en el post anterior van a tener dos carpetas una llamada start y otra end, deben importar el contenido de start porque en end se encuentra el proyecto terminado. Como vimos en el post anterior, primero deberiamos planear y diseñar como va a ser nuestra interfaz, en este caso vamos a tener cuatro indicadores, una para la barra de vida, otro para la de energia, un contador de bombas y otro de rubies. Como siempre nos conviene tener un MarginContainer para contener a todos, luego se podria considerar como en la mayoria de los videojuegos a la barra de energia y de vida juntas y los contadores juntos en otra, podriamos utilizar un HboxContainer para dividirla en dos, luego en una de las divisiones un VBoxContainer para las barras, y por ultimo un HboxContainer para los contadores, el resultado seria algo similar a esto

ui_gui_step_tutorial_containers_structure
Ejemplo de como ser veria la GUI (Fuente: docs.godotengine.org)

Ahora pasaremos al editor de Godot para implementar nuestro plan, como dijimos en el post anterior podemos utilizarlo de dos maneras, una es creando distintas escenas y luego juntarlas a todos o trabajar con un sola y acomodar todos los elementos en ella para nuestro ejemplo vamos a usar el segundo procedimiento. Primero vamos a crear una nueva escena, a esta le agregaremos un nodo del tipo MarginContainer

godot20

A este lo renombraremos como GUI, y luego procederemos a grabar nuestra escena con el nombre de GUI.tscn y deberia quedar como este

godot21

Nuestro siguiente paso sera poner todos los margin en 20 del MarginContainer llamado GUI, les muestro como debe quedar

godot22

Luego crearemos una contenedor del tipo HBoxContainer para dividir en dos nuestro contenedor principal, luego pondremos dos nuevos contenedores, uno del tipo VBoxContainer para ubicar nuestras barras, lo llamaremos Barras, y otro del tipo HBoxContainer para los contadores, y a este Contadores.

godot23
Contenedor Divisor
godot24
El primer contenedor para la barras de vida y energia
godot25
El contenedor de los contadores
godot26
Los contenedores renombrados para su identificacion

Ahora procederemos a crear la base de las barras, tanto la de la vida como la de energia, tienen un nombre identificador, y al lado la barra. Para lograr esto volveremos a utilizar un HboxContainer y lo llamaremos Barra

godot27

Ahora procederemos a crear la etiqueta para mostrar todo, pero el elemento Label necesita de dos elementos mas uno del tipo NinePatchRect para mostrar la imagen de HP o EP, y otro de Label para mostrar a la derecha el valor pero antes o despues vamos a necesitar un MarginContainer para contener todo esto, por eso ahora procederemos a agregar un MarginContainer dentro de Barra y lo llamaremos Contar

godot28

Ahora dentro de este contenedor crearemos tres miembros nuevos:

  • NinePatchRect // Lo renombramos a Fondo
  • TextureRect  // Lo renombramos a Titulo
  • Label // Lo renombramos a Numero

Una vez creado y renombrados nos deberia quedar algo asi

godot29

Llegado hasta aca, tenemos una escena creada pero sin ninguna textura en la misma, ahora procederemos a cargar las mismas para empezar a completarla. Primero elegiremos a Fondo, luego iremos a la propiedad Texture

godot30

En esta opcion eligen Cargar y van a buscar la Textura deseada, puede ser HP o EP, en este ejemplo usaremos a HP. Les muestro un video de ejemplo

Una vez hecho esto, todavia no veremos a nuestra textura,  deberemos elegir el nodo Fondo, luego bajaremos hasta Rect y ahi buscar Min Size, pondremos los valores: 100,40. Una vez realizado deberia quedar asi

godot31

Esto nos mostrara a la textura en pantalla, una vez hecho esto procederemos a cargar la textura de Titulo, hacen el mismo procedimiento al anterior pero en esta ocasion eligen esta textura

godot32

Luego procederemos a elegir el nodo Numero y le agregaremos en la propiedad Text, el valor de 10 para usarlo como referencia. Una vez completo todo esto podremos mover los nodos de Titulo y Fondo a ser parte de Fondo, esto lo pueden hacer a traves de un Drag and Drop o por medio la opcion mover nodo

godot33
Primro elijan el nodo, luego click con el derecho y eligen Reemparentar
godot34
Y luego eligen el nodo nuevo
godot35

Esto lo hicimos porque ya tenemos creados los margenes creados y no nos traera inconvenientes, aparte trabajandolo de este modo no afectara al resto de los nodos cuando hagas las modificaciones, elijamos el nodo Titulo y vayamos a la propiedad Stretch Mode, donde elegiremos Keep Centered, tambien debemos setear la opcion Expand para que quede Activado

godot28

Ahora buscaremos la propiedad Rect y la opcion Size, en ella pondremos los valores: 50,40

godot37

Esto delimitara a la textura de Titulo a ocupar la mitad de Fondo, y mantener la altura y la opcion anterior nos mantendra centrada la textura. Luego elegiremos el nodo Numero, para este iremos a disposicion (Layout) y elegiremos la opcion Full Rect

godot38

Esto que el nodo utilice toda la textura de Fondo, luego iremos a la solapa Inspector, elegiremos Align, le asignaremos el valor Right y por ultimo elegimos Valign y elegimos Center, esto modificara la ubicacion del nodo y lo ubicara de esta forma

godot39
Como debemos setearlo
godot40
El resultado final

Como vemos el nodo Numero quedo muy pequeño con respecto a Titulo, para eso  procederemos a reemplazar la fuente del nodo Label (Numero), para hacer esto debemos elegir el nodo Numero, de ahi pasamos a Custom Font y elegimos New Dynamic Font

godot00

Una vez seleccionado volvemos a seleccionar Font Data pero ahora elegimos Cargar

godot01

Despues iremos hasta la ubicacion del recurso, res://assets/font, y ahi seleccionaremos la fuente.

godot02

Asi es como queda

godot03

Una vez elegida veremos que nuestro texto desaparecio, esto es por elegir la fuente. Ahora para visualizarla de nuevo debemos cambiar el tamaño de la fuente. Para esto debemos seleccionar de nuevo la fuente pero ahora la opcion Editar

godot04

Una vez seleccionado veremos las propiedades de la fuente, ahi iremos a Size y pondremos el valor de 24 o 28, dependiendo del tamaño deseado, en mi caso use 28

godot23

Para alinearlo un poco mejor, vamos a Extra Spacing y elegiremos la propiedad Bottom y le pondremos el valor 8

godot23

Esto nos agregara un nuevo espacio desde abajo para alinearlo mejor con respecto al nodo Titulo, ahora para finalmente alinearlo volvemos a seleccionar el nodo Numero pero ahora iremos a la propiedad Valign y elegiremos Bottom, esto alineara nuestro nodo numero hacia abajo

godot07

Pero como nosotros seteamos anteriormente la fuente para agregar ocho espacios en la parte inferior esto evitara mostrar el texto abajo de todo, el resultado es algo asi

godot24

Como pueden ver no quedo centrado pero esto es porque lo que haremos a continuacion reacomodora todo. ahora empezaremos con el proceso de agregar una barra de progreso. esto culminara nuestra barra de salud. Para crearla utilizaremos un nodo propio de GODOT llamada TextureProgress, elijamos primero al nodo Barra (no Barras sino Barra) y seleccionamos agregar nuevo nodo y elegimos TextureProgress

godot09

Seleccionalo y renombralo a Gauge, una vez hecho procederemos a cargar nuestras texturas, vamos a la propiedad de texturas y elegimos Under para ir a la opcion Cargar

godot10

Una vez en el menu de abrir archivos, iremos a res://assets/GUI y elegiremos el archivo lifebar_bg.png

godot12

Una vez seleccionada nos deberia quedar algo asi

godot29

Ahora haremos exactamente lo mismo pero con Progress, en este caso elegiremos el archivo lifebar_fill.png, una vez hecho esto deberia quedarnos asi

godot13

Ahora pasaremos a la propiedad Range y ahi setearemos el valor de Value a 50, para finalmente quedar asi

godot14

Seteando ese ultimo valor, definimos como va a ser valor inicial de nuestra barra de vida. Con esto concluimos nuestra barra de vida, salud o como quieran llamarla. Ahora procederemos con los contadores de bombas y rubies. Primero vamos ir a nuestro nodo Contar y lo duplicamos por medio de Ctrl+D, una vez hecho tendremos esto

godot30

Una vez realizado, deberemos hacer una drag and drop de este nuevo nodo (Contar2) al nodo Contadores, una vez hecho lo renombraremos a Contador y aca tenemos como deberia quedar

godot31

Ahora procederemos a renombrar el nodo Titulo a Icono, luego pasaremos a texture y elegiremos cargar, en esta opcion cargaremos la nueva textura, en este caso sera bombs_icon.png. Una vez realizado deberia quedar asi

godot32

Con el nodo Icono seleccionado iremos a disposicion y elegiremos Full Rect, este nos reacomodora el icono

godot33

Despues iremos a Rect y en Size setearemos los valores 50,53

godot34

Y luego iremos de nuevo a disposicion, y elegiremos Center Right

godot35

Despues iremos al nodo Numero donde modificaremos solamente el Align a Left lo cual reacomodara nuestro valor donde como resultado

godot37

Ahora solamente nos falta reacomodar el tamaño final de nuestro GUI, para esto debemos seleccionar el Nodo HBoxContainer debajo de GUI, expandirlo hasta la ubicacion deseada. luego iremos hasta el Nodo Barras donde debemos ir hasta la propiedad Size Flags, y elegir Horizontal y seleccionar Fill y Expand, esto lo pueden ver en el siguiente video

Ya tenemos una gran parte creada, ahora solamente nos faltan la barra de energia y el contador de rubies para esto vamos a ver como crear elementos reutilizables. Por esto seran utilizados dos elementos de nuestra GUI, estos son Barra y Contador. Primero vamos a elegir el nodo Barra y le haremos click con el boton derecho y utilizaremos la opcion Guardar rama como escena

godot38

Una vez seleccionado nos pedira con que nombre guardarlo

godot39

Una vez elegido, o dejarlo como sugiere, tendremos nuestra escena creada, luego deberemos hacer lo mismo con Contador y tendremos un resultado como este

godot40

Ahora solamente nos falta un paso, el cual es modificar el tamaño de la escena Barra, para eso haremos sobre el icono de Escena al lado del nombre, una vez hecho esto deberiamos ver algo asi

godot41

Deberian arrastrar el margen de la derecha a la izquierda hasta encajar con la barra, algo asi

godot42

Deberian hacer lo mismo con Contador pero en mi caso no fue necesario. Con esto podriamos decir que tenemos la barra de vida, pero para la de Energia deberemos modificar el titulo, el color de la misma y el tamaño, lo mismo sucede con las de rubies. Para lograr esto deberemos utilizar la herencia de escena, primero elegimos Escena, luego usaremos Nueva escena heredada

godot43

Nos abrira un cuadro de dialogo y ahi elegiremos la escena Barra.tscn

godot44

Una vez elegido, nos creara una nueva escena sin nombre. La salvaremos por medio de Ctrl+S y la llamaremos VidaBarra.tscn. Una vez hecho renombraremos el nodo Raiz, es decir el superior o primero de todos, y lo llamaremos a VidaBarra. Esto no influye en el funcionamiento del programa pero si nos servira como referencia entre las distintas barras que tendremos

godot45

Observen un detalle, todos los children debajo del parent estan en color gris, esto significa que tienen una escena parent (padre) y toda modificacion realizada impactar en el parent (origen) y se vera reflejada en los childrens derivados de este parent, es decir si cambiamos el tamaño de la fuente en la barra de energia, esta lo hara en la barra y por herencia luego lo hara  en la de vida, cambiando la estetica de la misma. Como vimos en este ejemplo, tenemos creada la barra de vida y como estuvo orientada a esa desde un principio no debemos hacer ninguna modificacion, ahora haremos la de energia, como antes vamos a Escena->Nueva escena heredada, elegimos nuevamente barra.tscn, renombraremos el root a EnergiaBarra, luego vamos al nodo Titulo, elegimos Cargar, elegimos el archivo label_EP.png y nos deberia quedar asi

godot46

Luego debemos cambiar el tamaño de la fuente de Titulo, pero como dijimos anteriormente si la modificamos afectara al parent y modificara a todos los herederos, para evitar esto debemos hacer a este nodo unico, para hacer esto hacemos click sobre las herramientas en la solapa Inspector y ahi elegimos Hacer sub-recursos unicos

godot47

Elegido esto, implicara que toda modificacion efectuada sobre este nodo solamente afectara a este. Ahi procedemos a cambiar el tamaño de la fuente y el extra spacing, la fuente 24, bottom a 6.

godot54

Luego procederemos a cambiar las texturas de nuestra ProgressTexture, primero cambiaremos la de Under, por la de energy_bar_bg.png

godot49

Luego deberemos hacer lo mismo con la texture de Progress, donde setearemos a energy_bar_fill.png, notaran ahora la diferencia entre la barra y la etiqueta, para reajustarlo, deberian elegir el nodo Fondo, aqui deberian ir a la propiedad Rect, en Min Size, deberian setearlo a 80,40

godot51

Luego deberian elegir el nodo raiz, en este caso EnergiaBarra, y deberiamos ir de nuevo a Rect y Min Size, en este caso setearemos el valor a 360,40

godot52

El resultado final es este

godot53

Ahora pasaremos a crear los contadores de bombas y rubies, iremos de nuevo a Escena, Nueva escena heredada, renombraremos a root como BombasContador, salvamos la escena y listo. Ahora pasaremos a crear el contador de Rubies, volvemos a crear una escena heredada, el root lo renombramos a RubiesContador, y en este caso cambiaremos la textura de Icono, elegimos Cargar y el archivo rupees_icon.png, una vez hecho esto nos queda algo asi

godot55
Esta es con la textura cambiada

godot56

Hasta aqui tenenos todos los elementos creados de nuestra GUI, ahora procederemos a armar la interfaz final. Primero iremos a GUI.tscn, ahi borraremos a los nodos Barra y Contador

godot57

Ahora haremos un drag and drop de las escenas de VidaBarra, EnergaBarra, BombasContador y RubiesContador, las escenas de barras van al Nodo Barras, y las escenas de contador al nodo Contadores, debe quedar algo asi

godot58

Una vez hecho deberia quedar asi

godot59

Ahora tenemos dos opciones, podemos dejar los contadores con la figura como se ve en la imagen anterior o podemos modificarlo, si elegimos la segunda opcion, debemos elegir el nodo Contadores, ir a la propiedad Size flags y en la opcion Vertical destildar la opcion Fill y tildar Shrink center, esto nos modificara la imagen de fondo

godot61

Ahora solo nos falta modificar la posicion de la barra de energia para que ambas barras esten alineadas, para esto deberemos ir a la escena EnergiaBarra, elegimos Contar, vamos a Custom Constants, elegimos Margin Left y lo seteamos en 28, seteamos el Min Size a 108,40

godot62
Cambiar el custom constants de Contar
godot63
Cambiar el Min Size de Contar

Una vez realizado esto, grabamos todo y deberia quedar algo asi

godot64

Ahora cambiamos el tamaño, de nuestro contenedor, es decir HBoxContainer debajo del root, y este modificara la disposicion de nuestros elementos, deberia quedar asi

godot65

Ahora haremos el paso final, agregaremos la escena de GUI en nuestra pantalla, empecemos abriendo la escena LevelMockup.tscn, luego ubicaremos la escena GUI entre los nodos bg y characters

godot66

Una vez realizado, tendremos nuestra pantalla terminada

godot67

Ahora simplemente reajustamos el tamaño de la escena GUI y ahi si estaria terminado, les dejo un ejemplo

godot68

Hasta aqui hemos creado nuestra interfaz del juego, hemos creado cada uno de los componentes, hemos aprendido como crear una escena heredada, como las modificaciones a un parent modifica a todos los childs, como evitar esto, y por ultimo como agregarla en nuestra escena final, como pueden ver solamente armamos la escena y los indicadores del juego, nos falta los codigos para la interaccion entre todos ellos es decir la interaccion de nuestras barras con respecto a la accion de los personajes, esto lo veremos en el proximo post, espero les haya gustado nos vemos en el proximo.