Welcome back to Part 2 of this tutorial series on writing your first platformer game. This is a series I’m writing for my eldest son (if you are reading this – keep doing what you’re doing!) and it is based on the PyGame python code library.

In case you’ve missed it you can read Part 1 here!

A quick overview of what was covered in Part 1:

  • initialise PyGame
  • create the basic game loop

To save time here is the final code from Part 1:

# import the PyGame library
import pygame

# initialise PyGame
pygame.init()
pygame.display.set_caption("Platformer")

# settings
HEIGHT = 450
WIDTH = 400
FPS = 60

# the clock and display surface
FramePerSec = pygame.time.Clock()
displaysurface = pygame.display.set_mode((WIDTH, HEIGHT))

# the game loop
while True:
    for event in pygame.event.get():
        if event.type == pygame.QUIT:
            pygame.quit()
    displaysurface.fill((0, 0, 0))
    pygame.display.update()
    FramePerSec.tick(FPS)

Here is what will be covered in Part 2:

  • drawing the player character on the screen

Drawing in PyGame – all about Sprites

Anything you see on the screen in PyGame is done using Sprites. According to the documentation a sprite is a “simple base class for visible game objects” (you can read more about it in the official Sprite documentation page)

We are going to use a Sprite to create the player’s own character. To keep it simple we’re going to use a small square.

The end result is going to look like this:

Let’s add the code to draw the player’s character.

From now on we will keep adding code to what we’ve already written – the full code is at the end of the post as well in case you find it easier to follow along that way.

The new code is highlighted below:

# import the PyGame library
import pygame

# initialise PyGame
pygame.init()
pygame.display.set_caption("Platformer")

# settings
HEIGHT = 450
WIDTH = 400
FPS = 60

# the clock and display surface
FramePerSec = pygame.time.Clock()
displaysurface = pygame.display.set_mode((WIDTH, HEIGHT))

# the Player Sprite
class Player(pygame.sprite.Sprite):
    def __init__(self):
        super().__init__()
        # 15,15 is the width and height
        self.surf = pygame.Surface((15, 15))
        self.surf.fill((128,255,40))
        self.rect = self.surf.get_rect()
        self.rect.midbottom = (200, 225)

# visible elements
P1 = Player()
all_sprites = pygame.sprite.Group()
all_sprites.add(P1)

# the game loop
while True:
    for event in pygame.event.get():
        if event.type == pygame.QUIT:
            pygame.quit()
    displaysurface.fill((0, 0, 0))

    # draw all visible elements
    for entity in all_sprites:
        displaysurface.blit(entity.surf, entity.rect)

    pygame.display.update()
    FramePerSec.tick(FPS)

The code in the game loop draws the graphic to the screen.

What the player character looks like, its size, position and colour, are defined in the Player class. Experiment for a bit to understand better how the code works:

  1. self.surf = pygame.Surface((15, 15))

    The (15, 15) here sets the size of the player – 15×15 pixels. Experiment with different values until you are happy with it.
  2. self.surf.fill((128,255,40))

    The (128, 255, 40) is the player’s colour. This is a so-called RGB value – red, green and blue. Each of the three numbers goes from 1 to 255 and determines how much of red, green, blue to mix together to make the final colour. You can use this online RGB mixer to come up with new values, or just type in new numbers (from 1 to 255, remember!) to experiment.
  3. self.rect.midbottom = (200, 225)

    The values (200, 225) sets the position of the player. This is in the x-y-coordinate system that you might already be used to. The first value (200) is the x coordinate, the second (225) is the y coordinate. Everything is measured from the top left of the screen.

    In our case because the width of the game is set to 400 and the height is set to 450 this places the character in the middle of the screen.

    Another thing to mention is that the rect here is the rectangle shape of the player. And we’re settings its midbottom coordinate. This places the middle point of the bottom edge of the player’s rectangle shape at the (200, 225) coordinate. In PyGame the rect property has other points that you can set the coordinates for – topleft, bottomleft, topright, bottomright midtop, midleft, midbottom, midright center, centerx, centery – you can experiment with these too to see how it affects the player’s position.

Make sure you experiment with this, change the player’s size, position and colour, until you’re happy that you understand how the code works.

Once you’ve done that it’s time to move on to Part 3, where you move the player character with the left/right arrows on the keyboard.