Tutorial de Godot – Parte 03: Primer proyecto

En este tutorial de Godot configuraremos nuestro primer proyecto: una escena GUI simple que consta de un botón y una etiqueta. Cuando hagamos clic en el botón, actualizaremos la etiqueta con el tradicional «¡Hola mundo!» texto de todos los tutoriales para principiantes.

Aprenderemos a:

  • Dibuja una interfaz de usuario muy simple.
  • Cree un script y adjúntelo a un nodo.
  • Conecta elementos de la interfaz de usuario a través de señales.
  • Escriba un script que pueda acceder a otros nodos en la escena.

Creando un nuevo proyecto

Primero, creemos un nuevo proyecto, haciendo clic en el botón Nuevo Proyecto . Elija y cree una ruta para el proyecto y establezca el nombre del proyecto en UITest:

Dibujar la GUI

Cuando se abre el editor, el espacio de trabajo seleccionado por defecto es el 3D. Haga clic en el botón 2D en la parte superior de la ventana o presione F2 para cambiar al espacio de trabajo 2D.

Ahora, podemos agregar elementos de la interfaz de usuario al proyecto. Para hacer esto, presione el botón Nuevo Nodo (el símbolo más) en el editor de árbol de escena:

Esto abrirá el cuadro de diálogo Crear nodo , que muestra una larga lista de nodos que se pueden crear:

Desde allí, seleccione el tipo de panel. Puede encontrarlo en Nodo → CanvasItem → Control → Panel . Buscarlo es probablemente la forma más rápida de seleccionarlo:

Una vez seleccionado, haga clic en Crear para agregar el panel al proyecto. El panel aparece, seleccionado, en la esquina superior izquierda de la ventana gráfica. Use el editor 2D para cambiar el tamaño del panel y dejar espacio para agregar otros elementos de la GUI:

Ahora, con el nodo Panel seleccionado en el editor de árbol de escenas , agregue una etiqueta usando el mismo procedimiento que antes. La etiqueta se agregará como elemento secundario del panel.

En el Inspector , establezca la propiedad Texto de la etiqueta en «Esta es una etiqueta».

A continuación, queremos agregar un Botón al panel. Repita el procedimiento anterior, teniendo cuidado de seleccionar el nodo Panel para agregar el botón como su elemento secundario. Establezca el texto del botón en «Haga clic en mí» en el Inspector .

Finalmente, use el editor 2D para colocar y cambiar el tamaño de la etiqueta y el botón para que se vean como la imagen a continuación:

Probando la escena

Antes de probar la escena que acabamos de crear, debemos guardarla. En el menú principal, haga clic en Escena → Guardar escena y llámelo Main.tscn .

El cuadro de diálogo de archivo solo le permite guardar archivos dentro de la carpeta del proyecto. La raíz del proyecto se llama res:// que significa ruta de recursos. Al realizar operaciones con archivos en Godot, recuerda que res:// es la ruta del recurso, y sin importar la plataforma o la ubicación de instalación, es la ruta para ubicar dónde se encuentran los archivos de recursos dentro del juego.

Ahora que todo está listo, presione el botón Reproducir escena en la barra superior (o presione F6) para ejecutar la escena:

¡Nuestra primera escena se está ejecutando!

Configuración de la escena principal

En este momento, la única forma de ejecutar algo es ejecutar la escena actual. Los proyectos, sin embargo, pueden tener varias escenas, por lo que una de ellas debe establecerse como escena principal. Este es el que se cargará cada vez que se ejecute el proyecto.

Qué escena cargar cuando comienza el juego se almacena en el archivo project.godot , junto con muchas otras configuraciones. Godot proporciona un diálogo de configuración del proyecto para editar este archivo fácilmente. Para acceder a ese cuadro de diálogo, seleccione Proyecto → Configuración del proyecto .

Una vez que se abra la ventana de configuración del proyecto, busque la propiedad Aplicación → Ejecutar → Escena principal y haga clic en el icono de la carpeta para seleccionar Main.tscn .

Ahora, cuando presione el botón Reproducir (o presione F5), esta escena se ejecutará, sin importar qué escena se esté editando activamente.

secuencias de comandos

Los scripts se utilizan para controlar cómo funcionan los nodos y cómo interactúan con otros nodos : hijos, padres, hermanos, etc. El ámbito local del script es el nodo y hereda las funciones proporcionadas por ese nodo.

Godot admite cuatro idiomas oficiales para escribir scripts: GDscript, VisualScript, C# y C++.

