CSCI 171 lab 2: intro to Python/PyGame

CSCI 171 lab 2 (Jan. 19): intro to Python/PyGame

Refresher: getting logged in and started

Log in with your account username and password (the instructor can look up your username if you forgot it, but the password can only be reset at the IT help desk in the library).
Open a web browser (Applications->Internet->Ice Weasel) and go to today's lab (URL http://csciun1.mala.bc.ca:8080/~wesselsd then follow the links to CSCI 171 -> Labs -> Jan. 19th.)
Open a command window (Applications->Accessories->Terminal) then go to your CSCI 171 directory (cd csci171)
Create a lab2 directory (mkdir lab2) then go to it (cd lab2)
Open the gedit editor, but this time use the command
gedit game1.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.)

Basic Python/PyGame:

The basic structure of our python programs is to start (on the very top line) by identifying the interpretter python must use.
In the editor, put the following as the first line of game1.py
#! /usr/bin/python
Below that, add the following then save the file:
print "Game console initialized"
In the command window (not the editor) run the following command to make the file executable:
chmod u+x game1.py
Now try running the program using the command
./game1.py
(It should display "Game console initialized" in the command window.)
Now we'll add the code needed to open the actual game display using pygame.
This takes several steps:
- We have to import the pygame module (with all it's prebuilt code) so we can use it in game1.py. Add the following to our python file:
  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)
- Try running the program from your command console, i.e.
  ./game1.py
  You should briefly see your game display pop up on the screen, and in your command window you will see "Game console initialized" (plus a bunch of junk from the sound card error message when running this in the lab).

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)

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:

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

Try running the game again (./game1.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.

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

Enter the following command to copy a small star image from my lab2 directory to yours:
cp ~wesselsd/labfiles/star.gif .
The spaces and the . at the end are important.

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 (./game1.py) This time you should see the image of a small gold star in the upper left corner.

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 = [1,1]
Add the following code just above the display.blit:
starBox = starBox.move(speed)
The [1,1] above determines how far the star moves to the right (the first number) and how fast it moves down (the second number) each tenth of a second. If you use negative numbers the star will move left (first number) or up (second number).
Try running the program (./game1.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 = [1,1] # 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)