In this first simple tutorial, we will explore the GameMaker constructs of Rooms, backgrounds, sprites, and objects. We will see how we can easily add graphics through the user-friendly GameMaker Studio UI and create a moving scene for our game. We will also get a glimpse at how GameMaker organizes our assets and how those assets relate to one another in the context of our game. By the end of this quick tutorial, you will have a character running (gliding really) through a spooky scrolling nighttime world.

Getting GameMaker Studio

One of the things that make GameMaker different from other ways of making games is how easy it is to set up your development environment and get started. It doesn’t deserve its own tutorial. You can search for and install the free version of GameMaker Studio on Steam or get it directly from here. You only need the free version to complete these tutorials.

Creating the first project

Open GameMaker Studio and select File | New Project. Name the project Scary Room as seen in the next image.

Click the Create button and we can move on. Before we start making the game for real identify and look over the project explorer window on the left-hand side of GameMaker Studio.

Notice the names of the different folders where our game assets will go. In this tutorial (you probably could have worked it out for yourself) we will add assets to the Sprites, Backgrounds, Objects, and Rooms folders.

Creating and explaining rooms

In GameMaker we can think of a room as a level in our game. If you need a forest level, a cave level, and a city level, then it is likely you will have three rooms called room_forest, room_cave, and room_city. The names are arbitrary but giving them clear and distinct names will help us as our projects have more and more assets. This project will have just one room that we will call room_scary. To be clear, a room can be anything at all, even a whole game world. They are not limited to indoor scenes as the name might imply.

To create our scary room right-click on the Rooms folder and select Create Room. We now have a window where we can work on and configure our room.

In the Name field type Scary and in the Height field type 640 because this matches the height of our background graphic. Change Speed to 60 as this is a good target number of animation frames per second to aim for. Leave the Width property at its default of 1024. This is smaller than the width of our background graphics and will make it easy for us to create a nice smooth scrolling effect in a minute.

To finish, click the green tick button to save our work so far.

Let’s add the background and foreground.

Adding and animating a background and a foreground

To add a new background you first need to download the graphics below. You can provide your own background if you like. It won’t be too challenging to adjust the rest of this tutorial slightly to adapt it to your own background.

Here is the underground.png graphic

here is the grass.png graphic

Now follow these steps.

1. Right-click on the Backgrounds folder in the project explorer and select Create Background
2. Change the Name field to Underground
3. Next, click the Load Background button and import the underground.png graphic. The other fields can be left as they are
4. Click the OK button to save the new background and clear the window
5. Reopen our room by double-clicking on Scary in the Rooms folder
6. Find and select the Backgrounds tab in the Room Properties window that we just opened.
7. Make sure Background 0 is selected and then click the icon just to the right of the <no background> text
8. Choose Underground
9. Use the scroll bar to reveal the Hor. Speed property and enter a value of 2
10. Save the room complete with its new scrolling background by clicking the little green tick, as we did before

Here is an image of the properties of the Room Properties window just before I clicked the green tick icon.

Note that this image has been stitched together to show all the properties at once. You will need to use the scroll bars.

Here is another set of very similar steps to add the grass at the bottom of the screen and scroll it a little bit faster.

1. Right-click on the Backgrounds folder in the project explorer and select Create Background
2. Change the Name field to Grass
3. Next, click the Load Background button and import the grass.png graphic. The other fields can be left as they are
4. Click the OK button to save the new background and clear the window
5. Reopen our room by double-clicking on Scary in the Rooms folder
6. Find and select the Backgrounds tab in the Room Properties window that we just opened.
7. Make sure Background 7 is selected and then click the icon just to the right of the <no background> text
8. Choose Grass
9. Check the Foreground Image checkbox so that the grass is shown in front of everything else in the room
10. Uncheck Tile Vert so the image isn’t repeated vertically.
11. In the Y field type 560 to position the Grass background vertically
12. Use the scroll bar to reveal the Hor. Speed property and enter a value of 4
13. Save the room complete with its new scrolling background by clicking the little green tick, as we did before

Here is an image of the properties of the Room Properties window just before I clicked the green tick icon.

This image has been stitched as well. Use the scroll bar to see all these properties.

At this point, you could run the game and see the backgrounds scrolling smoothly. We are so close to finishing though let’s just quickly wrap things up.

Creating a sprite

Download the bob.png graphic below.

Say hi to Bob.

Right-click the Sprites folder in the project explorer and select Create Sprite. In the Name field type Bob. Now click the Load Sprite button, browse to bob.png and import it into the project. Finally, click the OK button and we have a new sprite.

A sprite is just an image with a few extra properties. What these extra properties do we will explore in later projects but it is not sufficient on its own to do anything significant in our games. For that, we need an object.

Our first GameMaker object

Objects in GameMaker are the building blocks of almost everything that can do anything at all. A player character is an object a bad guy is an object a bullet, a boulder, or a fridge; they are all objects. Objects can be given an appearance by attaching a sprite. You can see where this is going now.

Right-click on the Objects folder in the project explorer and select Create Object. Change the Name field to Player. Click the icon next to the <no sprite> text and select Bob. Click OK. This is all that we need to do to get a simple game object for this project.

To add the Player object to the room double click Scary in the Rooms folder. Select the Objects tab and next to the <undefined> text click the icon and choose Player. You can now click the scene and add a Player object. Actually, you can click the scene over and over to add lots of instances of the same object. Notice also you can move the objects around by dragging them with the mouse.

I know. I know. I can be a bit silly sometimes.

Having added one or perhaps many Player objects to the scene you can now run the game.

Playing the game

You can now run the game by clicking on the green play icon in the GameMaker Studio toolbar.

Bob will glide effortlessly through the scary world we have just created. He is partially obscured by the grassy foreground while the cave is behind him scrolling more slowly to give the effect of distance.

What next

The limitations of our game are obvious. For one, it’s not really a game. We can’t actually play it! Over the coming tutorials, we will gradually solve all the missing features and build up a playable game. Most likely this will be a platformer because it is arguably the genre that GameMaker Studio excels at making it easy for us. In the next tutorial, we will animate our Bob sprite as well as learn to control him.