Interfaz, menú y botones en Godot

Cuando se crearán elementos de la interfaz (o se crea una escena completamente con elementos UI [User Interface] como el menu) se utiliza el nodo Control para agruparlos:

Los elementos que no son interactivos pueden ser integrados como sprites (o AnimatedSprites)

Se pueden añadir distintos nodos de “input”. Un botón tiene múltiples variaciones y puede ser un “simple botón” agregando el nodo principal Button

Inspector > Text asigna el texto en el botón

Estilo en botones

En el inspector > Control se encuentran las opciones para darle estilos. Para cambiar el fondo se encuentra en Custom Styles.

Al abrir el menú se presentan 4 opciones

StyleBoxFlat es un color sólido

StyleBoxTexture permite utilizar una imagen de fondo como textura

Fuentes

Se pueden importar fuentes como .ttf. Para poder se utilizadas se deben convertir en Dynamic Fonts:

Crear nuevo recurso > DynamicFont

1. Importar fuente .ttf
2. Doble click sobre la fuente y en el inspector crear nuevo recurso “DynamicFont”

3. Arrastrar la fuente .ttf en Inspector > Font > Font Data

4. Guardar recurso

Posteriormente se puede asignar arrastrándo el DynamicFont enButton > Control > Custom Fonts > Font y modificar su color en Custom Colors > Font Color

Crear DynamicFont y asignarla a botón

Cambiar escena al presionar botón

Se agrega un script al nodo principal

Con el menú superior se regresa a la vista 2D

Se selecciona el boton y al lado del Inspector esta Node > Signals > Base Button > pressed(), que es un método para conectar el botón al script. Se debe dar doble click, seleccionar el nodo principal en el menú emergente y click en “connect”.

Dentro de la función del script se especificará la siguiente línea

get_tree().change_scene(“res://nombredelaescena.tscn”)

En el script se considera que las escenas esten en una carpeta llamada “scenes”

Se puede quitar el código extra que no será utilizado (mantener extends Control)

Los Scripts deben de ser guardados al igual que las escenas para poder correr el código.

Escena principal

Para que la escena del menú sea la primera que carga se debe asignar como escena principal en Project > Project Settings

Botones en escena de juego

El mismo método aplica para crear botones dentro de un nivel de juego.

Para evitar que el botón se parte del escenario y se mantenga siempre a la vista en la ventana se coloca dentro de un nodo CanvasLayer