Pygame Virtual Controller Update

I worked with my son for about 2 hours today on the Pygame virtual controller for Android.   The main challenge with the controller is the use of sine, cosine, and tangent.  Although we all learn trigonometry in school, how often do you use it?  Outside of making games, I never use it.

Another challenge is getting comfortable with sprites and sprite groups for the bullets.  Since the bullets are simple, we could easily make the game without sprites.  It's possible to use rectangles stored in lists.  Sprites have a number of advantages over rectangles.  I like to use sprites because its a concise way to organize all the bullets into a single sprite group and then use bullet_group.update() and bullet_group.draw() to manage all the bullets on the screen.

The first time you type in a sprite class, it looks a bit odd.  I think the oddness of the line pygame.sprite.Sprite.__init__(self) makes the sprite more intimidating than it really is.

class Bullet(pygame.sprite.Sprite):
    def __init__(self):
        pygame.sprite.Sprite.__init__(self)
        self.image = pygame.Surface((6,6))
        self.rect = self.image.get_rect()

After getting the bullets to fire properly with sprite groups, the next challenge was to get the player to move around the screen with a secondary virtual controller.  Although we built the code to calculate the angle of the controller for firing in the previous lesson, the player wasn't moving.  Once the player starts moving, the angle needs to be calculated from the center point of the player.  The modification to the code is minimal, but the conceptual leap of thinking of the opposite, adjacent and hypotenuse sides can be daunting when the triangle is moving all around the screen.  

Once you get the angle and the center, the code to move the player is straightforward.

def move(angle, center):
    hypotenuse = 10.0
    adjacent = math.cos(angle) * hypotenuse
    x = int(adjacent + center[0])
    opposite = math.sin(angle) * hypotenuse
    y = int(center[1] - opposite)
    return ((x, y))

At the end of the lesson, he had a working app with 360 degree firing and movement.

The next step is to get this working on his accelerometer game.  We're bumping up into the limitations of single-point touch and are trying to use the accelerometer for movement.  It's easy to access the Android accelerometer, but it's uncertain how playable the game will be.  We're using Cube Runner as a model for playability.

Virtual Controller Angle Tutorial

This is part of an educational curriculum to teach 9th and 10th grade students how to build mobile games on Android. The student needs to be familiar with trigonometry. The primary target student is in 10th grade.

The code is on GitHub.

There are two examples. The main lesson is in main.py and focuses on the getting the angle from the virtual controller. The second lesson is in bullet.py and shows how to fire bullets from a moving player. There is sound generated each time a bullet is fired.

Here's a video snippet showing the 360 degree movement and independent firing.

Additional sounds can be downloaded from SoundBible.

Since the player is moving, I also implemented a rudimentary bounds detection so that the player doesn't move off the screen.

Create the Controller

In this lesson, the controller is a circle of radius 50. The main objective is to calculate the angle of the player's right thumb in relation to the center of the circle. Since we're running this on a desktop computer before loading it onto an Android phone, the mouse will represent the point the thumb touches the screen.

 pygame.draw.circle(SCREEN, RED, v_control.center, 50, 2)
 pygame.draw.circle(SCREEN, RED, v_control.center, 3)

There is a rectangle called, v_control that I'm using with colliderect.

 v_control = pygame.Rect(650, 450, 100, 100)

Before I calculate the angle, I make sure that the thumb is inside of the rectangle for the virtual controller.

if v_control.collidepoint(pos):
    rad = get_angle(pos, v_control.center)

Review Your Trigonometry

You'll need to use arc tangent to calculate the angle in radians. You'll also need to use sine and cosine. If your trigonometry is a rusty, review it now.

math.atan, math.sin, and math.cos are in the python math standard library. You'll need to addimport math at the top of your program.

To use arc tangent you'll need to calculate the lengths of the opposite and adjacent sides of a right triangle. Since the formulas to calculate the lengths of the sides of a triangle are slightly different depending on where the thumb is on the controller, I've divided the controller into four quadrants, starting with quadrant one in the upper right and rotating counter-clockwise.

For each quadrant, you'll need to adjust the formula to calculate the opposite and adjacent sides of the triangle. For example, if the mouse is above the center of the controller, you'll need to subtract the mouse y position from the centery of the controller.

Define Each Quadrant

