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.