Pygame Images | Using Python

Images

We now have a game map that we can display, but the graphics aren’t very good. Rather than have coloured squares for the different resources, it would be nicer to have images.

Open a program to create images (paint, photoshop, etc.) and create a new 40 pixel by 40 pixel blank image. You can then draw how you’d like the dirt to look in your game. Here’s my dirt image, which I have drawn using Adobe Fireworks:

Once you have a suitable image for each of your resources, you can then just change your ‘colours’ dictionary, associating resources with these new images, instead of just the colours:

#a dictionary linking resources to textures
textures = {
    DIRT  : pygame.image.load('dirt.png'),
    GRASS : pygame.image.load('grass.png'),
    WATER : pygame.image.load('water.png'),
    COAL  : pygame.image.load('coal.png')
}

#a dictionary linking resources to textures

textures = {

DIRT : pygame.image.load('dirt.png'),

GRASS : pygame.image.load('grass.png'),

WATER : pygame.image.load('water.png'),

COAL : pygame.image.load('coal.png')

}

I’ve changed the name of this dictionary to ‘textures’, as now we’re not linking resources to colours. The other thing we need to change is that we are now going to have to draw images for each of the tiles, and not rectangles. You can replace the line drawing the rectangles with the following:

#draw an image for the resource, in the correct position
DISPLAYSURF.blit(textures[tilemap[row][column]], (column*TILESIZE,row*TILESIZE))

1 2	#draw an image for the resource, in the correct position DISPLAYSURF.blit(textures[tilemap[row][column]], (columnTILESIZE,rowTILESIZE))

‘Blit’ just means copy the image to the display surface. Notice that we only need to pass 2 parameters to draw an image, and not 3. We only need to pass the image to display and the x and y-coordinates to display it at. You don’t need the width and height, as the entire image will be displayed. If you run the same program from the last section, but with the above changes, you should see the following:

Hopefully your images look a little better than mine! If you can’t see your new images on the map, then make sure that you have the images saved in the same place as your program. Here’s the complete code for this section:

import pygame, sys
from pygame.locals import *

#constants representing colours
BLACK = (0,   0,   0  )
BROWN = (153, 76,  0  )
GREEN = (0,   255, 0  )
BLUE  = (0,   0,   255)

#constants representing the different resources
DIRT  = 0
GRASS = 1
WATER = 2
COAL  = 3

#a dictionary linking resources to textures
textures =   {
                DIRT  : pygame.image.load('dirt.png'),
                GRASS : pygame.image.load('grass.png'),
                WATER : pygame.image.load('water.png'),
                COAL  : pygame.image.load('coal.png')
            }

#a list representing our tilemap
tilemap = [
            [GRASS, COAL,  DIRT ],
            [WATER, WATER, GRASS],
            [COAL,  GRASS, WATER],
            [DIRT,  GRASS, COAL ],
            [GRASS, WATER, DIRT ]
          ]

#useful game dimensions
TILESIZE  = 40
MAPWIDTH  = 3
MAPHEIGHT = 5

#set up the display
pygame.init()
DISPLAYSURF = pygame.display.set_mode((MAPWIDTH*TILESIZE,MAPHEIGHT*TILESIZE))

while True:

    #get all the user events
    for event in pygame.event.get():
        #if the user wants to quit
        if event.type == QUIT:
            #and the game and close the window
            pygame.quit()
            sys.exit()

    #loop through each row
    for row in range(MAPHEIGHT):
        #loop through each column in the row
        for column in range(MAPWIDTH):
            #draw the resource at that position in the tilemap, using the correct image
            DISPLAYSURF.blit(textures[tilemap[row][column]], (column*TILESIZE,row*TILESIZE))

    #update the display
    pygame.display.update()

import pygame, sys

from pygame.locals import *

#constants representing colours

BLACK = (0, 0, 0 )

BROWN = (153, 76, 0 )

GREEN = (0, 255, 0 )

BLUE = (0, 0, 255)

#constants representing the different resources

DIRT = 0

GRASS = 1

WATER = 2

COAL = 3

#a dictionary linking resources to textures

textures = {

DIRT : pygame.image.load('dirt.png'),

GRASS : pygame.image.load('grass.png'),

WATER : pygame.image.load('water.png'),

COAL : pygame.image.load('coal.png')

}

#a list representing our tilemap

tilemap = [

[GRASS, COAL, DIRT ],

[WATER, WATER, GRASS],

[COAL, GRASS, WATER],

[DIRT, GRASS, COAL ],

[GRASS, WATER, DIRT ]

]

#useful game dimensions

TILESIZE = 40

MAPWIDTH = 3

MAPHEIGHT = 5

#set up the display

pygame.init()

DISPLAYSURF = pygame.display.set_mode((MAPWIDTH*TILESIZE,MAPHEIGHT*TILESIZE))

while True:

#get all the user events

for event in pygame.event.get():

#if the user wants to quit

if event.type == QUIT:

#and the game and close the window

pygame.quit()

sys.exit()

#loop through each row

for row in range(MAPHEIGHT):

#loop through each column in the row

for column in range(MAPWIDTH):

#draw the resource at that position in the tilemap, using the correct image

DISPLAYSURF.blit(textures[tilemap[row][column]], (column*TILESIZE,row*TILESIZE))

#update the display

pygame.display.update()

Challenge

Make sure that you have a range of different resources, each with their own images. Does the game still look ok if you change the TILESIZE constant to 100 pixels?