Skip to navigation | Skip to content

Share your knowledge. Make a difference.

How to Make Computer Games in 10 Easy Steps

1 - I can do better 2 - Jury's out 3 - Pretty darn good 4 - Splendiferous 5 - Awesometastic (by 2 people)   Your rating: 1 - I can do better 2 - Jury's out 3 - Pretty darn good 4 - Splendiferous 5 - Awesometastic

Ranked #1030 in How-To, #9842 overall

Donates to Squidoo Charity Fund

Rated G. (Control what you see)

Can you really make video games?

 

Have you ever wanted to make your own video games? Well, I have good news for you! I can't guarantee that you will make the next Halo, but, I can guarantee that after this tutorial you will be able to make some amazing 2D games. No prior experience is necessary.

A Section for Searches 

For books and links, check out the final section at the bottom of this page!

The Format and Goal of this Tutorial 

Who this tutorial is for: This tutorial is for anyone who wants to get into making games. No prior experience in any type of development is necessary. However, if you are looking for a way to do it with code, you might want this tutorial for game development in Python and Pygame.

The goal of this tutorial: In this tutorial you will make a game in which snowflakes are falling from the top of the screen and the user must stop them from hitting the ground. The user controls a turret that can fire bullets at the snowflakes. Each time a snowflake is hit, the user's score increases.

A screen shot of the finished product is above.

Step 1: Materals 

Before we get too far, you are going to need some things.

1. You will need to download and install Game Maker by Mark Overmars.

2. You will need to download these images (snowFlakeSmall.gif , background.jpg) in a place where you can easily access them.

3. Finally, please make sure that you are in advanced mode. This can be done by clicking on Advanced Mode in the file menu.

Step 2: The Room 

If you need an enlarged picture then click here.

An Introduction to rooms: In Game Maker we have the something called rooms. They have a background, a caption, and things called instances. They work like a Cartesian Coordinate System. However, the origin is in the upper left hand corner instead of the center. Everything we will create will be placed by assigning x and y coordinates to them. Luckily, we don't have to worry about the actual coordinates in Game Maker as it is advanced enough that it takes care of most of the math for us. Still, it is good to know that it is there.

Make a Room: So, let's make one! On the left hand side of the screen you will see a folder tree (as shown in the picture above with the green/yellow arrow). Right click on the folder that says rooms and click on create room. In the window that pops up click on the tab (as shown in the picture above by the blue arrow) called settings. Then, change the Name to "Main Room" (without the quotes). Finally, change the width and height to 300 (towards the bottom of the window in the settings tab).

Make a Background: Now, let's make a background. In the folder tree, find the folder that says backgrounds. Then right click on it and click create background. When the background dialog appears, change the name to something like snowflake. Then, click load background. In the dialog, open background.jpg (you should have downloaded it earlier). Finally, click OK. Now, go back to the window for your room (if you closed it, just double-click on its name in the folder tree). In it click on the backgrounds tab and then click on the menu for the background (see the black arrow in the picture above). Select your newly made background in the list that pops up.

Step 3: Sprites 

If you need an enlarged picture click here.

A Short Definition of Sprites: In a computer game sprites are 2D graphics loaded into a game. Just think of it as a picture for now.

Note: The meaning of sprites and objects will vary between programming languages.

Creating a Sprite: We are going to create the turret first. However, you will notice that I did not give you any graphics for a turret. So, we are going to use the image editor that is built into Game Maker. To make a sprite, right-click on sprites in the folder tree and click create sprite (black circle in the above picture). Give it the name turretSprite. Then click edit (yellow/green circle). In the window that pops up, double-click image 0. In the drawing tools click on zoom (green circle). Zoom down until you get a good look at the sprite. Now, click on a fatter line (darker blue circle). Next, click the draw a line button (lighter blue circle) and select yellow for the color (pink arrow). Finally, draw the image from the picture above (the graphic in the white circle).

The Color Key: You will soon notice that Game Maker does not draw the backgrounds of the sprites. This is all possible with the Color Key. The Color Key is the color that defines the background of the sprite and is determined by the lower-left pixel's color. So, be careful. If the color of your sprite is occupies that pixel, your turret will not draw.

Step 4: Objects 

If you need an enlarged picture click here.

Defining an Object: Sprites are attached to objects, or virtual representations of real world things or ideas. An object could be anything. In our game we are going to need objects for the lazers, snowflakes, and the player-controlled turret.

Making an Object: To create an object, right click on objects in the folder tree and click create object. Where it says sprite, open the sprite selection menu (orange arrow) and select turretSprite (black circle). Call this object userTurret.

Event-Driven Programming: Game Maker is event driven, meaning that everything done is in response to an event. We will call these event definitions.

