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
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:
- Importar fuente .ttf
- 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
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”)
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