Bienvenido al primer tutorial de codificación de la serie de tutoriales Godot de GameFromScratch.com. Vamos a echar un vistazo rápido al IDE de Godot y luego entrar y crear nuestra primera aplicación. Quiero decir desde el principio que no soy un experto en Godot, así que si puedo cometer un error o si detectas algo cuestionable, ¡asegúrate de señalarlo! Ciertamente puede haber una forma mejor o más eficiente de hacer las cosas. También hay una versión en video de este tutorial disponible aquí. Una versión incrustada está disponible a continuación. El video cubre el mismo tema, pero puede entrar en un poco más de detalle. Este primer tutorial entra en gran cantidad de detalles y todos los tutoriales subsiguientes asumirán que ha leído o visto los anteriores. Como resultado, los tutoriales futuros probablemente serán mucho más cortos o, al menos, tendrán menos capturas de pantalla.
Muy bien, sin más preámbulos, ¡saltemos!
En primer lugar, obviamente necesitas tener Godot instalado antes de continuar. Si aún no lo has hecho, ve a descargar Godot ahora.
Crear un proyecto inicial
Ahora, cuando ejecute Godot, debería ver aparecer la siguiente ventana:
Si tiene un proyecto existente, puede cargarlo aquí. Además, si ha descargado el demostraciones y muestras (enlace zip directo) puede cargarlos usando el botón Importar. En nuestro caso, sin embargo, queremos crear un nuevo proyecto. Haga clic en el botón Nuevo proyecto:
Se abrirá un nuevo cuadro de diálogo.
Haga clic en el botón Examinar y navegue hasta la carpeta en la que desea crear su proyecto. Tenga en cuenta que Godot no creará una carpeta para su proyecto, así que use el botón Crear carpeta si necesita una. Aquí están las configuraciones que estoy usando:
Una vez que haya seleccionado su directorio, haga clic en Abrir. Luego, en el cuadro de diálogo anterior, el nombre del proyecto se establecerá en el directorio que elija. Una vez satisfecho, haga clic en Crear.
Ahora haga doble clic o haga clic en seleccione su proyecto y elija Editar
Agregar un nodo al mundo
Ahora debería estar en la interfaz del editor principal. Comencemos a crear nuestra aplicación. Lo primero que necesitamos para agregar un nodo de texto a nuestro mundo. En el lado derecho de la pantalla, asegúrese de que la pestaña Escena esté seleccionada, luego haga clic en el botón Agregar/Crear un nuevo nodo.
Ahora, en el cuadro de diálogo resultante, busque RichTextLabel y luego haga clic en Crear.
Se agregará un nuevo nodo a su jerarquía de escena:
Puede cambiar el nombre del nodo haciendo doble clic, he cambiado el nombre del mío HolaMundoEtiqueta:
Con el Nodo seleccionado, puede ver sus propiedades editables en la ventana Inspector:
Agregar un guión
¡Una cosa que puede notar es que no hay ninguna propiedad disponible para establecer el texto! Es hora de un poco de secuencias de comandos. Necesitamos adjuntar un script a nuestro nodo. En el panel de escena, seleccione su nodo RichTextLabel y haga clic en el ícono de secuencia de comandos:
Si no hay una secuencia de comandos adjunta, este icono mostrará el siguiente cuadro de diálogo:
Haga clic en .. junto a Ruta. Ahora haga clic en «Crear carpeta», cree una llamada Scripts y luego haga clic en Aceptar. Debo señalar que esto es completamente opcional, por supuesto, podría simplemente poner todas las cosas en la raíz de su aplicación. Debe tener en cuenta que el sistema de archivos en Godot es completamente relativo al directorio raíz de los proyectos. Si desea que se incluya un activo en su juego, debe copiarlo en esta carpeta o en una subcarpeta para poder utilizarlo.
Ahora nombra tu script. ¡NOTA! Tienes que agregar el formato de archivo .gd, desafortunadamente Godot no lo hará por ti. Llamé al mío «MyButtonScript.gd». Una vez hecho esto, haga clic en «Guardar»
Finalmente haga clic en «Crear»
Edición de guiones
Una vez que presiones Crear, deberías ser llevado automáticamente a la ventana de edición de código, así:
Como puedes ver, Godot ha creado un nuevo script que hereda de RichTextLabel. Implementa el método _ready() que es donde realiza toda la lógica relacionada con la creación en su secuencia de comandos. Si viene de otro idioma, _ready no es el constructor, no es el primer método que se llama. Si necesita un comportamiento similar al de un constructor, en su lugar use _init(). _listo() es una función anulable heredada de Nodo que es la clase base de todas las cosas que pueden aparecer en la Escena. ¡Verás muchos Nodos en el futuro!
En cuanto a GDScript en sí, es un lenguaje de secuencias de comandos similar a Python, por lo que si tiene algo de experiencia con Python, se sentirá inmediatamente como en casa. Si está acostumbrado a los lenguajes de llaves ( { } ) como C ++ o Java, lo más importante que debe entender es que usa líneas nuevas en lugar de llaves y puntos y coma. No te preocupes, aunque al principio te resulte chocante, te acostumbrarás rápidamente.
Ahora, si desea repasar GDScript, le recomiendo las siguientes fuentes:
- Wiki GDScript – esta es una descripción general del lenguaje
- Funciones integradas de GDScript – estas son las funciones integradas directamente en el lenguaje
- Referencia de la biblioteca GDScript – Listado alfabético de todos los objetos de la biblioteca GDScript
- Wiki GDScript — el wiki. Guías de inicio, etc.
Además, puede acceder a la referencia de la biblioteca en cualquier momento en la pestaña Ayuda o presionando F1:
También puede obtener ayuda sensible al contexto presionando Shift + F1 cuando usa la pestaña Script.
Ok… eso es suficiente descripción general del idioma, cambiemos nuestro código para establecer el texto cuando se carga nuestro control. Simplemente reemplace el código con:
extends RichTextLabel
func _ready():
self.add_text("Hello World")
self es básicamente lo mismo que this en otros idiomas, lo que devuelve una referencia al objeto local. En este caso, self es RichTextLabel. Estamos llamando al método add_text() que heredado de RichTextLabelconfigurando el texto para nuestro control.
A continuación, queremos ejecutar nuestro código… pero todavía no podemos. Primero, debemos configurar nuestra escena predeterminada… oh, y mientras estamos en ese tema, ¡necesitamos guardar nuestra escena!
Configuración de la escena predeterminada
Primero salvemos nuestra escena. Seleccione el botón de menú Escena y seleccione Guardar escena.
En el cuadro de diálogo resultante, seleccione una ubicación y un nombre. ¡Asegúrese de agregar la extensión scn, ya que Godot lo requiere y no lo hará por usted! Al igual que con los scripts, puede guardar todas sus escenas en una carpeta de escenas, pero en este caso solo las guardaré en el directorio raíz con el nombre predeterminado new_scene.scn. Cuando haya terminado, haga clic en Guardar.
Bien, ahora que tenemos una escena, debemos configurarla como la escena predeterminada que se ejecuta cuando cargamos nuestro juego. Para ello, haga clic en Escena->Configuración del proyecto:
En el cuadro de diálogo resultante, ubique la escena principal, luego presione el ícono de la carpeta a su derecha:
Seleccione Archivo…
Seleccione su escena, luego haga clic en Abrir.
Ejecutando tu aplicación
Ahora puedes ejecutar tu escena. Simplemente haga clic en el icono de reproducción en la parte superior de la aplicación:
Si todo salió según lo planeado, debería ver algo como esto:
¡Felicitaciones, acabas de crear tu primer juego de Godot! Ahora, ¡hagámoslo apestar un poco menos!
Para detener la ejecución de su aplicación, simplemente haga clic en el icono Detener a la derecha del icono de reproducción.
Edición de un nodo de escena
Puede notar que nuestro texto está en dos líneas y en la esquina superior izquierda de la pantalla. Esto se debe a que no establecimos el tamaño o la posición. Ambos se pueden hacer en el panel Escena 2D.
Primero, cambia a Escena 2D:
Ahora puede ver nuestro RichTextLabel como un pequeño rectángulo en la esquina superior izquierda:
Puede usar esta ventana para colocar sus diversos nodos en su escena. Si su nodo no está seleccionado, puede seleccionarlo haciendo clic en él en la ventana 2D, o seleccionándolo desde el panel Escenas a su derecha.
Haga clic con el botón izquierdo y arrastre dentro de la selección para moverla. Tome uno de los círculos de la esquina para cambiar su tamaño, así:
Si observa el panel Inspector, verá que los valores se han actualizado a medida que los edita en la escena:
También puede ingresar valores numéricos en la ventana Inspector si prefiere un control más preciso. Solo asegúrese de presionar enter o sus cambios no se guardarán.
Cargar y cambiar una fuente
Una pregunta que puede tener es, ¿cómo cambio el tamaño del texto? La respuesta es, usando una fuente. Debe crear una fuente para cada tamaño de texto que desee. Afortunadamente, crear fuentes es increíblemente simple. En el menú Importar, seleccione Fuente
Ahora podrá importar una fuente existente. Si está ejecutando Windows, varios archivos ttf (Fuente TrueType) se encuentran en WindowsFonts. ¡Tenga en cuenta que estas fuentes son casi todas marcas registradas y no se pueden usar sin permiso en un juego enviado! Sin embargo, hay cientos de fuentes TTF de licencia abierta disponibles para descargar.
Por lo tanto, abra su fuente, seleccione el tamaño y las propiedades que desea configurar, luego configure el nombre de archivo de Dest Resource, asegurándose de tener la extensión .fnt. Finalmente haga clic en Importar.
Ahora necesita configurar su RichTextLabel para usar su nueva fuente. Con su etiqueta seleccionada, en la ventana Inspector, busque Fuente personalizada, haga clic en el menú desplegable y seleccione Cargar. Seleccione su fuente recién importada.
Ahora, cuando ejecute el código, debería ver:
Adición de un temporizador y cableado de eventos
Ahora agreguemos un poco de funcionalidad a nuestra aplicación. Gran parte de la lógica de Godot está disponible en los nodos incluidos. Agreguemos un temporizador como elemento secundario a nuestro RichTextLabel, que se llamará cada segundo, actualizando un contador en nuestro mensaje.
Primero necesitamos agregar un nodo secundario. Con nuestro RichTextLabel seleccionado en el panel Escena, haga clic en el icono Nuevo nodo y agregue un temporizador:
Seleccione Temporizador y haga clic en Crear. Su temporizador ahora debería aparecer como un hijo de su RichTextNode, así:
Asegúrese de que el Temporizador esté seleccionado y en Inspector, active la propiedad Inicio automático:
Esto creará un temporizador que se llama cada segundo y comienza a ejecutarse tan pronto como se crea. Ahora conectemos el temporizador a nuestro RichTextLabel. En el panel Escena, con Temporizador seleccionado, haga clic en el icono Editar conexiones de nodo:
A continuación, seleccione la conexión timeout(), que es la devolución de llamada que se llamará cada vez que el temporizador «marque». Luego presione «Conectar…»
En el siguiente cuadro de diálogo, los valores predeterminados deberían ser buenos. Esto es conectar una conexión entre el objeto del temporizador y RichTextLabel. Cuando se active la conexión, llamará al método que está creando, en este caso, _on_Timer_2_timeout. Cuando haya terminado, haga clic en Conectar:
Esto agregará automáticamente una función a su archivo de secuencia de comandos y lo llevará al editor de secuencias de comandos. Ahora cambiemos un poco nuestro código. Vamos a agregar una variable miembro que cuenta la cantidad de segundos y actualizar nuestro total cada vez que el temporizador marca. Edite su código así:
extends RichTextLabel
var count = 0
func _ready():
self.add_text("Hello World")
func _on_Timer_2_timeout():
count += 1
self.clear()
self.add_text(str("Hello World! Elapsed seconds = ",count))
Como puede ver, agregamos una variable llamada count con el valor 0. GDScript tiene un «tipo de pato» en el sentido de que infiere el tipo del valor que se le da. Así que “si parece un pato, actúa como un pato y grazna como un pato… ¡es un pato!”, simplemente aplicado a las variables.
A continuación, notará que Godot ha agregado la función _on_Timer_2_timeout, que será llamada por nuestro temporizador cada vez que marque. Simplemente incrementamos nuestro contador, borramos el valor existente de la etiqueta y luego agregamos un nuevo texto. Para concatenar nuestra cadena y contar las variables juntas, usamos la función str() incorporada, que es similar a printf en otros idiomas.
Ahora, cuando se ejecute su código, verá:
… y eso es lo básico para crear una aplicación en Godot. En el futuro, esperamos profundizar en todos los aspectos del uso de Godot. Si tiene alguna pregunta o comentario, ¡no dude en preguntar!
