(Lab 2) Intro to Python/PyGame

Getting logged in and started

1. Log in with the account username and password supplied by the instructor
2.Open a web browser, use either the toolbar icon or the drop-down menu (Applications->Internet->Chromium), then go to today's lab (URL http://csci.viu.ca/~wesselsd and follow the link to the Games Workshop)
3. Open a terminal window (so you can enter linux commands) using either the toolbar terminal icon or the drop down menu (Applications->Systems Tools->Mate Terminal)
4. Open the gedit text editor (which we'll use to create our python program) using either the toolbar icon or going to the open (black) terminal window and typing the following command and pressing enter. gedit game.py & (The & at the end of the command will allow you to continue working in your command window and the editor at the same time.) This should pop open a new editor window - from this point on we'll write our python code in the gedit window, and can keep typing linux commands in the MateTerminal window.

We should now have these windows open...

The editor window (for python code)	The terminal window (for linux commands)

Basic Python/PyGame:

1. In the (white) editor window: The basic structure of our python programs is to start (on the very top line) by identifying the interpretter python must use.

   Type the following as the first two lines of our python code:
   #! /usr/bin/python
   print "Game console initialized"

   Now click Save (top of the screen) to save our python code.

2. In the (black) terminal window: enter the following command to make the new game.py file executable (so we can run our game):
   chmod u+x game.py

   Now, in the same window, try running the program using the command
   ./game.py

   (It should display "Game console initialized" in the command window.)

3. Back in the (white) editor window: Now we'll add the code needed to open the actual game display using pygame. We're going to add a number of new lines of code below our first two lines.

   This takes several steps:

   • We have to import the pygame module (with all it's prebuilt code) so we can use it in game.py. Add the following to our python file (in the white editor window):
     import pygame

   • We have to initialize pygame (it internally sets up some information, though nothing happens visibly). Add the following code:
     pygame.init()

   • We have to set the size of the game display window, so add the following code:
     screenSize = width,height = 240,180
     display = pygame.display.set_mode(screenSize)

     (Note that the height and width are the number of pixels high/wide for the display.)

   • Your program should now look something like this:

     #! /usr/bin/python print "Game console initialized" import pygame pygame.init() screenSize = width,height = 240,180 display = pygame.display.set_mode(screenSize)

     Remember to click save after making your changes.

   • In the (black) terminal window: Try running the program again, i.e.
     ./game.py

     You should briefly see your game display pop up on the screen, and in your command window you will see "Game console initialized"

4. This might be a good point to add some comments to the code, as well as some blank lines to make it more readable.

   Comments are essentially programmer notes - they don't change the way the code behaves, they are just explanations of what the programmer was thinking when they developed the code.

   In Python, anything to the right of the # symbol is treated as a comment, and essentially ignored by the Python interpretter.

   Here's a rewrite of the program so far, but with some comments and whitespace:

   #! /usr/bin/python # display an initial message in the command window print "Game console initialized" # include (import) any required modules import pygame # initialize pygame pygame.init() # set an initial size for the game display, # and open the display screenSize = width,height = 240,180 display = pygame.display.set_mode(screenSize)

5. The display isn't terribly interesting so far.

   Let's at least add an instruction to keep the display open until the player clicks the

   x

   to close the window.

   Add the following code to your program, using tabs to indent the code (Python is picky about that):

   # this keeps cycling through the "while loop"
   #   until the player has clicked the close box
   keepPlaying = True
   while keepPlaying:
      # check for any events that need to be processed,
      #    e.g. the player clicking the close box
      for event in pygame.event.get():
         if event.type == pygame.QUIT:
            keepPlaying = False
      # pause for 100 milliseconds (one-tenth of a second)
      # before going on to repeat the cycle again
      pygame.time.delay(100)
          

6. Try running the game again (./game.py)

   It should open a black game window, which should remain open until you click the X in the upper right corner of the window.
   

7. It still isn't too terribly interesting, so let's at least add an image to the display.

   • In the same directory as your game.py file, there is a small star image, in file star.gif .

   • Now we need to modify the program so that it loads the image and updates it in the display.

     Add the following code just above the while loop:

     # load an image and keep track of the rectangular
     # section of the display it gets placed in
     starImage = pygame.image.load("star.gif")
     starBox = starImage.get_rect()
     	     

     Next, add the following code inside the while loop, just above the pygame.time.delay

        # define the colour black (RGB values)
        black = 0,0,0
        # fill the screen buffer with black
        display.fill(black)
        # update the buffer to include the image of the star
        display.blit(starImage, starBox)
        # redraw the screen from the buffer
        pygame.display.flip()
     	     

     The whole program should now look something like this:

     #! /usr/bin/python # display an initial message in the command window print "Game console initialized" # include (import) any required modules import pygame # initialize pygame pygame.init() # set an initial size for the game display, # and open the display screenSize = width,height = 240,180 display = pygame.display.set_mode(screenSize) # load an image and keep track of the rectangular # section of the display it gets placed in starImage = pygame.image.load("star.gif") starBox = starImage.get_rect() # this keeps cycling through the "while loop" # until the player has clicked the close box keepPlaying = True while keepPlaying: # check for any events that need to be processed, # e.g. the player clicking the close box for event in pygame.event.get(): if event.type == pygame.QUIT: keepPlaying = False # define the colour black (RGB values) black = 0,0,0 # fill the screen buffer with black display.fill(black) # update the buffer to include the image of the star display.blit(starImage, starBox) # redraw the screen from the buffer pygame.display.flip() # pause for 100 milliseconds (one-tenth of a second) # before going on to repeat the cycle again pygame.time.delay(100)

   • Try running the program again (./game.py) This time you should see the image of a small gold star in the upper left corner.
     

8. Finally, let's get the star to bounce around inside the display.

   • First, we'll simply make the star move down and to the right.

     Add the following code just above the while loop:
     speed = [3,5]

     Add the following code just above the display.blit:
     starBox = starBox.move(speed)

   • The [3,5] above determines how fast the star jumps to the right (3) and how fast it moves down (5) each 100 milliseconds. If you use negative numbers the star will move left (negative first number) or up (negative second number), and if you change the time.delay it will speed up or slow down the animation (smaller delays means it will move faster).

     Try running the program (./game.py) and experimenting with different speed combinations.

     Notice that when the star goes outside the display it just keeps on going forever.

   • Finally, we'll get the star to "bounce" when it hits the sides of the display.

     • To do this, we'll flip the speed back and forth between positive and negative, depending on which edge the star hit.

     • If the star goes off to the left or the right we'll simply flip the horizontal speed using the following:

          # flip the horizontal speed value if the star
          #   goes off the left or the right of the display
          if starBox.left < 0 or starBox.right > width:
             speed[0] = - speed[0]
       	      

     • Similarly, if the star goes off the top or bottom we'll flip the vertical speed:

          # flip the vertical speed value if the star
          #   goes off the top or the bottom of the display
          if starBox.top < 0 or starBox.bottom > height:
             speed[1] = - speed[1]
       	      

     • Try running the program again, hopefully this time the star bounces around inside the display!

       The final version of the program should now look something like this:

       #! /usr/bin/python # display an initial message in the command window print "Game console initialized" # include (import) any required modules import pygame # initialize pygame pygame.init() # set an initial size for the game display, # and open the display screenSize = width,height = 240,180 display = pygame.display.set_mode(screenSize) # load an image and keep track of the rectangular # section of the display it gets placed in starImage = pygame.image.load("star.gif") starBox = starImage.get_rect() # set an initial speed for the star speed = [3,5] # this keeps cycling through the "while loop" # until the player has clicked the close box keepPlaying = True while keepPlaying: # check for any events that need to be processed, # e.g. the player clicking the close box for event in pygame.event.get(): if event.type == pygame.QUIT: keepPlaying = False # move the star at its current speed starBox = starBox.move(speed) # flip the horizontal speed value if the star # goes off the left or the right of the display if starBox.left < 0 or starBox.right > width: speed[0] = - speed[0] # flip the vertical speed value if the star # goes off the top or the bottom of the display if starBox.top < 0 or starBox.bottom > height: speed[1] = - speed[1] # define the colour black (RGB values) black = 0,0,0 # fill the screen buffer with black display.fill(black) # update the buffer to include the image of the star display.blit(starImage, starBox) # redraw the screen from the buffer pygame.display.flip() # pause for 100 milliseconds (one-tenth of a second) # before going on to repeat the cycle again pygame.time.delay(100)

Feel free to experiment with creating additional stars on the screen, play with speeds and trajectories, get them to change speeds when they bounce or collide with one another ...

#! /usr/bin/python print "Game console initialized" import pygame pygame.init() screenSize = width,height = 240,180 display = pygame.display.set_mode(screenSize) starImage = pygame.image.load("star.gif") starBox = starImage.get_rect() # add a second star starImage2 = pygame.image.load("star.gif") starBox2 = starImage2.get_rect() keepPlaying = True speed = [10,5] speed2 = [5,10] while keepPlaying: # see if it's time to end the game for event in pygame.event.get(): # did someone click the X to close the window? if event.type == pygame.QUIT: keepPlaying = False # redraw the background black = 0,0,0 display.fill(black) # draw the stars on the screen starBox = starBox.move(speed) starBox2 = starBox2.move(speed2) # update their speed, changing direction if needed if starBox.left < 0 or starBox.right > width: speed[0] = - speed[0] if starBox.top < 0 or starBox.bottom > height: speed[1] = - speed[1] if starBox2.left < 0 or starBox2.right > width: speed2[0] = - speed2[0] if starBox2.top < 0 or starBox2.bottom > height: speed2[1] = - speed2[1] # see if they collide, print BOOM on the console if they do collide = True if starBox.left > starBox2.right: collide = False elif starBox.right < starBox2.left: collide = False elif starBox.top > starBox2.bottom: collide = False elif starBox.bottom < starBox2.top: collide = False else: print "Boom!" # update the display display.blit(starImage, starBox) display.blit(starImage2, starBox2) pygame.display.flip() pygame.time.delay(100)

game1.py (completed version 1)
game2.py (completed version 2)

You can continue on with the next lab in the workshop series, or see our main game workshop page for more information and ideas, or check out the pygame.org website for lots of game examples and resources.