Bat and Ball Game

Pygame provides us with lots of ready-made tools for making games. If you haven’t already installed Pygame, you’ll find information about installing it on their website.

Liam Fraser’s video tutorials on YouTube are really great place to start learning about Pygame. The other tutorial I have found most helpful is this one by Professor Paul Craven.

Before we start working on the game, we are going to look at a very simple template for Pygame programs (download “template.py“).

If you run the program, you’ll see a simple Pygame window like this:

So, let’s see how we made it.

The first proper line of the program imports pygame itself. Then we start the game-engine with “pygame.init()”. Next we assign a list of numbers to the variable: “green”. The numbers refer to how much red, green and blue we want. This colour had no red or blue and the maximum value for green. So it is a nice deep green. Why not have a play with these numbers and make the window a different colour?

The next lines set up the Pygame window. For my example, it was 200 pixels wide and 150 tall. The example you downloaded was a slightly bigger window. The next line puts some text in the the window bar. You can change this to whatever you like. Here’s the next bit:

We put the value “False” into a variable called “done” and make a Pygame timer to control the speed of the main loop. The most important bit comes now (drumroll) it’s the main game loop.

This simple bit of code is the going to become very familiar to you if you want to make games using Pygame. The “while” loop will keep going until the variable “done” contains “False”.  Then we fill the screen with green. The next lines check for input from the user – if we click the close “x” on the Pygame window, the program will exit. The number in the “clock.tick()” command sets the Frames Per Second of the game (how fast it goes). The next line “updates” or flips the display. This basically  makes anything we have drawn to the screen actually appear. If you leave this out, nothing happens (mind you – nothing much happens in this program – yet!). Finally, outside the “while” loop, we close Pygame.

Right – now we need to get something moving on the screen and a bat! I’ll show you the code bit by bit. You can edit the template file (save it as something like “bat&ball.py first). Then, when you have finished, you can play the game.

You need to download the bat and ball images (bat and ball).

 

Here’s the first part of the program:

So, the first new thing here is another line with “import” in it. This is just to make it easier for ourselves – we won’t have to type out the full paths to some of the Pygame methods we’ll use later on. We also set up more colours, so you can easily change the background colour.

The “screen.get_rect()” command makes a special type of object out of the screen. This makes it easier for us to do a lot of things (like find out it’s size and position). After giving the window a title, we make the normal mouse pointer invisible. The next four lines load up some images in a Pygame format. and makes “rect”s from them. The bit where it says “convert_alpha” makes sure images with transparent parts are displayed properly.

We set the speed of the ball to one pixel right and one down. Then we use the “rect” commands to put the bat at the middle of the screen, 50 pixels up from the bottom. And we make a timer.

Now we enter the main loop of the game. First we fill the screen with white (change it to another colour if you like). Then there is the part which closes the game when we click the cross. The next bit finds the position of the mouse and changes the x co-ordinate of the bat (we don’t want the bat moving up and down as well!). The position of the bat is a list with two numbers in it. The x co-ordinate is the first one (which the computer thinks of as zero – that’s why it’s “position[0]”). You could see what happens if you delete the “[0]” or change it to “[1]”.  The “move()” method is a helpful thing we can do to rect objects – it just moves the ball 1 pixel right and one down (because we set speed to [1,1]).

“Collision detection” is when we check if two things are hitting each other. We could just do a simple collision detection, but then we’d get some problems – the ball would sort of get stuck as it collided with the bat over and over. If you want to see this, change this section to this:

and see what happens if you get the edge of the bat near the ball.

Anyway, in the proper code, I first check to see if the bottom of the ball (ballrect.bottom)  is touching the top of the bat (batrect.top). Next I check if the ball is between the ends of the bat. (I’ve added the “-3” and “+3” bit to avoid making the ball bounce when we hit the transparent corners of the square in which the ball is drawn.)

This is what our “ball” really looks like. The grey checked bits are transparent! You could see what happens if you remove the “-3” and “+3” bits or change the numbers.

The next bit is to make the ball “bounce” if it hits 3 edges of the screen. So if the left side of the ball is at less than x co-ordinate “0” or more than the width of the screen, it switches the speed to the opposite direction (eg one pixel left and one up for the first bounce). We do the same for the top – but not the bottom. If you don’t hit the ball, it’s game over!

The “blit” commands draw the bat and the ball in their new positions and the clock is set to 40. You can change this if you want the game to run faster. Then we do “pygame.display.flip()” to make these change get displayed.

And that’s it.

If you get this far, try changing some stuff. You could download a different image to use as the ball, or the bat! You could also use a picture for the background instead of a solid colour – ask me how in class!

antiloquax

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: