Juego Coin Dash

Coin Dash

ADVERTENCIA: La mecánica de este Juego, los Sprites y las imágenes son propiedad de Chris Bradfield en su libro Godot Engine Game Development Project. Yo solo voy a parafrasear el contenido según lo que he aprendido.

Este primer proyecto te guiará en el desarrollo de tu primer proyecto usando Godot Engine. Aprenderás como funciona el editor, como estructurar un proyecto, y como construir un pequeño juego 2D.

¿Por qué 2D? 

Porque los juegos en 2D son mucho más fáciles de aprender con relación a los juegos en 3D, además la mayoría de las cosas que aprenderás en 2D te servirán para el 3D. Digamos que 2D es el instituto y 3D es la facultad. Tienes que pasar por el insti primero antes de ir a la facu entendido?

Este juego se llama Coin Dash. Tu personaje debe moverse al rededor de la pantalla coleccionado tantas monedas como pueda antes de que se acabe el tiempo, al final deberás tener una pantalla como esta:

 

Configurando el Proyecto

Abre Godot (si aún no lo has hecho)  y crea un proyecto nuevo, asegúrate de dar clic en el boton "Create Folder" para asegurarte de que los archivos de este proyecto se mantengan separados de tus otros proyectos o carpetas (Godot no te deja crear proyectos en carpetas creadas con archivos de otros proyectos).

En este proyecto crearás 3 escenas independientes: Player, Coin y HUD, las cuales serán combinadas en la escena principal del juego (Main). En proyectos más largos es recomendable crear carpetas para almacenar y organizar las escenas, sprites y scripts, pero para este proyecto relativamente pequeño no hace falta, de manera que guardaremos todo en la carpeta raíz del proyecto, la cual es referida dentro de Godot como "res://" que es una abreviatura de "Resources" o "Recursos". Todos los recursos de este proyecto estarán ubicados en la raíz del mismo, por lo tanto se pueden acceder de la siguiente forma "res://sprite.png". También los puedes ver desde el "Panel de Sistema de Archivos"

 

Por ejemplo, la imagen para la moneda estaría ubicada en "res://assets/coin.png"

ADVERTENCIA: Por motivos de CopyRight no puedo dejar el link para la descarga de los Assets. Pero no te preocupes porque lo importante es que aprendas como funciona el juego por dentro, ya los sprites los puedes crear tu mismo o usar sprites libres desde: www.opengameart.org

 Este juego usará el modo "Retrato" así que necesitarás ajustar el tamaño de la ventana principal en las configuraciones del proyecto. Haz clic en el menu Project y selecciona Project Settings,  como se muestra en la siguiente imagen:

 

 Busca la sección Display/Window y ajusta el Width a 480 y el Height a 720. También en esta sección, ajusta el Stretch/Mode a 2D y en Aspect ponlo en Keep. Esto sirve para que la pantalla se redimensione de forma correcta si el usuario la estira por el borde, así quedará todo el juego bien escalado en lugar de deformarse como si se hiciera un zoom o se estirasen las imagenes.

TIP: Si quieres que el usuario no redimensione la pantalla, entonces desmarca la opción Resizable.

Los Vectores  y el sistema de coordenadas 2D

Cuando trabajas con juegos 2D, estás usando coordenadas cartesianas para identificar las ubicaciones en el plano o espacio. Una posición en particular en un espacio 2D se escribe con un par de valores, por ejemplo (4, 3), representando la posición a lo largo del eje X y a lo largo del eje Y respectivamente. De ahora en adelante quiero que entiendas que cualquier posición en un juego 2D la debes expresar de esta manera de acuerdo?

Para renderizar los objetos en un juego 2D, Godot usa la practica común que usan las computadoras de orientar el eje X a la derecha, y el eje Y hacia abajo en lugar de arriba.

TIP: mucho ojo con esto porque es distinto a lo que aprendimos en matemáticas donde nos enseñan a orientar el eje Y hacia arriba. Las computadoras lo hacen hacia abajo, de manera que para Godot (0, -10) signifa 10 puntos hacia arriba y (0, 10) significa 10 puntos hacia abajo.

 

Vectores

Tambien puedes ver el ejemplo (4, 3) como un desplazamiento desde el origen (0, 0) hacia la posición (4, 3). Puedes visualizar en tu mente como si una flecha saliera del origen (punto cero) en diagonal a la derecha hasta llegar al punto (4, 3) pero hacia abajo porque la Y es positiva recuerda.

 

 

La flecha es el vector. Representa varias cosas: 

1. El punto de ubicación (4, 3)

2. La longitud (m)

3. El ángulo desde el eje X (0)

Todo junto forma un vector de posición, en otras palabras, describe una posición en el espacio. Los vectores también pueden representar movimiento, aceleración, o cualquier otra cantidad que tenga un componente (X, Y).

En Godot, los vectores (Vector2 para 2D y Vector3 para 3D) son ampliamente usados y tú los usarás también en el transcurso de este proyecto.

TIP: te recomiendo que te des una vuelta y digieras este concepto muy bien, es importante que conozcas y domines bien las bases para la construcción de un videojuego antes de ir a conceptos más complejos.

Renderizado de Pixeles

Las coordenadas vectoriales en Godot reciben valores de coma flotantes en lugar de enteros. Eso quiere decir que un Vector2 pudiera tener valores fraccionales como (1.5, 1.5). Como los objetos no pueden dibujarse en la mitad de un pixel entonces esto puede causar problemas para el estilo de juegos Pixel Art donde tienes que asegurarte que todos los pixeles de una textura se dibujen correctamente.

