How to Make an RPG in GameMaker

You can access the full course here: MAKE A MINI TURN-BASED RPG FROM SCRATCH IN GAMEMAKER

Introduction

Welcome to this GameMaker RPG tutorial!

In this guide, we’ll walk through the essential steps to create and set up action buttons for turn-based combat scenarios in your game. This includes creating button sprites for actions like basic hit, healing, and casting spells like fireball – complete with color changes for hovering effects.

By the end, you’ll have dynamic and interactive combat action buttons to enhance your game’s interface and player experience. You can also explore our full course, Make a Mini Turn-Based RPG from Scratch in GameMaker which covers GameMaker RPGs in-depth.

This GameMaker RPG tutorial assumes some familiarity with GameMaker Studio, including the basics of object creation and setting up events. If you’re comfortable with these concepts, you’re ready to dive in!

Project Files

For your convenience, we have included a set of project files that contain the assets used in this GameMaker RPG tutorial. You can download them here: GameMaker RPG assets

FREE COURSES AT ZENVA

LEARN GAME DEVELOPMENT, PYTHON AND MORE

ACCESS FOR FREE

AVAILABLE FOR A LIMITED TIME ONLY

Combat Action Button Sprites

In this GameMaker RPG tutorial, we will start by creating the sprites for our combat action buttons in a game. Our player will be able to perform various combat actions such as a basic hit, heal, and fireball. To make this possible, we will be using buttons with specific sprites assigned to them.

Creating the Sprites

Firstly, we need to create a new group in the sprites folder for better organization. We will name this folder ‘Combat Actions’. The sprites will be created in this folder. We will name the sprite ‘SPR.CA’, where ‘CA’ stands for combat action button. We are creating a separate folder because we will also have a second sprite for when the button is hovered over. This will allow us to change the button color and provide a good visual feel to the player.

Resizing the Canvas

Next, we need to resize our canvas. For our button, we will be using a size of 320 by 64. After applying these dimensions, we will have our button.

Creating the Sprite

For our button, we will first create a two-pixel border that is completely white. We will use a rectangle tool outline for this. After creating the border, we will fill it in with a blue color using the Fill tool.

Select the Fill tool
Choose the color blue (you can copy the color code provided in the video)
Press OK
Fill in the border

We will then rename this button as ‘hover button’ because this will be the button that appears when the mouse is hovered over it. We will then duplicate this button and create a ‘normal button’. For the normal button, we will edit the image and modify the color to a brighter shade of blue.

Duplicate the hover button
Rename it as 'normal button'
Edit the image
Modify the color to a brighter shade of blue
Use the Fill tool to fill in the border

Now, we have two buttons – a normal button and a hover button. They are similar in appearance as they are both blue but the hover button is darker. The difference between the two buttons will be more evident when we create the hover effect in a section further below in our GameMaker RPG tutorial.

With this, we have successfully set up both sprites for our combat action buttons.

Combat Action Buttons Parent

In this next section of our GameMaker RPG tutorial, we’ll build the CombatActionButtons parent in our RPG game using the GameMaker game engine. The CombatActionButtons parent will serve as the main node, or object, from which all different CombatActionButtons will be derived. This approach allows us to define some shared properties and variables for all of our buttons, making it easier to implement more combat actions in the future.

Let’s start by creating the parent object.

Creating the CombatActionButtons Parent

Firstly, navigate to the Objects folder and create a new folder named CombatActions. In this new folder, create a new object called obj_ca (short for CombatActionButton).

The main advantage of having a parent object is that you can define some shared variables that can be modified in all of its children. All these variables will be declared in the create event. In our case, we are going to have two strings and two integers:

• display_name: This will be the text displayed on our UI buttons. It will be an empty string initially and will be assigned a string value in the different children. For example, it could be ‘basic hit’ or ‘heal’.
• action_type: This string will determine the type of action a button will perform, such as causing damage or healing a character.
• damage: This integer will represent the amount of damage a combat action can inflict. It will be set to zero initially and will be assigned a value in the corresponding children.
• heal_amount: Similar to damage, this integer will represent the amount of health a combat action can restore. It will also be set to zero initially and will be assigned a value in the corresponding children.

Let’s see how to declare these variables:

display_name = "";
action_type = "";
damage = 0;
heal_amount = 0;

Creating the First Combat Action Button

Now, let’s create our first combat action button. In the CombatActions folder, create a new object and call it obj_basic_hit_button. Then, load in the corresponding sprite for this button.

After that, set its parent to be the obj_ca button parent. This will allow the basic hit button to inherit the create event from the parent, giving it access to all the variables such as display_name. To modify these variables, you can use the following code:

event_inherited();
display_name = "Basic Hit";

The event_inherited() function allows the child object to inherit the create event from its parent. After that, we change the display_name to “Basic Hit”. If you run your game now, you should be able to see the basic hit button with its display_name set to “Basic Hit”.

That’s it for this part of our GameMaker RPG tutorial. In the next steps, we’ll continue to build the combat system by adding more combat action buttons and implementing their functionality.

Creating Combat Action Buttons

In this next part of our GameMaker RPG tutorial, we will create all the combat action buttons for our game. We have already created a basic hit button and defined some variables for it. Now, we will create more buttons and modify their respective variables. The process involves two steps:

1. Creating the objects for the combat action buttons
2. Modifying the variables within their creation events

Creating the Combat Action Buttons

First, let’s duplicate the basic hit button. You can do this by right-clicking on the object and selecting ‘Duplicate’ or by using the shortcut Ctrl+D. After duplicating, we’ll rename the new button to ‘obj_fireball_button’. Repeat the process to create another button, this time named ‘obj_heal_button’.

Modifying the Variables

Next, we need to set the variables for each button. Let’s start with the basic hit button. We’ll set the ‘display_name’ variable, which determines the text displayed on the button. We’ll use a pattern that includes the action name and the damage or heal amount. For the basic hit button, the display name will be ‘Basic Hit (5 Damage)’.

Next, we’ll set the ‘action_type’ to ‘Attack’, as this button will be used to attack the other character. Finally, we’ll set the ‘damage’ variable to 5.

event_inherited();

display_name = "Basic Hit (5 Damage)";
action_type = "Attack";
damage = 5;

For the ‘Fireball’ and ‘Heal’ buttons, the process is similar. The ‘display_name’ for the Fireball button will be ‘Fireball (3 Damage)’, the ‘action_type’ will be ‘Attack’, and the ‘damage’ will be 3. For the Heal button, the ‘display_name’ will be ‘Heal (5HP)’, the ‘action_type’ will be ‘Heal’, and the ‘heal_amount’ will be 5.

// Fireball button
event_inherited();
display_name = "Fireball (3 Damage)";
action_type = "Attack";
damage = 3;

// Heal button
event_inherited();
display_name = "Heal (5HP)";
action_type = "Heal";
heal_amount = 5;

Positioning the Buttons

Now that we have created the buttons and set their variables, we need to position them in the game room. Make sure you are in the ‘buttons’ layer and drag and drop the Heal button into the room. You can use the grid provided by GameMaker to align your button correctly.

Your challenge now is to add the Fireball button to the bottom of the other two buttons and align them to the center of the square sprite. Drag and drop the Fireball button into the ‘buttons’ layer and use the grid to center them.

Positioning elements manually in the room is a useful technique as it allows us to visually align elements without needing to calculate positions or add code. It’s a simple and effective way to create a user interface (UI).

Struggling to follow along? Consider trying out our GameMaker Academy – a comprehensive learning pathway designed to take you from beginner to industry-ready developer with GameMaker!

Draw Display Name

In this section of our GameMaker RPG tutorial, we will learn how to display the names that we have set up in the parent object and modify them in the different buttons in a game using the GameMaker Studio. This will help in providing information to the player about the actions or functionalities associated with the different buttons in the game.

Adding the Draw Event

First, we need to add a draw event to the button parent object, which is the object that handles all of the combat action buttons in our game. The draw event is used to show the sprite associated with the button. We can add the draw event as follows:

draw_self();

This code ensures that the sprite associated with the object is visible on the screen. After making sure that the sprite is visible, we want to draw the display name text on the button.

Setting Up Fonts

Before we draw the text, we need to set up the font. When creating a new font, we can either create a brand-new font and select it from the drop-down list or duplicate an existing font. We’ll rename it to ‘fnt_action_name_button’. We then set its size to 10. Now, we can use this font to draw the display name text on the button.

Drawing the Display Name

We can draw the display name on the button as follows:

draw_set_font(fnt_action_name_button);
draw_text(x, y, display_name);

In the code above, we first set the font to ‘fnt_action_name_button’ and then draw the text at the current x and y coordinates of our button. The text to be drawn is the display name that we have set up.

Setting Text Alignment

By default, the text alignment is set to the left, which might not look good on our button. Therefore, we need to change the text alignment to be in the center:

draw_set_halign(fa_center);
draw_set_valign(fa_middle);

In the code above, ‘draw_set_halign(fa_center)’ sets the horizontal alignment to the center, and ‘draw_set_valign(fa_middle)’ sets the vertical alignment to the middle. Now, when we run our game, the text will be properly aligned in the center of our button.

Drawing the Text

With all our settings in place, we can actually draw the text itself using the display name of the combat action button:

draw_text(x, y, display_name);

Updating the Child Objects

One thing to note is that even though we have added the draw event in our parent object, it might not exist in the child objects. To make sure that the child objects also have the draw event, we need to go to each child object, close their events tab, and open them again. This will ensure that the draw event is correctly inherited from the parent object.

Centering the Sprites

Finally, we need to make sure that the anchor of our sprites is in the middle center. After doing this, we might need to reposition our buttons, but this should not cause much problem.

And that’s it! Now, when we run our game, we will see the corresponding combat action name displayed on each button, providing helpful information to the player.

Combat Action Buttons Hover Effect

In this last part of our GameMaker RPG tutorial, we will be changing the state of a button in our combat system. This involves altering the appearance of each sprite when it is hovered over, pressed, etc. We will be using the CombatAction sprites that were created in previous sections of our GameMaker RPG tutorial. The button state will be modified in the parent of all the buttons, using events related to the mouse.

Changing the Hover Sprite

First, let’s start with the left mouse button. Here, we are going to change the hover sprite. The reason for this is that while we are pressing on our button, we want to change the hover sprite. This can be achieved by setting the sprite index to be equal to the hover sprite. Here is the code snippet that accomplishes this:

/// @description Change to hover sprite
sprite_index = spr_ca_button_hover;

Now, when we press any of the buttons, they change, but when we release the mouse button, they don’t reset their sprite. We need to ensure that when the left mouse button is released, the sprite is reset.

Resetting the Sprite

It’s important to note that we are using the term ‘global’ here because if we start pressing the button in one place and release it in another place that isn’t inside of the button, it should still be reset. The sprite shouldn’t only reset if we release the mouse button on the button; it should come back to the original sprite in any place that the left button has been released. Here is how we can implement this:

/// @description Reset sprite
sprite_index = spr_ca_button;

However, for the code to work as expected, we need to update the events. We can do this by closing the window and opening it up again. This is a bit of a quirk of GameMaker, where it only updates the events tab visually when you close and open it up again. In the background, the exact same events code is running, but it’s not reflected in the objects tab. By updating the events, we avoid any confusion or misunderstanding.

Updating Events

Now, as you can see, the code works perfectly because it will only change to the hover sprite if the mouse button is pressed inside of it. If the mouse button is released anywhere on the screen, the sprite will reset, working as expected.

Implementing Combat Action

The last thing we want to do in this part of our GameMaker RPG tutorial is to cast the Combat Action. For now, we don’t have the code and we won’t be adding it right now in order to cast the Combat Action. However, we will lay the groundwork to make it easier to implement later.

The only situation in which we want to cast a combat action is when the left mouse button is released, but not globally, but locally in the button. For that, we need to add a new event that is going to be ‘left released’. Here is how we implement this:

/// @description Cast combat actions
show_debug_message("Cast combat action");

Now, when we play the game, we will see a debug message “Cast combat action” whenever we release the left mouse button inside the button. If we are not releasing the mouse button inside of the button, the combat action is not cast.

GameMaker RPG Wrap-Up

And there you have it! You’ve now completed the creation of combat action buttons, setting up hover effects and display names, and even laying the groundwork for casting combat actions. These buttons not only add visual appeal but also provide crucial gameplay functionality to enhance user interaction with your GameMaker RPGs.

If you’re eager to take this project further, consider adding animations, sounds, or even new combat actions! Don’t hesitate to explore more GameMaker Studio tutorials on Zenva to deepen your game development skills. Good luck, and we hope to see your game come to life with these interactive combat elements!

Did you come across any errors in this tutorial? Please let us know by completing this form and we’ll look into it!

FREE COURSES

FINAL DAYS: Unlock coding courses in Unity, Godot, Unreal, Python and more.

ACCESS FOR FREE

Transcript – Combat Action Button Sprites

Hello there, and welcome to a new GameMaker RPG lesson.

In this one, we are going to be creating the sprites that we’ll be using in our combat action buttons. Remember that our player will be able to cast some combat actions, such as the basic hit, heal, and fireball. To make that happen, we’ll be using buttons, and we’ll start off by creating these sprites.

To keep everything organized in the sprites folder, I’ll create a new group, which is essentially a new folder, and I’ll name it Combat Actions. Now, let’s go ahead and create these sprites. I’ll call it SPR_CA, which stands for combat action button.

I’ve created a folder because I’ll also have a second sprite for when the button is hovered. This will allow me to change the button color slightly, giving a good visual effect and a better feel for the player. We’ll get to that in a future GameMaker RPG lesson. For now, we’ll just create the sprites.

In this case, we’ll resize our canvas. The size I want for the button is something like 320 by 64, so I’ll apply that. Here we have our button, and now let’s actually create the sprite. I’ll make the interface a bit smaller so we can see it better.

First, I’ll add a two-pixel white border around the button using the rectangle tool outline. Creating it may be a bit tricky at first, but once I get it, I’ll adjust the size to fit. After that, I’ll use the line tool to add a border on each side. This may take a bit of adjusting, but we’re almost there, and there we go—this is perfect.

Now, to fill it with color, I’ll use a blue shade. I’ll select the fill tool, choose the color I prepared, and press OK to fill it. I’ll rename this button as my hover button. Then I’ll duplicate it to create the normal button. I’ll erase the center to reset it, and there we have it.

In this new sprite, I’ll adjust the color to make it brighter. You can copy the color code, or choose your own. I’ll use the fill tool again, and there we go. Now we have the normal button and the hover button—similar in appearance but with the hover button in a darker shade. The difference will become more evident when we create the hover effect in a future GameMaker RPG lesson, but for now, we’ve set up both sprites.

I’ll see you in the next GameMaker RPG lesson!

Transcript – Combat Action Buttons Parent

Hello there, and welcome to a new GameMaker RPG lesson. In this one, we’ll start creating the CombatActionButtons parent.

We’re going to be creating a parent object that will have as its children all the different CombatActionButtons. This setup will involve one main node, a main object, from which various objects representing CombatActionButtons will branch off. This approach allows us to establish predefined properties and variables for all of our buttons, making it easier to implement additional combat actions beyond the ones we’ll initially create. This setup will make more sense as we start building it.

Inside the Objects folder, I’ll begin by creating a new folder called CombatActions, as we did with our sprites. In this folder, we’ll create a new object named OBJCA, which stands for Combat Action Button.

The main advantage of a parent object is that it allows us to define variables that all child objects can share and modify. These variables will be declared in the create event. So let’s delete the current description, and add two string variables: the first, displayName, starts as an empty string and will hold text representing each combat action, like “basic hit” or “fireball,” along with its damage. This will be the text displayed in our UI buttons.

