Sigueme en Facebook Sigueme en Twitter Sigueme en Instagram Sigueme en Youtube
JC Mouse Bolivia
Index / Python / Animaciones básicas con Pygame

Animaciones básicas con Pygame

Autor Jesús Tepec miércoles, septiembre 21, 2016

En tutoriales pasados creábamos demasiadas líneas de código en el mismo lugar para dibujar en la pantalla, cosa que nos confundía a la hora de hacer debug, para evitar confundirnos entre tantas líneas de código de dibujos y demás, separaremos el código de dibujo en funciones.
Para empezar el código del bucle principal debe quedar en una función main la cual quedaría de la siguiente forma.

 1 def main():
 2     pygame.init()
 3     dimensiones = [500, 600]
 4     pantalla = pygame.display.set_mode(dimensiones)
 5     pygame.display.set_caption("-------- Animación ------")
 6     juego_terminado = False
 7     reloj = pygame.time.Clock()
 8     while juego_terminado is False:
 9         for evento in pygame.event.get():
10             if evento.type == pygame.QUIT:
11                 juego_terminado = True
12                 
13         pantalla.fill(NEGRO)
14         pygame.display.flip()
15         reloj.tick(60)
16     pygame.quit()
17 
18 
19 if __name__ == "__main__":
20     main()

Ahora supongamos que queremos dibujar varios aliens, será más fácil si creamos una función llamada dibujaAlien() e invocarla el número de veces que necesitamos dibujar, la función que dibuja el alien quedaría de la siguiente forma

 1 def dibujaAlien(pantalla, x, y):
 2     pygame.draw.polygon(pantalla, CUERPO, [[x, y], [x + 10, y],
 3         [x + 10, y + 10], [x + 20, y + 10], [x + 20, y + 20],
 4         [x + 30, y + 20], [x + 30, y + 10], [x + 40, y + 10],
 5         [x + 40, y], [x + 50, y], [x + 50, y + 10], [x + 40, y + 10],
 6         [x + 40, y + 20], [x + 50, y + 20], [x + 50, y + 30], [x + 60, y + 30],
 7         [x + 60, y + 40], [x + 70, y + 40], [x + 70, y + 80],
 8         [x + 60, y + 80], [x + 60, y + 50], [x + 50, y + 50], [x + 50, y + 80],
 9         [x + 30, y + 80], [x + 30, y + 70], [x + 40, y + 70], [x + 40, y + 60],
10         [x + 10, y + 60], [x + 10, y + 70], [x + 20, y + 70], [x + 20, y + 80],
11         [x, y + 80], [x, y + 50], [x - 10, y + 50], [x - 10, y + 80],
12         [x - 20, y + 80], [x - 20, y + 40], [x - 10, y + 40], [x - 10, y + 30],
13         [x, y + 30], [x, y + 20], [x + 10, y + 20], [x + 10, y + 10],
14         [x, y + 10]])
15     pygame.draw.rect(pantalla, NEGRO, [x + 10, y + 30, 10, 10])
16     pygame.draw.rect(pantalla, NEGRO, [x + 30, y + 30, 10, 10])

La sentencia que dibuja el cuerpo es muy grande y para ser visualizada de mejor forma se separó en varias líneas
A la hora de invocar esta función solo pasaríamos las coordenadas donde queremos que aparezca el dibujo, de la siguiente forma.

 1 dibujaAlien(pantalla, 100, 100)

Movimiento horizontal
Si al dibujar una figura aumentamos en uno el valor de su coordenada en X, y este aumento se hace dentro del bucle principal, obtendremos que la figura se mueva de forma horizontal.

python game

 1 x += 2
 2 pantalla.fill(NEGRO)
 3 dibujaAlien(pantalla, x, y)
 4 pygame.display.flip()

Dependiendo del valor del aumento hará ver que el movimiento es más rápido o lento.

Movimiento Vertical

Para hacer un movimiento de manera vertical debemos aumenta el valor de la coordenada Y, suponiendo que comenzamos en y = 10 y después aumentamos el valor de Y, el dibujo parecerá que baja, entonces para hacer un movimiento inverso deberíamos empezar en Y = 400 y decrementar el valor de Y.

pygame tutorial

aliens juego

Si el valor de x tambien se incrementa al mismo tiempo obtendremos que el dibujo se mueva en diagonal.

 1 # Vertical hacia abajo
 2 y += 2
 3 pantalla.fill(NEGRO)
 4 dibujaAlien(pantalla, x, y)
 5 pygame.display.flip()
 6 # Vertical hacia arriba
 7 y -= 2
 8 pantalla.fill(NEGRO)
 9 dibujaAlien(pantalla, x, y)
