Since I'm still not completely recovered from the flu, I spent a few hours on Sunday working inside the house with my son on a 2D side-scroller game. I'm still amazed at how quickly games can be created in Pygame.
To get the background to scroll, we used the Surface.blit method to slice up one large panoramic photograph. We used Gimp to make the photograph look more like a cartoon. This method is sometimes called, "one giant image." The alternative method is to use tiles. Since we used tiles for the background in the previous game, I wanted to try the "one giant image" method and see if it slowed down my son's phone. Surprisingly, performance is completely fine.
In this implementation of the "one giant image" technique, we used the area argument of pygame.Surface.blit(). Most people use blit regularly with Surface.blit(image, rectangle). Many people stop exploring blit with just those two arguments. There's a few more tricks that are worth learning.
blit will only use the upper left point of the rectangle as the point for the upper left corner of the surface. The size of the rectangle doesn't matter. A point such as (0, 0) will work the same as a rectangle. The more interesting argument is the area argument that comes after the destination point.
Here's the method explained in the Pygame documentation.
The area argument can take a four integer tuple to slice from the source surface. For example (0, 0, 480, 320) will source the far left edge of the giant image and take a segment that is 480 pixels wide. My son's phone has a screen that is 480 x 320. We're using slices that are the same size as the screen of the phone . By slicing a section 1 pixel to the right and then blitting that surface to the main screen, a stationary character in the game will appear to move 1 pixel to the right. In the game shown, the character is a blue smurf. The smurf is completely stationary on the x axis. The smurf appears to be moving horizontally to the right because the background is moving horizontally to the left. To enhance the illusion of movement, the smurf image rotates through a 16 cell animated sequence loop.
If the person playing the game looks at the town skyline in the background and the smurf in the foreground, the smurf will appear to move 1 pixel to the right every time through the loop. The second time through the loop, the sliced area will be (1, 0, 481, 320). The third time through the loop, the area will be (2, 0, 482, 320). The game in the video is running on 30 frames per second. The background is moved to the left at 30 pixels per second.
To create more of an illusion of movement, we're using parallax scrolling. Objects closer to the person playing the game appear to move faster than objects further away. The ground and cactus are moving toward the smurf at 8 pixels per cycle or 240 pixels per second. The larger trees are moving toward the smurf at 3 pixels per cycle or 90 pixels per second. The tree is an actual photograph of a tree that was edited to appear more like a cartoon tree.
Update: 2014 February 20
Video tutorial available.