We’ll also define the actionType as a string to indicate if the action does damage, heals a character, etc. Additionally, we’ll set two integer variables: damage and healAmount, both starting at zero. Depending on the combat action, these will determine the amount of damage or healing applied.

If this feels a bit abstract, we’ll clarify it soon with a quick test. First, let’s go to our room game and create a new asset layer called Square. If you recall from the introduction, we’ll be adding a simple UI element: a blue rectangle that will serve as a background for the buttons. For this, I’ll create a new sprite called SPR_square, which I’ll size in the room itself.

Using a specified color, we’ll fill the sprite and then add it to the square asset layer in the room. Once in place, we’ll resize it as needed. Now that the basic UI is set, let’s create our first CombatActionButton. I’ll create a new object called obj_basic_hit_button in the CombatActions folder and position it on a new layer for buttons so they’ll render above the square layer.

Let’s assign the OBJCA parent to this new button, which will enable us to inherit the create event and other properties defined in the parent. In the create event, I’ll set displayName to “BasicHit” and display it in a simple message to test that we can modify the parent’s properties.

As you can see when we play, our message with “BasicHit” appears, confirming that we’ve successfully inherited and modified the parent object’s variables. This inheritance will be essential as we continue building out CombatActionButtons.

We’ll keep the inheritance and continue setting up the Combat Action buttons in the following GameMaker RPG lessons. See you there!

Transcript – Creating Combat Action Buttons

Hello, in this GameMaker RPG lesson, we are going to create all the combat action buttons.

We actually have created the basic hit button, and we should also define the values of the variables that we defined in its parent. So, we are going to be doing two things. First, creating all the objects for the combat action buttons, and then inside their create events, we will modify the variables.

I will start off by duplicating this object, the basic hit button. You can do this by right-clicking and selecting “Duplicate” or by using the shortcut Ctrl+D. The next one I’ll name objFireballButton. I’ll duplicate the object again and call it HealButton.

Now let’s modify their variables. In the basic hit button, let’s set the display name. Remember, this is the text that will be displayed on the button once we draw it. For this button, we’ll use a pattern: the action name itself, “Basic Hit,” followed by the damage amount in parentheses, like “5 damage.” The action type will be “Attack” since we are attacking the other character, and the damage will be set to five.

Using parent nodes allows us to add as many buttons or command interactions as we need. It’s easy to modify the text, and you can adjust it to your own preferences. This flexibility is one of the main advantages of using a parent node.

For the Fireball and Heal buttons, it’s quite similar. In the Fireball button’s Create Event, we set the display name to “Fireball (3 damage),” the action type to “Attack,” and the damage to three. In the Heal button, the display name will be “Heal (5HP),” the action type will be “Heal,” and the heal amount will be five. These values are ones I determined while testing, but feel free to adjust them to suit your needs.

Now, let’s position the buttons. We only have the basic hit button in the buttons layer, so let’s drag and drop the Heal button into place. Make sure you are inside the buttons layer. GameMaker’s grid tool can help with alignment, or you can turn it off and use the layout elements for positioning.

Here’s our Heal button, and this one is our Basic Hit button. Now we face a challenge. Positioning elements manually within the room is quite useful, as it allows us to avoid coding for layout. It’s a more visual, straightforward approach for UI setup.

So, the challenge is twofold. You will need to add the Fireball button below the other two buttons, select all three, and align them within the square. To do this, drag and drop the Fireball button into the buttons layer, select each button by holding down CTRL, and align them with the grid to ensure they are centered.

I hope you’ve tried this. Now I’ll demonstrate by dragging and dropping the Fireball button. I’ll disable the grid temporarily to adjust its position. There it is. I’ll move them closer so there isn’t too much border around them. You can adjust this based on your layout preferences.

Finally, I’ll select all three buttons, hold down CTRL, and center them using the grid. This concludes this GameMaker RPG lesson. I’ll see you in the next one.

Transcript – Draw Display Name

Hello there, and welcome to a new GameMaker RPG lesson. In this GameMaker RPG lesson, we will be drawing the display names that we set up in the parent and then modified in the different buttons. Currently, we can play the game, but there’s no information displayed on the buttons. Let’s start by using the display name.