10 pygame.display.flip()
11 # Diagonal
12 x += 2
13 y += 2
14 pantalla.fill(NEGRO)
15 dibujaAlien(pantalla, x, y)
16 pygame.display.flip()

Movimiento circular

Para hacer que las figuras se muevan de forma circular debemos hacer uso de razones trigonométricas para calcular el conjunto de puntos que dibujen una circunferencia.
Basado en coordenadas polares pueden usarse las siguientes formulas para pasar a coordenadas rectangulares o cartesianas.

python XY

El centro de la circunferencia es representado por el punto(a, b) y t el valor del ángulo dado en radianes.

rad py

juego pygame

La segunda figura muestra más a detalle los puntos que se utilizan para que el dibujo se mueva de forma circular, cada uno de los puntos rojos son el valor del ángulo t y son obtenidas sus coordenadas (x, y), el punto azul es el centro (a, b).

 1 def xyCircunferencia(t, centro, radio):
 2     x = radio * math.cos(t) + centro[0]
 3     y = radio * math.sin(t) + centro[1]
 4     return [round(x), round(y)]

Dentro del bucle principal

 1 t += 10
 2 if t >= 360:
 3     t = 0
 4 x, y = xyCircunferencia(math.radians(t), [200, 100], 90)
 5 pantalla.fill(NEGRO)
 6 dibujaAlien(pantalla, x, y)
 7 pygame.display.flip()

Escena animada

A continuación se muestra una animación que usa cada uno de los movimientos anteriores.

tutorial juego python

Se invocó 4 veces la función dibujaAlien, los cuales se mueven juntos en circunferencia, se creó una función dibuja Nave. La nave se mueve horizontalmente de derecha a izquierda y de izquierda a derecha. También se dibuja un círculo relleno simulando un proyectil el cual se mueve verticalmente hacia arriba.

Ver otro ejemplo en Animación de cañón

Animación en acción

Código fuente

AnimacionAliens.py

Tags

Si te ha gustado podrías compartirlo o dejar un comentario. ¡Muchas gracias!
Autor: Jesús Tepec

Ingeniero en Computación, entusiasta y asesor de programación, laboro como programador de sistemas web, aunque mi área favorita es la visión artificial.

También Te Podría Interesar

JavaFX y ApiRest – GET

JavaFX y ApiRest – GET

En este tutorial construiremos una aplicación en JavaFX para leer datos de un servicio web Herramientas IDE Netbeans 8.x...

Vibrate: ¿Cómo hacer vibrar un dispositivo Android?

Vibrate: ¿Cómo hacer vibrar un dispositivo Android?

En este post crearemos una app para utilizar el vibrador de nuestro dispositivo android usando para ello el IDE Android...

Pruebas Unitarias con PHPUnit

Pruebas Unitarias con PHPUnit

PHPUnit es un framework que se utiliza para escribir tests en PHP, Netbeans nos permite configurarlo y usarlo fácilmente...

Melody ML: Separa fácilmente pistas de audio usando IA

Melody ML: Separa fácilmente pistas de audio usando IA

Melody.ml  es un aplicación online que usa la I.A (Inteligencia Artificial) para procesar archivos MP3 y separar en pist...

ANSI: Colorear consola de salida de Netbeans

ANSI: Colorear consola de salida de Netbeans

Cuando realizamos proyectos java desde Netbeans, usamos System.out.println para imprimir datos en consola (para depurar,...

Tomar fotos con la camara y guardar en la sdcard

Tomar fotos con la camara y guardar en la sdcard

En este post realizaremos una aplicación android que hará uso de la cámara del celular para tomar una foto y guardarla e...

Comparte lo que sabes

Categorias

Últimas entradas

En este post crearemos un botón swing que reproducirá un sonido cuando este sea presionado por el usuario.  Sin mas que...

Muchas veces necesitamos de fotos para adornar nuestros perfiles en RRSS pero no queremos subir nuestras propias fotos p...

En esta ocasión aprenderemos a conectaros con una base de datos Oracle desde Laravel. Es un tutorial sencillo y cortito,...

En este tutorial conoceremos una forma de conectar una aplicación en Laravel con tres bases de datos diferentes, 2 en My...

Herramientas

Generador de Enlaces a Whatsapp