Tema 26. Godot Engine. Menú botones y Hud
Para crear una pantalla de inicio crearemos una escena de tipo Nodo2D con un nodo hijo de tipo Sprite al que le podremos añadir una imagen de fondo.
| NODO Button en MENÚS |
Al botón podemos añadir una imagen o un Texto.
Nota: Si trabajamos con el Nodo Button tendremos que trabajar con los temas de Godot. Podemos crear temas y personalizarlos. Si queremos trabajar con botones personalizados con imágenes entonces usaremos el Nodo TextureButton
Seleccionamos un nuevo nodo hijo de tipo Button
Al botón podemos añadir una imagen o un Texto.
Nota: Si trabajamos con el Nodo Button tendremos que trabajar con los temas de Godot. Podemos crear temas y personalizarlos. Si queremos trabajar con botones personalizados con imágenes entonces usaremos el Nodo TextureButton
En las propiedades podemos añadir efectos al botón como:
Hover: modificamos lo que queramos que se vea cuando el botón pase por encima.
Pressed: Cuando presionamos el botón…
Inicialmente debemos crear un estilo.
Podemos añadir una fuente de texto en Custom Fonts.
En Text podemos añadir un texto al botón.
Duplicaremos los botones y añadiremos 3.
Iremos al botón que queramos (por ejemplo el boton0) y crearemos un Script
La función grab_focus() da el foco al botón
| func _ready(): grab_focus() |
Ahora añadiremos una variable que exportaremos para poder añadir la ruta de la escena que ejecutará el botón desde la propiedades del mismo.
Luego añadimos la función _on_Button_pressed() que se ejecuta cuando pulsamos el botón. Y ejecutamos lo que hay en el path.
Para ello tenemos que ir a la variable path en la propiedades del botón0 y hacer lo siguiente:
- Elegimos la escena que queremos iniciar y con el botón derecho hacemos Copiar Ruta. Y luego vamos a la propiedad path y lo pegamos.
| CONECTAR EL BOTÓN |
Vamos al Button0 y seleccionamos los Nodos de conexión.
Conectamos el Botón a pressed()
Esto nos creará la función:
func _on_Button0_pressed(): en el Script
Añadimos el siguiente código:
extends Button export var path = «» # Called when the node enters the scene tree for the first time. func _ready(): grab_focus() func _on_Button0_pressed(): if path != «»: get_tree().change_scene(path) |
Si el path no está vacío llamamos al contenido de path (donde habíamos copiado la ruta a la escena Nivel1)
Repetimos el proceso de conectar para cada botón.
| NODO TextureButton |
Si deseamos trabajar con botones previamente a partir de imágenes creadas es mejor usar TextureButton:
En Normal seleccionamos la imagen por defecto. En Pressed cuando hacemos click. En Hover cuando nos ponemos encima con el ratón (no tiene sentido para juegos en Android)
En este ejemplo renombramos TextureButton por ButtonPlay:
y ahora tendremos que conectarlo. Primero creamos el Script. Y conectamos pressed con el ButtonPlay.
Y hacemos lo mismo que hemos hecho con el Button0, seleccionamos la escena destino.
Script TextureButton:
| extends TextureButton export var path = «» # Called when the node enters the scene tree for the first time. func _ready(): pass # Replace with function body. # Called every frame. ‘delta’ is the elapsed time since the previous frame. #func _process(delta): # pass func _on_ButtonPlay_pressed(): if path != «»: get_tree().change_scene(path) |
Botón con Imagen:
Si implementamos un botón para Salir del juego, hacemos lo mismo pero la función para salir del juego es:
get_tree().quit()
No olvidemos establecer la escena principal de menús como la escena principal del proyecto una vez tengamos el juego terminado.
HUD
Si queremos, por ejemplo crear un Hud de Puntos (Score) crearemos la siguiente estructura para que se mantenga siempre visible, independientemente de la cámara:
Creamos un Canvas Layer y dentro como hijo añadimos un Nodo Panel.
Dentro del Nodo Panel añadimos un Nodo TextureRect donde añadiremos una imagen como por ejemplo, una moneda:
c
Activamos Expand y podremos redimensionar la imagen.
Ahora podemos añadir una Label dentro del Nodo Panel:
Podemos escribir un texto en la propiedad text.
Para establecer una fuente a una etiqueta podemos hacer lo siguiente: en las propiedades de las etiquetas tenemos Custom Fonts. Seleccionamos -> Nuevo Dynamic Font
Y hacemos CLICK sobre la misma propiedad Dynamic Font que hemos seleccionado y veremos que se muestra la propiedad Font (vacío)
Vamos a Font y dentro veremos Font Data. Seleccionamos Cargar y seleccionamos la fuente ttf que tengamos guardada en nuestro proyecto. Podemos modificar el color de la fuente con font Color:
Nos quedaría así:
Ahora podemos modificar el fondo del panel por un color más suave:
Vamos al Nodo Panel y seleccionamos Nuevo StyleBoxFlat:
y hacemos Click sobre esta misma propiedad. Veremos que se muestran más propiedades:
Podemos modificar el diseño: por ejemplo el color de fondo y establecer los bordes redondeados.
Añadimos una nueva etiqueta para mostrar los puntos o score en el HUD.
Y establecemos ## en text. También podemos añadirle el tipo de fuente personalizada.
En este ejemplo nombraremos CanvasLayer por HUD y ojo, lo haremos también en el nombre de la escena CanvasLayer.tscn
Y crearemos el Script en HUD:
Y creamos por ejemplo el siguiente script:
| extends CanvasLayer var coins = 4 # Called when the node enters the scene tree for the first time. func _ready(): $puntos.text = String(coins) |
Ahora podemos observar como se muestran las monedas en pantalla en el HUD que hemos creado.
Para refrescar de forma automática el contenido de la variable de monedas o vidas podemos modificar el código de esta forma:
| extends CanvasLayer func _ready(): pass func _process(delta): $puntos.text = String(DataManager.vidas_player) |
en este ejemplo, obtenemos las vidas del DataManager y al modificar el código dentro de la función _process, cada vez que perdamos una vida o cogamos una moneda (dependiendo de cómo lo hayamos implementado) se visualizará su valor en el Hud de forma automática.
| BOTONES EN JUEGOS ANDROID |
Añadir un botón para movimiento en dispositivos móviles es muy sencillo.
Añadimos un Nodo TouchScreenButton por cada botón que necesitemos en el HUD. En este ejemplo añadiremos el botón Mover Izquierda:
Y arrastramos una imagen a la propiedad Normal del botón ( en el ejemplo arrastramos el icono de Godot)
En la propiedad Action escribimos la “acción” del movimiento izquierda del personaje.
Esto no funcionará en nuestro proyecto del ordenador hasta que activemos el “touch del emulador del ratón” al hacer click sobre el botón.Para ello vamos a la Configuración del Proyecto y Activamos -> Emulate Touch From Mouse
Al hacer Click sobre el botón (icono) el personaje se mueve hacia la izquierda.