In the button parent—the object that manages all the combat action buttons—we will add the draw event. We have already discussed the differences between draw and draw GUI, so we won’t go into that further. As with any draw event where you want to show a sprite, we will first ensure that we are drawing ourselves. This will make sure that the sprites are visible on screen.

After that, we want to draw the text of the display name. To do this, we’ll use a different font because we want to display this text smaller than other game text, like the title or the play button. Let’s discuss two things about fonts and one issue that has two solutions. When creating a new font, especially if we want to reuse the font, we could create a new font from scratch and select it from a dropdown. However, that takes some time.

Instead, since we already selected this font (the “Press Start” font we downloaded at the beginning of the course) for previous assets, we’ll duplicate an existing font and modify its size. By pressing Ctrl+D, we can duplicate it, or right-click and select “Duplicate.” I will rename this new font to “fnt_action_name_button.”

Now, I’ll open this new font, and since the font is already set to our desired style, we just need to modify its size to around 10. Back in the button parent, we’ll set this font with “draw_set_font(fnt_action_name_button).” Now, I’ll draw the text at the current X and Y coordinates to display it on top of the current CombatActionButton, using the display name we set.

At this stage, the text appears, but its alignment isn’t quite right. We’ve discussed alignment before, so I won’t go into detail here. The only adjustment we need to make is to change the alignment to center, as it’s left-aligned by default, causing the text to look misaligned. Setting it to center and middle alignment should resolve this.

When we test our game again, this alignment change doesn’t immediately take effect because the draw event in the parent isn’t recognized in the children. To fix this, go to each child button, close its events tab, reopen it, and ensure the draw event is correctly inherited. Repeat this for each button, including the Heal button.

We should also verify that each sprite’s anchor point is set to the middle center. Adjusting the anchor may require repositioning the buttons slightly, but it shouldn’t cause major issues. Once we select and center all three buttons, the corresponding combat action names should appear correctly aligned and displayed.

Transcript – Combat Action Buttons Hover Effect

Hello there, and welcome to a new GameMaker RPG lesson. In this GameMaker RPG lesson, we’re going to be changing the button state, modifying each sprite to display different visuals when hovered over, pressed, and so on. We’ll be using the CombatAction sprites we created a few GameMaker RPG lessons ago. To begin, let’s open up the parent of all the buttons and work with some mouse-related events.

First, we’ll start with the left-click press. Here, we’ll change the sprite to the hover version when the button is pressed. While pressing down on the button, we want it to display the hover sprite, so we’ll set the sprite index to sbrcaButtonHover.

Now, we notice that the button changes when pressed, but it doesn’t reset to its original sprite when we release it. To fix this, we need to detect when the left-click is released globally. This is important because if we start pressing on the button but release the click outside of it, the sprite should still reset to its default. Thus, we’ll set the global left release event to reset the sprite index back to SPRCA button, the default sprite.

Let’s ensure our events are correctly updated. After adding these new events, we’ll close the event window and reopen it. This refreshes the view in GameMaker, which sometimes doesn’t visually update events unless the tab is closed and reopened. Although the code runs correctly in the background, the event tab might appear outdated, so this step helps avoid confusion.

After updating the event tab, we see that everything is working well. The button only switches to the hover sprite when clicked inside, and it resets properly when released anywhere on the screen.

Finally, let’s set up the basics for casting the Combat Action. Right now, we’re not implementing the full code for this, but we’ll lay the groundwork to make casting Combat Actions easier in the future. We only want to cast the action when the left mouse is released specifically on the button, not globally. So, we’ll add a new event for local left release. In the description, we’ll note this as “Cast Combat Action” and use a debug message like “cast combat action” to verify this part.

Once we test it, we can see that the combat action is cast correctly when released on the button. If the release happens outside the button, the action doesn’t trigger. This setup ensures that we’re only casting the combat action when and where we intend to.

Interested in continuing?  Check out our all-access plan which includes 300+ courses, guided learning pathways, new courses monthly, and more!