In this tutorial, I will walk you through how to make a screen and then show graphics on it. I will also teach you some basic graphic manipulation, such as rotating graphics, resizing graphics, and placing graphics on the screen. You can use jpegs,gifs, pngs, bmps, and many other graphics in Pygame.

Prerequisites: For this tutorial you will need a copy of Python and the extra library for it Pygame. You will also need a basic knowledge of Python.

Python Download

Pygame Download

Learning Python (for the complete n00b)

First off, find a picture or an image and put it into your python folder. Ok, ready? Use the following code:

import pygame   #loads the pygame module

w = 640   #sets pygame screen width

h = 480   #sets pygame screen height

screen = pygame.display.set_mode((w, h))  #make and display screen

#Next line loads graphic.  Replace ball.bmp with the name of your image

graphic = pygame.image.load("ball.bmp").convert()

screen.blit(graphic, (0, 0)) #Display image at 0, 0

pygame.display.flip()   #Update screen

That's it! You should see your image on the screen! Now I am going to have you add something, so that you can close this screen a little easier. You may have noticed that it is a little hard to close. Try adding a while statement. (The first few lines will stay the same).

running = 1

while running:          #Loop this

   for event in pygame.event.get():    #get user input

      if event.type == pygame.QUIT:    #if user clicks the close X

           running = 0                 #make running 0 to break out of loop

   screen.blit(graphic, (0, 0)) #Display image at 0, 0

   pygame.display.flip()   #Update screen

Those few lines will make closing your program a lot easier. I use them in every game I write.

Now to resize our image, we are going to use pygame.transform.scale(). This is fairly simple. First add this to our code, before the loop:

graphicrect = graphic.get_rect()

smallgraphic = pygame.transform.scale(graphic, (graphicrect.right/2, graphicrect.bottom/2))

In the while statement after your first screen.blit put this code:

screen.blit(smallgraphic,(graphicrect.right + 5, 0))

So here's what we did. The first new line of code will return the length and width of our image, by assigning it to graphicrect.right and graphicrect.bottom. We then assign a new variable, smallgraphic, to hold our resized image. Now to use pygame.transform.scale, you simply put in the image we are going to be changing. And then it wants (length, width). Now we set those to be half of the original image. You can, of course, just use integers there. But dividing or multiplying (e.g. graphicrect.right * 2 would double the width) is going to ensure that the image isn't skewed.

To rotate our image we will use pygame.transform.rotate(). This is also very simple, to use it we just need the graphic and an angle. Python will rotate the image counter - clockwise to the angle we desire. Go ahead and delete the screen.blits for the other two images, or you can put them side by side like we did on the previous example. Put this code outside of the while loop:

imageturned = pygame.transform.rotate(graphic, 90)

And put this in the while statement:

screen.blit(imageturned, (0,0))

And that's it. You can change the angles to whatever you like!