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!