Nota: artículo largo (1800 palabras, ~9 min).

Bueno, ha pasado un poco más de un mes, pero lo prometido es deuda. Les dejo aquí la segunda parte de nuestro tutorial de juegos en Python y pygame. Si te perdiste la primera parte, no te preocupes, sigue este enlace.

En esta segunda parte comenzaremos a implementar uno de los juegos más clásicos de la historia de los videojuegos: Arkanoid.

Después de esto, sabrás como hacer que un objeto se mueva por tu pantalla y una manera simple de agregar sonidos a tus juegos. Si ya estás ansioso de empezar a programar, entonces sigue leyendo

La clase Ball

En la parte anterior del tutorial dejamos el código listo para empezar lo más entretenido. Lo que llevamos hasta ahora inicializa el sistema y luego muestra el fondo que utilizaremos.

Ahora vamos a empezar definiendo la clase Ball que sera la que se encargue de representar a la bola del juego. Esta primera versión de la bola rebotará indistintamente en las cuatro murallas de nuestra pantalla. Veamos primero el constructor de la clase

Veamos ahora el código línea por línea. Lo primero que notamos es que nuestra clase hereda de la clase Sprite de pygame. Esta clase representa los objetos gráficos que se moverán por nuestra pantalla. En la siguiente línea llamamos al constructor de la clase Sprite. Esto es MUY IMPORTANTE, pues si no lo haces, al ejecutar el programa saldrán errores muy raros y difíciles de entender si no sabes qué es lo que pasa.

Luego incializaremos algunas variables. Primero cargamos al imagen de la bola desde el archivo ball.gif (puedes descargarlo desde aquí). Para ello usamos nuestra función load_image que definimos en el tutorial anterior. Toda imagen leída con pygame tiene una referencia a un rectángulo. Este rectángulo es del ancho y alto de la imagen y lo utilizaremos para posicionarlo en el mundo del juego. Así pues, lo primero que hacemos es guardar una referencia a ese rectángulo usando el método get_rect de la clase Image. Por definición los rectángulos de las imágenes aparecen con su esquina inferior derecha en la coordenada (0,0). Lo primero que hacemos es trasladarlo al centro de la pantalla modificando el punto del centro (siguientes dos líneas). El centro delrectángulo puede ser modificado usando la propiedad center (un punto) o a través de las coordenadas del centro, centerx y centery.

Vale la pena aquí hacer ver lo versátil de la clase Rect (los rectángulos). Cada vez que modificas una de sus propiedades, el resto cambiará para adaptarse. Por ejemplo, si el lado izquierdo de unrectángulo es 50 y el derecho es 100 (un rectángulo de 50 pixeles de ancho) al hacer rect.centerx = 100 entonces ahora el lado izquierdo valdrá 75 y el derecho valdrá 125 (lo trasladamos 25 pixeles a la derecha). Esto es lo que usaremos para mover nuestros objetos por la pantalla.

Y en la última línea inicializaremos la velocidad de la pelota. La velocidad la manejaremos de manera separada para cada coordenada X e Y. Esto simplificará mucho nuestros cálculos.

Bien, veamos ahora el siguiente método de Ball.

El método update será llamado en cada ciclo del juego. Su misión es actualizar las variables internas de la bola. Aquí es donde le asignamos "inteligencia" a nuestra pelota. El parámetro time representa el tiempo (en milisegundos) que ha pasado en nuestro juego desde la última vez que esta función fue ejecutada.

Lo primero es actualizar la posición de la bola. Como nos enseñaron en el colegio, si multiplicas la velocidad de un objeto por el tiempo que lleva moviéndose, obtendrás la posición del objeto después de ese tiempo. Así, lo primero será actualizar la coordenada x del centro aumentándola en su velocidad (self.speed[0]) multiplicada por el tiempo que ha pasado (time). Esto dejará esa coordenada donde debería encontrarse luego de viajar time milisegundos a self.speed[0] unidades. Luego hacemos lo mismo para la coordenada y.

