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()