sábado, 12 de marzo de 2016

Flappy Bird. Paso a paso


Vamos a realizar un proyecto en Scratch de un juego, muy sencillo, pero que tuvo muchísimo éxito: Flappy Bird.
Nuestros alumnos conocen bien el juego y quizá esto les motive para programarlo en Scratch.
Si vosotros no lo conocéis, lo primero es jugar un rato. El juego es sencillo, tenéis que tocar la tecla espacio para que el pajarito no toque ni el suelo, ni las tuberías que irán apareciendo en su camino.



Como habéis visto, el proyecto tiene 3 elementos principales:
  • Fondo
  • Pajarito.
  • Tuberías.
Vamos a ir viendo cómo programamos cada uno de ellos. Para ir probando el código, os dejo el proyecto solo con los objetos. A partir de él id haciendo la práctica.

Empecemos con el fondo: si os fijáis, Flappy no se mueve del medio del escenario, es el fondo el que se va moviendo para dar la sensación de que el pajarito avanza. Tenemos una imagen cuyo tamaño es el mismo que el escenario, 480x360. Si lo movemos horizontalmente, tendremos que modificar la coordenada x en cada momento. Vamos a crear copias que avancen al mismo tiempo (clones). Con tres clones arreglamos el problema, uno situado a continuación del anterior.
Cuando trabajemos con clones, lo primero que hacemos es esconder el original. Crearemos una variable de objeto (solo para este objeto, yo la he llamado fondo), que nos identifique el clon, para así poder colocarlos en sus coordenadas iniciales una vez que se han movido a lo largo del escenario.
El primer clon lo situamos en el origen (0,0)
El segundo clon lo situamos en (480,0)
El tercer clon a continuación (480*2,0)
Cuando empiecen como clones, los mostramos y los movemos el largo del escenario, volviendo a su punto inicial al terminar, y así lo repetimos por siempre.


Como veis en el código, hay una pequeña modificación, he repetido 465 en vez de 480, porque hay un pequeño trocito de la imagen, que aunque las coordenadas del objeto lo dejen fuera del escenario, en los bordes se ve. Por eso colocaremos un borde negro encima.

Hay algunos tutoriales en Scratch, sobre este tema. Os recomiendo este proyecto, que explica como hacer un "scroll", para ir pasando pantallas con las flechas del teclado.

Bueno, ya tenemos nuestro fondo, moviéndose sin parar...vayamos ahora al siguiente objeto, nuestro pajarito Flappy:
Lo primero que vamos a hacer es el movimiento de las alas, eso simplemente lo conseguimos cambiando continuamente de disfraz.


Como es un poco grande, para hacerlo más pequeño, utilizaremos una sentencia que encontraréis en Apariencia: Fijar tamaño a 50%. También lo enviamos al frente (por si está debajo del objeto fondo y no lo vemos) y lo situamos en un punto fijo del escenario, por ejemplo en el (0,100).
Ahora vamos a añadir el efecto de la gravedad. Flappy está continuamente "cayendo" a no ser que el usuario toque la tecla espacio para levantarlo. Esto es simplemente modificar la coordenada y, por siempre, con un número negativo, por ejemplo -2. Y si se toca la tecla espacio, cambiar y, por una cierta cantidad positiva, por ejemplo 20. Estas cantidades pueden ser variables e ir modificándolas al avanzar el juego, para añadir dificultades, diferentes niveles...etc



Bien, ya solo nos queda programar al pajarito para que si toca el suelo, o toca las tuberías termine el juego. Para que Flappy no siga moviéndose, se puede hacer de varias maneras, quizá la más sencilla sea hacer un sello y esconder el personaje. Enviamos a todos los objetos un mensaje para avisarles de que el juego ha terminado y podemos tocar un sonido que señale el final del juego. Por último detenemos todos los programas.


Con esto estaría terminada la programación de Flappy. Vamos ahora con las tuberías.
Como son pequeñas, podemos aumentar su tamaño a 180% por ejemplo.
Borramos todo al inicio, para quitar los sellos que hemos hecho al final de la partida.
Como veis en el proyecto, tenemos dos disfraces. Vamos a utilizar copias (clones), para que aparezcan en la escena aleatoriamente. Para ello creamos una variable que guardará un número aleatorio entre 0 y 120 por ejemplo, dependiendo del espacio que queráis dejar para que pase Flappy.
Como siempre que utilizamos clones, escondemos el original. Fijamos la variable a una cantidad aleatoria y esperamos también un número aleatorio de segundos para que aparezcan al azar. Después creamos los clones y los colocamos en la parte derecha del escenario.


Al comenzar como clon, mostramos y movemos las tuberías hacia la parte izquierda cambiando la coordenada x. Si las tuberías sobrepasan el medio de la pantalla (donde está Flappy), añadimos un punto a nuestro marcador (0,5 por cada clon, ya que son dos, la parte de arriba y la parte de abajo).

Creamos pues una variable global que vaya guardando los puntos. Podemos también añadir un sonido cada vez que esto ocurra. Y cuando lleguen al extremo izquierdo de la pantalla borramos el clon. Como tocará el color negro del marco, lo he hecho añadiendo la opción "repetir hasta que toque el color negro".



La velocidad dependerá del número que restéis a la coordenada x, por tanto este número también podría ser variable y aumentar la dificultad en el juego según vayamos avanzando.

Al recibir el mensaje fin, podemos hacer un sello de las tuberías, terminar otros programas (para que no se creen más clones) y borrar el clon.


Por último, podemos añadir un disfraz al marco para que salga un mensaje, "Game Over", que parpadeé unos segundos antes de fijarse.


En el objeto fondo, para que se vean los sellos que dejamos al finalizar, podemos borrar el clon. Y para que el fondo no quede blanco, añadimos la misma imagen en el escenario.



Con esto estaría terminado nuestro juego Flappy Brid.

Lo podéis ver dentro del proyecto: Flappy Brid en Scratch.
Licencia CC BY-NC-SA. Con la tecnología de Blogger.

Mi twiter