rendering background image using PyGame in Python 2.7


it has been quite a while since i last posted anything regarding my endeavors in game programming. the past weeks have been quite busy for i was working on the backend of another mobile application. anyway, i was able to continue studying python this weekend and inspired by Final Fantasy III which I’ve been playing using an emulator lately, I decided working on rendering more visually pleasing backgrounds. yes, you read that right, Final Fantasy III. why am i playing such an old game? i’m quite into light weight games. and i figured it would be better to start with 2D games.

this is a short tutorial on rendering backgrounds using a single image source. here’s a sample of the perfectly symmetric background i was able to produce.

Background Demo
the sample background of a 2D game

the codes are available HERE.

the source image

since i’m only working on a demo, i simply copied the source image from a game installed in my computer. that game is Deadly Sin. if we are going to create more maps just for practice, we can find good resource from the games already installed in our machines like this one.

Tile Set
the tile set from Deadly Sin

it is a 512px X 480px image composed of different tiles used in the game to create the various stages and maps.

the map

i decided to put all details of a particular place in one file and call it map. this way i can produce as many different maps as i want completely independent of the game.

import pygame
from pygame import *

# fills a 16 X 14 map with rectangles representing tiles to be rendered from the
# source images to the game display

#assigns source image
SOURCE = pygame.image.load('images/TileA4.png')

p = pygame.Rect(288, 0, 32, 32) #area of source image containing pavement
g = pygame.Rect(416, 0, 32, 32) #area of source image containing grass
s = pygame.Rect(288, 160, 32, 32) #area of source image containing sand/dirt
b = pygame.Rect(288, 320, 32, 32) #area of source image containing bush

#matrix containing the pattern of tiles to be rendered
MAP = [[p,p,p,p,p,p,p,p,p,p,p,p,p,p,p,p],\
       [p,b,b,b,b,b,p,p,p,p,b,b,b,b,b,p],\
       [p,b,b,g,g,g,g,p,p,g,g,g,g,b,b,p],\
       [p,b,g,g,g,g,g,p,p,g,g,g,g,g,b,p],\
       [p,b,g,g,g,p,p,p,p,p,p,g,g,g,b,p],\
       [p,b,g,s,g,p,s,s,s,s,p,g,s,g,b,p],\
       [s,s,s,s,s,s,s,g,g,s,s,s,s,s,s,s],\
       [s,s,s,s,s,s,s,g,g,s,s,s,s,s,s,s],\
       [p,b,g,s,g,p,s,s,s,s,p,g,s,g,b,p],\
       [p,b,g,g,g,p,p,p,p,p,p,g,g,g,b,p],\
       [p,b,g,g,g,g,g,p,p,g,g,g,g,g,b,p],\
       [p,b,b,g,g,g,g,p,p,g,g,g,g,b,b,p],\
       [p,b,b,b,b,b,p,p,p,p,b,b,b,b,b,p],\
       [p,p,p,p,p,p,p,p,p,p,p,p,p,p,p,p]]

as shown, we first loaded the image that will be used by the map and set it as its SOURCE. next we defined the areas from the source image that we would like to be rendered on our game screen as tiles p, g, s, and b. lastly, we created a 16 X 14 matrix that will contain the tiles we created. there could have been a better way of creating the matrix that is less space complex, but i intended it to be that way so we can directly compare the matrix with the pattern we have in mind just by looking at it.

the game

unlike the previous tutorials, this game file will not make use of any user input.

import pygame
from pygame import *
import map1

DEFAULT_SCREENSIZE = [512, 448] #16 X 14 grid with 32px X 32px cell

pygame.init()

screen = pygame.display.set_mode(DEFAULT_SCREENSIZE)
display.set_caption('Background Rendering Demo')

#loops through map to set background
for y in range(len(map1.MAP)):
    for x in range(len(map1.MAP[y])):
        location = (x*32, y*32)
        screen.blit(map1.SOURCE, location, map1.MAP[y][x])

updated = False
going = True

while going:
    if updated == False:
        pygame.display.update()
        updated = True

    for e in event.get():
        if e.type == QUIT: #checks if close button was clicked
            going = False

pygame.quit()

to discuss it in detail, first we import the modules we need including the map we created named map1.py.

import pygame
from pygame import *
import map1

next, we initialize our screen and display.

DEFAULT_SCREENSIZE = [512, 448] #16 X 14 grid with 32px X 32px cell

pygame.init()

screen = pygame.display.set_mode(DEFAULT_SCREENSIZE)
display.set_caption('Background Rendering Demo')

then we go to the most essential part of this tutorial where we need to loop through our map and assign the tiles to our screen.

#loops through map to set background
for y in range(len(map1.MAP)):
    for x in range(len(map1.MAP[y])):
        location = (x*32, y*32)
        screen.blit(map1.SOURCE, location, map1.MAP[y][x])

lastly, we perform the loop that will keep the game running. note that checking if the display was updated was only done to reduce overhead.

updated = False
going = True

while going:
    if updated == False:
        pygame.display.update()
        updated = True

    for e in event.get():
        if e.type == QUIT: #checks if close button was clicked
            going = False

pygame.quit()

that’s it for this week. hope you find this useful folks!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s