A short visit of PyGame

31.05.2007 by kerim in game-development | pygame | python

Ok, its play time again.
Since Azarai already told you about our newly awakened interest in 3D programming and since he already made some posts about engines, textures, terrain editors etc. I thought i gave you a small intro into something totally different: PyGame.
For an idea I (we) have i thought i might give good old 2D a chance first especially since some 3D engines made my blood boil lately.

So here is a hopefully very simple entry into 2D basics with PyGame. We will see how far it will develop later ;)

Step 0: Get the required libs/resources
a) I guess you already have python installed. So all you need to do is to go to the website of pygame and download the binaries there.
b) pick up some images and sprites. For the background i used the one here
for the player i picked a simple png. You might use any sprite.

Step 1: Create a simple app
As a first step we need some basic framework to start with. Its so simple i just put down the code here.

#! /usr/bin/env python

import pygame, sys  
displaymode=(800,600)  
screen = pygame.display.set_mode(displaymode)

while True:  
    event = pygame.event.poll()  
    if event.type == pygame.QUIT:  
        sys.exit()

What is done here ?
We define a size for the gamewindow. I use a variable to make it easier later to change that.
Next is the initialization of this gamewindow.
Then already comes the gameloop. As long as we do not hit the "X" Button in the window the game will go on.

Quite simple isn't it ?

Step 2: So lets add some content !
It's obvious that you should load content before entering the game loop if possible. Dynamic loading comes later.
Again here the sourcecode. Some lines have comment marks that we will (ony by one) remove

#! /usr/bin/env python

import pygame, sys  
displaymode=(800,600)  
screen = pygame.display.set_mode(displaymode)  
background=pygame.image.load("background.jpg").convert()  
player=pygame.image.load("player.png").convert()

#background=pygame.transform.scale(background,displaymode)  
#screen.blit(background, (0, 0))

#position=player.get_rect()  
#screen.blit(player, position)

while True:  
    event = pygame.event.poll()  
    if event.type == pygame.QUIT:  
        sys.exit()  
#    screen.blit(background,(0,0))  
#    position=position.move(10,0)  
#    screen.blit(player, position)  
#    pygame.display.update()

As you can see loading an image is very simple. I directly loaded two. Here is already the first trick. There is a method called "convert".
You don't need to use that method. But it can increase performance dramatically. Even if you have files with the same "file"-format these images do not need to be in the same "format". This may cause problems because while rendering all images would be converted which needs time. The method solves this problem while loading the image so in the rendering process the system can do other things.
When you run the program nothing will happen.
Why ?
Because we forgot to actually draw the images.
The method "blit" is used for that. What it does is to copy all pixels of an image (in this case the background) to the screen starting at a position (here 0,0) that has its origin in the upper left corner of the screen.
So take out the comment in the line screen.blit(background.....
Run the program again.
Nothing happens...
Ups ..we forgot that the screen actually has to get updated.
So remove the comment in the last line.

Step 3: Fitting images, adding more content
If all went well you should have a window with your desired background drawn on it. As you can see the background doesn't fill the window. I have choosen some which is smaller than the window.
In order to solve that you can simply scale the background image (see commented line in the code above)
Run it again ...
If all went well you should have a simple windows with a nice background covering the whole area.
Now we insert the player.
Remove the comments in the two lines abobe the while statement and run the program again.
This should set a player in the upper left corner of the window.
Nice....

Step 4: Movement
And since we already have a variable for the position we might simply try and move the player to the right.
Remove all comments aside of screen.blit(background) and run the program.
What you should see now is a nice line of player sprites growing to the right.
What happened ?
Well obviously any position that was occupied by a sprite will not be replaced automatically when that sprite moves.
So we need to draw the background again EVERY frame.
Remove the last comment.
Run the program.
Now you should see the playersprite moving to the right and out of the screen.

You can experiment a bit now.
Use different moves and see what happens.
Try to limit the movement to the area visible in the window.

You might also add another nice statement at the end of the code directly below update:

pygame.time.delay(100)

This will pause the loop for 100 ms.

So (a) final code for today:

#! /usr/bin/env python

import pygame, sys  
displaymode=(800,600)  
screen = pygame.display.set_mode(displaymode)  
background=pygame.image.load("background.jpg").convert()  
player=pygame.image.load("player.png").convert()  
background=pygame.transform.scale(background,displaymode)  
screen.blit(background, (0, 0))

position=player.get_rect()  
screen.blit(player, position)

while True:  
    event = pygame.event.poll()  
    if event.type == pygame.QUIT:  
        sys.exit()  
    screen.blit(background,(0,0))  
    position=position.move(1,0)  
    screen.blit(player, position)  
    pygame.display.update()  
    pygame.time.delay(100)

comments powered by Disqus