Si dejáramos este método hasta aquí, nuestra pelota comenzaría a moverse pero muy pronto saldría de nuestra pantalla. Para evitar esto las siguientes líneas hacen el truco. Si luego de actualizar nuestra posición nos damos cuenta de que nos hemos pasado fuera de la pantalla entonces lo que hacemos es cambiar el sentido de la velocidad en esa coordenada y luego volver a sumarlo al centro (esto hace que nos "devolvamos" un poco).

SI YA HAZ LEÍDO HASTA AQUÍ, NO DESESPERES!!! FALTA POCO

Bien, ya solo nos falta utilizar todo lo que hemos escrito. Lo que haremos ahora es crear una bola y hacer que esta se mueva por la pantalla. Para esto, usaremos la clase Group de pygame. Un group es un "grupo" de sprites. Es muy parecido a las listas de de python pero tiene un par de "gracias" que los hacen muy útiles para nuestros propósitos. La idea de los groups es agrupar objetos gráficos parecidos en propiedades para manipularlos de manera conjunta. Veamos ahora el caso mas sencillo, un grupo con un solo objeto. En nuestro programa principal escribiremos

Con esto hemos creado el grupo balls y le hemos agregado una nueva bola. Podríamos agregar cuantas bolas quisieramos, pero como todas aparecen en el centro, se superpondrian y no veríamos diferencias. Un buen ejercicio es modificar el constructor de Ball para que reciba las coordenadas de inicio y luego agregar más de una bola al grupo.

Ahora introduciremos otra clase muy útil y sencilla de usar: Clock. Esto es todo lo que nos faltará para animar nuestra bola. Un clock es un "reloj", osea, un objeto que nos sirve para medir intervalos de tiempo. Cada vez que invocamos su método tick() este nos dirá cuanto tiempo ha pasado desde la vez anterior a la invocación. Así, lo primero que haremos en cada ciclo del programa principal es llamar a tick para ver cuánto tiempo ha pasado.

El último párrafo se resume en estas 3 líneas

Inmediatamente después de esto, es el momento de que nuestros objetos se actualisen, es decir, que "usen su inteligencia". Para hacerlo más fácil, hacemos lo siguiente.

El método update de Group recorre a todos los sprites del grupo y ejecutará el método update del sprite correspondiente pasándole como parámetro time que es el tiempo desde la actualización anterior.

Y finalmente, dibujaremos todos nuestros objetos, es decir, el fondo y la bola. Primero el fondo, pues si lo hiciéramos al revés entonces el fondo pisaría a la bola.

La primera línea la conocemos de la primera parte del tutorial y en la segunda hay un poco de truco. Draw es otro de esos métodos que recorren los sprites del grupo. Pero esta vez no ejecutamos un método del sprite, sino que tomamos la imagen de este y la dibujaremos usando como referencia su rectángulo. Es por esta razón que todo objeto que hereda de Sprite debe tener siempre llenas las variables rect e image pues el método draw espera que estos tengan valores correctos.

Y listo!!! Corriendo el juego

Ahora ya estamos listos para correr nuestra primera versión del juego con movimiento. Para que no tengan que escribir todo lo anterior, les dejo aquí el código completo.

Si todo salió correctamente entonces deberías ver una pelota rebotando contra los bordes de la pantalla.

Un bonus: Agregando sonidos

Vamos a adelantarnos en nuestros tutoriales y aprender la manera más básica de agregar sonidos a nuestro juego. Para eso, pueden descargar este archivo de sonido y ponerlo en el directorio del juego. Luego, en el constructor de la clase bola de la siguiente manera.

Esto carga el sonido en memoria y guarda una referencia para ser usada luego. Ahora, en el método update, busquen en donde se cambia la dirección de la velocidad. Este es el momento en que la bola choca y por lo tanto el momento de hacer que el sonido suene. Agreguen las siguientes lineas

Y cuando la pelota golpee contra los muros el sonido se escuchará.

Y después de esto... que más

Bueno, pues viene mucho más. No hemos hecho más que empezar. En la siguiente parte aprenderemos como mover objetos usando el mouse y como detectar coliciones entre objetos. Esto es más complicado así que merece un capítulo aparte.

Los espero en la siguiente parte del tutorial