viernes, 21 de febrero de 2014

Tutorial parte 1: Flappy Bird basico 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 para dispositivos móviles cuyo objetivo es dirigir un pájaro entre tuberías sin chocar con ellas. 



Así quedaria una vez terminado: 



Pueden descargar el código fuente



Definir el mundo

El primer paso es definir una resolución para nuestro juego, para nuestro flappy bird sera de 480 x 800 pixeles. 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 seria 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 mas logico 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.

  • El pájaro (Bird) sera una figura circular y tendra un radio de .25 metros.
  • Las tuberías serán figuras rectangulares con las siguientes medidas .85 x 4 metros.
  • Otro objeto que necesitaremos sera un rectángulo con el que colisionara el pájaro y se incrementara la puntuación, este objeto lo llamaremos contador, no sera visible y tendra unas medidas de .1 x 1.85 metros.


Con esto ya tenemos los tamaños de los cuerpos.

Otra cosa que necesitamos son las velocidades y aceleraciones que necesitaremos. Estos valores dependen mucho de como queremos que sea el juego, normalmente es necesario cambiarlos varias veces para encontrar los valores correctos. 

  • Para la gravedad tendremos (0 , -13) m/s^2, un poco mas de lo que tiene el planeta tierra.
  • Para el pájaro cada vez que vuela tendra una velocidad de 5 m/s^2 y hay que tener en cuenta que esta solo afectara el movimente en el eje Y, el movimiento en X sera nulo. 
  • Tanto las tuberías como el contador tendrán la misma velocidad que sera de -2 m/s^2, como pueden ver tiene una velocidad negativa por lo que se moverán de derecha a izquierda.

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 grafica:

Tap: 250 x 215 pixeles
Fondo: 480 x 800 pixeles

Get ready: 300 x 86 pixeles

Game over: 300 x 76 pixeles 




















A continuación los elementos del juego:

Para el pájaro es necesario tener 3 imagenes para crear la animación de que esta volando y en cuanto a las tuberías necesitamos una que este 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 llame atlasMap.txt y una imagen llamada atlasMap.png como se ve en la siguiente imagen:


Texture atlas


Es necesario agregar este archivo dentro de nuestra carpeta assets que se encuentra en el proyecto de Android:



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 Assets 

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


La función load()  sera llamada una sola vez al inicio del juego, y es responsable de cargar todos los objetos estáticos de la clase. 

La clase MainFlappyBird

Esta clase hereda de Game, desde aqui se llama la función Assets.load() y ponemos la pantalla del 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 vera reflejada, pero en otros caso ahorra mucho tiempo y lineas 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
  • Tuberia
  • Contador
Cada una de estas clases guardara la información como son la posición, el estado actual y el tiempo acumulado en un estado.

Tambien cuentan con un funciones update() que actualizara cada una de sus variables de acuerdo a su comportamiento.

Por ultimo contendrán funciones que alteran su estado, por ejemplo en caso que el pájaro haga colisión con una tubería su estado cambia.

La clase Contador


Esta clase no tiene mucha ciencia ya que solo almacenara la posición actual, el tiempo acumulado indica por cuanto tiempo a durado en el mismo estado.

Por ejemplo si "state==STATE_NORMAL" y el stateTime es de 10, quiere decir que a durado 10 segundos en STATE_NORMAL.

En caso de que "state==STATE_DESTRUIR" indica que este objeto debe ser removido en la siguiente actualización de la fisica del juego como veremos mas adelante.

La clase Tuberia

Esta clase es muy similar a la clase contador la unica diferencia es que aqui tenemos un tipo de tubería, esto quiere decir que si "tipo==TIPO_ARRIBA" se dibujara la tubería que va en la parte superior.


La clase Bird

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

Como podemos hemos cambiado el nombre de la constante "STATE_DESTRUIR" por  "STATE_MUERTO", esto porque cuando "state==STATE_MUERTO" significa que el pájaro a chocado con una tubería y decimos que el pájaro a muerto =(.

Se ha agregado una función "getHurt()" que sera llamada cuando se detecte una colisión entre un pájaro y una tubería lo que cambiara el estado del pájaro.

--------

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%

No hay comentarios.:

Publicar un comentario