GDScript es el lenguaje principal usado en Godot (y el que en estos tutoriales). Es un lenguaje de programación de tipo dinámico de alto nivel que utiliza una sintaxis similar a Python (los bloques se basan en sangría y muchas palabras clave son similares) con muchas optimizaciones para el código de juego (por ejemplo, tiene tipos integrados como vectores y colores). Su uso tiene algunos puntos positivos en comparación con otros lenguajes, debido a su alta integración con Godot.

Si no sabes nada de programación, no te preocupes. Aprenderemos GDScript poco a poco durante los próximos tutoriales. Incluso si puede encontrar conceptos que no conoce, lea esta publicación hasta el final de todos modos para comenzar a familiarizarse con GDScript. Puede volver a esta publicación más tarde cuando tenga más conocimiento para comprenderlo más profundamente.

Agregar un guión

Volvamos al proyecto. Haga clic derecho en el nodo Panel, luego seleccione Adjuntar secuencia de comandos en el menú contextual: aparecerá el cuadro de diálogo de creación de secuencias de comandos. En este cuadro de diálogo, puede establecer el idioma del script, el nombre de la clase y otras opciones del script.

Asegúrese de que el idioma seleccionado sea GDScript. El nodo al que adjuntamos el script es un Panel, por lo que el campo Inherits se completará automáticamente con Panel. En GDScript, de forma predeterminada, todas las secuencias de comandos no tienen nombre, por lo que el nombre de la clase no se puede editar.

Ingrese el nombre del script ( HelloWorld.gd ) y haga clic en Crear .

Godot creará el script, lo agregará al nodo y abrirá el espacio de trabajo del script. Puede ver que ahora hay un ícono de Open Script al lado del nodo en la pestaña Escena.

Si observa el script, verá que se ha incluido una plantilla predeterminada que contiene la función _ready() :

extends Panel

# Declare member variables here. Examples:
# var a = 2
# var b = "text"

# 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

Una función es un bloque de código que solo se ejecuta cuando se llama dentro de otro código. Puede pasar datos, conocidos como parámetros, a una función y, como resultado, puede devolver datos. En GDScript, una función se define mediante la palabra clave func , seguida del nombre de la función y un par de corchetes. Si es posible pasar parámetros a la función, estos últimos se especifican entre paréntesis.

Aprenderemos a escribir funciones en el curso de esta serie de tutoriales.

Godot llama a la función _ready() cuando el nodo, y todos sus hijos, entran en escena activa .

Señales

Las señales se emiten cuando ocurre algún evento y se pueden conectar a cualquier función de cualquier instancia de script.

Queremos conectar la señal presionada de nuestro botón a una función personalizada en el script que acabamos de crear. Godot proporciona dos formas de crear conexiones: a través del editor oa través del código. Usaremos el editor.

Seleccione el nodo Botón en el árbol de escena y luego seleccione la pestaña Nodo . A continuación, asegúrese de haber seleccionado Señales :

Si selecciona pressed() debajo de BaseButton y hace clic en el botón Conectar en la parte inferior derecha, abrirá el diálogo de creación de conexión:

La sección superior izquierda muestra una lista de los nodos de su escena con el nombre del nodo emisor resaltado en rojo. Use esto para seleccionar el nodo que desea conectar a la señal. Seleccione el nodo Panel: el campo Ruta al nodo en la parte inferior se actualizará automáticamente.

De forma predeterminada, Method In Node contendrá un nombre de función compuesto por el nombre del nodo emisor y el nombre de la señal, pero puede elegir el nombre que desee. Si el botón Crear función está marcado, el editor generará la función por usted antes de configurar la conexión.

Haga clic en el botón Conectar . El editor de secuencias de comandos se abrirá con la función recién creada seleccionada.

Cambiar el texto de la etiqueta

Cuando presionamos el botón, queremos cambiar el texto de la etiqueta a «¡Hola mundo!».

En primer lugar, necesitamos obtener el nodo Etiqueta para cambiar sus propiedades. Para lograr esto, presentaremos la función más utilizada en Godot: Node.get_node() . Esta función encuentra nodos utilizando rutas relativas al nodo que posee el script.

Debido a que Label es un elemento secundario de Panel (donde se adjunta nuestro script), puede obtenerlo escribiendo el siguiente código en la función _on_Button_pressed() :

func _on_Button_pressed():
    get_node("Label").text = "Hello World!"

Desde la versión 3.0 de Godot, puedes usar una notación más compacta para referirte a los nodos secundarios, usando el operador $ :

func _on_Button_pressed():
    $Label.text = "Hello World!"

Ejecute la escena y presione el botón. Debería obtener el siguiente resultado:

Conclusiones

En estos primeros tres tutoriales introductorios, obtenemos un conocimiento básico de cómo funciona Godot. ¡Ahora podemos comenzar a construir un pequeño juego de pixel art en 2D!