For the y-axis, the mouse point is either:

1. above the center of the controller
2. below the center of the controller
3. at the same height of the center of the controller

Quandrants 1 and 2

Mouse Point Located Above Controller Center

If the mouse point is above the center of the controller, than check for one of three conditions:

1. x is to the right of the controller
2. x is to the left of the controller
3. x is at the same point as the centerx of the controller

Quadrant 1

Mouse point is located above and to the right of controller

Example code. Note that you need to convert to floating point.
center is a two number tuple (400,300), the center of the player. x, y is the mouse position.

    opposite = float(center[1] - y)
    if x > center[0]:
        adjacent = float(x - center[0])
        rad = math.atan(opposite/adjacent)

Here's what it looks like with the game running. Note that the angle of the mouse pointer relative to the center of the virtual controller is the same as the angle of the beam relative to the center of the player.

---

---

Quadrant 3

Mouse point is below and to the left of the controller center

If the mouse pointer is not in quadrant 1, add the appropriate radian value. For example, if the mouse pointer is in quadrant 3, then add pi (3.14) to the radian value.

Using Radian Angle to Control Beam

Creating a beam is easier than a bullet. It is a line with the starting point at the center of the player and the end point 30 pixels out from the center.  In the next lesson, the beam becomes the gun turret.  I increased the width of the line to 6 pixels.  The end point of the gun turret will become the starting point of the bullet.  

Once you have the angle, use sine and cosine to calculate the length of opposite and adjacent sides of the triangle.

def beam(angle, center):
    """
    :param angle: radians calculated from the virtual controller
    :return: x,y coordinates of the end-point
    Start with the center of the player.  The end of the beam is 100 pixels
    away from the center.  To make a bullet instead of beam, create a class
    for bullet and have the hypoteneuse be an attribute that increases
    in size.  Remember to delete the bullet from the sprite group or list
    when it goes off the screen.
    """
    hypoteneuse = 30.0
    adjacent = math.cos(angle) * hypoteneuse
    x = adjacent + center[0]
    opposite = math.sin(angle) * hypoteneuse
    y = center[1] - opposite
    beam_end = (x, y)
    return beam_end

Shoot Bullets Instead of a Beam

If you want to shoot bullets, I'm using sprites. Don't be intimidated by sprites even though the code looks a bit funky. The bullet moves forward by increasing the length of the hypotenuse by 5 pixels.

class Bullet(pygame.sprite.Sprite):
    def __init__(self, angle, p_pos):
        YELLOW = (250, 223, 65)
        RED = (200, 10, 10)
        pygame.sprite.Sprite.__init__(self)
        self.image = pygame.Surface((6,6))
        pygame.draw.circle(self.image, YELLOW, (3, 3), 3)
        pygame.draw.circle(self.image, RED, (3,3), 1)
        self.rect = self.image.get_rect()
        self.hypotenuse = 30.0
        self.angle = angle
        self.cent = p_pos

    def update(self):
        adjacent = math.cos(self.angle) * self.hypotenuse
        x = adjacent + self.cent[0]
        opposite = math.sin(self.angle) * self.hypotenuse
        y = self.cent[1] - opposite
        self.rect.center = (x, y)
        self.hypotenuse += 5

You'll need to set up a timer for the creation of new bullets so that the bullets don't clump together in a mass of destruction every time you press the fire button.  See the code in bullet.py for an example in how to create the delay between bullet creation.

Move The Player

In the second example, I'm using almost the same code to move the player around the screen.
Move on to the second lesson on virtual controller angle tutorial.

More games with Python, Pygame, and pgs4a written by a boy in middle school and high school are available for reference to see what a typical child is doing.  It's important to understand that the examples don't show the best way to do things.  They just show a way that a child is getting stuff done. One of the problems I've found with most tutorials is that the examples are best-practice perfect for adults.  I have a theory that children also learn by thinking about how to improve on another child's code.  Additional examples are available

The most likely scenario is to start with Swarm and build from there.

My son is planning to try something with the Android accelerometer.

Shooter With Joystick

Since it's Labor Day weekend, I had some time to work with my son on game concepts.  I went back to the lesson on pygame.joystick, that my son worked on last year.  So far, we put about two hours into the lesson.  It's a fun, easy and rewarding lesson that uses simple math.  It's also short enough so that we didn't use functions or classes.