Defining the First Actions and Events of the Turret: To make an event definition click on Add Event (gray circle). Then, click on key press (greenish yellow box). In the menu that pops up select Left.

Now that we have the event, we need something to happen! Obviously when the left arrow key is pressed we will want the turret to move to the left. To do this we first make sure that the event is highlighted in the events list (on the left, if it is not just click on it in the events list). Next, click and drag the move command (red circle) into the actions list. In the window that pops up click on the left arrow (green circle) and type in 3 for speed. Thats it! When the left arrow is pressed the turret is moved to the left at the speed of 3 (pixels per step).

Defining the Other Key: Now, do the same for the right key press (make a new event and action) with the right arrow selected in the move command.

Key Release Event: We need key release events (right below the key release event) for the left and right keys. This is because the we never told the turret to stop moving. So, in each of those events put move commands in, but, select the center button (looks like a square) and enter a speed of 0. The center button makes the object stop.

Step 5: Instances 

If you need an enlarged picture click here.

Defining an Instance: Before we continue, I just want to get some terminology out of the way. We have made an object, but, we have not placed it in our room. What we are about to do is make an instance of the object. Think of it this way: if we have 3 turrets in our game each turret is one instance of the turret object.

Placing an Instance: Now, let's open up the room we made earlier. This can be done by double-clicking on it in the folder tree. In the objects tab (yellow arrow) click on the add object menu (blue circle) and then userTurret. Afterwards, left-click in the room to place it (red arrow). Try to put it in the middle of the room at the far bottom (see the picture above). If you missed then press and hold control. Then left-click (while holding control) and drag the object to where it needs to be in the room. It does not have to be perfect.

See what you have made so far: Now, let's check and see if the turret works correctly. At the top of game maker there is a green arrow that compiles and runs the your work. Compiling is the process in which your work is converted to to code that the computer can read. If you can not find the green arrow click here.

Need Help? 

If you need any help up through step 5, please post your questions here. Hopefully, someone will be able to answer them.

Step 6: The Lazer 

If you need an enlarged picture click here.

Now, lets make a lazer!

The basics: Go ahead and make a sprite and object for the lazer, but, do not make an instance.

The Events: The AI for the lazer is pretty simple. We will need 2 things. The creation event (blue circle), for when an instance is created, and the outside room event (yellow circle).

The Actions: The creation event needs have a move command with the up arrow selected and a speed of 5. Also, when the lazer is outside the room we want it to destroy itself. The event is, obviously, outside room and the action is in the main 1 tab (red arrow) and looks like a trash can (black circle). We get rid of the lazer so that the computer does not have to think about instances that are no longer important. This may not sound like a big deal, but, the computer could be keeping track of 100 lazers that are off the screen. This could slow the game down and be a mess if the user's computer is resource limited.

Step 7: Making the Lazer Shoot 

If you need an enlarged picture click here.

Now that you have a lazer, you probably want it to shoot.

The Event: In the turret object we need a keyboard-press event for the space key.

The Action: We need to create a bullet on top of the turret. So, let's use a create command (main 1 tab) (light blue circle) and select the lazer object (dark blue circle). Then, we leave the x and y values zero, but, we need the lazer to be created relative to the turret. This means that if we entered 5 for x and y the bullet would be created 5 x and 5 y pixels away from the turret, instead of in the top left-hand side of the screen. So, check the relative check-box (green circle).

Another Chance for Help 

Go ahead and test your game. If you have any problems go ahead and post them here.

A Short Digression 

Introduction to Variables: Before continuing, we need to talk about variables. Every instance we create has them, and they are essential to developing anything. Some are created automatically, like X, for an instance's x position in the room, and Y, for its y position. However, variables can also be defined, or created, by programmers. In essence, these variables are just numbers represented by letters or words. However, in programming they have a special purpose, they change. The move command changes their values over time, but, we can also set these variables directly, as we will in the next step.

Also, it is important to understand that we can have variables for everything. We can have a variable named score or a variable named bananas. We will revisit variables in a later tutorial (assuming you go on to another one of mine). If you are still confused check this page out. It is meant for a language called JavaScript, but, the concept of a variable is universal. Now, back to the action!

Step 8: Let it Snow 

If you need an enlarged picture click here.

The Enemy: Now that we have a lazer, let's make something to shoot! If you remember from earlier, the thing we are shooting at is a snowflake.

The Plan: Here is what we are going to do: When a snowflake is shot, it is put at the top of the screen at a random horizontal (x) position (giving the illusion that we destroyed it and have created a new one) with a slightly increased speed. Then, create a second snowflake at another random horizontal position (to make things harder).

The Sprite: You are going to need to create a sprite using the snowFlakeSmall.gif picture. If you forgot to download it earlier you can find it here.

