Sunday, February 24, 2013

2D Side Scroller with Pygame and blit

video

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.





Saturday, February 23, 2013

2D Android Tile Game "Swarm" is Finished

video

Disneyland, the winter flu, soccer, surfing, school and work, these are all normal family activities.  Learning to program in python often seems to fall down on the priority list, especially for my teenage son, who is often boiling over with energy.  He'd rather be out running, hiking, fishing, or playing a team sport.

My son blocked out some time today for python programming and he decided to complete development of Swarm after finishing the eighth level.  Each level now has a different map.  He also changed the game fonts to more stylistic fonts he downloaded from the Internet. The video above shows all eight levels of his game running on a SamSung Galaxy Note II.

The levels are created with python code only.  He decided not to use a map editor since the map size is small and manageable.

There is a story behind the game.  The blue boy goes through different areas of the world looking for a girl that is imprisoned in a haunted castle.  If the boy gets through eight levels, he saves the girl.  A hero screen appears with the boy and girl enjoying a sunrise.

The next game he's working on is a 2d side-scroller game.

The distribution file and source code for Swarm are here.



Monday, February 4, 2013

Pygame Performance on Android Phones

video

The performance of python games is fine on old, cheap Android phones.  My son has written several games for his cheap LG Optimus S phone with 170MB of memory.  Although the games are slower than on a desktop, there are no problems with the speed of simple games on the phone.