Making Your First Computer Game: Balloon Popper

A game is not a game unless you can fail. Success is optional – you may be trying to rack up points before the inevitable train wreck (as with Tetris) – but without the possibility of failure, it’s not really a game. So the simplest game I can think of – in terms of how easy it is to program with GameMaker – is this game I call Balloon Popper (not very original, but at least descriptive). It may not be particularly fun (although you can make it challenging), but you gotta start somewhere, right?

I’m going to assume that you’ve downloaded and installed GameMaker and have at least a passing knowledge of MS Paint (or a comparable drawing program). Let’s get started!

Overview

In the game Balloon Popper, there are a bunch of balloons on the screen. You have to pop them with the mouse before time runs out. If you fail, the game restarts so you can try again. If you succeed, the game ends.

Yeah, not very complex. Which means you shouldn’t have much trouble, right? Here’s a list of the steps involved; the first is done with MS Paint, and the rest with GameMaker:

1. Make a Balloon (picture)

2. Make a Sprite (and load the balloon picture into it)

3. Make an Object (the balloon itself)

4. Instruct the Object (tell it what to do)

5. Make a Room (for everything to happen in)

6. Set Conditions for Failure (time ran out)

7. Set Conditions for Success (popped all the balloons)

That should give you the basic idea. I’ll take you through it step by step:

1. Make a Balloon

A picture used in a video game, if it’s 2-D and can move around, is called a Sprite. You’re about to make your first Sprite, so open MS Paint.

First: Set the image size. In pixels, 32 by 32 should be fine.; you can make it bigger or smaller depending on how big your screen is or how good you are with a mouse (it’s easier to click on bigger things, and more challenging to try for smaller things).

Next: Set a background color. This is a color you won’t be using to draw the balloon, and GameMaker will make it transparent (invisible). Many people use orange, green, or gray. You could choose one opposite to the balloon’s color (in computer colors: red vs. cyan, green vs. magenta, blue vs. yellow). Make sure that the pixels in all four corners stay that color, or GameMaker won’t know which color is supposed to be the background.

Finally: Draw a balloon. Doesn’t have to be fancy; you get no extra points for realism or artistic merit. In fact, doesn’t even have to be a balloon: The gameplay would be identical if you decided to make a game called Bubble Popper or Candy Grabber or All-You-Can-Eat Sushi Bar (where you try to grab up all the sushi before the restaurant closes). A blob of color would work just fine.

Once you’ve drawn a balloon that you can live with, go ahead and save it. (Make sure you know where to find it again!) It’s best to save as a .PNG file (a lossless format with a small file size). If you can’t do that, try .GIF or .BMP format.

2. Make a Sprite

In GameMaker, find the list of elements on the left-hand side of the screen: Sprites, Sounds, Backgrounds, Objects, Rooms. (Whenever I refer to “the left-hand list,” this is what I mean.) Right-click on Sprites and select Create Sprite. The Sprite Properties window will pop up.

Sprites take the prefix spr, so set the name to sprBalloon (or sprBubble, sprCandy, sprSushi, etc.). The prefix makes sure that you don’t confuse the Sprite with the Object, which will be called just Balloon.

Click Load Sprite and go find that picture you made. Select it and click Open. Now the Sprite Properties window should show the picture you made; click OK.

3. Make an Object

Go back to the left-hand list. You should see your Sprite listed there under Sprites. Go down a bit and find Objects. Right-click on Objects and select Create Object. The Object Properties window will pop up.

Set the Name to Balloon. Just below that you’ll see a box that says . Click that, and select sprBalloon.

Now it’s time to give that object its instructions.

Overview: Events and Actions

Instructions in GameMaker come in two parts: Events and Actions. One Event is “when the left mouse button gets pressed”; a corresponding Action might be “change color” or “explode”. GameMaker uses Object-Oriented Programming (OOP), so each Object only worries about the Events it’s supposed to watch for and the Actions it’s supposed to perform, and not anything the other Objects are supposed to do.

Let’s consider how this might work in real life. Say you get your family (Mom, Dad, and Sis) together and sit them in chairs so they’re all facing you. Then you give them these instructions:

Mom, when I raise my right hand, you stand up. When I put my right hand down, you sit down.

Dad, when I raise my left hand, you stand up. When I put my left hand down, you sit down.

Sis, when I nod my head, you steal Dad’s seat….

See how that goes? Mom keeps watch on your right hand. Dad keeps watch on your left hand. Sis doesn’t worry about what your hands are doing, but only what your head is doing – and she doesn’t steal Dad’s seat until you tell her to. That’s how OOP works.