The Object: OK, for the snowflake we are going to need two events. I am going to explain them separately.

The Creation Event: The creation event needs to have a move command with a speed of 1 and a downward direction.

The Collision Event: In the world of making games we have a way of finding out if things touch or collide. We need the collision event of when the snowflake collides with the lazer (light blue circle). For this event we will use the set x and y command (also called jump to position) (yellow circle). In the newly created command, type in 16 for y (so it does not start off the screen, which can be messy) and the following little piece of code for x. The code is, random(231) + 15. This will randomize an integer between 0 and 230 (the last number - 1, don't ask me why . . . it just is). The room is 300 pixels wide, so, you might be wondering why we did not use 301. This is because we want to make sure that it stays in the room. The + 15 is to change the range from 0 through 230 to 15 through 245, so that it does not fall off the room on the left-hand side. Next, use a creation event (main 1 tab) (dark blue circle and arrow) with the turret as the object, 0 as y, and random(230) + 15 as x. Finally, we are going to speed up the snowflake a little bit. You can do this with the move command. Just put in 0.1 in a downward motion and select the relative check box. This will add to the speed variable of the object instead of setting it. We are using 0.1 so that it will not speed up too quickly, however, you may want to change that later.

Step 9: Score 

What's a game without score? Now, we could make our own score variable, but, Game Maker conveniently has a lot of that taken care of for us. So, let's get it going!

Adjusting the Turret: We are going to display the score in the title or caption of the window. So, to tell Game Maker we are going to do that, put a score caption command (score tab) (yellow circle) in the creation event for the turret. The default settings in the window that come up are fine. The other spots, which are set to "don't show", are lives and health. We will not need these variables for our game.

Adjusting the Snowflake: In the snowflake's collision event put in a set score command (light blue circle) with a value of 1 and relative checked.

Adjusting the lazer: Now, let's discourage those rapid-fire button abusers. In the creation event for the lazer put in the set score command with the value of -1 and relative checked. This way the user will have to try to knock out two snowflakes with one lazer, requiring a little more skill.

Step 10: Finishing It Up! 

Alright, here comes step 10!

If you need an enlarged picture click here.

Ending the Game: The user will loose when the snowflake touches the ground (we are pretending that it is right below the turret). For us, the programmers, this means that when the snowflake is off the screen we need to restart the game. Also, we will want to show a high score table. To do all of this, just add a outside room event to the snowflake with the actions of show the high score table (feel free to play with the settings) (score tab) (yellow circle) and restart game (main 2 tab) (blue circle).

Making Sure the Turret Stays on the Map: In the turret add a outside room event with the horizontal wrap command (move tab) (green circle). Wrapping treats the room like a sphere. If the player goes off one side, he will come back on the other.

Other Suggestions: Tinker around with it. Change the values for stuff and make sprites larger or smaller as you see fit. The best way to learn Game Maker is just to try stuff out! Don't worry, it is really hard to blow up a computer with Game Maker 7. ;)

For the completed copy click here.

Final Thoughts 

You will notice that the snowflakes build up fast and slows the computer down after a few minutes of playing. To counter this, you may consider making the game harder from the beginning and have larger speed increases.

Just so you know more tutorials are available here.

Also, here are 3 links you may want to look at for the Game Maker Community:

Mark Overmars Blog

Game Maker Message Boards

Game Maker Book 

The Game Maker's Apprentice: Game Development for Beginners (Technology in Action)

Amazon Price: $27.03 (as of 08/21/2008)
List Price: $39.99

Usually ships in 24 hours

Other Websites 

Some good game development websites

Here are some websites on game development. Feel free to add (even if it's yours)!!!

Swaroop C H, The Dreamer ยป A Byte of Python

If you need to learn Python then this is a great e more...1 point

Python Programming Language -- Official Website

Home page for Python, an interpreted, interactive, more...0 points

Game Maker 7

This is a wonderful tool that can make games at a more...0 points

DarkBASIC

If you are not ready for the object orientated wor more...0 points

Pygame Homepage

This is the Pygame homepage. It is a great library more...0 points

A briefer Pygame Tutorial

If you already have some experience making games w more...0 points

Soya3D

This is a 3D library for Python.0 points

created by Samnsparky

Feedback 

Suggestions or comments?

X
Samnsparky

About Samnsparky

Hello Squidoo! I teach small classes of 2D Game Development, CGI, 3D Game Development, basic CAD, and basic HTML. For a while I was just printing out lessons, but, then I found Squidoo and decided it was time to save some trees and some money! Hopefully, you will find some of my work on this site to be useful in your computer science studies.

Samnsparky's Pages

See all of Samnsparky's pages