Pygame tutorial 1 – 3.3 – Animation while moving

This is an interesting evolution of our little application to move around a sprite. Now we do not only:

move the sprite
but we animate it while it’s moving
and we also flip it
and… I was almost forgetting, we make the animation ‘indipendent’ from the frame rate (almost)

Nothing too complicated, thought, because we want to proceed with caution and trying some experiment.

The Cat class

Our sprite animation is managed by this class. Very simply.

The init method

This method contains the stuff that are executed when we create an istance of the class:

cat = Cat(100, 100)

So, we pass also the 100, 100 arguments that are used to set the initial position of the sprite, that is this, by the way,

This is in the cat folder. You find everything in this github repository. Images are not mine and are free.

We were talnking about the __init__ method (there are two _ before and after init):

class Cat:
    def __init__(self, x, y):
        self.x = x
        self.y = y
        self.list = [
            pygame.image.load(f).convert_alpha() for f in glob("cat/Idle*.png")[1:]
        ]
        self.counter = 0
        self.image = self.list[0]
        self.dir = "right"

Here we just take the x and y position of the cat, we create a list with all the surface images (read the previous posts to know what a surface is post 1, 2, 3.1, 3.2) and then we set the self.image = self.list[0] as the starting image and “right” as the starting direction (where the cat is watching).

The update method

This one is the most interesting part, where the images are cycled so that you see an animation… but it’s an illusion, there are simply different images of different poses… but well I think you get it yet.

    def update(self):
        self.counter += .4
        if self.counter >= len(self.list):
            self.counter = 0
        if self.dir == "right":
            self.image = self.list[int(self.counter)]
        if self.dir == "left":
            self.image = pygame.transform.flip(self.list[int(self.counter)], True, False)        
        screen.blit(self.image, (self.x, self.y))

This method will be called in the while loop that makes everything go on (again watch the past posts if you do not know what is the while loop that makes everything go on: post 1, 2, 3.1, 3.2).

The entire code for the animation

import sys
import pygame
import glob


# Initialisation of Pygame

pygame.init()

# The main Surface where everything's blitted

screen = pygame.display.set_mode((400, 600))

# The container of all the Sprite
# attributes (position...)
# and methods (change position...)


class Cat:

    def __init__(self, x, y):
        self.x = x
        self.y = y

        self.imgslist = [
        pygame.image.load(f) for f in
            glob.glob("cat/Idle*.png")
        ]
        self.counter = 0
        self.image = self.imgslist[0]
        self.dir = "right"

    def update(self):
        self.counter += .4
        if self.counter >= len(self.imgslist):
            self.counter = 0
        if cat.dir == "right":
            self.image = self.imgslist[int(self.counter)]
        if cat.dir == "left":
            self.image = pygame.transform.flip(self.imgslist[int(self.counter)], True, False)
        self.pos = self.x, self.y
        screen.blit(self.image, self.pos)

# Let's create a sprite with Cat class

cat = Cat(100, 100)

# This is for the frame rate

clock = pygame.time.Clock()


# Everything goes on forever here

loop = 1
while loop:
    screen.fill((128, 255, 128))

    # Close with the window's x' button

    for event in pygame.event.get():
        if event.type == pygame.QUIT:
            loop = 0
        # Now we get the Key inputs
        if event.type == pygame.KEYDOWN:

            # Close if press Esc

            if event.key == pygame.K_ESCAPE:
                loop = 0

            # Move with arrow Keys:

            if event.key == pygame.K_RIGHT:
                cat.dir = "right"
                cat.x += 10
            if event.key == pygame.K_LEFT:
                cat.dir = "left"
                cat.x -= 10
            if event.key == pygame.K_UP:
                cat.y -= 10
            if event.key == pygame.K_DOWN:
                cat.y += 10

    # Call every frame method to move cat

    cat.update()

    # Update the screen to see something
    pygame.display.update()

    # at 60 frame rate

    clock.tick(60)

# Pressing Esc or 'x' button you exit here and..

pygame.quit()
sys.exit()

Ok, now we’re done for the moment. Watch my video where I try to explain what I did in the code. See ya in the next post for more complicated and yet fun stuffs.