Creación de Videojuegos. Godot Engine. Menú botones y Hud

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

Nuevo nodo hijo de tipo Button. Godot
Nuevo nodo hijo de tipo Button. Godot

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

Propiedades del Botón. Godot
Propiedades del Botón. Godot

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.

Duplicamos los botones y añadiremos 3. Godot
Duplicamos los botones y añadiremos 3. Godot

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:

  1. 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.

Seleccionamos los Nodos de conexión. pressed() Godot
Seleccionamos los Nodos de conexión. pressed() Godot

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:

Nodo TextureButton. Godot
Nodo TextureButton. Godot

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)

Propiedades del Nodo TextureButton. Godot
Propiedades del Nodo TextureButton. Godot

En este ejemplo renombramos TextureButton por ButtonPlay:

Renombramos TextureButton por ButtonPlay. Godot
Renombramos TextureButton por ButtonPlay. Godot

y ahora tendremos que conectarlo. Primero creamos el Script. Y conectamos pressed con el ButtonPlay.

Conectamos pressed con el ButtonPlay. Godot
Conectamos pressed con el ButtonPlay. Godot

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:

Nodo TextureRect donde añadiremos una imagen. Godot
Nodo TextureRect donde añadiremos una imagen. Godot

c

Arrastramos la moneda a la propiedad Texture del TextureRect. Godot
Arrastramos la moneda a la propiedad Texture del TextureRect. Godot

Activamos Expand y podremos redimensionar la imagen.

Ahora podemos añadir una Label dentro del Nodo Panel:

Label dentro del Nodo Panel. Godot
Label dentro del Nodo Panel. Godot

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

Nuevo Dynamic Font. Godot
Nuevo Dynamic Font. Godot

Y hacemos CLICK sobre la misma propiedad Dynamic Font que hemos seleccionado y veremos que se muestra la propiedad Font (vacío)

Se muestra la propiedad Font (vacío) Godot
Se muestra la propiedad Font (vacío) Godot

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:

Vamos a Font y dentro veremos Font Data. Godot
Vamos a Font y dentro veremos Font Data. Godot

Nos quedaría así:

Hud. Etiqueta Score. Godot
Hud. Etiqueta Score. Godot

Ahora podemos modificar el fondo del panel por un color más suave:

Vamos al Nodo Panel y seleccionamos Nuevo StyleBoxFlat:

Seleccionamos Nuevo StyleBoxFlat. Godot
Seleccionamos Nuevo StyleBoxFlat. Godot

y hacemos Click sobre esta misma propiedad. Veremos que se muestran más propiedades:

Propiedades de StyleBoxFlat. Godot
Propiedades de StyleBoxFlat. Godot

Podemos modificar el diseño: por ejemplo el color de fondo y establecer los bordes redondeados.

Bordes redondeados. Godot
Bordes redondeados. Godot

Añadimos una nueva etiqueta para mostrar los puntos o score en el HUD.

Añadimos una nueva etiqueta para mostrar los puntos. Godot
Añadimos una nueva etiqueta para mostrar los puntos. Godot

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:

Script en HUD. Godot
Script en HUD. Godot

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.

Se muestran las monedas en pantalla. Godot
Se muestran las monedas en pantalla. Godot

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.

TouchScreenButton
Nodo TouchScreenButton. Godot

Añadimos un Nodo TouchScreenButton por cada botón que necesitemos en el HUD. En este ejemplo añadiremos el botón Mover Izquierda:

Añadiremos el botón Mover Izquierda. Godot
Añadiremos el botón Mover Izquierda. Godot

Y arrastramos una imagen a la propiedad Normal del botón ( en el ejemplo arrastramos el icono de Godot)

Arrastramos una imagen a la propiedad Normal del botón. Godot
Arrastramos una imagen a la propiedad Normal del botón. Godot

En la propiedad Action escribimos la “acción” del movimiento izquierda del personaje.

Escribimos la “acción” del movimiento izquierda. Godot
Escribimos la “acción” del movimiento izquierda. Godot

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

Emulate Touch From Mouse. Godot
Emulate Touch From Mouse. Godot

Al hacer Click sobre el botón (icono) el personaje se mueve hacia la izquierda.

Click sobre el botón (icono) el personaje se mueve hacia la izquierda. Godot
Click sobre el botón (icono) el personaje se mueve hacia la izquierda. Godot

ÍNDICE


0 0 votes
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x