Pygame Animation: Frames and Sprite Sheets

Animation in pygame is a flip book: you keep a few images of the same character in slightly different poses and show a different one every few frames.

Two frames

The simplest animation alternates two images. This bat flaps by switching between bat.png and bat_flap.png every 8 frames:

import pygame

pygame.init()
screen = pygame.display.set_mode((480, 320))
clock = pygame.time.Clock()

frames = [
    pygame.transform.scale_by(pygame.image.load("assets/images/bat.png").convert_alpha(), 2),
    pygame.transform.scale_by(pygame.image.load("assets/images/bat_flap.png").convert_alpha(), 2),
]
x = 0
tick = 0
running = True

while running:
    for event in pygame.event.get():
        if event.type == pygame.QUIT:
            running = False

    tick += 1
    image = frames[(tick // 8) % len(frames)]
    x = (x + 2) % 560

    screen.fill((40, 30, 60))
    screen.blit(image, (x - 80, 120))
    pygame.display.flip()
    clock.tick(60)

pygame.quit()

(tick // 8) % len(frames) counts 0, 0, 0 ... 1, 1, 1 ... 0 again: the number 8 is the speed, smaller is faster.

Sprite sheets

Art often comes as one sprite sheet: every frame on a grid in a single image. Load it once and cut frames with subsurface, which makes a Surface that shares the sheet's pixels:

import pygame

pygame.init()
screen = pygame.display.set_mode((480, 320))
clock = pygame.time.Clock()

sheet = pygame.image.load("assets/sheets/platformer_characters.png").convert_alpha()
TILE = 24


def frame(col, row, scale=4):
    image = sheet.subsurface((col * TILE, row * TILE, TILE, TILE))
    return pygame.transform.scale_by(image, scale)


print(sheet.get_size())
walk = [frame(0, 0), frame(1, 0)]
index = 0
last_change = pygame.time.get_ticks()
running = True

while running:
    for event in pygame.event.get():
        if event.type == pygame.QUIT:
            running = False

    now = pygame.time.get_ticks()
    if now - last_change > 150:
        index = (index + 1) % len(walk)
        last_change = now

    screen.fill((150, 210, 250))
    screen.blit(sheet, (10, 10))
    screen.blit(walk[index], walk[index].get_rect(center=(300, 200)))
    pygame.display.flip()
    clock.tick(60)

pygame.quit()

(216, 72)

The whole sheet is drawn small in the corner, and the first two tiles of its top row play as a walk at 4 times their size. This sheet is a grid of 24 by 24 tiles, so the tile in column c and row r starts at (c * 24, r * 24). Changing frames by time (get_ticks, every 150 ms) keeps the animation speed the same at any frame rate.

Walk and idle

A character usually has several animations and picks one by what it is doing. An animated sprite keeps the lists and switches between them:

import pygame

pygame.init()
screen = pygame.display.set_mode((480, 320))
clock = pygame.time.Clock()

load = lambda name: pygame.transform.scale_by(
    pygame.image.load(f"assets/images/{name}.png").convert_alpha(), 2)


class Player(pygame.sprite.Sprite):
    def __init__(self):
        super().__init__()
        self.idle = [load("player")]
        self.walk = [load("player"), load("player_walk")]
        self.facing_left = False
        self.frame = 0.0
        self.image = self.idle[0]
        self.rect = self.image.get_rect(midbottom=(240, 280))

    def update(self):
        keys = pygame.key.get_pressed()
        dx = keys[pygame.K_RIGHT] - keys[pygame.K_LEFT]
        self.rect.x += dx * 4
        if dx:
            self.facing_left = dx < 0
            self.frame = (self.frame + 0.15) % len(self.walk)
            image = self.walk[int(self.frame)]
        else:
            self.frame = 0.0
            image = self.idle[0]
        self.image = pygame.transform.flip(image, self.facing_left, False)


player = pygame.sprite.GroupSingle(Player())
running = True

while running:
    for event in pygame.event.get():
        if event.type == pygame.QUIT:
            running = False

    player.update()
    screen.fill((150, 210, 250))
    pygame.draw.rect(screen, (90, 160, 70), (0, 280, 480, 40))
    player.draw(screen)
    pygame.display.flip()
    clock.tick(60)

pygame.quit()

Press Play, click the game and walk with Left and Right. A float frame that grows by 0.15 a game frame changes the picture about every 7 frames; int(self.frame) picks the image.

One-shot effects

An explosion plays its frames once and then removes itself:

import pygame

pygame.init()
screen = pygame.display.set_mode((480, 320))
clock = pygame.time.Clock()

BOOM = [
    pygame.transform.scale_by(pygame.image.load(f"assets/images/explosion_{i}.png").convert_alpha(), 2)
    for i in range(1, 5)
]


class Explosion(pygame.sprite.Sprite):
    def __init__(self, pos):
        super().__init__()
        self.index = 0
        self.timer = 0
        self.image = BOOM[0]
        self.rect = self.image.get_rect(center=pos)

    def update(self):
        self.timer += 1
        if self.timer % 5 == 0:
            self.index += 1
            if self.index == len(BOOM):
                self.kill()
            else:
                self.image = BOOM[self.index]


effects = pygame.sprite.Group()
running = True

while running:
    for event in pygame.event.get():
        if event.type == pygame.QUIT:
            running = False
        elif event.type == pygame.MOUSEBUTTONDOWN:
            effects.add(Explosion(event.pos))

    effects.update()
    screen.fill((20, 20, 35))
    effects.draw(screen)
    pygame.display.flip()
    clock.tick(60)

pygame.quit()

Click anywhere in the game to set off an explosion. self.kill() takes the sprite out of its group after the last frame.