Para solucionar esto, abre el menu Project | Project Settings y busca lasección Rendering | Quality y habilita la opcion Use Pixel Snap como se muestra en la imagen:

 

 Si vas a usar Pixel Art en tus juegos, siempre es buena idea habilitar esta opción cuando inicies tu proyecto. "ESTE AJUSTE NO TIENE VALIDEZ EN JUEGOS 3D"

Parte 1 - La escena del Player

La primera escena que crearás definirá al objeto Player. uno de los beneficios de crear la escena Player por separado es que la puedes testear de forma independiente, incluso antes de que hayas creado las otras partes del juego. Esta separación de los objetos del juego será cada vez más útil a medida que tu proyecto vaya creciendo tanto en tamaño como en complejidad. Al mantener los objetos del juego de forma independiente uno del otro, los hace ,ás fácil de debuggear, modificar e incluso reemplazarlos por completo sin afectar las otras partes del juego. También hace que tu jugador sea reutilizable, puedes arrastrar y soltar la escena en un juego completamente distinto de este que estas haciendo y el comportamiento será exactamente igual.

La espena Player mostrará a tu personake y sus animaciones, responderá a las entradas de teclado moviendose por la pantalla según las teclas pulsadas, también detectará colisiones con otros objetos en el juego.

Creando la escena

Comienza dando clic en el botón Add/Create y selecciona una Area2D. Luego, haz clic en su nombre y cambialo a Player. Clic en el menu Scene | Save Scene para guardar la escena. Area2D será el nodo raíz de la escena, agregarás mas funcionalidades al Player agregando otros nodos como hijo de Area2D.  (recuerda que toda escena tiene un unico nodo raíz)

 Antes de agregar cualquier nodo hijo, es una buena idea bloquear el nodo padre (Area2D) para que no arrastres ninguno de sus hijos por accidente. Selecciona el nodo padre (Player) y haz clic en el icono que está al lado del candado:

 El tooltip dice: Asegurarse de que los nodos hijos no sean seleccionables.

Es una buena idea hacer esto siempre que creas una escena. Si la caja de colisiones de un cuerpo o un sprite son desplazados o escalados, pueden causar errores inesperados y difíciles de reparar.  Habilitando esta opción asegura que si el nodo padre se mueve, también lo harán sus hijos.

Animando el Sprite

Con un nodo Area2D, puedes detectar cuando otros objetos se solapen contigo o corran hacia ti. Pero un nodo Area2D visualmente no tiene apariencia, así que le daremos una con un nodo de tipo Sprite. Haz clic en el nodo Player y agrega un nodo de tipo AnimatedSprite como hijo. El AnimatedSprite gestionará tanto la apariencia como la animación de tu Player. Te habrás fijado que ha aparecido un simbolo de advertencia al lado del nodo. Esto es porque un AnimatedSprite necesita un recurso de tipo SpriteFrame, el cual contiene las animaciones para mostrar. Para crear un recurso SpriteFrame, encuentra la propiedad Frame en el inspector y haz clic en <null> | New SpriteFrames:

NOTA: tienes que darle clic nuevamente para que te abra el panel de animaciones o SpriteFrames. 

A tu izquierda esta la lista de animaciones. Dale clic en default y renombrala a "run". Luego agrega una segunda animación dando clic en el botón Add, llámala "idle" y finalmente agraga otra y la llamas "hurt".

En el panel del sistema de archivos (FileSystem), busca las imagenes de run, idle y hurt y arrástralas a sus correspondientes animaciones.

 Cada animación tiene una velocidad por defecto ajustada a 5 frames por segundo. Esto es un poco lento para este personaje así que ajustemos el FPS( Frame por segundo) de cada animación llevando su propiedad Speed a 8. Revisa que todas las animaciones están funcionando correctamente habilitando la opción Plating a On en el inspector.

 

Luego, escribirás codigo para seleccionar cualquiera de estas animaciones dependiendo de lo que esté haciendo el Player, primero necesitas terminar los ajustes del nodo Player.

Figura de Colisiones

Cuando se usa un nodo Area2D (o uno de los otros objetos colisionables en Godot), se necesita definir una figura o no podrá detectar colisiones. Una figura de colisión define la region que el objeto ocupa y es usada para detectar solapamientos y/o colisiones. Estas figuras son definidas a traves del objeto CollisionShape2D y puede incluir rectángulos, circulos poligonos, entre otros.

Por conveniencia, cuando necesites agregar una figura a un area o cuerpo físico, puedes agregar un CollisionShape2D como hijo. Ya luego seleccionas el tipo de figura que quieras y ajustar su tamaño en el editor.

Agrega un CollisionShape2D como hijo de Player (Asegúrate de que no lo estas agregando como hijo del nodo AnimatedSprite). Esto te permitirá determinar la caja de colisiones del Player o como suele llamarse en la jerga inglesa: "hitbox". En el inspector, a la derecha de la propiedad Shape, haz clic en <null> | y escoge New RectangleShape2D. Ajusta el tamaño de la figura de manera que cubra el sprite.

 TIP: No estires el Shape por las esquinas! Usa el gestor de tamaños (figura en rojo) en su lugar. Las colisiones no trabajan adecuadamente cuando se estiran o se escalan por las esquinas. Recuerda siempre esto.

Te habrás dado cuenta que la figura de colisión no esta centrada con respecto al Sprite. Esto es porque el sprite no está centrado verticalmente. Podemos reparar esto agregando un pequeño desplazamiento al nodo AnimatesSporite. Haz clic en el nodo y busca la propiedad Offset en el Inspector. Ajústalo a (0, -5).

Cuando hayas terminado, tu escena Player debería verse como esta: