GitHub Pages, Bootstrap, and markdown

Since I started to move the example code for my son's tutorials to GitHub, I decided to document the tutorials and functionality with GitHub tools.

I initially started with the README.md file in my GitHub repositories.  This required me to learn Markdown Syntax.  The syntax is straightforward and take about 30 minutes to learn.  GitHub has version for Markdown that they're call GitHub Flavored Markdown (GFM).

This was pretty fun since I could use lists, headings, and embedded images in the README.md file. 

I then noticed that there is a wiki link to the right of each repository.  I created a wiki for the lessons and even put the YouTube videos into the wiki.


Today, I found out that GitHub has a feature called Pages to create a full project site.  I created a video overview of Pages and wrote a blog post here.

I created a full website for my project repository in 6 minutes.

Since I was on a roll and had some spare time, I read more about GitHub Pages and realized that the web pages were stored in my repository on the GitHub server and could easily be updated with git.

To make a more dynamic web site, I looked at bootstrap.  I created a test site for json_loader using the Carousel template for Bootstrap.

I ended the day by watching this awesome video by  David Cochran of Twitter.

PGS4A Installation Tutorial

Just saw this tutorial by Shems Eddine on getting PGS4A running.  Installing pgs4a is a common question.

Since I haven't had problems with the installation and I am running pgs4a primarily on Linux, I haven't been able to help with this problems.  Please see Shem Eddine's Journal for some great tips.  The tutorial is focused on Windows, which is great for all you Windows programmers out there.

If you're still stuck, there's the pgs4a forum.

JSON Map Loader for Android Games Written in Python (Pygame and PGS4A)

I recently changed my son's lesson on 2D tile maps to focus on creating a json_loader that can read in different types of maps.  json_loader will allow you to quickly create 2D tile games on Android.  It is for children learning to program in Python.  The example loader is not intended for production applications.   You can create fairly large maps with Tiled and have your player explore a small fanasy world.

The full source code for the loader is available on github.

• json_loader on github

You can get the package at the link above or with git.

  $ git init

  $ git pull http://github.com/codetricity/json_loader

 There are three skeleton program to get you started:

Maze.  This is the only game that is fun enough to be playable.  If you add a timer onto this game and a way to save the time scores, you'll have a fully playable game.  Even with the basic skeleton, the game is still playable.  You can create several maps with Tiled and then have a series of simple map games on your phone.









Adventure Map.  The game is fully playable with the character moving around the screen with either a keyboard or touchscreen.  The game doesn't have a layer to find things such as treasure or monsters.  You'll need to add this layer and write the code to take an action such fight the dragon with a sword.  For an idea of what to do with a map game, see my son's game Swarm that he developed when he was 13 years old.  Note that Swarm doesn't use json_loader.  Each map was created with Python code, not with a map editor.  It took a while to build the different levels.

Scroller. I also started on a 2D scroller game using json_loader.  The player scrolls and can jump around the screen.  However, the platforms don't work.  The character will fall right through the platform in the air.  I wrote a number of blog posts on 2D side-scroller games.  Here's another one.


Once you get the code, run the example program with:

$ python main.py

The default screen size is 480 x 320.

You can load a different map by opening main.py in a text editor and changing:

    map_file = "maps/map.json"

    map_file = "maps/test_map.json"

If you use test_map.json, you will have a maze game.

If you want to experiment, you can use the unfinished scroller game with:

  

  $ python scroller_example.py

If you do create a game with json_loader, take a video of the game and put a link to the video in the comments.

Slick Pygame / Ren'Py Game - Save the Date

Funny, challenging and mildly addictive.  Save the Date is short and it will be tough to play it just once.   If  your date ends in disaster, you'll want to give it another go.  My son played it about three times.  We haven't won yet.  The game is free and worth the short download and 30 minutes of time playing.

 Save the Date is written in Python, Pygame, and Ren'Py.  The game's author is Chris Cornell.  The impressive music is by Francisco Cerda.  Save the Date was was a 2013 IndieCade Nominee.

I believe that the author of Ren'Py is Tom Rothamel, the same person that developed Pygame Subset for Android.  Both of these projects are very high quality and are widely used by an active community.

Sharp and Clean Symbols from GLYPHICONS

 

As I was reviewing the Bootstrap site, I noticed that there were references to GLYPHICONS.  I like this type of clean icons and may incorporate some of them into future games.

There are different licenses available.  One of the licenses is for a free version of 470 GLYPHICONS and 50 GLYPHICONS Social that are distributed under the Creative Commons license.  The author is Jan Kovarlk.

Many games and applications are moving to a cleaner, simpler icon style.

kivy - alternative to Pygame

 

I looked at pyglet two years ago in October of 2011.    Since that time, I haven't gone back to it.  I've been focused on Pygame Subset for Android.  As far as I know, Pyglet doesn't work on Android phones.  I also like the Pygame documentation more than the Pyglet documentation.

Another library, kivy, does work on Android.  It should also work on iOS.  I haven't tried it myself on either Android or iOS.  My son and I have used it on Linux and it does work great on Linux.

My son was able to build a pong game from the tutorial in one session.  Kivy has a lot of potential and I want to go back to it.

The reason I'm still using Pygame for my lessons is that my son is still getting used to object oriented programming.  With Pygame, the program is can be made more easily with one long block of code.  He can then go back to change the program components into functions or classes.

With kivy, he has to immediately start using classes.

Here's the basic "Hello, World" in Kivy.


from kivy.app import App from kivy.uix.button import Button class TutorialApp(App): def build(self): return Button(text = "Hello!", background_color = (0, 0, 1, 1), font_size = 150) if __name__ == "__main__": TutorialApp().run()

While this is actually shorter than a Hello World program in pygame, it does require class instantiation, which is a bit difficult to understand for a young teenager.

The kivy documentation is also considerably weaker than the pygame documentation.  Since kivy is a younger project, I've also experienced more problems with getting the libraries to work all the time on my Linux system.  For example, when I updated Ubuntu 12.04 to the beta NVIDIA Driver, 325, kivy stopped working.  However, pygame was still working.  This may be due to an error with the NVIDIA driver GL implementation and have nothing to do with Kivy.  However, it does show that with less people using Kivy, more things can go wrong.

The advantages I can see for kivy are:

• multi-touch support.  This is huge.  Pygame only supports a single point.  Although there are some hacks to use the joystick module to detect multiple inputs, it's not that clean a solution.  Getting multi-touch support is a major draw.
• iPhone, iPad support.  It doesn't look easy to do and I've never done it.  There are some apps on the Apple Store.  So, it's possible to get it to work.  I'm sure it will get easier as the platform matures.
• GPU acceleration.  The fancy OpenGL ES 2 support makes it easier to do cool 3D effects
• Android and iPhone support is provided by the core maintainers.  For Pygame, we need to rely on the separate pygame subset for android project (which probably won't support multi-touch since the key developer wants to keep the feature set similar to what is on the base pygame library.)
• The development community around adding features to the platform seems to be more active than the pygame development community.

The downsides for the purpose of teaching:

• Pygame documentation is better
• More people use Pygame and there are more examples of Pygame code
• The larger pygame community means that most problems have already been solved by other people.  Much more answers on stackoverflow
• Kivy uses the KV Design language in a separate file.  It gets a bit like JavaScript where you have multiple languages for one application.  There's upsides and downsides to this approach.  The main downside is that there's a slightly steeper learning curve for the kids.

Despite the shortcomings, I'm most likely going to revisit kivy in my curriculum after my son gets through his 2D Maze games.    This assumes that I don't start on django.

2D Tiles Games - More Algorithms to Slice Tilesets

Prior to heading out to go fishing, I came across this nice post on slicing a tileset into rows and columns.  The example uses Surface.subsurface, which I haven't been using effectively.


import pygame import pygame.locals def load_tile_table(filename, width, height): image = pygame.image.load(filename).convert() image_width, image_height = image.get_size() tile_table = [] for tile_x in range(0, image_width/width): line = [] tile_table.append(line) for tile_y in range(0, image_height/height): rect = (tile_x*width, tile_y*height, width, height) line.append(image.subsurface(rect)) return tile_table if __name__=='__main__': pygame.init() screen = pygame.display.set_mode((128, 98)) screen.fill((255, 255, 255)) table = load_tile_table("tileset.png", 24, 16) for x, row in enumerate(table): for y, tile in enumerate(row): screen.blit(tile, (x*32, y*24)) pygame.display.flip() while pygame.event.wait().type != pygame.locals.QUIT: pass 


The author wrote a more elaborate tutorial here.

The author of bitcraft-PyTMX used the code below to handle tilesets.


tmxdata.images = [0] * tmxdata.maxgid for firstgid, t in sorted((t.firstgid, t) for t in tmxdata.tilesets): path = os.path.join(os.path.dirname(tmxdata.filename), t.source) image = pygame.image.load(path) w, h = image.get_size() tile_size = (t.tilewidth, t.tileheight) real_gid = t.firstgid - 1 colorkey = None if t.trans: colorkey = pygame.Color("#{0}".format(t.trans)) # i dont agree with margins and spacing, but i'll support it anyway # such is life. okay.jpg tilewidth = t.tilewidth + t.spacing tileheight = t.tileheight + t.spacing # some tileset images may be slightly larger than the tile area # ie: may include a banner, copyright, ect. this compensates for that width = ((int((w-t.margin*2) + t.spacing) / tilewidth) * tilewidth) - t.spacing height = ((int((h-t.margin*2) + t.spacing) / tileheight) * tileheight) - t.spacing # using product avoids the overhead of nested loops p = product(xrange(t.margin, height+t.margin, tileheight), xrange(t.margin, width+t.margin, tilewidth)) for (y, x) in p: real_gid += 1 gids = tmxdata.mapGID(real_gid) if gids == []: continue original = image.subsurface(((x,y), tile_size)) for gid, flags in gids: tile = handle_transformation(original, flags) tile = pygame_convert(tile, colorkey, force_colorkey, pixelalpha) tmxdata.images[gid] = tile

I plan to review the code snippets above in more detail after the fishing trip.

Pygame on Android App Crashes on Start: FIXED

A good tileset in the wrong place at the wrong time

After catching Jack smelt in Capitola and seeing an amazing display of seals, dolphins, and school of tens of thousands of fish, my son worked on his 2D tile map game, Maze.  The Android app consistently crashed on start.  It would display the initial splash screen and then die, leaving no error message.

This has happened in the past with other games.  We usually solve the problem with adb, the Android debugger.  Today, the fix was easy.  However, since I know that it can be daunting to wade through the adb logcat, I'll provide a few tips specific to Python / Pygame Subset for Android debugging.

My son's game uses Python and pgs4a.  He also uses Tiled to export JSON map files. 

First, find adb on your system.  It's not something that python developers normally use from the command line.  adb is in the platform-tools sub-directory of the android-sdk main SDK directory.

  pgs4a/android-sdk/platform-tools$
 From the Linux command line, you can either just run adb logcat or you can run it through grep and look for references to python.

  platform-tools$ ./adb logcat *:D |grep python

 A larger snippet of the log file is shown below. I/ActivityManager( 1465): Start proc com.kaiyotesof.maze:python for activity com.kaiyotesof.maze/org.renpy.android.PythonActivity: pid=5088 uid=10062 gids={1015, 3003} I/python ( 5088): Private directory is /data/data/com.kaiyotesof.maze/files I/python ( 5088): Argument is /data/data/com.kaiyotesof.maze/files I/python ( 5088): Handing off to main. I/python ( 5088): /data/data/com.kaiyotesof.maze/files/main.py:1: RuntimeWarning: import cdrom: No module named cdrom I/python ( 5088): (ImportError: No module named cdrom) I/python ( 5088): 1600 I/python ( 5088): 1600 I/python ( 5088): Traceback (most recent call last): I/python ( 5088): File "start.pyx", line 52, in start (jni/../jni/application/src//start.c:1313) I/python ( 5088): File "KaiGames/Maze/main.py", line 55, in <module> I/python ( 5088): error: Couldn't open ../../../pgs4a/KaiGames/Maze/tilesets/grass_water_terrain.png I/ActivityManager( 1465): Process com.kaiyotesof.maze:python (pid 5088) has died.


 In this case, the error was an incorrect reference to the tileset graphic.
   I/python ( 5088): error: Couldn't open ../../../pgs4a/KaiGames/Maze/tilesets/grass_water_terrain.png I/ActivityManager( 1465): Process com.kaiyotesof.maze:python (pid 5088) has died.

The error is caused by a relative reference to a non-existent file.  Although the program works on the desktop, it doesn't work on the phone.  The fix is to place the tileset files in the same directory or sub-directory of your main.py program and create a new map and tileset with tiled.  If you've already created an extensive map, you can also edit the json file with a text editor to have it reference the correct location.

In this example, the file is called grass_water_terrain.png.

In a previous game, my son had a similar problem with the app crashing when it tried to load a font file that was in the wrong location.  Fonts and graphics are the two most common problems.  If you have all your fonts and graphic files in the same directory and your program still doesn't work on Android, but works on your desktop, you may be trying to import a library another directory.  Everything needs to be in the directory where main.py is or in a sub-directory.

If the application works on your desktop and it builds and then loads onto your phone fine, but crashes on start, think through what files the application is trying to load on the Android phone.  Then, work backwards and think through the differences between the phone directory structure and your desktop.  Also, think about the obvious things.  Check that you imported the android library and you've initialized it android.init().

If the problem is not immediately obvious, fire up adb and look for references to python.

Checklist:

• import android library
• initialize android library
• main game file is called, main.py
• graphic files are in the main or sub-directory
• font files are in the main or sub-directory
• custom libraries that you wrote are in the main or sub-directory

Update: March 3, 2014
One of the viewers of my pychildren YouTube channel had a problem with sound.  The important section is to map pygame.mixer and android.mixer to mixer.

try:    
    import pygame.mixer as mixer
except ImportError:    
    import android.mixer as mixer

The other problem with sound is that there may be problems with different types of sound formats.  I suggest you use .wav files.  Since sound is handled differently on Android and the desktop, a few problems occur.

Pygame Subset for Android Sprite Optimization with RenderUpdates

In order to get 2D map games written in python working faster on low-end Android phones, I experimented with optimizations. I purposely selected a complex background image in order to stress the application.

The first set of huge gains came from using the Surface.convert_alpha() method to optimize the images. This was easy and resulted in significant performance gains.

The trickier part was to update only the sections of the screen that had changed since the last cycle.

I decided to use sprites for this since many of the optimization examples I've seen use sprites.  Instead of using pygame.sprite.Group, I used pygame.sprite.RenderUpdates.  This is basically the same as the sprite group, but it as the enhanced ability to track the changed areas of the screen.

The images in the group are drawn to the screen with the standard sprite.Group.draw(SCREEN) method.  The cool little addition is the RenderUpdates.clear(SCREEN, background) method which clears the sprite by blitting a piece of the background over it.  Nice.

The final section is to update the display with a list of the rectangles, pygame.display.update(rectlist).

That's the main things to change.  I experimented with not ticking the pygame.time.Clock under android.   I'm not sure if it makes a difference, but the application appeared to me to run slower on android when I used the clock tick.

This is the first time that I've used this bit of code to pause the android device when the user hits things like the home button on the phone.

if android: if android.check_pause(): android.wait_for_resume()
I was pretty happy that my alpha transparency worked with the sprite group.
def __init__(self): pygame.sprite.Sprite.__init__(self) self.image = pygame.Surface((60, 60)) self.image.fill(GREEN) self.image.set_alpha(70)

I also experimented with different ways to optimize the events. However, I couldn't find anything useful.

Here's the full code.
__author__ = 'craig' import pygame, sys import random class Player(pygame.sprite.Sprite): def __init__(self): pygame.sprite.Sprite.__init__(self) self.image = pygame.image.load("ninja.png").convert_alpha() self.rect = pygame.Rect(226, 100, 32, 32) self.direction = "stop" self.mouse_press = False def update(self): if self.mouse_press: if self.direction == "right" and self.rect.centerx < 480: self.rect.centerx += 8 elif self.direction == "left" and self.rect.centerx > 0: self.rect.centerx -= 8 elif self.direction == "up" and self.rect.centery > 0: self.rect.centery -= 8 elif self.direction == "down" and self.rect.centery < 320: self.rect.centery += 8 class Control(pygame.sprite.Sprite): def __init__(self): pygame.sprite.Sprite.__init__(self) self.image = pygame.Surface((60, 60)) self.image.fill(GREEN) self.image.set_alpha(70) class Girl(pygame.sprite.Sprite): def __init__(self, x): pygame.sprite.Sprite.__init__(self) self.image = pygame.image.load("girl.png").convert_alpha() self.rect = pygame.Rect(x, 5, 32, 32) self.direction = "down" self.speed = random.randrange(1, 3) def update(self): if self.direction == "down": if self.rect.centery < 320: self.rect.centery += self.speed else: self.direction = "up" self.speed = random.randrange(1,3) elif self.direction == "up": if self.rect.centery > 0: self.rect.centery -= self.speed else: self.direction = "down" self.speed = random.randrange(1,3) try: import android except ImportError: android = None pygame.init() if android: android.init() android.map_key(android.KEYCODE_BACK, pygame.K_ESCAPE) SCREEN = pygame.display.set_mode((480, 320)) BLACK = (0, 0, 0) RED = (255, 0, 0) GREEN = (0, 255, 0) DARKGREEN = (0x0b, 0x61, 0x0b) clock = pygame.time.Clock() mouse_pos = (0,0) mouse_press = False control_left_rect = pygame.Rect(300, 170, 60, 60) control_right_rect = pygame.Rect(400, 170, 60, 60) control_up_rect = pygame.Rect(350, 100, 60, 60) control_down_rect = pygame.Rect(350, 240, 60, 60) control_list = [control_left_rect, control_right_rect, control_up_rect, control_down_rect] control_group = pygame.sprite.RenderUpdates() for control_rect in control_list: control = Control() control.rect = control_rect control_group.add(control) player = Player() player_group = pygame.sprite.RenderUpdates() player_group.add(player) girl_group = pygame.sprite.RenderUpdates() for x in range (80, 480, 80): girl = Girl(x) girl_group.add(girl) direction = "stop" background = pygame.image.load("background.png").convert_alpha() SCREEN.blit(background, (0,0)) pygame.display.update() pygame.event.set_allowed([pygame.KEYDOWN, pygame.MOUSEBUTTONDOWN, pygame.MOUSEBUTTONUP, pygame.QUIT, pygame.ACTIVEEVENT]) while True: if android: if android.check_pause(): android.wait_for_resume() for event in pygame.event.get(): #event = pygame.event.poll() if (event.type == pygame.QUIT) or (event.type == pygame.KEYDOWN and event.key == pygame.K_ESCAPE): pygame.quit() sys.exit() elif event.type == pygame.MOUSEBUTTONDOWN: mouse_press = True elif event.type == pygame.MOUSEBUTTONUP: mouse_press = False mouse_pos = pygame.mouse.get_pos() control_group.clear(SCREEN, background) control_rect_list = control_group.draw(SCREEN) # SCREEN.blit(background, (0,0)) if mouse_press and control_left_rect.collidepoint(mouse_pos): pygame.draw.rect(SCREEN, DARKGREEN, control_left_rect) direction = "left" if mouse_press and control_right_rect.collidepoint(mouse_pos): pygame.draw.rect(SCREEN, DARKGREEN, control_right_rect) direction = "right" if mouse_press and control_up_rect.collidepoint(mouse_pos): pygame.draw.rect(SCREEN, DARKGREEN, control_up_rect) direction = "up" if mouse_press and control_down_rect.collidepoint(mouse_pos): pygame.draw.rect(SCREEN, DARKGREEN, control_down_rect) direction = "down" player.mouse_press = mouse_press player.direction = direction player_group.update() player_group.clear(SCREEN, background) rectlist = player_group.draw(SCREEN) girl_group.update() girl_group.clear(SCREEN, background) girl_rectlist = girl_group.draw(SCREEN) rectlist.extend(control_rect_list) rectlist.extend(girl_rectlist) pygame.event.pump() if not android: clock.tick(40) pygame.display.update(rectlist)

Paint Program with Pygame

My fourteen year old son did a nice job with his paint program. This took two or three lessons. He's making rapid progress now. He's quite busy with school and sports and doesn't have enough time to work on his programming. Despite the limited time he spends on programming, his cognitive skills are improving rapidly and he's able to build usable programs in a short amount of time. He was also able to incorporate feedback from his 8 year old sister. She designed the color palette and put a feature request for the stamps. I think she might have preferred flowers to the stamps.
This program uses Pygame and pgs4a.
Stay tuned for his next application, a JSON 2D map loader and maze game. import pygame, sys from pygame.locals import * try: import android except ImportError: android = None windowSurface = pygame.display.set_mode((480, 320)) ## Colors list GREEN = (0, 255, 0) GRAY = (197, 197, 197) BLACK = (0, 0, 0) RED = (255, 0, 0) BLUE = (0, 0, 255) DARK_GRAY = (107, 104, 99) PINK = (249, 57, 255) LIGHT_BLUE = (54, 207, 241) YELLOW = (255, 241, 73) ORANGE = (252, 155, 64) PURPLE = (167, 0, 238) DARK_GREEN = (58, 158, 73) WHITE = (255, 255, 255) BROWN = (85, 46, 46) PRETTY_BLUE = (0, 238, 195) ## fish = pygame.image.load("img/fish.jpg") shark = pygame.image.load("img/shark.jpg") eraser = pygame.image.load("img/eraser.png") fish_button_1 = pygame.transform.scale(fish, (40, 40)) fish_button_2 = pygame.transform.scale(shark, (40, 40)) fish_rect = pygame.Rect(5, 120, 40, 40) shark_rect = pygame.Rect(47, 120, 40, 40) stamp = "Fish" stamp_state = False pygame.init() ## font setup menu_font = pygame.font.Font("font/FreeSans.ttf", 17) menu_text = menu_font.render("Kai Paint", True, BLACK) clear_text = menu_font.render(" Clear", True, BLACK) brush_text = menu_font.render("Brushes", True, BLACK) save_text = menu_font.render(" SAVE", True, BLACK) draw = False brush_size = 5 brush_color = GREEN menu_rect = pygame.Rect(0, 0, 100, 320) screen_rect = pygame.Rect(100, 0, 380, 320) green_rect = pygame.Rect(5, 55, 20, 20) red_rect = pygame.Rect(27, 55, 20, 20) blue_rect = pygame.Rect(49, 55, 20, 20) pink_rect = pygame.Rect(71, 55, 20, 20) light_blue_rect = pygame.Rect(5, 77, 20, 20) yellow_rect = pygame.Rect(27, 77, 20, 20) orange_rect = pygame.Rect(49, 77, 20, 20) purple_rect = pygame.Rect(71, 77, 20, 20) dark_green_rect = pygame.Rect(5, 99, 20, 20) brown_rect = pygame.Rect(27, 99, 20, 20) white_rect = pygame.Rect(49, 99, 20, 20) pretty_blue_rect = pygame.Rect(71, 99, 20, 20) clear_rect = pygame.Rect(10, 290, 70, 25) eraser_rect = pygame.Rect(27, 210, 40, 40) thin_brush = pygame.Rect(5, 185, 20, 20) medium_brush = pygame.Rect(27, 185, 20, 20) thick_brush = pygame.Rect(49, 185, 20, 20) supa_brush = pygame.Rect(71, 185, 20, 20) save_rect = pygame.Rect(5, 260, 90, 25) save_flag = False file_number = 1 if android: android.init() android.map_key(android.KEYCODE_BACK, pygame.K_ESCAPE) while True: for event in pygame.event.get(): if event.type == QUIT: pygame.quit() sys.exit() if event.type == KEYDOWN: if event.key == K_ESCAPE: pygame.quit() sys.exit() if event.type == MOUSEBUTTONDOWN: draw = True if event.type == MOUSEBUTTONUP: draw = False # Drawing dot when mousebuttondown mouse_pos = pygame.mouse.get_pos() if draw == True and mouse_pos[0] > 100 and stamp_state == False: pygame.draw.circle(windowSurface, brush_color, mouse_pos, brush_size) save_flag = False ## Drawing stamp when mousebuttondown mouse_pos = pygame.mouse.get_pos() if draw == True and mouse_pos[0] > 100 and stamp == "Fish" and stamp_state == True: windowSurface.blit(fish_button_1, mouse_pos) draw = False save_flag = False mouse_pos = pygame.mouse.get_pos() if draw == True and mouse_pos[0] > 100 and stamp == "Shark" and stamp_state == True: windowSurface.blit(fish_button_2, mouse_pos) draw = False save_flag = False # collision detection for COLOR if draw == True: if green_rect.collidepoint(mouse_pos): brush_color = GREEN stamp_state = False if red_rect.collidepoint(mouse_pos): brush_color = RED stamp_state = False if blue_rect.collidepoint(mouse_pos): brush_color = BLUE stamp_state = False if pink_rect.collidepoint(mouse_pos): brush_color = PINK stamp_state = False if light_blue_rect.collidepoint(mouse_pos): brush_color = LIGHT_BLUE stamp_state = False if yellow_rect.collidepoint(mouse_pos): brush_color = YELLOW stamp_state = False if orange_rect.collidepoint(mouse_pos): brush_color = ORANGE stamp_state = False if purple_rect.collidepoint(mouse_pos): brush_color = PURPLE stamp_state = False if dark_green_rect.collidepoint(mouse_pos): brush_color = DARK_GREEN stamp_state = False if white_rect.collidepoint(mouse_pos): brush_color = WHITE stamp_state = False if brown_rect.collidepoint(mouse_pos): brush_color = BROWN stamp_state = False if pretty_blue_rect.collidepoint(mouse_pos): brush_color = PRETTY_BLUE stamp_state = False ## collision detection for eraser if draw == True: if eraser_rect.collidepoint(mouse_pos): brush_color = BLACK stamp_state = False ## collision detection for CLEAR if draw == True: if clear_rect.collidepoint(mouse_pos): pygame.draw.rect(windowSurface, BLACK, screen_rect) pygame.draw.rect(windowSurface, GRAY, menu_rect) windowSurface.blit(menu_text, (10, 20)) pygame.draw.line(windowSurface, BLACK, (0, 40), (100, 40)) pygame.draw.line(windowSurface, BLACK, (0, 45), (100, 45)) pygame.draw.rect(windowSurface, DARK_GRAY, clear_rect) windowSurface.blit(clear_text, (10, 290)) ## windowSurface.blit(brush_text, (10, 160)) pygame.draw.line(windowSurface, BLACK, (0, 180), (100, 180)) ## Blit the save rect pygame.draw.rect(windowSurface, DARK_GRAY, save_rect) windowSurface.blit(save_text, (13, 262)) ## Collision detection for SAVE if draw == True and save_flag == False: if save_rect.collidepoint(mouse_pos): print("File has been saved :P") save_surface = pygame.Surface((380, 320)) save_surface.blit(windowSurface, (0, 0), (100, 0, 380, 320)) try: with open("saved_files/PaintImage_" + str(file_number) + ".png"): print("file already exists") file_number = file_number + 1 save_flag = True except IOError: save_flag = True pygame.image.save(save_surface, "saved_files/PaintImage_" + str(file_number) + ".png") ## collision detectin for BRUSH SIZE if draw == True: if thin_brush.collidepoint(mouse_pos): brush_size = 1 if medium_brush.collidepoint(mouse_pos): brush_size = 3 if thick_brush.collidepoint(mouse_pos): brush_size = 5 if supa_brush.collidepoint(mouse_pos): brush_size = 10 ## collision detection for STAMP if draw == True: if fish_rect.collidepoint(mouse_pos): stamp = "Fish" stamp_state = True if shark_rect.collidepoint(mouse_pos): stamp = "Shark" stamp_state = True # rect for brush_color pygame.draw.rect(windowSurface, GREEN, green_rect) if brush_color == GREEN: border = 3 else: border = 1 pygame.draw.rect(windowSurface, BLACK, green_rect, border) pygame.draw.rect(windowSurface, RED, red_rect) if brush_color == RED: border = 3 else: border = 1 pygame.draw.rect(windowSurface, BLACK, red_rect, border) pygame.draw.rect(windowSurface, BLUE, blue_rect) if brush_color == BLUE: border = 3 else: border = 1 pygame.draw.rect(windowSurface, BLACK, blue_rect, border) pygame.draw.rect(windowSurface, PINK, pink_rect) if brush_color == PINK: border = 3 else: border = 1 pygame.draw.rect(windowSurface, BLACK, pink_rect, border) pygame.draw.rect(windowSurface, LIGHT_BLUE, light_blue_rect) if brush_color == LIGHT_BLUE: border = 3 else: border = 1 pygame.draw.rect(windowSurface, BLACK, light_blue_rect, border) pygame.draw.rect(windowSurface, YELLOW, yellow_rect) if brush_color == YELLOW: border = 3 else: border = 1 pygame.draw.rect(windowSurface, BLACK, yellow_rect, border) pygame.draw.rect(windowSurface, ORANGE, orange_rect) if brush_color == ORANGE: border = 3 else: border = 1 pygame.draw.rect(windowSurface, BLACK, orange_rect, border) pygame.draw.rect(windowSurface, ORANGE, orange_rect) if brush_color == ORANGE: border = 3 else: border = 1 pygame.draw.rect(windowSurface, BLACK, orange_rect, border) pygame.draw.rect(windowSurface, DARK_GREEN, dark_green_rect) if brush_color == DARK_GREEN: border = 3 else: border = 1 pygame.draw.rect(windowSurface, BLACK, dark_green_rect, border) pygame.draw.rect(windowSurface, PURPLE, purple_rect) if brush_color == PURPLE: border = 3 else: border = 1 pygame.draw.rect(windowSurface, BLACK, purple_rect, border) pygame.draw.rect(windowSurface, WHITE, white_rect) if brush_color == WHITE: border = 3 else: border = 1 pygame.draw.rect(windowSurface, BLACK, white_rect, border) pygame.draw.rect(windowSurface, BROWN, brown_rect) if brush_color == BROWN: border = 3 else: border = 1 pygame.draw.rect(windowSurface, BLACK, brown_rect, border) pygame.draw.rect(windowSurface, PRETTY_BLUE, pretty_blue_rect) if brush_color == PRETTY_BLUE: border = 3 else: border = 1 pygame.draw.rect(windowSurface, BLACK, pretty_blue_rect, border) #### RECT FOR ERASER windowSurface.blit(eraser, eraser_rect) if brush_color == BLACK: border = 3 else: border = 1 pygame.draw.rect(windowSurface, BLACK, eraser_rect, border) # Rect for brush size if brush_size == 1: brush_border = 3 else: brush_border = 1 pygame.draw.rect(windowSurface, BLACK, thin_brush, brush_border) pygame.draw.circle(windowSurface, BLACK, thin_brush.center, 1) pygame.draw.rect(windowSurface, BLACK, thin_brush, brush_border) if brush_size == 3: brush_border = 3 else: brush_border = 1 pygame.draw.rect(windowSurface, BLACK, medium_brush, brush_border) pygame.draw.circle(windowSurface, BLACK, medium_brush.center, 3) pygame.draw.rect(windowSurface, BLACK, medium_brush, brush_border) if brush_size == 5: brush_border = 3 else: brush_border = 1 pygame.draw.rect(windowSurface, BLACK, thick_brush, 1) pygame.draw.circle(windowSurface, BLACK, thick_brush.center, 5) pygame.draw.rect(windowSurface, BLACK, thick_brush, brush_border) if brush_size == 10: brush_border = 3 else: brush_border = 1 pygame.draw.rect(windowSurface, BLACK, supa_brush, brush_border) pygame.draw.circle(windowSurface, BLACK, supa_brush.center, 10) pygame.draw.rect(windowSurface, BLACK, supa_brush, brush_border) ## Blitting the stamp if stamp == "Fish": stamp_border = 3 else: stamp_border = 1 windowSurface.blit(fish_button_1, (5, 120)) pygame.draw.rect(windowSurface, BLACK, fish_rect, stamp_border) if stamp == "Shark": stamp_border = 3 else: stamp_border = 1 windowSurface.blit(fish_button_2, (47, 120)) pygame.draw.rect(windowSurface, BLACK, shark_rect, stamp_border) pygame.display.update()

Kivy, nvidia drivers and Linux Ubuntu 12.04

I sometimes wonder if I'm getting too old to fiddle around with Linux as my main desktop at home.   I'm no longer reading mailing lists or forums and my friends have all moved to Mac OS X.

Today was one of those days.  I fired up Kivy and PyCharm this morning, hoping to punch out a quick touch-paint example for my son's lesson.   Unfortunately, Kivy had stopped working, spitting forth odd complaints about [WinPygame] Video: failed.

After I figured out that the error was related to the nvidia 3D driver, I decided to rollback the video driver version from nvidia-325 to nvidia-current 304.  When I rebooted my system, I could no longer get into X, leaving me with a text console and odd errors complaining that the kernel module was still trying to load the nvidia-325 module.

At this point, I'm thinking that the coffee isn't kicking in, I'm getting too old, and that I don't really want to be messing around with kernel modules.  sigh.   I just wanted to write a python script.

After an hour of messing around with kernel modules and X configurations, I decided to simply add the xorg-edgers 3rd party repository into my apt repository list and use apt-get to install nvidia-325.
sudo add-apt-repository ppa:xorg-edgers/ppa sudo apt-get update sudo apt-get install nvidia-325

I reboot and kivy starts working again.

I am not sure what started the problem.  When kivy stopped working, Pygame was still working.  I suspect that the nvidia driver or some graphics library got automatically updated, causing some graphics problems with kivy.

I notice that the newest version of the nvidia driver is 331.  I don't think I'll upgrade it right now.

To revert to official packages, install the ppa-purge package and run "sudo pp-purge xorg-edgers"

Driver for Ubuntu 14.04 Trusty Tahr is nvidia-340.

Update September 12, 2014
I used this great blog post on installing the latest Nvidia drivers on Ubuntu 14.04 Trusty Tahr.

Top Six Platforms For Children to Learn Programming

1. Codeacademy
2. Khan Academy
3. Scratch
4. CodeHS
5. Tynker
6. Blockly

This list is from an interview of Ali Partovi of Code.org from the Engadget Show.

Tiled JSON Map Loader Example Code Available

Someone asked me for the source code for the JSON map loader example I created for a video tutorial on using Tiled to export 2d tile maps as JSON map files. Although .tmx is a more popular format, Pygame Subset for Android does not support the xml parser libraries.  Because of this, we can't use the TMX Loader library available on the Pygame site.  Pytmxloader also will not work.  This is unfortunate since the pytmxloader is especially nice.  Although these libraries will work on the desktop.  They will not work on the Android phone.  :-(

At some point, I was planning to write a library for JSON map file loading.  However, I never got around to it.  The code below will work on desktop and mobile phones.  It is for educational purposes only.

JSON Map Loader Lesson Code that works with Tiled maps.

import json, pygame, sys try: import android except ImportError: android = None class Tile(pygame.sprite.Sprite): def __init__(self, image): pygame.sprite.Sprite.__init__(self) self.image = image self.rect = self.image.get_rect() self.speed = 2 self.currentx = -100 self.currenty = -100 def update(self, direction, mapborder): borderx = mapborder[0] bordery = mapborder[1] if direction == "right" and self.currentx > borderx: self.rect.left -= self.speed self.currentx -= self.speed elif direction == "left" and self.currentx < 0: self.rect.right += self.speed self.currentx += self.speed elif direction == "up" and self.currenty < 0: self.rect.top += self.speed self.currenty += self.speed elif direction == "down" and self.currenty > bordery: self.rect.bottom -= self.speed self.currenty -= self.speed class Player(pygame.sprite.Sprite): def __init__(self, image, center): pygame.sprite.Sprite.__init__(self) self.image = pygame.image.load(image) self.rect = self.image.get_rect() self.rect.center = center def event_handler(event_list, direction): for event in event_list: if event.type == pygame.KEYDOWN: if event.key == pygame.K_RIGHT: direction = "right" elif event.key == pygame.K_LEFT: direction = "left" elif event.key == pygame.K_UP: direction = "up" elif event.key == pygame.K_DOWN: direction = "down" elif event.key == pygame.K_SPACE: direction = "stop" elif event.key == pygame.K_ESCAPE: pygame.quit() sys.exit() elif event.type == pygame.MOUSEBUTTONDOWN: mouse_pos = pygame.mouse.get_pos() mousex = mouse_pos[0] mousey = mouse_pos[1] if mousex > 380: direction = "right" elif mousex < 100: direction = "left" elif mousey < 100: direction = "up" elif mousey > 220: direction = "down" return(direction) pygame.init() if android: android.init() android.map_key(android.KEYCODE_BACK, pygame.K_ESCAPE) FPS = 50 clock = pygame.time.Clock() SCREENWIDTH = 480 SCREENHEIGHT = 320 SCREENSIZE = ((SCREENWIDTH, SCREENHEIGHT)) screen = pygame.display.set_mode((SCREENSIZE)) pygame.display.set_caption("Pygame 2D tile game example") mapfile = open("map4.json").read() mapdict = json.loads(mapfile) tilesets = mapdict["tilesets"] layers = mapdict["layers"] height = mapdict["height"] width = mapdict["width"] all_tiles_from_sets = [] for tileset in tilesets: tileset_image = pygame.image.load(tileset["image"]) imageheight = tileset["imageheight"] imagewidth = tileset["imagewidth"] tilewidth = tileset["tilewidth"] tileheight = tileset["tileheight"] for y in range(0, imageheight, tileheight): for x in range (0, imagewidth, tilewidth): tile = pygame.Surface((tilewidth, tileheight)) tile.blit(tileset_image, (0,0), (x, y, tilewidth, tileheight)) all_tiles_from_sets.append(tile) all_layers = [] initial_map_pos = (-100, -100) collision_layers = [] for layer in layers: data = layer["data"] layerheight = layer["height"] layerwidth = layer["width"] current_layer = pygame.sprite.Group() properties = layer["properties"] try: collision = properties["collision"] except KeyError: collision = 0 collision_layers.append(collision) data_pos = 0 for y in range (0, layerheight): for x in range (0, layerwidth): gid = data[data_pos] if gid > 0: tile = Tile(all_tiles_from_sets[gid - 1]) tilex = (x * tilewidth) + initial_map_pos[0] tiley = y * tileheight + initial_map_pos[1] tile.rect.topleft = (tilex, tiley) tile.image.set_colorkey((0,0,0)) current_layer.add(tile) data_pos += 1 all_layers.append(current_layer) direction = "stop" screen_center = screen.get_rect().center player = Player("boy.png", screen_center) collide = False prev_direction = "stop" layer_width = layers[0]["width"] * tilesets[0]["tilewidth"] layer_height = layers[0]["height"] * tilesets[0]["tileheight"] layersize = (layer_width, layer_height) mapborderx = SCREENSIZE[0] - layer_width mapbordery = SCREENSIZE[1] - layer_height mapborder = (mapborderx, mapbordery) while True: event_list = pygame.event.get() for event in event_list: if event.type == pygame.QUIT: pygame.quit() sys.exit() direction = event_handler(event_list, direction) if prev_direction == direction and collide: direction = "stop" else: collide = False screen.fill((0,0,0)) layer_pos = 0 for layer in all_layers: layer.update(direction, mapborder) layer.draw(screen) if int(collision_layers[layer_pos]) == 1: if pygame.sprite.spritecollideany(player, current_layer): if direction != "stop": prev_direction = direction direction = "stop" collide = True layer_pos += 1 screen.blit(player.image, player.rect) clock.tick(FPS) pygame.display.update()

Installing Pygame Subset for Android

I noticed that a new version of pgs4a came out.  I upgraded from 0.9.4 to 0.9.6 this morning.  The process went smoothly on my Ubuntu 12.04 LTS system.  I was up and running in 10 minutes and my programs ran with no problems.

Since the installation on Linux normally goes fine, I suspect that many of the problems people have with pgs4a is not due to the installation, but due to usage.

Here are three common problems I've heard about:

1) You're not specifying the directory of your application.  Many people will configure and build the name of the python file.  This is wrong.  You need to specify the name of the directory.

craig@ubuntu-desktop:~/Documents/python/android_development/pgs4a$ ./android.py build ../../pgs4a/dad/runner/ release

The location specified after build is the name of the directory, not the file.

2) You didn't name your main python file main.py.   You may have called the file something like runner.py or angryfish.py.  This is wrong.  The file needs to be called main.py.

3) You didn't initialize the android library in  your python code.

try: import android except ImportError: android = None pygame.init() if android: android.init() android.map_key(android.KEYCODE_BACK, pygame.K_ESCAPE)
Then, there are cases where everything should be working, but it's not. Assuming that you installed the android sdk with the command. $ ./android.py installsdk

 then your adb tool will be in android-sdk/platform-tools.

The most useful command will be ./adb help followed by ./adb logcat.   With your phone connected to your computer with a USB cable, running ./adb logcat will give you the logs from your phone.  By reading through the logs, you should be able to get some clues as to why your program is failing.

Match Game Lesson, Lists and Dictionaries

New lesson on a match game with lists and dictionaries.

The code for this lesson is available on bit bucket here.

Lesson 6 - Putting it all together - Python tile game on Android

Middle school student teaches a lesson on getting a character to walk around a map.  The map was created with Tiled.  It is a single image saved in png format.  The character can now move in all four directions.

Lesson 5 - Going Mobile - Python on Android

Part one covers Python code modification.  Part two covers Android phone settings and configuration of Pygame Subset for Android.

Part 1

Technical points of part 1:

• import android library and handle exceptions
• map keyboard ESC key to Android back key (hard button) on phone
• quit game if phone back key is pressed

Part 2

Technical points of part 2:

• Set Android phone to debug mode
• Configure game build with pgs4a
• Build, package, install
• Test game

Lesson #4: Mouse and Touchscreen Control (taught by middle school student)

Middle school student, age 13, teaches you how to get mouse control working on the moving square.

• Goes through event queue to check for the mouse button. event.type == MOUSEBUTTONDOWN:
• Checks for point collision with a rectangle: collidepoint(mouse_pos)

import pygame, sys ## Statement that allows users to acess pygame specific commands from pygame.locals import * pygame.init() FPS = 30 clock = pygame.time.Clock() size = (480, 320) screen = pygame.display.set_mode(size) # define color using Red, Green, Blue values # 0 is blank # 255 is maximum RED = (255, 0, 0) # all red. no other color BLACK = (0, 0, 0) ## set colors for the up/down rectangle GREEN = (0, 255, 0) BLUE = (0, 0, 255) # left edge of rectangle, top, width height player_rect = pygame.Rect(0, 0, 64, 64) ## Create rectangles that will detect direction up_rect = pygame.Rect(300, 100, 50, 50) down_rect = pygame.Rect(300, 180, 50, 50) direction = "down" while True: for event in pygame.event.get(): if event.type == pygame.QUIT: pygame.quit() sys.exit() ## Check to see if the mousebutton is pressed if event.type == MOUSEBUTTONDOWN: mouse_pos = pygame.mouse.get_pos() ## Check if the mouse_pos is within the rectangle if up_rect.collidepoint(mouse_pos): direction = "up" if down_rect.collidepoint(mouse_pos): direction = "down" screen.fill(BLACK) pygame.draw.rect(screen, RED, player_rect) ## draw the rectangles that will detect direction pygame.draw.rect(screen, GREEN, up_rect) pygame.draw.rect(screen, BLUE, down_rect) if direction == "down": player_rect.centery += 5 elif direction == "up": player_rect.centery -= 5 if player_rect.bottom > size[1]: direction = "up" if player_rect.top < 0: direction = "down" clock.tick(FPS) pygame.display.update()

