GODOT / Pantalla de Titulo

Hola, a todos sean bienvenidos a mi nuevo post. Hoy veremos como crear primero nuestra pantalla de titulo del juego, y en el proximo post veremos como crear la interfaz grafica del usuario, mas conocido como GUI, para esto deben descargar este archivo ui_main_menu_design, una vez descargado deberan extraerlo dentro de la carpeta de sus proyectos. Luego deberan importar el proyecto almacenado en la carpeta start, como hicimos en este post, una vez hecho deberian tener una ventana de este estilo

Nuestra ventana despues de importado el proyecto.

Recuerden importar el proyecto de la carpeta Start, no de End porque en esta se encuentra el proyecto terminado. En el post de hoy vamos a crear un menu principal, en el proximo crearemos el resto de la interfaz para el usuario. Como todo en la vida, primero debemos empezar con una maqueta o diseño preliminar de nuestro objetivo, por ejemplo este seria un diseño preliminar

Fuente: docs.godotengine.org

Obviamente esto debe ser tomado como un preliminar y en el resultado final deberia quedar mucho mas prolijo, recuerden que para el jugador mientras mas lindo mejor. No tienen porque ser graficos feos, tampoco extremedamente complejos, pero mientras sean simples y limpios no nos traeran inconvenientes. Hay dos formas de diseñar nuestra interfaz:

• Construida toda sobre una sola escena.
• Crear escenas plantillas para componentes reusables y crear componentes inherentes a las escenas base.

Para este ejemplo nos decantaremos con el primer caso, y cuando vayamos adquiriendo mas experiencia podremos utilizar el segundo caso.

Aca pueden ver las imagenes a utilizar, y arriba el path donde estan ubicados.

Ahora procederemos a crear nuestro menu principal, utilizaran la escena vacia, en ella agregaran un MarginContainer, la cual sera el contenedor del resto de nuestras componentes del menu, agregan con el signo mas (+) de la solapa escena

Una vez realizado, elegiremos el nodo y luego buscaremos la propiedad Custom Constants, ahi deberemos setear los parametros de esta forma:

• Margin Right: 120
• Margin Top: 80
• Margin Left: 120
• Margin Bottom: 80

Pueden verlo en la siguiente imagen

Luego en el viewport, elegiremos Disposicion (Layout) y elegiremos Full Rect, como se ve en la imagen

Una vez hecho, crearemos unos childs del MarginContainer donde almacenaremos nuestras imagenes, estos childs van a ser del tipo TextureRect. Para esto, eligen el MarginContainer, y luego le dan al signo mas (+) para agregar el nuevo child.

Una vez agregado, seleccionan al child, presionan Ctrl+D para duplicar a este elemento, esto lo repetiran cinco veces para tener un total de seis TextureRect.

En la siguiente imagen les doy un pantallazo de como va el proyecto hasta ahora

Una vez creados, pasaremos a agregar la textura, para esto seleccionan el elemento y van a texture, eligen donde dice null, despliega un menu y eligen Cargar

Una vez abierto el menu de dialogo deben ir a la carpeta assets, main menu, y ahi una de las texturas, una vez elegido les recomiemdo cambiar el nombre de ese elemento a la textura seleccionado o por lo menos a un nombre similar, por ejemplo:

• characters.png, pueden usar ese nombre o Caracteres como en mi caso.
• label_continue.png, elegi Continuar.
• label_new_game.png, elegi JuegoNuevo.
• label_options.png, elegi Opciones.
• title.png, elegi Titulo pero podria haber sido Title o Logo tambien.
• version.png, elegi Version.

Una vez asignadas las imagenes, y renombradas todos los elementos deberia quedar algo asi

Hasta aqui tenemos lo basico, es decir un contenedor y los distintos elementos de nuestro menu, y como se ve estan desordenados ahora para ordenarlos, vamos a crear dos contenedores child del contenedor principal, vamos a crear primero un contenedor horizontal (HBoxContainer), y a este le vamos a crear dos contenedores mas, uno vertical (VBoxContainer) y otro centralizador (CenterContainer), queda algo asi

Para llegar a esto, lo explico mejor en este video

Una vez creado los contenedores todavia no tenemos nuestros elementos ordenados para lograr esto haremos un drag and drop (Arrastrar y Tirar) de los elementos dentro de los contenedores creados a lo ultimo. Procederemos a seleccionar Continuar, JuegoNuevo, Opciones, Titulo y Version para hacer un drag and drop(Arrastrar y Tirar) al contenedor VBoxContainer y el restante (Caracteres) lo tiraremos en CenterContainer, esto se ve mejor en el siguiente video

Una vez asignado nuestros elementos vemos en el video donde todo queda casi perfectamente asignado, decimos casi porque nos faltan un par de detalles, ahora elegiremos CenterContainer, ir a Size Flags, elegiremos Horizontal, ahi tendremos seleccionado Fill, y ahora elegiremos Expand donde quedaran los dos tildados, ahora haremos exactamente lo mismo con vertical, nos deberia quedar algo asi

Ahora vemos como quedo mejor ubicado nuestra textura Caracteres. En el caso siguiente por ahi debemos reordenar las texturas de las izquierda, nos deberia quedar en el siguiente orden:

• Titulo
• JuegoNuevo
• Continuar
• Opciones
• Version

Esto tambien lo pueden hacer con drag and drop(Arrastrar y Tirar) traten de no mover de tal forma y nos quede como child de algun otro elemento, estos deben ser todos childs de VBoxContainer. Una vez hecho eso, todas estaran ordenadas en un rincon y para reordenar esto debemos crear un nuevo child del tipo VBoxContainer, una vez creada le tiraremos dentro los elementos JuegoNuevo, Continuar y Opciones y por ultimo reordenan de tal forma para quedar de la siguiente forma

Luego lo renombran a MenuOpciones

Ahora haremos los procedimientos para reordenar finalmente nuestro menu, esta vez elegiremos a MenuOpciones, de ahi nos desplazamos hasta Size Flags, donde en Horizontal elegiremos Expand y al igual como en el caso anterior dejaremos Fill seleccionado y elegiremos Expand y lo mismo se aplica para Vertical como se ve en la siguiente imagen

Cuando realicemos esto, el MenuOpciones se expandera hasta donde tenga disponible y reubicando el titulo y la version. Luego procederemos a alinear los elementos dentro de este contenedor, a traves de la opcion alignment elegiremos center.

Luego, nos quedara solamente ordenar un poco mejor esteticamente a las tres elementos del contenedor, para lograr los separaremos un poco por medio de la propiedad Separation en Custom Constants, le daremos a separation un valor de 30

Una vez hecho esto, ya tenemos nuestro menu terminado. Deberia quedarnos algo asi

Hasta aqui hemos logrado nuestro menu principal del proyecto, logramos agregar contenedores, elementos dentro de los mismos y los mismos los hemos reordenado, en el proximo veremos como crear una interfaz grafica a nuestro proyecto con los datos del jugador. Espero les haya sido util nos vemos en el proximo post.