An example project
Now that you've got everything set up and you know some of your way around the IDE, let's start with an example game to get started with using GameMaker and to make sure everything is working correctly. You'll first want to create a new sprite, either by right-clicking on the Sprites folder and selecting Create Sprite or clicking on the Pac-Man symbol located on the top bar. This will open a new window that allows you to edit all of the properties of your new sprite. We're going to make a simple sprite that looks like a square.
Tip
Downloading the example code
You can download the example code files from your account at http://www.packtpub.com for all the Packt Publishing books you have purchased. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.
Naming convention – resource prefixes
Start with naming it, but don't just name it testSprite or something like that. There are some very important points to be made in naming conventions of resources. It is a good idea to choose names that are related to the resources you are naming. The most important consideration is that your naming should be consistent regardless of the naming convention you choose. If you start using camelCase, always use it. camelCase is where the first letter of each name is lowercase, but every next word in the name has a capital first letter, for example, myLastName or playerHorizontalSpeed. If you always use underscores for naming (and this might be easier since GameMaker's built-in variables and functions use underscores for naming, an example of this would be the variable image_index), then always use underscores.
Also, you must never have spaces in any of your names because in coding, this would cause GameMaker to think they are two separate names and your game will not function properly. It is also good practice to follow and incorporate the resource prefixes. The GameMaker compiler does not recognize prefixes; they are simply part of the name, but all of your resources must have different names, as resource types are not distinguished by the compiler. Using prefixes is an easy way to group your resources though (so using spr_player and obj_player is better than player and player1).
Using the prefixes is also very helpful for you and any other programmers, since using them allows you to easily distinguish resource types. The resource prefixes are what help to distinguish between a sprite named test and an object named test. Also, make sure that you use meaningful names so that you can easily find what you're looking for or figure out what a resource is just by name. Following is a chart of the resource types and suggested prefixes. Eventually, you will have many resources in your games and will need to easily distinguish one from another.
|
Resource type |
Acceptable prefix(es) |
Example(s) |
|---|---|---|
|
Sprites |
|
|
|
Sounds |
|
|
|
Backgrounds |
|
|
|
Scripts |
|
|
|
Fonts |
|
|
|
Objects |
|
|
|
Rooms |
|
|
We recommend you use these prefixes when naming your resources, as they are universal and will help you to stay consistent in your naming. This is not a complete list of resources and prefixes but this table should give you a good sense of the naming convention.
Drawing the sprite
It's time to get started with sprites! Create your first sprite by right-clicking the Sprites folder and choosing Create Sprite or clicking on the Pac-Man icon in the toolbar. As discussed, we suggest naming your sprite spr_square or something similar, so enter that in the Name field. Next, you can select either the Load Sprite or Edit Sprite options. The first allows you to select an image that you already have saved on your computer, so select that if you already have an image of a square premade or prefer to use external programs for editing your sprites. GameMaker supports a wide array of image types including .bmp, .gif, .jpg, .png, and .swf. We're going to go through the built-in sprite editor, but in time, you will probably be using both approaches of sprite editing.
To start making your own images, you'll first have to click on Edit Sprite. Right now, the only thing you need to know how to do is to make a new
subimage (more on these later) inside of your sprite. Click on the white dog-eared paper next to the green checkmark (which is the equivalent of OK in all windows and options in GameMaker: Studio). It will ask you what you want the dimensions of the image to be, which carry across all subimages in the sprite. Leave the 32 by 32 default alone for now—we're just making a simple square:
Now double-click on the new subimage that was created, which should be labeled as image 0, as GameMaker: Studio uses zero-based indexing (where the first entry of something, in this case subimages in a sprite, is entry 0), and the sprite editor will open, which should look like this:
The left-hand side of the editor consists of your tools and dot sizes, while the right-hand side is your color picker. Two colors can be held at a time, one corresponding to each mouse button (left and right). As far as the tools, the most important ones would be the pencil for basic drawing, the eraser for erasing, the selection tool to select an area for manipulation, and the fill option to fill in an area with a single color. Hovering over any of these tools tells you their function and hotkey. We're only going to use one of these tools right now. Start making your square by selecting any color from the color picker. Next, use the fill option to fill in the entire grid with your selected color and then click on the green checkmark three times (in the three separate windows of course) to completely close out of the sprite and return to the main IDE.
Creating an object
Now that our sprite is finished up, we're going to create a basic object to put in our game. It is worth pointing out an important distinction here. Sprites are simply graphics to be used in your game while objects are programmed with events and actions in order to function in the game. Without an object, the game is just going to be an unchanging screen. Objects are what control and do everything in the game. Start with creating your object, named obj_square with your method of choice. The following window should appear:
To assign a sprite to your object (which is not always necessary, in fact many objects in your games will not use sprites) select the blue button in the box labeled Sprite and pick the sprite we previously created, spr_square. Don't worry about anything else you see on the left sidebar, we will get into this in more detail later. For now, focus your attention on the first large box, labeled Events. Events are simply things that happen in your game, such as player input or when an instance of an object is created, and they are handled similarly to if statements, and run the associated Action(s). Actions are the same as statements (what should happen based on the event). So one event might be a keypress of the space key, and when that occurs, the player should jump. In pseudo-code for that event, you might say, if the space key is pressed, then alter the player's y coordinate so that they rise. Then, once they've reached a certain point, change the y coordinate so that the player falls. Right now, we shall be putting an event into our game. Select the Add Event button at the bottom, select the Draw button, followed by the Draw menu option. This is a kind of event that is run over and over for each instance until the instance is destroyed (removed from the game), and is used for rendering. You can display whatever you want: shapes, text, sprites, and much more.
Another event, the Step event, is similar to this (it runs over and over) but it does not control rendering. You shouldn't use the Draw event as a replacement Step event though we use both together (or just one of them if you only need one of them).
Now focus on the right sidebar. This is where all of your available Actions are, and whatever you drag into the Actions pane will be run when the associated event occurs. Select the draw tab at the bottom of the list of tabs on the right and then drag the Draw Self box (the first action) into the Actions window. This will draw in the room the sprite of the instance of the object that is calling the function. You do not always need to use the function, but we do need it now because we have manually included a Draw event. If we don't include it, then the square won't be displayed; only whatever we tell it to display in the next step will be displayed. If you manually include a Draw event in your object, it will not draw its sprite and will only draw what you tell it to draw inside this event. So if we don't tell the object to draw itself in this event, you will see no squares drawn. Now, drag the Draw Text box, the fourth option or the first in the second row, into the Actions box:
This should open up a box that looks like the one in the preceding screenshot where you can edit the arguments that you pass to the Draw Text function, which include, in this case, the text itself and the x/y coordinates where you want to draw the text. Edit the text field so that it holds, Hello, World! (no quotes) but do not enter anything into the x and y fields yet—there is something unexpected about these.
Coordinate planes in GameMaker
Typically, on a coordinate plane, your x value would increase as you move right and your y value would increase as you move up. This stays true for x, but not for y. For y, the value will increase as you move down, meaning that the fourth quadrant, which usually holds negative y values, will hold positive y values, and the first quadrant, usually holding positive y values, will hold negative y values. This is a very important note to remember when thinking about where things will be placed in your game. Although, do know that the room only exists in your fourth quadrant, and so what is shown on your screen is also only the fourth quadrant. However, everything can be placed anywhere, so you can actually place objects and whatever you draw at negative coordinates, but of course, either none or only a portion of whatever you have placed will be shown in the game window. A third (or z) axis does exist; it is called depth and refers to the placement of objects in your game in terms of being above and below each other. You will learn about this in depth in the next chapter. Here is a simple coordinate plane to explain this:
Now that you know this, we can resume passing arguments to the Draw Text function. For this example, we are going to have a room with dimensions of 1024 by 768 pixels, and we want this message to appear in the middle of the room, so we're going to pass an x value of 512 and a y value of 384 to the function. Do not select the Relative checkbox, as what this would do is have the message appear at (512, 348) relative to the origin of the square object, which, unless we put the object exactly in the top left corner of the room (which we won't), will have the message display somewhere not in the middle. Select the OK button twice to get back to the main IDE.
Creating a room
We're now going to create one more final resource, and that is a room. Without a room, the game will not compile, so you must always have at least one room, even if it is completely empty. A room is where your game takes place and where your objects are placed. While your objects control the mechanics of your game, they have to be placed in a room for them to actually be used. Create a room with your method of choice and name it rm_main or something similar. Many games contain sandbox or testing rooms that the player wouldn't have access to, and are just for testing various parts of your game. Even though we only have one object in our game and aren't really testing anything, you can think of this room as a testing room:
The default dimensions, which we will be using, are already set, as is the room speed, or how many times per second each object in the room runs its code. The room speed of 30 is perfectly fine for us right now. Select the objects tab on the left sidebar, and the only object we have, obj_square, will be already assigned to your left mouse button. Click anywhere in the room to place this object, and place more than one. For this example, 10 would be a good number. Click on the green checkmark when you are done, and you will have finished creating your first game in GameMaker: Studio.
Testing your game
Only one step is left, and that is compiling and running your game. Press F5 on your keyboard or click on the green arrow on the top bar. This will begin the compilation process and then run your game. If everything worked correctly, then you should see a game window that looks similar to this, but with the squares wherever you placed them and in whatever color you chose for the sprite:
If your game window doesn't look like this, then check whether you followed all the instructions correctly (such as choosing the right event and the right parameters for your Draw Text action). You might want to check it with the sample code included with this book to ensure that everything is correct. If that doesn't work, perform a clean build with F7 to make sure your next compilation will start completely fresh so that any compiler-induced errors will not occur. If both of those failed to help you, look at the compiler window at the bottom to see if it tells you anything about errors:
If none of these options work, then you might need to perform a fresh install of GameMaker: Studio. YoYo Games has provided an excellent guide for this, which is located at http://help.yoyogames.com/entries/37903916-How-to-perform-a-fresh-install.
What's happening here in the game is that one instance of the message Hello, World! and one instance of obj_square are being created for each instance of the object that you placed in the room. The top-left corner of the message is where the coordinates we put in earlier are applied, which is why the message isn't precisely in the center of the room. The reason that you only see one instance of that message rather than many is because we told all the objects to display a message at that exact location. In turn, all of these instances of the message are actually overlapping directly on top of one another.