Lesson #3 - The Moving Square

Lesson number three teaches movement in the Y axis.

The main concepts:

• Add 1 to the y axis to move down;
• Subtract 1 to the y axis to move up;
• Bounds checking to detect when the square reaches the edge of the screen;
• Conditional to change direction;
• Clock to set the maximum Frames Per Second (FPS) that the game runs at

import pygame, sys pygame.init() FPS = 30 clock = pygame.time.Clock() size = (480, 320) screen = pygame.display.set_mode(size) # define color using Red, Green, Blue values # 0 is blank # 255 is maximum RED = (255, 0, 0) # all red. no other color BLACK = (0, 0, 0) # left edge of rectangle, top, width height player_rect = pygame.Rect(0, 0, 64, 64) direction = "down" while True: for event in pygame.event.get(): if event.type == pygame.QUIT: pygame.quit() sys.exit() screen.fill(BLACK) pygame.draw.rect(screen, RED, player_rect) if direction == "down": player_rect.centery += 1 elif direction == "up": player_rect.centery -= 1 if player_rect.bottom > size[1]: direction = "up" if player_rect.top < 0: direction = "down" clock.tick(FPS) pygame.display.update()

Lesson #2 - The Stationary Square

This lesson focuses on drawing a stationary red square.  

Main concepts:

