Tutorial de Godot – Parte 04: Desarrollando un RPG de pixel art

Ahora que tenemos una idea de cómo funciona Godot, en este tutorial podemos comenzar a crear un juego de rol simple de arriba hacia abajo . Usaremos gráficos pixel art, por lo que aprenderemos a configurar Godot para este tipo de juegos.

El primer paso para desarrollar el juego será colocar a nuestro jugador en la pantalla.

Creando el proyecto

En primer lugar, abramos Godot y creemos un nuevo proyecto llamado SimpleRPG:

Crear proyecto SimpleRPG

Una vez que hagamos clic en Crear , nos encontraremos en el espacio de trabajo 3D. Dado que nuestro proyecto estará en 2D, cambiemos al espacio de trabajo 2D.

Configurando Godot para pixel art

Godot nos brinda muchas opciones dedicadas a quienes hacen juegos de pixel art.

En este tipo de juegos, intentamos recrear la apariencia de los juegos de la era de 8 y 16 bits, cuando la resolución disponible era mucho menor que la de los monitores actuales.

Por lo tanto, debemos configurar Godot para que use una resolución más baja y renderice las imágenes con precisión de píxeles . De forma predeterminada, Godot renderizará a una resolución de subpíxeles, pero en ese caso, las imágenes de pixel art podrían mostrarse borrosas.

¿Qué resolución deberías usar para los juegos de pixel art?Depende totalmente de ti, porque es básicamente una cuestión de estilo artístico. Pero como regla general, dado que la resolución de monitor más común es 1920 × 1080, para lograr un aspecto perfecto de píxeles, debe usar una resolución con una relación de aspecto de 16: 9 que se amplíe hasta 1920 × 1080 con un factor de número entero. Entonces, por ejemplo, 640×360, 480×270 y 320×180 son tres resoluciones válidas porque son respectivamente 1920×1080 dividido por 3, 4 y 6. Usaremos una resolución de 320×180 para nuestro juego de rol.

Para configurar Godot, abra el cuadro de diálogo Configuración del proyecto haciendo clic en Proyecto → Configuración del proyecto. En la pestaña General, busque la sección Pantalla → Ventana → Tamaño y configure Ancho y Alto en 320 y 180 , luego configure Ancho de prueba y Alto de prueba en 1280 y 720 (4 veces la resolución del juego). Si está utilizando una pantalla con baja resolución (como en algunas computadoras portátiles), puede intentar configurar Test Width y Test Height en 960 y 540 (3 veces la resolución del juego).

Establecer la resolución del juego y el tamaño de la ventana de prueba

Ahora, en Pantalla → Ventana → Estirar , establece Modo en 2D y Aspecto para mantener , para decirle a Godot que use toda la ventana para renderizar el juego y preservar la relación de aspecto original.

Para renderizar el juego con precisión de píxeles, ve a la sección Rendering → Quality → 2D y activa Use Pixel Snap .

Active Usar ajuste de píxel

Cierre el cuadro de diálogo Configuración del proyecto. Finalmente, en la barra de herramientas de la ventana gráfica, haga clic en los tres puntos y habilite Use Pixel Snap . De esta forma todos los nodos de la escena quedarán perfectamente alineados a píxeles.

Active Usar Pixel Snap en la ventana gráfica

Agregar un sprite para el jugador

Lo primero que suele hacer cuando tiene una escena vacía es agregar un nodo principal que será la raíz para el resto de la escena. Para hacerlo, en el panel Escena , haga clic en el botón más , luego seleccione Nodo y agréguelo a la escena haciendo clic en Crear .

Ahora agreguemos la imagen del jugador a los recursos del proyecto. En primer lugar, descargue la imagen haciendo clic en el siguiente botón:

Descargar «Simple RPG Player»reproductor.png – 3 KB

Una vez descargado, arrástralo al panel FileSystem de Godot . Debería ver algo como esto:

Ahora, con el archivo player.png seleccionado, vaya al panel Importar y en la sección Banderas deshabilite Filter . Finalmente, haga clic en Reimportar . De esta forma, la imagen no se mostrará borrosa en la ventana gráfica.

Desactive el filtro para texturas de pixel art

En este punto, queremos agregar a nuestra escena un nodo que nos permita mostrar al jugador. Para ello, añadimos un nodo de tipo Sprite . Un Sprite es simplemente un nodo que muestra una textura 2D.

Una vez agregado al proyecto, verá que aparece algo en la esquina superior izquierda de la ventana gráfica. Si intenta acercar, verá que todavía no se muestra ninguna imagen. Por supuesto, esto sucede porque aún no le hemos dicho al sprite qué mostrar.

Si observa el panel Inspector con Sprite seleccionado, verá que hay una propiedad de Textura actualmente vacía. Arrastre el archivo player.png desde el panel FileSystem a la propiedad Texture :

Arrastre player.png a la propiedad Textura

En el Inspector , en las propiedades heredadas de Node2D , verás una sección Transformar . Abrelo. En su interior encontrará las propiedades Posición , Grado de rotación y Escala . El significado de estas propiedades se explica por sí mismo.

Lo primero que observamos es que las coordenadas actuales del sprite son (0, 0), que por lo tanto corresponden a la esquina superior izquierda de la ventana del juego. Además, observamos que la posición identifica el centro del sprite.

Si intenta editar los valores de Posición x e y , verá que al aumentar el valor de x , el sprite se mueve hacia la derecha, mientras que al aumentar el valor de y , el sprite se mueve hacia abajo.

Sistema de coordenadas en Godot

Como queremos que el jugador esté en el centro de la ventana al comienzo del juego, ingrese los valores 160 y 90 en Posición .

Establecer la posición inicial del jugador

ejecutando el juego

Antes de que podamos probar lo que hemos hecho hasta ahora, debemos guardar la escena actual y configurarla como la escena principal.

Haga clic en Escena → Guardar escena y llámelo Main.tscn . Luego, abra el cuadro de diálogo Configuración del proyecto y, en la pestaña General , vaya a Aplicación → Ejecutar → Escena principal y seleccione la escena que acaba de guardar.

Ahora puedes presionar el botón Play : aparecerá una ventana con nuestro reproductor en el medio.

Conclusiones

En este post hemos aprendido a añadir sprites a nuestro proyecto. Por ahora, estos sprites no hacen mucho, pero en el próximo tutorial, el sprite de nuestro jugador se volverá interactivo: lo haremos mover cuando el jugador presione las teclas de flecha en el teclado o use el joystick analógico del joypad.