Elije tu propia aventura

Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.

En este juego iremos pulsando en areas de la pantalla que cargarán nuevas escenas.

Esta forma de jugar es similar a lo que hace un usuario interactuando con los menús de un videojuego y por tanto sería más apropiado resolver el juego utilizando una escena de tipo User Interface.

Utilizando una escena de tipo User Interface

1. Creamos una escena (ctrl + n) → La definimos como de tipo User Interface → La renombramos (pulsando sobre ella en el panel Scene → rename → la llamamos Main).

2. Salvamos la escena (ctrl + s) en una carpeta llamada scenes y utilizando la siguiente convención de nombres:

  • La escena se nombra utilizando Pascal Case.
  • El fichero que contiene la escena se nombra utilizando sólo minúsculas y cada palabra se separa de la siguiente utilizando un guión bajo.

3. Añadimos un nodo (ctrl + a). Un nodo es cualquier objeto colocado en escena. El nuevo nodo será de tipo Node → Canvas Item → Control → Container.

Un Nodo de tipo Container nos permite controlar la escala y la posición de otros elementos UI que colocaremos dentro .

Para ajustar el nodo Container al tamaño de la pantalla, usaremos la siguiente opción:

Elije tu propia aventura 1

4. Añadimos un nuevo nodo hijo del nodo Container. Node → Canvas Item → Contro → Texture Rect. Esto corresponde a una imagen.

5. Desde el panel inspector del nodo Texture Rect vinculamos la imagen deseada utilizando la opción Texture Rect → Texture → Quick Load. Quick Load mostrará todos los recursos de nuestro proyecto que pueden encajar en la propiedad que estamos utilizando.

6. Probamos la escena (F5 para lanzar y F8 para detener).

7. Añadimos un nuevo nodo de tipo Button. Si quisieramos cambiar su imágen asociada, en el inspector iríamos a la propiedad IconQuick Load.

8. Añadimos un Script a la escena.

Elije tu propia aventura 2

9. Vamos a añadir al script de la escena el código que se ejecutará cuando pulsemos el botón. Para ello, Panel Node Pestaña Signals Pressed() Connect… → añadirá el código correspondiente a la pulsación del botón al script de la escena.

extends Control

func _on_button_pressed():
	print('Botón pulsado') # Replace with function body.

10. Modificaremos el código para que cargue una escena al hacer click.

extends Control
@export var spaceship_scene:PackedScene
@export var earth_scene:PackedScene

func _on_earth_button_pressed():
	var new_scene = earth_scene.instantiate() 
	get_tree().root.add_child(new_scene)


func _on_spaceship_button_pressed():
	var new_scene = spaceship_scene.instantiate() 
	get_tree().root.add_child(new_scene)

Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.