Getting a little more complex:

Dad, when I put my left hand down, check your chair – if it’s empty, sit down. If it’s not empty, go find another chair.

Sis, when I nod my head, check Dad’s chair – if it’s empty, steal it. If it’s not empty, check Mom’s chair – if it’s empty, steal it. If it’s not empty, go get me a soda from the fridge.

And you can even include Events that aren’t under your control:

Dad, when you hear the popsicle man, get out your wallet….

For the computer, these Event-Action pairs would look like this:

Windows, when I move the mouse, move the cursor in the same direction.

Open Office, when I press a letter on the keyboard, make that letter appear on the screen.

Kaspersky Internet Security, when you detect a virus, block it, and let me know!

World of Warcraft, when I right-click on that enemy, go kick his butt.

…it’s a beautiful thing.

So let’s get back on track here:

4. Instruct the Object

On the Object Properties window, you should see an Events column and an Actions column. Under the Events column, click Add Event.

It will ask which Event you want to add. You want the Balloon to pop when you click on it (a mouse Event), so choose Mouse, and then select Left Button.

On the right-hand side of the Object Properties window are a bunch of tabs: move, main1, main2, etc. These are the Action tabs, which separate the Actions into categories so you can easily find what you’re looking for.

Click the main1 tab. Hover over the Action icons until you find Destroy Instance (it’s the fifth one, and looks like a Recycle Bin). Drag that into the Actions column. When you drop it, the Destroy Instance window will pop up. Just click OK.

Now the Balloon will disappear when you click on it. We’ll come back to this Object later to give it more instructions, but for now just click OK.

5. Make a Room

You need a place for everything to happen; in GameMaker, this is called a Room. On the left-hand list, find Rooms; right-click on it and select Create Room. The Room Properties window will open up.

On the left side, near the top, you should see three tabs: objects, settings, and backgrounds. The objects tab should be open, and that’s the one you need. Since you’ve only created one Object, that’s the one already selected, and its Sprite should show up on the side; if not, click the big empty space and choose the Balloon Object.

The Room itself is the grid to the right. If you can’t see the whole grid, drag out the sides of the Room Properties window until you can. To place an Object in the room, just click where you want it to be. You’ve already selected the Balloon Object, so go ahead and click somewhere.

Now click in other places. Make as many Balloons as you want, but try not to overlap them (this will destroy the bottom one). Twelve or twenty might be a good number.

Note: These things you’re placing technically aren’t Objects; they’re Instances of an Object. Which is like saying “Clones of a Person” (in the soft Sci-Fi sense: They’re identical to the Object and all of them will act in the exact same way).

All right, you have your basic layout. Go ahead and click OK (the green check mark).

Save It

It’s a good idea to save your game frequently. If the program crashes, you’ll be glad you did.

Give it a good name so you’ll know what it is later on. MyGame.gmk doesn’t tell you much, especially when you have five or ten of them saved (MyGame1.gmk, MyNewGame.gmk, MyFifthGame.gmk, and ThatCoolGame.gmk aren’t much better). BalloonPopper.gmk is clear, and Balloon.gmk, Popper.gmk, BalPop.gmk, or BPopper.gmk would also be good.

When you get into larger projects, you’ll learn to save the games in stages: BalPop1.gmk, BalPop2.gmk, etc. That way, if you make a big mistake, you just go back to a previous save file. That’s when you’ll be grateful for short, descriptive names.

Test It

Don’t wait until your project is complete to test it. If you test it whenever you add a new section, there’s only a few things that could be wrong with it, and it’ll be easy to figure out which one. But if you wait until the project is huge, you might not be able to track down the real problem.

Testing your project means making sure that it’s doing what you told it to do, and making sure that what you told it to do is what you actually want it to do (sometimes they differ more than you’d think). So you’re going to be checking to see if the balloons disappear when you click on them.

To run the game, go to the top of GameMaker and find the icon bar. You can hover over each icon to read what it does: Create a new game, Open an existing game, Save the game… you want Run the game (a green triangle pointing to the right). Click it to, well, run the game.

The GameMaker window will disappear and the game window will open up. Click on the balloons to see if they disappear. If they do, great! Bypass the following section and move on with step number 6.

Troubleshoot It

Possible errors here: The game won’t start at all. The game starts but there are no balloons. The balloons don’t disappear when you click on them.

If you have one of these errors (or a different error), go back to the start and ensure that you’ve done each part correctly. I would be more specific, but that’d make this article even longer. Well… okay, fine, I’ll share one troubleshooting method:

Check through the left-hand list to make sure that you have exactly one Sprite, one Object, and one Room, and nothing else. Check to make sure that the Sprite’s name is sprBalloon, the Object’s name is Balloon, and the Room’s name is room0 (the default name). If either of these is not the case, I can think of half a dozen ways you might have messed things up, so if you can’t figure out how to make the game run correctly at this point, I’d suggest you start over completely. Just make a new game and start from the very first instruction (for GameMaker – you don’t need to make a new picture with MS Paint).

If you can figure out how to make it work, move on to the next step:

6. How to Lose

Once you’re done amusing yourself by popping balloons, end the game (click the X in the top right-hand corner, just like exiting any Windows program). This will pop you back to GameMaker. Now that you know the basic concept works, it’s time to set some conditions for winning and losing. You’ll be using the simplest form possible: Race the Clock.

We’ll need a clock. Now, you could do this within the Balloon Object itself, so that you’d only have to mess with a single Object. But since each Instance of the Balloon Object follows the exact same directions, you’d end up with 20 different clocks all running at the same time, pointlessly bogging down the program. (That may not be noticeable in a small program, but let’s not start any bad habits.)

To avoid this, you’re going to make a separate Object to keep track of the time. Remember how to make a new Object? On the left-hand list, right-click on Objects and select Create Object. The Object Properties window will pop up.

Now, you can’t call it Alarm, which is reserved by the program, and I’m a little leery of Clock and Timer (which I think are reserved in some programming languages). When I have an invisible Object, I tend to call it Sentinel, but for this one you can use the name Stopwatch.

It’s going to be invisible, so you don’t need a Sprite; in fact, find the checkbox Visible and uncheck it.

Time for some instructions. Click Add Event and choose Create. For Actions, look under the main2 tab and choose the very first Action: Set Alarm. Drag it over to the Actions column and drop it; the Set Alarm window will pop up. Set number of steps to 800 (you can tweak that later). The in alarm no section should already be set to Alarm 0. Click OK.

You’ve started the clock ticking – now you need to tell it what to do when the alarm rings. Click Add Event again, and choose Alarm, then Alarm 0 (the same as the alarm you just set). For Actions, open the main2 tab again, and find the two green arrows pointing in a circle: Restart Game. Drag that over and you got it. Click OK.

One last step with this guy: Put it in the Room. Just open the Room (find it in the left-hand list and double-click on it), click on the left side under the objects tab, choose the Stopwatch Object, and then click somewhere in the room (in a vacant corner is good). A tiny blue ball will show up (it’s the placeholder for invisible Objects).

7. How to Win

To win, you pop all the balloons before the timer runs out. So you’ll need something to keep track of how many Balloons are left in the Room. The only time this changes is when you pop one, so let’s check the number whenever you pop a new Balloon.

Open up the Balloon Object. There’s only one Event, so you know you’re in the right one.

Now, the Destroy Instance Action has to go dead last – or else it’ll kill itself before it can carry out the rest of the instructions. So each time you add a new Action, drag the Destroy Instance down to the bottom of the list.

Open the control tab and find the Test Instance Count Action (a tiny blue ball with 1 2 3 underneath). Drag that over; the Test Instance Count window should pop up. Set object to Balloon. Set number to 1. Set operation to Equal to and there you go – click OK.

What you’ve just tested for is “Am I the last Balloon in the room?” If so – since the Balloon is about to destroy itself – you’ve won the game. So you’ll need the End Game Action. Go to the main2 tab; the End Game Action is right next to the Restart Game Action you found a minute ago – it looks like a red power button. Drag it into the Actions column.

In the Actions column, make sure these three Actions are in the right order:

1. If there is only one left…

2. …end the game.

3. Destroy the Instance.

The first step there, the If, decides between two alternatives. If there is only one Instance left, you’ve won, so it ends the game. But if there are more Instances left, you haven’t won, so it doesn’t end the game – it goes on to the next instruction, which is to self-destruct. This is a very simple If Structure; you’ll learn to make them a lot more complex in later games, but for now, simple is all you need.

All right. Click OK and you’ve just completed your first game. A clickable object and a room to put it in… a timer, a task… a way to win, and a way to lose. Everything needed to make a simple game.

Test the program (do you remember how?) to make sure everything works. Assuming it does, here’s the Extra Credit: Tweak the Stopwatch’s alarm. If the game is too easy to complete within the time allowed, make the alarm shorter (fewer steps). If it’s too hard, make the alarm longer (more steps).

That’s all for now – enjoy!

Henry Surtees signs up for Formula 2