• Colors are set by a three number tuple (red, green, blue).  Each value ranges from 0 to 255
• Each point on the phone screen has two numbers associated with it, the x and the y coordinate.  A single point is a pixel.  The phone screen is 480 pixels wide and 320 pixels high.
• The rectangle is initially set by the upper left corner.  The example uses (0, 0).
• The width and height of the rectangle are measured in pixels, 64 pixels wide and 64 pixels tall.

Bonus concepts:

• Graphics such as a cartoon girl are loaded with image.load("filename");
• The graphic is displayed on the phone screen with blit;
• The position of the graphic on the screen is established with a rectangle.

import pygame, sys pygame.init() size = (480, 320) screen = pygame.display.set_mode(size) # define color using Red, Green, Blue values # 0 is blank # 255 is maximum RED = (255, 0, 0) # all red. no other color # left edge of rectangle, top, width height player_rect = pygame.Rect(0, 0, 64, 64) # player = pygame.image.load("girl.png") while True: for event in pygame.event.get(): if event.type == pygame.QUIT: pygame.quit() sys.exit() pygame.draw.rect(screen, RED, player_rect) # screen.blit(player, player_rect) pygame.display.update()

Lesson #1 - The Blank Screen

This is the first lesson in the Python and Pygame series.   It teaches the blank screen.   It is the basic foundation of all games.  This requires Python, Pygame, and a text editor.