The background is a simple static image that doesn't move. The gun sight is also a single image with transparent background enabled. My student didn't develop any targets yet because he went out to a Labor Day BBQ.

Here's the code:

import pygame, sys from pygame.locals import * GREEN = (0, 255, 0) BLACK = (0, 0, 0) WHITE = (255, 255, 255) pygame.init() windowSurface = pygame.display.set_mode((800, 600), 0, 32) ### Tells the number of joysticks/error detection joystick_count = pygame.joystick.get_count() print ("There is ", joystick_count, "joystick/s") if joystick_count == 0: print ("Error, I did not find any joysticks") else: my_joystick = pygame.joystick.Joystick(0) my_joystick.init() crosshairs = pygame.image.load("crosshairs.png") background = pygame.image.load("shooter/image_library/background.jpg") x = 300 y = 300 ### Creates rectangle Rectangle = pygame.Rect( x, y, 100, 100) Back = pygame.Rect(0, 0, 800, 600) while True: for event in pygame.event.get(): if event.type == QUIT: pygame.quit() sys.exit() h_axis_pos = my_joystick.get_axis(0) v_axis_pos = my_joystick.get_axis(1) print (h_axis_pos, v_axis_pos) if x < 0: x = 1 elif x > 700: x = 700 else: x = int(x + h_axis_pos * 5) if y < 0: y = 0 elif y > 500: y = 500 else: y = int(y + v_axis_pos * 5) print ("rectangle left, top", x, y) Rectangle.left = x Rectangle.top = y ###windowSurface.fill(WHITE) windowSurface.blit(background, Back) windowSurface.blit(crosshairs, Rectangle) pygame.display.update()

Get a Gamepad Working with pygame.joystick

Since my 7th grade son loves to play Call of Duty 2 on the XBox 360, I've been thinking of incorporating the gamepad input device into his lessons.   

While I was going through the Panda3D manual, I found this reference to the Pygame joystick module.

"While Panda3D has mouse and keyboard support, it is best to look to the open source community for joystick support. Pygame is an open-source module that contains joystick support that may be easily included into a Panda3D application. Pygame may be found at http://www.pygame.org."

Since the Panda3D developers suggested that their community use the Pygame joystick module,I felt more confident that learning more about this module would be time well spent.  I already had a Logitech Rumblepad USB gamepad which I purchased a few years ago for my son to play Halo 2 on Windows Vista.  

I found a short tutorial here on the use of pygame.joystick.  

Using the tutorial as a reference, I created a lesson based on a screenshot of Call of Duty 2 as a background image in my Pygame window and a crosshair target that moves around the screen with the left thumbpad.  

Here's some example code.

  import pygame, sys from pygame.locals import * GREEN = (0, 255, 0) BLACK = (0, 0, 0) WHITE = (255, 255, 255) pygame.init() windowSurface = pygame.display.set_mode((800, 600), 0, 32) ### Tells the number of joysticks/error detection joystick_count = pygame.joystick.get_count() print ("There is ", joystick_count, "joystick/s") if joystick_count == 0: print ("Error, I did not find any joysticks") else: my_joystick = pygame.joystick.Joystick(0) my_joystick.init() crosshairs = pygame.image.load("crosshairs.png") background = pygame.image.load("shooter/image_library/background.jpg") x = 300 y = 300 ### Creates rectangle Rectangle = pygame.Rect( x, y, 100, 100) Back = pygame.Rect(0, 0, 800, 600) while True: for event in pygame.event.get(): if event.type == QUIT: pygame.quit() sys.exit() h_axis_pos = my_joystick.get_axis(0) v_axis_pos = my_joystick.get_axis(1) print (h_axis_pos, v_axis_pos) if x < 0: x = 1 elif x > 700: x = 700 else: x = int(x + h_axis_pos * 5) if y < 0: y = 0 elif y > 500: y = 500 else: y = int(y + v_axis_pos * 5) print ("rectangle left, top", x, y) Rectangle.left = x Rectangle.top = y ###windowSurface.fill(WHITE) windowSurface.blit(background, Back) windowSurface.blit(crosshairs, Rectangle) pygame.display.update()

Here's a video of a python / pygame shooter game working with a Rumblepad.  The game author is 13 years old.