In this tutorial we’ll use the Hero’s Trail project to understand how GameMaker works, and also modify various parts of the game, so you can make it your own!
This tutorial is divided into the following sections:
Scroll down if you already have Hero's Trail open.
When you open GameMaker, click on "New" to see the Template menu. Then select the "Hero's Trail Base - GML Visual" project, enter your project name & directory and hit "Let's Go!".
This will open your new project where you can modify the template and play it. To play the game you can click on the Run button at the top, or press F5 on your keyboard.
After you’re done exploring the game, close the game window and we'll take a look at the GM IDE (“Integrated Development Environment”, or simply put, the program’s user interface!).
The GameMaker window consists of two main parts: the Workspace and the Asset Browser.
This is where you edit assets, such as your images, objects, levels and more.
This is where your assets are created and listed, and double-clicking on any asset here opens it up in the Workspace.
You can open multiple workspaces as tabs, similar to tabs in an
You will see many folders in the Asset Browser, which are called
“groups”. You can expand a group and see the assets inside
Games are made using ‘assets’ which are the building blocks of your games: any images, objects and levels are created as assets and can be edited inside the workspace.
Your final game will be made up of many different kinds of assets:
There are three types of assets that are most crucial in GM:
A Sprite is an image that can be used anywhere in the game (e.g.: for objects, backgrounds, animations, etc.).
An Object can be used as an interactive element in your game, such as the player, an enemy, a coin, etc.
A Room serves as a specific screen in your game, such as a level or the main menu.
Let’s look at a sprite asset in the Hero’s Trail project.
In the Asset Browser (on your right), open the “Sprites” group and then open the “Baddie” group.
Here you will find different kinds of sprites for the enemy under the “Attack” and “Idle_Walk” groups.
In the “Idle_Walk” group, double click on the spr_baddie_idle asset to open it in the Workspace.
You will see the Sprite Editor open up in the Workspace, where you can preview each frame of the animated sprite and hit Play to see the baddie in action!
This is just one of the many “asset editors” in GameMaker. You can now close this, or if you want to start tinkering with the project already, you can click on either “Edit Image” to modify this sprite or draw on it, or “Import” to load any other image file you want.
You can use objects to create interactive elements in your games, such as enemies, barrels, coins, and so on. There is a basic workflow that you can use to create such objects.
First create a Sprite, which serves as the image for your object. This can be an animation too.
Then create an Object and add “Events” to it. Events allow the object to respond to player input or perform its own behaviour.
Finally, place the Object inside a Room (which is a level), which creates an Instance of that object. You can place multiple instances of an object in a room (allowing you to place multiple enemies and coins).
This workflow can be simplified as shown below:
It’s super easy to create a new sprite and even draw your own image right inside GameMaker! Here’s how you can create a new sprite asset:
Go to the "Create Asset" menu at the top of the Asset Browser.
Select “Sprites” and click on “Create” (or just double-click on the “Sprites” button).
This will create a new Sprite asset in the Asset Browser and allow you to give it a name.
You can then drag the asset and place it into any of the existing groups, or right-click in the Asset Browser and select “Create Group” to add a new group for your assets.
If you select a group before creating an asset, the new asset will be created inside the selected group.
In the new sprite's Sprite Editor window, you can resize the sprite and then select “Edit Image” to draw on it:
Doing this will open the Image Editor, where you can use the various drawing tools to create and animate something entirely new!
Levels are created using Room assets, and the Hero’s Trail project already has a few rooms, one of which is the first level that opens when you play the game.
We’ll open this room and move a few things around so we can get a hang of the Room Editor!
In the Asset Browser, expand the “Rooms” group and double-click on rm_level_1:
This will open the Room Editor, which has the following main parts:
The Room Canvas is where you will edit your level, and on the left you have various menus for managing layers and the room itself.
The Layers panel contains all the layers in the room, and each layer simply contains assets (such as sprites, tiles, and object instances). We’ll focus on one of these layers and move some things around:
In the Layers panel, scroll down and select the “Instances” layer.
This is an Instance Layer where you can place instances of objects, such as the player, enemies, barrels, etc..
Once you have the layer selected, you can go into the room area, select the player, an enemy or a barrel and move it anywhere you like!
NOTE: Moving the enemies may not change the path they walk on. Changing and creating enemy paths is covered in Part 4 of the tutorial.
When you have the “Instances” layer selected, you can drag objects from the Asset Browser into the room to create new instances!
Tiles are essentially non-interactive images that are placed around the room, and unlike sprites, they’re grouped into a single asset known as a “Tile Set”.
Here is one of the Tile Sets in this project (present in the “Tile Sets” group):
You can see that it contains multiple tiles (square images), which is why it's called a "Tile Set".
This Tile Set is used for the floor of a level, appearing below the player. You can actually go in the room and edit these tiles right now:
Open the rm_level_1 room.
In the Layers panel, expand the “Visuals_Below_Instances” folder.
Select the “Tiles_Floor” layer. This is a Tile Layer that uses the Tile Set shown above and displays the floor tiles.
You can now select a tile from the panel on the right side of the IDE, and place it anywhere in the room. You can also right click to remove a tile (or use the eraser tool from the Toolbox at the top).
Changing Level Structure
You can follow these steps to change the level and mold it the way you like:
- In the rm_level_1 room, select the "Tiles_Walls_Above" layer.
Next to the Asset Browser, open the "Room Editor" tab.
Under "Libraries", select wall.
This is an auto-tile library set up in the project, which you can use to place walls in the level. Use this to create your level's layout.
Left-click to place a wall, and right-click to erase existing tiles.
- Now we need to place the actual walls below these top tiles: for this, select the "Tiles_Walls_Below" layer (it's near the bottom of the layer list).
From the Room Editor tab next to the Asset Browser, place the wall tiles below your top walls:
Your walls are now visually ready! We just need to set up collisions.
- Collisions are handled by instances placed in the layer "Wall_Collisions" (near the top of the list).
It is invisible by default, so make that layer visible by clicking on the eye icon.
Simply move the instances around to adjust your wall collisions.
If you need to add new instances, drag and drop obj_editor_wall from Objects -> Level into the room.
The wall instances do not cover the top part of the wall so the player can walk behind it (as you can see below).
- This is essentially how you remove and add walls in your level!
Now go ahead and modify level 1, or even better, go into rm_level_2 and make it your own as we have left it mostly empty for you!
If you would like to read more about the Sandbox project and its assets in detail, please see the Hero’s Trail Project Breakdown.
We’ll now continue to customize this project and develop our own game out of it, complete with interactive level elements such as chests and gates, power ups, abilities, new enemies, and much more!
All Hero's Trail tutorials demonstrate GML Visual action blocks using screenshots, where you have the actual actions on the left (which is how you need to organise them), and comments on the right explaining what each action does.
Here is an example of such a screenshot:
While there will also be explanations within the tutorial text itself, it is recommended that you pay attention to the comments attached to each action in a screenshot.