Computer Science Grade 9 20 min

5. Working with Images and Sprites

Learn how to load and display images in Pygame and create sprites.

Tutorial Preview

1

Introduction & Learning Objectives

Learning Objectives Load an image file (e.g., PNG, JPG) into a Pygame program. Define the roles of a Surface and a Rect in Pygame for managing images and their positions. Display, or 'blit', an image onto the game screen at specific coordinates. Update an image's coordinates within the game loop to create movement. Respond to keyboard input to control the position of a sprite on the screen. Use `pygame.transform.scale()` to resize an image. Ever wonder how your favorite game characters come to life on screen? 🚀 It all starts with a single image and a bit of code! In this lesson, you'll learn the essential skill of loading, displaying, and moving images, which are called 'sprites' in game development. This is the foundation for creating player...
2

Key Concepts & Vocabulary

TermDefinitionExample SurfaceIn Pygame, a Surface is a blank canvas for images. The main display window is a Surface, and every image you load also gets its own Surface.`screen = pygame.display.set_mode((800, 600))` creates a main display Surface. `player_img = pygame.image.load('player.png')` creates another Surface holding the player's image. RectA Rect, short for rectangle, is a Pygame object that stores the coordinates and dimensions (x, y, width, height) of a Surface. It's used to easily position and move images.`player_rect = player_img.get_rect()` creates a Rect object for the player image, which you can then move like `player_rect.x += 5`. BlittingBlitting is the process of drawing the pixels from one Surface onto another. This is how you make your images appea...
3

Core Syntax & Patterns

Loading an Image image_surface = pygame.image.load('path/to/your/image.png').convert_alpha() This command loads an image file from your computer into a new Surface object. Using `.convert_alpha()` is important for images with transparency (like PNGs) as it optimizes them for faster blitting. Getting the Rect and Positioning image_rect = image_surface.get_rect(center=(x, y)) After loading an image, this creates a Rect object for it. You can immediately set its position by passing a tuple to a location attribute like `center`, `topleft`, `midbottom`, etc. Drawing the Image (Blitting) screen_surface.blit(image_surface, image_rect) This must be called inside the main game loop every frame. It draws the `image_surface` onto the `screen_surface` at the location s...

4 more steps in this tutorial

Sign up free to access the complete tutorial with worked examples and practice.

Sign Up Free to Continue

Sample Practice Questions

Challenging
You need to load a 100x100 pixel image `enemy.png`, resize it to be 50x50 pixels, and then blit it onto the screen. Which code snippet correctly accomplishes all these steps?
A.enemy_img = pygame.transform.scale('enemy.png', (50, 50)) enemy_rect = enemy_img.get_rect() screen.blit(enemy_img, enemy_rect)
B.original_img = pygame.image.load('enemy.png') enemy_img = pygame.transform.scale(original_img, (50, 50)) enemy_rect = enemy_img.get_rect() screen.blit(enemy_img, enemy_rect)
C.enemy_img = pygame.image.load('enemy.png') enemy_rect = enemy_img.get_rect() pygame.transform.scale(enemy_rect, (50, 50)) screen.blit(enemy_img, enemy_rect)
D.enemy_img = pygame.image.load('enemy.png') enemy_img.scale((50, 50)) enemy_rect = enemy_img.get_rect() screen.blit(enemy_img, enemy_rect)
Challenging
A sprite starts at `player_rect.topleft = (100, 200)`. The game loop runs three times. In the first loop, `player_rect.x += 10`. In the second, `player_rect.y -= 5`. In the third, `player_rect.x += 10`. What will `player_rect.topleft` be after the third loop completes?
A.(120, 195)
B.(110, 195)
C.(120, 205)
D.(110, 200)
Challenging
Analyze the following game loop. It contains two separate errors from the 'Common Pitfalls' section. What are they? `while True:` `# event handling code here` `player_rect.x += 5` `screen.blit(player_img, (300, 400))` `pygame.display.flip()`
A.File Not Found and Blitting Outside the Loop.
B.Image Smearing and File Not Found.
C.Image Doesn't Move and Blitting Outside the Loop.
D.Image Smearing and Image Doesn't Move.

Want to practice and check your answers?

Sign up to access all questions with instant feedback, explanations, and progress tracking.

Start Practicing Free

More from VI. Game Development Basics with Pygame

Ready to find your learning gaps?

Take a free diagnostic test and get a personalized learning plan in minutes.