Henry Surtees, whose father John remains the only man to win world championships on two and four wheels, has signed up to compete in the 2009 FIA Formula Two Championship.

Surtees becomes the second son of a former Grand Prix driver to have confirmed his participation in F2 so far, following the recent announcement that Alex Brundle son of Martin will also race in the championship in 2009.

Henry graduates to F2 after a busy 2008, having competed in the Formula Renault UK Championship and Winter Series along with racing in two British Formula 3 National Class races at the end of the season. The 18 year old Englishman finished as runner-up in the Formula Renault UK Winter Series and during an impressive F3 appearance at Donington Park he won one national Class race and finished on the podium in the other: It is the right time for me to make this step up to F2, said Surtees. It is a great opportunity.

F2 is attracting the attention of international race winning drivers, and it is a challenge he is looking forward to: It is going to be tough, he said. But great competition is exactly what I am looking for. I am really excited about 2009 and now I just cannot wait to see the car!”

John Surtees, 74, claimed the 500cc motorcycle world championship before going on to win the Formula One world championship in a Ferrari in 1964. He also designed, built and raced his own Team Surtees single seaters in both F1 and F2: “I think it is fantastic,” said John Surtees. “I won my last race in Formula Two and we are using the same colours on Henry’s car as I did back in 1972 and 1973.” John has remained active in international motorsport, acting as chairman of the A1 Team GBR franchise in A1GP as recently as 2007 and he now manages his 17 year old son Henrys single seater career: “Henry has been progressing well, and in this day and age, we need to give talented kids a greater opportunity to show off their skills F2 is an international series that does exactly that,” he added. “It may not have been around for 25 years but we needed to bring back some simplicity into the racing ladder Formula Two has a great past but now it is a new championship for today!”

Jonathan Palmer, Chief Executive of championship organiser MotorSport Vision, said: “I have been monitoring Henrys progress ever since he raced karts with my son Jolyon. I was always impressed with his technical approach and he has clearly inherited and learnt a lot from his father John. F2 is the ideal formula for Henry as he continues in his quest to reach Formula One and it is extremely exciting to add another former F1 surname to the swelling F2 grid for 2009.”

Formula Renault WinterSeries

Henry didn’t quite win the Renault Winter Series Championship by a margin of 4 points at the final two rounds at Rockingham. The weekend saw a continuous change in weather conditions. With the car working well and the pace, he lost out on a potential pole position by being held up on the fastest laps by cars slowing and the track drying. A misjudgement in quite how much the track had dried in the first race left Henry struggling with quite a lively car. For a while he was up to 2nd place only for him to have a lock up and lose two places so finishing 4th in the first race.

It was to slick tyres for the second race and a track that was basically dry, at least on the racing line. Early in the race Henry had been holding a steady 3rd position. The course car came out and Henry took the opportunity, from a long way back, to dive up the inside of Oliver Webb and get the dry inside line so taking 2nd place which he held to the finish of the second race. James Calado had recovered from making an early error at the first corner to finish 7th which together with his fastest lap gave him the Championship.

So with a pole, a 1st and 2nd in his first drives in Formula 3 at Donington followed by the same results in the Renault Winter Series at Croft and then 2nd and 4th place at Rockingham it hasn’t been a bad end to the season. The question is what next?

An Exciting Week for HenrySurtees

Half-term has brought an exciting week for young driver Henry Surtees. Following on the success in his one off drive in Formula 3 at Donington in the final British Championship race, he was invited for 2 days of testing at Snetterton where he set fastest ever times for the Carlin team in their junior car.

It was then off to the rather cold and changeable weather conditions of Croft for Rounds 1 and 2 of the Renault Winter Series. He put it on pole for Round 1 and 2nd place for Round 2. At the start of the first race he immediately took the lead and opened up a gap with the track wet but drying. As the race went on, and a dry line developed, conserving the tyres became the main preoccupation. He did an excellent job of controlling it from the front, despite coming under challenge from James Calado. Leading up to the second race it looked as if we would have dry conditions until some light rain again started to fall. The team decision was that it was likely to be rather similar to the first race so a setting on the dry side was decided upon. This looked good for the first few laps with Henry making a superb start and passing Calado on the approach to the first corner. The pace was there but then the rain came down with a vengeance and after a few laps of slipping and sliding around James Calado slipped by staying there despite a challenge being mounted by Henry as the rain eased only for a further deluge leaving Henry to settle for second place. All in all not a bad half-term’s work.

It leaves a big question mark as Henry is busy preparing for his A levels and we had previously decided not to do the third and fourth races which take place at Rockingham.