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:
1 2 3 4 5 6 7 |
#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:
1 2 |
#draw an image for the resource, in the correct position DISPLAYSURF.blit(textures[tilemap[row][column]], (column*TILESIZE,row*TILESIZE)) |
‘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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
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?