This lesson was designed for middle school students.

Main concepts:

1. Load and initialize the Pygame library;
2. Set the size of the main screen;
3. Create an infinite loop that runs the game until the player quits the game;
4. Process the event queue;
5. Handle the QUIT event;
6. Update the screen.

  import pygame, sys pygame.init() size = (480, 320) screen = pygame.display.set_mode(size) while True: for event in pygame.event.get(): if event.type == pygame.QUIT: pygame.quit() sys.exit() pygame.display.update()

Teen to Teen: 2d Scroller Mobile Game Tutorial - Pavement

My teenage son produced a video to teach other teenagers to program.  This tutorial focuses on a moving pavement scene that scrolls from the right side of the screen to the left.  The complete code to the video is shown below.

Other videos that I made cover topics such as character animation to go with the moving pavement.

• Pygame Animation Tutorial
• 2D Side Scroller with Pygame and blit

Posts on installing Pygame:

• Pygame Subset For Android
• Porting Pygame Apps to Android
• Getting Android adb working with Pipo Smart S1 (probably works with other Rockwell RK3066 tablets

import pygame, sys from pygame.locals import * pygame.init() windowSurface = pygame.display.set_mode((480, 320), 0, 32) clock = pygame.time.Clock() FPS = 10 tile = pygame.image.load("img/pavement.png") pavement = [] for x in range(0, 512, 32): ground = pygame.Rect(x, 288, 32, 32) pavement.append(ground) while True: for event in pygame.event.get(): if event.type == QUIT: pygame.quit() sys.exit() if pavement[0].right <= 0: pavement = pavement[1:] pavement.append(pygame.Rect(480, 288, 32, 32)) for ground in pavement: windowSurface.blit(tile, ground) ground.left = ground.left - 8 clock.tick(FPS) pygame.display.update()

2D Tile Game Map - Building the JSON Map File

I created a video of a very simple 2D tilemap game running on the desktop and an Android phone.  The video focuses on creating a json map file.  The video will take you through step four of the process listed below:

1. Assemble tilesets which are pictures of grass, trees, water, rocks, bushes, houses and other graphics in the game;
2. Assemble other sprites for graphics such as the character running around the screen;
3. Create map data file using the Tiled map editor;
4. Export the file to JSON format;
5. Create a map loader in python;
6. Use pygame to display graphics and handle player interaction;
7. Use Pygame Subset for Android to package the Python application in Android Package format

I didn't cover how to write the map loader in this video since that video may take a long time.  The loader itself is less than a 100 lines of code.  The data structures are a bit more complex since Python loads the json file into the Python program as a nested dictionary structure.

Update Dec 2013:  Check out the code for an improved json_loader on github.

Sample game running with 2d map showing collision tiles shaded red.  Code and graphic files available on github

2nd layer of collision tiles separated out of the 3 layer map by test scripts in the game example.  Sample map included in the github package, available at the link above. 

Update December 13, 2013
Wrote a new blog post on using json_loader with examples of different types of games.

Pygame Animation Tutorial Video

Here's a short howto video that starts off with a completely blank screen and takes you to a working animation.

I suggest you watch the video is full screen mode to see the text properly.

2D Side Scroller with Pygame and blit

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.



Surface.blit(source, dest, area=None, special_flags = 0): return Rect

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.


def scroll(x, direction): if direction == "left": x = x - 1 elif direction == "right": x = x + 1 return (x) ------------------------------ ## next section is inside of main loop x = scroll(x, direction) backsurf.blit(background, (0,0), (x, 0, 480, 320)) screen.blit(backsurf, (0,0))

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.

Full source code is available on GitHub.

2D Android Tile Game "Swarm" is Finished

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.

Pygame Performance on Android Phones

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.