jueves, 13 de mayo de 2021

libGDX: Parte 1 - Flappy Bird con Box2D

En esta serie de tutoriales vamos a aprender como hacer un Flappy Bird básico en Box2d y libGDX. Para los que no lo saben fue un exitoso juego lanzado en el año 2013 para dispositivos móviles cuyo objetivo es dirigir un pájaro entre tuberías sin chocar con ellas.


Puedes jugar la versión que vamos a crear directamente en tu navegador y también puedes descargar el código fuente en github. Recuerda que puedes ver el video tutorial para ver paso a paso la creación del juego



Definir el mundo

El primer paso es definir una resolución para nuestro juego, para nuestro flappy bird será de 480 x 800 píxeles. Es necesario recordar que en Box2D las unidades utilizadas son metros, segundos, etc. Por lo que definir una tubería de 300 pixeles de altura en Box2D sería como tener un edificio de 300 metros de altura, casi tan alto como el Empire State.


Es necesario crear una escala. En mi caso yo siempre utilizo 100 pixeles es igual a 1 metro. Después de hacer esta escala suena más lógico crear una tubería de 3 metros (300 pixeles). 


El siguiente paso es definir los objetos del juego y el tamaño de sus cuerpos (Body) en metros. Si analizamos la siguiente imagen podemos ver que existen 3 objetos. El pajaro (Bird), la tubería (Pipe) y el objeto contador (Counter)



  • El pájaro será una figura circular y tendrá un radio de .25 metros.

  • Las tuberías serán figuras rectangulares con las siguientes medidas .85 x 4 metros. 

  • El contador tendrá unas medidas de .1 x 1.85 metros.


También tenemos que definir las velocidades y aceleraciones que necesitaremos. Estos valores dependen mucho de cómo queremos que sea el juego, podemos jugar con los valores hasta encontrar los valores que nos gusten para nuestro juego.


  • La gravedad del mundo será (0 , -13) m/s². Un poco más de lo que tiene el planeta tierra.

  • Para el pájaro cada vez que vuela tendrá una velocidad de 5 m/s².  Hay que tener en cuenta que esto solo afectará el movimiento en el eje Y, el movimiento en X será nulo. 

  • Tanto las tuberías como el contador tendrán la misma velocidad que será de -2 m/s², como pueden ver tiene una velocidad negativa por lo que se moverán de derecha a izquierda.


Si se han dado cuenta el pájaro siempre está en la misma posición X y lo que en realidad se mueve son las tuberías. 


Una vez que hemos definido nuestro mundo el siguiente paso es crear los recursos (Assets) necesarios. Hay que recordar que la resolución definida es de 480 x 800 por lo que los Assets dependen de esta resolución. 


Para empezar tenemos los elementos de la interfaz gráfica:


Game over: 300 x 76 píxeles

Get ready: 300 x 86 píxeles

Tap: 250 x 215 píxeles

Background: 480 x 800 píxeles

A continuación los elementos del juego. Para el pájaro es necesario tener 3 imágenes para crear la animación de que está volando y en cuanto a las tuberías necesitamos una que esté hacia arriba y otra hacia abajo.







Una vez que tenemos todos los Assets de nuestro juego es necesario empaquetarlos para esto utilizaremos un programa llamado Texturepacker y obtendremos un archivo que yo llamé atlasMap.txt y una imagen llamada atlasMap.png como se ve en la siguiente imagen:



Es necesario agregar estos dos archivos dentro de nuestra carpeta assets que se encuentra en el proyecto de Android. Ver imagen:



Implementando el juego

Una vez que tenemos los assets del juego el siguiente paso es la implementación del juego que es muy sencilla.

La clase MainFlappyBird

Es el punto de entrada del juego. Esta clase hereda de Game, desde aquí se cargan los recursos (Assets) y ponemos la pantalla del juego

La clase Assets 

Esta clase contendrá referencias estáticas a objetos TextureRegion así como Animation, en pocas palabras en esta clase será la encargada de cargar nuestros assets para poder utilizarlos más adelante en el juego.

La clase Screens

La clase abstracta Screen sirve para evitar crear código que se repite en cada una de las pantallas que creemos, en el caso de este juego solo crearemos una pantalla por lo que su utilidad no se verá reflejada, pero en otros caso ahorra mucho tiempo y líneas de código. 

Clases del juego

Antes de comenzar con la pantalla de juego (GameScreen) es necesario crear las clases que representan cada objeto del juego. Necesitaremos las siguientes:


  • Bird

  • Pipe

  • Counter


Cada una de estas clases guardará la información como son la posición, el estado actual y el tiempo acumulado en un estado.


Cuentan con una función update que actualizará cada una de sus variables de acuerdo a su comportamiento. También contendrán funciones que alteran su estado, por ejemplo en caso que el pájaro haga colisión con una tubería llamaremos la función hurt.

La clase Counter

El objetivo de este objeto es que cada vez que el contador colisiona con el pájaro vamos a incrementar la puntuación en uno.


Esta clase no tiene mucha ciencia ya que sólo almacenará la posición actual y el estado.


Cuando state==STATE_REMOVE indica que este objeto debe ser removido en la siguiente actualización de la física del juego como veremos más adelante.

La clase Pipe

Esta clase es muy similar a la clase contador una diferencia es que aquí tenemos un tipo de tubería, esto quiere decir que sí type==TYPE_UP se dibujara la tubería que va en la parte superior.

La clase Bird

Igual que en las clases Counter y Pipe la clase Bird es muy sencilla y parecida a estas.


Cuando state==STATE_DEAD significa que el pájaro ha chocado con una tubería y decimos que el pájaro ha muerto.


Se ha agregado una función hurt que será llamada cuando se detecte una colisión entre un pájaro y una tubería lo que cambiará el estado del pájaro.


También tenemos la variable stateTime que sirve para guardar el tiempo acumulado en un estado y poder dibujar en pantalla el sprite correcto y crear la animación de un pájaro aleteando

Fin parte 1

Por el momento hemos terminado con la primera parte del tutorial, en la segunda parte hablaremos sobre las clases restantes para que el juego quede funcionando al 100%


0 comments:

Publicar un comentario

Entradas populares