Update 21 Aug 2020: Fixed linked to sour code.
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.
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.
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!
