Introducción a la animación en Pygame (ejemplo: Pista de carreras)

Las animaciones más básicas que se pueden implementar, son mover los dibujos en la pantalla en las distintas direcciones, por ejemplo: mover el objeto de manera horizontal, vertical, diagonal y circular. En entradas posteriores se revisaran algunas animaciones avanzadas.

Comencemos un programa base con un fondo que usaremos en todo el tutorial.

import pygame

NEGRO = (10, 8 ,12)
BLANCO = (255, 255, 255)
VERDE = (90, 232, 64)
ROJO = (255, 20, 20)
AZUL = (10, 222, 255)

def dibujarPistaVertical():
    pygame.draw.rect(pantalla, NEGRO, [160, 0, 160, 620])
    for i in range(10, 610, 20):
        pygame.draw.rect(pantalla, BLANCO, [234, i, 6, 8])

def dibujarPistaHorizontal():
    pygame.draw.rect(pantalla, NEGRO, [0, 160, 620, 160])
    for i in range(10, 620, 20):
        pygame.draw.rect(pantalla, BLANCO, [i, 234, 8, 6])

pygame.init()

dimensiones = [620, 480]
#dimensiones = [480, 620]
pantalla = pygame.display.set_mode(dimensiones)
pygame.display.set_caption("Animaciones")

hecho = False
reloj = pygame.time.Clock()

while not hecho:
    for evento in pygame.event.get():
        if evento.type == pygame.QUIT:
    Comen        hecho = True
    pantalla.fill(VERDE)
#    dibujarPistaVertical()
    dibujarPistaHorizontal()
    pygame.display.flip()
    reloj.tick(20)

pygame.quit()

Hemos implementado dos formas de dibujar la pista ya sea de forma vertical o horizontal para poder hacer los distintos ejemplos.

Movimiento Horizontal.

Comencemos dibujando un rectángulo en el inicio de la pista horizontal, es decir en las coordenadas (0, 190) y 30 pixeles de ancho y 20 pixeles de alto. Cada ciclo se dibuja todo, entonces el rectángulo siempre se dibujará en la misma posición pero si al contrario 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.

35
36
37

    dibujarPistaHorizontal()
    pygame.draw.rect(pantalla, ROJO, [x, 190, 30, 20])
    x += 1

Recuerda inicializar el valor de x a cero antes del bucle principal.

Movimiento Vertical.

Para hacer que los objetos se muevan en la pantalla en forma vertical debemos aumentar el valor de la coordenada y. Comencemos dibujando el rectángulo en el inicio de la pista vertical (190, 0) pero en este caso para que el objeto se mueva en vertical modificamos el valor de y.

    dibujarPistaVertical()
#    dibujarPistaHorizontal()
    pygame.draw.rect(pantalla, ROJO, [270, y, 20, 30])
    y -= 1

Movimiento Diagonal.

Si cambiamos el valor de la coordenada x y la coordenada y a la vez obtendremos que el objeto se mueva en diagonal.

    pygame.draw.rect(pantalla, ROJO, [x, y, 20, 30])
    y += 1
    x += 1

En el siguiente enlace puedes encontrar un tutorial de como mover un objeto de manera circular.
Movimiento circular en Pygame (animación de cañón)

Ejemplo final

import pygame

NEGRO = (10, 8 ,12)
BLANCO = (255, 255, 255)
VERDE = (90, 232, 64)
ROJO = (255, 20, 20)
AZUL = (10, 222, 255)


def dibujarPistaVertical():
    pygame.draw.rect(pantalla, NEGRO, [160, 0, 160, 620])
    for i in range(10, 610, 20):
        pygame.draw.rect(pantalla, BLANCO, [234, i, 6, 8])

def dibujarPistaHorizontal():
    pygame.draw.rect(pantalla, NEGRO, [0, 160, 620, 160])
    for i in range(10, 620, 20):
        pygame.draw.rect(pantalla, BLANCO, [i, 234, 8, 6])

pygame.init()

#dimensiones = [620, 480]
dimensiones = [480, 620]
pantalla = pygame.display.set_mode(dimensiones)
pygame.display.set_caption("Animaciones")

autos = [[190, 0, 20, 25], [270, -160, 20, 25], [190, -360, 20, 25]]
auto = [190, 610, 20, 25]

hecho = False
reloj = pygame.time.Clock()

x = 190
y = 0

while not hecho:
    for evento in pygame.event.get():
        if evento.type == pygame.QUIT:
            hecho = True
    pantalla.fill(VERDE)
    dibujarPistaVertical()
#    dibujarPistaHorizontal()
    pygame.draw.rect(pantalla, ROJO, autos[0])
    pygame.draw.rect(pantalla, ROJO, autos[1])
    pygame.draw.rect(pantalla, AZUL, auto)
    autos[0][1] += 2
    autos[1][1] += 2
    auto[1] -= 2
    if  auto[1] < autos[0][1] + 70 and auto[0] < 270 and autos[0][1] < auto[1] + 25:
        auto[0] += 4
    if  auto[1] < autos[1][1] + 70 and auto[0] > 190:
        auto[0] -= 4
    pygame.display.flip()
    reloj.tick(20)

pygame.quit()

El código que se ha agregado para poder realizar la animación que se muestra en el vídeo anterior no muy complejo. Empezamos creado dos listas que guardaran las coordenadas y medidas de cada objeto que se mueve en la pantalla.

27
28

autos = [[190, 0, 20, 25], [270, -160, 20, 25], [190, -360, 20, 25]]
auto = [190, 610, 20, 25]

La primer lista, guarda tres listas que son los rectángulos de color rojo que se mueve en vertical de arriba a bajo, a la lista auto será el rectángulo de color azul que se mueve de abajo a arriba.

En este ejemplo usamos la función que dibuja la pista de manera vertical, después a partir de la línea 43 a 45 dibujamos los rectángulos y en seguida hacemos que su coordenadas cambien.

    pygame.draw.rect(pantalla, ROJO, autos[0])
    pygame.draw.rect(pantalla, ROJO, autos[1])
    pygame.draw.rect(pantalla, AZUL, auto)
    autos[0][1] += 2
    autos[1][1] += 2
    auto[1] -= 2
    if  auto[1] < autos[0][1] + 70 and auto[0] < 270 and autos[0][1] < auto[1] + 25:
        auto[0] += 4
    if  auto[1] < autos[1][1] + 70 and auto[0] > 190:
        auto[0] -= 4

Para hacer que el objeto azul parezca que esquiva los objetos rojos utilizamos sentencias if para comprobar si el objeto azul se está aproximando a los objeto rojos, mientras el objeto azul se encuentre dentro del rango establecido hacemos que se mueva en diagonal. Se comparan ambas coordenadas Y para saber si se aproximan o que tanto han avanzado y X para evitar que el objeto se salga de la pista.

Anterior Siguiente

Curioseando en Programación

Buscar este blog

Entrada destacada

Como usar enums en Android, kotlin