DEV Community

Yusuf Adeagbo
Yusuf Adeagbo

Posted on

Mastering Sprite Animation with Pygame: A Beginner's Adventure!

Step 1: Import Pygame and Initialize

import pygame
import sys

# Initialize Pygame
pygame.init()
Enter fullscreen mode Exit fullscreen mode

Explanation:

We import the pygame library, which provides functionality for creating games and graphical applications.
We import sys for system-related functionality.
pygame.init() initializes Pygame and prepares it for use in our program.

Step 2: Set Up the Game Window

# Screen setup
screen_width = 400
screen_height = 400
screen = pygame.display.set_mode((screen_width, screen_height))
pygame.display.set_caption("Sprite Animation")
Enter fullscreen mode Exit fullscreen mode

Explanation:

We define the dimensions of our game window as screen_width and screen_height.
We create the game window using pygame.display.set_mode() and set its caption.

Step 3: Create the Player Class

class Player(pygame.sprite.Sprite):
    def __init__(self, pos_x, pos_y):
        super().__init__()
Enter fullscreen mode Exit fullscreen mode

Explanation:

class Player(pygame.sprite.Sprite):: This line defines a new Python class called Player, which is a subclass of pygame.sprite.Sprite. In Pygame, sprites are objects that can be displayed and manipulated within a game.

def init(self, pos_x, pos_y):: This is the constructor method for the Player class. It gets called when you create a new player object. pos_x and pos_y are parameters that specify the initial position of the player on the game screen.

# Load the player's sprites
self.sprites = [pygame.image.load(f'animation_img_{i}.png') for i in range(1, 11)]
Enter fullscreen mode Exit fullscreen mode

Explanation:

This line creates a list called self.sprites that will hold a sequence of images representing the player's animation. It uses a list comprehension to load ten images named "animation_img_1.png" to "animation_img_10.png" and stores them in the list.

self.current_sprite = 0
self.image = self.sprites[self.current_sprite]
Enter fullscreen mode Exit fullscreen mode

Explanation:

self.current_sprite is a variable that keeps track of the current image in the animation sequence. It starts at 0 to display the first image.

self.image is a property of the pygame.sprite.Sprite class, and it represents the image displayed for the player sprite. Here, we set it to the first image in the self.sprites list to initialize the player's appearance.

self.rect = self.image.get_rect()
self.rect.topleft = [pos_x, pos_y]
Enter fullscreen mode Exit fullscreen mode

Explanation:

self.rect is a property that defines the position and dimensions of the player sprite. We set it to match the dimensions of the current image (the first image in this case) using self.image.get_rect(). Then, we move the sprite to the specified position [pos_x, pos_y].

# Animation control variables
self.attack_animation = False
self.animation_speed = 0.25
Enter fullscreen mode Exit fullscreen mode

Explanation:

self.attack_animation is a variable that indicates whether the player is currently in an attack animation. It starts as False because the player is not attacking at the beginning.

self.animation_speed is a variable that controls the speed of the animation. It is set to 0.25, which means the animation will advance every 0.25 frames.

def attack(self):
    self.attack_animation = True
Enter fullscreen mode Exit fullscreen mode

Explanation:

attack is a method that allows the player to start an attack animation. When called, it sets self.attack_animation to True, indicating that the player should start playing the attack animation.

    def update(self):
        if self.attack_animation:
            self.current_sprite += self.animation_speed
            if int(self.current_sprite) >= len(self.sprites):
                self.current_sprite = 0
                self.attack_animation = False

            self.image = self.sprites[int(self.current_sprite)]
Enter fullscreen mode Exit fullscreen mode

Explanation:

update is a method that gets called in each frame of the game loop to update the player's state.

Inside update, we check if self.attack_animation is True, which means the player is attacking. If so:

self.current_sprite is incremented by self.animation_speed, which advances the animation frame.
We check if the self.current_sprite value has reached or exceeded the number of images in self.sprites. If it has, we reset self.current_sprite to 0 and set self.attack_animation to False to stop the attack animation.
Finally, we update self.image to the image corresponding to the current sprite index to change the player's appearance based on the current animation frame.
In summary, this Player class defines the behavior and appearance of a game character, including loading and displaying an animation sequence, handling attack animations, and updating the character's state in each frame of the game loop.

Step 4: Create Player and Sprite Group

# Create player and sprite group
player = Player(100, 100)
all_sprites = pygame.sprite.Group()
all_sprites.add(player)
Enter fullscreen mode Exit fullscreen mode

Explanation:

We create an instance of the Player class and position it at (100, 100) on the game window.
We create a sprite group called all_sprites and add the player to it. Sprite groups help manage and update multiple game objects.

Step 5: Game Loop

# Game loop
clock = pygame.time.Clock()

while True:
    for event in pygame.event.get():
        if event.type == pygame.QUIT:
            pygame.quit()
            sys.exit()
        if event.type == pygame.KEYDOWN:
            player.attack()

    # Update and render
    all_sprites.update()
    screen.fill((0, 0, 0))
    all_sprites.draw(screen)
    pygame.display.flip()
    clock.tick(60)
Enter fullscreen mode Exit fullscreen mode

Explanation:

We enter the game loop, which runs continuously until the user closes the window (clicks the close button).
In the loop, we check for events using pygame.event.get() and handle the quit event to exit the game.
When a key is pressed (pygame.KEYDOWN event), we call player.attack() to start the attack animation.
We update the game objects (all_sprites.update()), clear the screen, draw the sprites, and display the updated screen.
The clock.tick(60) limits the frame rate to 60 frames per second (FPS).

Top comments (0)