Game Maker Tutorial: Part One

Useful Links:

http://www.yoyogames.com/ ( Game Maker main webpage )

http://www.yoyogames.com/gamemaker/ ( Game Maker 7.0 Download )

http://www.yoyogames.com/make/tutorials ( Basic Tutorials to get you started )

Getting to know the program

Before you can do anything with game maker, it’s usually best to understand the main features of it. It’s like… Playing a Pong game before playing an FPS. If you gotta start somewhere, don’t make it big.

[URL=http://img229.imageshack.us/i/gamemakerbasic.png/][IMG]http://img229.imageshack.us/img229/7306/gamemakerbasic.png[/IMG][/URL]

This is the main screen of Game Maker. Please note that this is set to advanced mode. You should have it set on advanced mode, whether r not you are a beginner, because it only adds features. To turn on advanced mode, go to the File tab and make sure “Advanced Mode” is checked.

[URL=http://img9.imageshack.us/i/gamemakeradvancedmode.png/][IMG]http://img9.imageshack.us/img9/4706/gamemakeradvancedmode.png[/IMG][/URL]
Once you have done this, you are ready to begin… Sort of. Anyways, first off, note the toolbar at the top going horizontally and the folders on the left side. These are your friends.

[URL=http://img170.imageshack.us/i/gamemakericons.png/][IMG]http://img170.imageshack.us/img170/3846/gamemakericons.png[/IMG][/URL]
From left to right, you have: New File, Open, Save, Create Executable, Publish, Play Game, Debug Mode, Create Sprite, Create Sound, Create Background, Create Path, Create Script, Create Font, Create Time line, Create Object, Create Room.

Now, these are alot of simple options. We will be focusing on four of them: Create Sprite, Create Object, Create Room, and play. Before we begin, you should know some things about these. The Sprites are basicly the games graphics. They have no coding, they do not work on their own, they are lifeless. Think of them as a mask… They cover up a living object, but they themselves do nothing.

Objects are what makes everything work. You should be spending most of your time here. This is where you code the object, give it a sprite, a name, and set to work making it, well, work.

Rooms are basicly levels. It’s a simple yet effective tool that allows you to place backgrounds, tilesets and objects anywhere on a grid.

The play button… Uh, it plays the game.

Making your first Sprite ( Isn’t it cute :3 )

Click on the Red Pacman button at the top. This is the Create Sprite button. When you create a sprite, you come up with a complicated-looking menu, but we don’t need to pay attention to that.

[URL=http://img43.imageshack.us/i/spritemenuguide.png/][IMG]http://img43.imageshack.us/img43/9849/spritemenuguide.png[/IMG][/URL]
Red Circle: The name of your sprite. Name it spr_paddle. Sounds wierd? Yeah, I can explain. See, when coding, you’ll need to change sprites alot. If there is no underscore between words, it will treat them as two different words ( spr and paddle ). The spr stands for sprite. If you have an object ( obj ) named paddle, and a sprite, the code will not know which you are talking about. And no capitals makes it easier and faster to code.

Green Circle: Normally you will have transparent unchecked, but this time, uncheck it.

Black Circle: Click the “Edit Sprite” After you have named it and unchecked transparent. This will bring you to the Sprite editting menu.

[URL=http://img38.imageshack.us/i/gamemakerspriteeditorme.png/][IMG]http://img38.imageshack.us/img38/2469/gamemakerspriteeditorme.png[/IMG][/URL]
This is the menu I just said. It’s very simple, actually. The Dark Green square is your sprite- Just a placeholder. If you double-click it, it will bring you to…

[URL=http://img37.imageshack.us/i/spritedrawingmenu.png/][IMG]http://img37.imageshack.us/img37/9953/spritedrawingmenu.png[/IMG][/URL]

Another menu! This one is the true Sprite Editor, it allow you to create sprites. It is quite similiar to paint, speaking of which, later on you’ll use paint mostly to make the sprites. Don’t ask questions, it’s easier and allows for better precision. Anyways, let’s make that paddle. In pong, paddles are typically white, so i’m going to use the color white. You do what you want. They’re also normally a rectange shape, so let’s do that. Near the top-left corner there is a white sheet of paper. Click on it.

[URL=http://img21.imageshack.us/i/gamemakernewimage.png/][IMG]http://img21.imageshack.us/img21/7440/gamemakernewimage.png[/IMG][/URL]
On this menu, it has two text fields. One is how many pixels wide it is, and the other how many pixels high. Let’s make it 16×64 ( 16 wide, 64 high ) and click okay.

Your green square should have changed to a rectangle. Whew, that wasn’t so hard! On the right is a color palette, click white and use the filler tool on the rectangle. It should look like this:

[URL=http://img185.imageshack.us/i/gamemakerwhitepaddle.png/][IMG]http://img185.imageshack.us/img185/2546/gamemakerwhitepaddle.png[/IMG][/URL]
If it looks like that ( or whatever color you used ), you followed me well. Otherwise, you’re just being a lose cannon programmer. Not that thats bad…

Alright, now we can get out of this sprite editor. Keep clicking the checkmarks until you’re back to the basic Game Maker screen. Your folder menu on the left should have “spr_paddle” in the sprite folder. Now the real “fun” begins. The programming!

Making and Coding your first object ( Is this a typing game or a game making program? )

Note: I have a habit of saving after every change. You should get into this habit to. Don’t want to lose any data. You can name the file whatever you want.

Alright, you got your sprite. Time to make the base object. Click on the Blue Ball on the top menu ( Next to the hourglass and the room icon ).

[URL=http://img169.imageshack.us/i/gamemakerobjectmenu.png/][IMG]http://img169.imageshack.us/img169/6275/gamemakerobjectmenu.png[/IMG][/URL]

This is the Object menu. Note that under the “Objects” file on the left side a new item has appeared, object0. On the top-left side of the menu, rename object0 to “obj_paddle”. Now it’s named, but we need to make it visible- there’s no sprite set to it. Not to worry, the process takes 2 clicks. Under the name screen, you see a menu that says . Click on it, and select spr_paddle. Viola! They are one and the same.

[URL=http://img231.imageshack.us/i/gamemakerobjectcodemenu.png/][IMG]http://img231.imageshack.us/img231/8877/gamemakerobjectcodemenu.png[/IMG][/URL]

Now is a good time to talk about all those options on the right side of the menu. Below is the first tab, the “Move” tab. Each one of these icons do something different. There are 7 tabs in all, Move, Main1, Main2, Control, Score, Extra and Draw. You can look through them if you want, but right now we only need the move tab.

If this menu is turning you off, do not worry. This is the beginner menu, the “Drag and drop” phase of programming. Later, we will learn of the GML- Game Maker Language. The true Lua, C++ and Actionscript of Game Maker. Later. For now, once you are on the “move” tab, we can begin.

The first icon is eight arrows in different directions. This main seem like the obvious choice, but do NOT, under any circumstances, ever use it. Instead, go to the “jump” section, and right click on the arrow pointing to an x.

This is the- What? Whats this? We need an event first? What the hell is it?  I’ve never-

[URL=http://img12.imageshack.us/i/gamemakereventsmenu.png/][IMG]http://img12.imageshack.us/img12/9421/gamemakereventsmenu.png[/IMG][/URL]
…Oh. Well, click on the “Add Event” button I guess. This is quite an important menu. Clicking on it comes up with a bunch of different buttons and tabs.

[URL=http://img33.imageshack.us/i/gamemakereventselector.png/][IMG]http://img33.imageshack.us/img33/8421/gamemakereventselector.png[/IMG][/URL]
Alright then. We have all these options, but for now, click on the Keyboard tab ( Bottom-left corner ). Another list will pop up. At the top, we have the basic directional keys. Click on “up”, and the event will be added to your list as .

[URL=http://img194.imageshack.us/i/gamemakerupevent.png/][IMG]http://img194.imageshack.us/img194/1706/gamemakerupevent.png[/IMG][/URL]
Now we can begin. Hghlight the “up” event, and select the arrow pointing to the x on the move tab. Right click it. We get a menu- similiar to most other move menu’s, but this one is the most reliable and glitch-less.

[URL=http://img529.imageshack.us/i/gamemakerjtpmenu.png/][IMG]http://img529.imageshack.us/img529/6122/gamemakerjtpmenu.png[/IMG][/URL]
Black Circle: 3 different options here. Select self, this mean that the event will happen to this object. The option “other” will make a seperate object perform wih action, and “Object” will make all objects of it’s type perform it.

Red Circle: Fill out the form like so. y-2 means that the object will go up 2 pixels when you hold down the button. X is horizontal and Y is vertical.

Green Circle: Make sure relative is checked. Relative means it will perform the action relative to the objects current position/status. In example, if you have to go -22 y and 5 x, and set it to relative, it will move -22 y and 5 x from it’s current position. If left unchecked, it will move to the fixed location of -22 y and 5 x.

Once done, press okay and an action icon should appear on your Up event screen. We’re going places. Now, we also want it to move down, so, right click the event and select duplicate. It will come up with an events menu, so select keyboard and then select down. This creates another event on the table but keeps the previous events actions. You should still have the Jump To event on both.

[URL=http://img188.imageshack.us/i/gamemakereventupanddown.png/][IMG]http://img188.imageshack.us/img188/2261/gamemakereventupanddown.png[/IMG][/URL]

However, pressing down will still make your paddle move up! No problem, highlight and right click “Jump-To Position”. Change the -2 y to just 2 y, and you’re done.

Now we have the paddle set up to move up and down, so we want to test it Right? Right. So, let’s test it. Click on the green “Play” arrow at the top- what the? We need a room to run the game. I was hoping we could test it right here and now…

Creating your first room ( It’s got alot of space, but a little less gray would be nice )

Click on the Create Room button at the top. It’s to the right of the “Create Object” ( Blue Circle ) icon. A little window should appear, go ahead and maximize it.

[URL=http://img197.imageshack.us/i/gamemakerroommenu.png/][IMG]http://img197.imageshack.us/img197/5189/gamemakerroommenu.png[/IMG][/URL]
The room editor is fairly simple. On the left is a grey box. It should have your paddle already selected. Click anywhere in the room to place the object. For your information, there is a few waysto help youplace objects. Hold Shift and Click+Dragging the mouse will place objects wherever yur mouse goes. Holding Alt gets rid of the grid until you release it. Hover your mouse over a misplaced object, hold control anddrag it around. Right Mouse button deletes objects, Left Mouse Button creates.

To test it, you can just place the paddle wherever you want. I prefer to place it where it’s probably going to be when we finish up the game.

[URL=http://img39.imageshack.us/i/gamemakerpaddleroom.png/][IMG]http://img39.imageshack.us/img39/4071/gamemakerpaddleroom.png[/IMG][/URL]

Kind of hard to see Solid white on a solid light gray background, so lets make the backgroundblack. Above the object choosing square, there are five tabs. Object, Background, Settings, Tiles andViews. Click on Background.

[URL=http://img248.imageshack.us/i/gamemakerbackgroundmenu.png/][IMG]http://img248.imageshack.us/img248/1876/gamemakerbackgroundmenu.png[/IMG][/URL]
There is a few different things to mess with here, but let’s keep it simple and do what we came here for. On the top of the menu, there should be a line that says “Background Color:”. Click next to it, were the Solid Light Gray Box is. This opens up a palette that allows you to select any color. Choose black.

[URL=http://img27.imageshack.us/i/gamemakerblackbackgroun.png/][IMG]http://img27.imageshack.us/img27/7009/gamemakerblackbackgroun.png[/IMG][/URL]
There we go. Negative colors, black and white, monochrome. Now that we have that, you can mess around with the settings. Changing the rooms width and height is very important later on, and is right now. The other tabs are best left untouched for now.

Testing your game ( Finally? )

Well, we have the basics here. A sprite, an object, a room and a play button. Hopefully you’ve listened to me explaining them, because otherwise, you’ll never move up and above the Atari stage.

Right then, you are ready to test your game. Click the check marks on all the windows and save your game, andthen click the green arrow on the top menu. The game will load for a second, and you’re in! You can move up and down ( rather slowly right now ) using the arrow keys. And thats about it, for now. If you don’t like the speed, you can change the values of the “Jump-to-position” action of the paddle event. Make sure for the up event you add a – sign before the number.

Messing with the file ( What happens if I do this? Oh. That. Cool. )

Now that you have a bare bones pong game, why not tweak it? You already know how to make it move up and down. Hell, with that in mind, you can do alot of things.

Here are some things you might want to try:

1. Make a second player. This is simple. Duplicate the first player, and just change the and to andor something. Make sure you add the second player to the room on the oposite side!

2. Make level boundries. This is also simple. All you have to do is have the game check the paddles y position. Go to the Object panel and select the Control tab. At the bottom is Variables, right click test variable. For the variable in question, use y. I’ll leave it up to you to expiriment and see what you come up with.

Well, see you later in Tutorial 2. I will be describing AI in detail, as well as showing the above two challenges and how to complete them. We will be finishing the game.