Creando un Flappy Bird con Unity (Parte 1)

Hola :D

Buen día a todos. Hace un tiempo que no escribo algún artículo en este blog y el día de hoy les traigo un tema bien interesante del cual me enamoré hace un tiempo y voy enamorándome cada día más, Desarrollo de Videojuegos.

En esta serie de articulos que presentaré, usando Unity en su plataforma 2D, ayudaremos a volar a este carismático amiguito, el cual les presento ahora:

Unity Name Project

Requisitos

Manos a la Obra!

Lo primero que haremos es abrir Unity y nombrar nuestro proyecto. Yo le pondré de nombre FlappyDemoBlog, luego escogeremos una ubicación donde se guardará nuestro proyecto y crearemos el proyecto.

Unity Name Project

Una vez dentro de Unity, nos encontraremos con varias pestañas, algunas de las principales como Scene, Game, Animator y Animation. En primer lugar nos centraremos en la pestaña Game, cambiaremos el aspecto de la pantalla en que probaremos el juego, esto nos ayudará a ver la resolución en el que desarrollamos el juego y verlo en tiempo real. A continuación, le pondremos estas características:

Label: Device (Queda a disposición de ustedes colocar el nombre que deseen)
Width & Height 480x800

Device

Importamos los Sprites

Luego de tener la pestaña "Game" ya configurada y teniendo los sprites descargados, en la pestaña Project nos encontraremos con la carpeta Assets, dentro de esta crearemos una carpeta Sprites y arrastratemos todos nuestros archivos. Nos quedará de la siguiente forma:

Flappy Bird, Sprites

Ahora, nos iremos a la pestaña Scene, encontraremos un rectángulo marcado que nos muestra el tamaño configurado anteriormente en la pestaña Game, dentro de este colocaremos nuestro "fondo" junto con el "piso", lo colocaremos de tal forma que quede enmarcado.

Create Object

Animación

Una vez colocado el fondo, el piso y creados los objetos, crearemos la animación de Flappy Bird. Para esto, seleccionaremos los sprites de nuestro Flappy y arrastraremos hasta la pestaña Scene

GIF

Gracias al motor gráfico integrado que tiene Unity, la animación se configurará automáticamente. Nuestro "pajarillo" estará en Scene, pero a un tamaño diminuto. Para cambiar esto iremos a Inspector, teniendo en cuenta que nuestro sprite "bird" debe estar seleccionado, nos ubicamos en Transform y en Scale encontraremos el tamaño en x=1, y=1, z=1, cambiaremos estos valores a x=2, y=2, z=2 de tal forma que quede así:

GIF

Antes de continuar, en la misma pestaña, Inspector, arriba de Tag tendremos un espacio donde nos mostrará el nombre del sprite. En algunos casos como este aparecerá bird2 o tambien nos puede aparecer bird1, bird3 o bird4. Para establecer un nombre claro, le pondremos player.

Ordenando

Teniendo estos sprites cargados en nuestro proyecto, nos vamos a la Pestaña Hierarchy. Con el fin de tener una jerarquía organizada, crearemos objetos vacíos donde colocaremos nuestros Sprites. Para crear objetos, daremos clic en Create>Create Empty y lo nombraremos según lo que estamos trabajando.

Esta vez crearemos 6 objetos y arrastraremos los Sprites subidos a cada uno de sus objetos.

  • Piso
  • Fondo
  • Player
  • Camara

GIF

Terminado esto, nos debe quedar de la siguiente forma:

GIF

Guardamos nuestra escena

Antes de probar nuestra animación, guardaremos lo avanzado en una escena. Las escenas contienen todos los objetos del juego, pueden ser usadas para crear menús principales, niveles, creditos y más.

Para guardar nuestra escena, iremos a File>Save Scene y lo guardaremos con el nombre Main Scene. Hecho esto, nos aparecerá la escena en la carpeta Assets, dentro de ella crearemos una carpeta con el nombre de Escenas y arrastaremos a esta carpeta nuestra escena guardada anteriormente. Todo esto sirve para llevar el proyecto bien organizado.

GIF

Probamos nuestro avance :3

Para comprobar como quedó la animación, nos iremos a Game, le damos Play y vemos cómo corre la animación :3

GIF

Ahora, procederemos a llevar los Tubos a nuestro juego. Iremos a la carpeta, Assets, Sprites y arrastraremos los tubos a Escena. Luego, cambiaremos las dimensiones para tener una mejor vista de nuestro sprite. En cuanto a la posición, cada uno tendrá valores distintos dependiendo de la ubicación en la que hayan arrastrado el tubo. Teniendo en cuenta lo anterior, procedemos a cambiar los valores a estos y de tal forma que quede así:

Flappy Bird, Sprites

Flappy Bird, Sprites

Ahora, colocaremos duplicaremos y voltearemos el tubo, donde usaremos un atajo en teclado que servirá para duplicar nuestro Sprite. En Windows, primero seleccionaremos el sprite y presionaremos Ctrl+D para poder duplicar el tubo. Con el tubo ya duplicado, procederemos a cambiarle algunas propiedades en la pestaña Transform para poder voltear y cambiar la posición.

Flappy Bird, Sprites

Hay que tener en cuenta que tenemos que cambiar el nombre del tubo duplicado, por defecto tendremos tubeabajo1. Cambiaremos esto, por el nombre que está subrayado en la imagen anterior, tuboarriba. Luego de esto, duplicaremos los tubos, nos quedará de la siguiente forma:

Flappy Bird, Sprites

Verificando y Guardando :o

Verificamos que nuestros objetos estén ordenados por características y jerarquía. Como lo hecho anteriormente, nos iremos a la pestaña Hierarchy, dentro tenemos que agregar un objeto con el nombre Tubos para almacenar los sprites correspondientes ahí. Observaremos el orden de nuestros objetos de tal forma que quedan de la siguiente manera:

Flappy Bird, Sprites

Continuaremos

Esto ha sido todo en esta sección, en el siguiente post aprenderemos a controlar nuestro Flappy, programando en C#, así también introduciremos sonido al juego para darle más vida. Nos vemos muy pronto y muchas gracias por leer este artículo.

Hasta luego :3