How to Make Buttons in GameMaker

When the mouse button is released, we set clicked to false.

After we've set clicked to false, we check if we're still hovering over the button, and if we are, we can play a sound and perform the button's action. For the sake of this tutorial, we'll start with room_restart(); however, what happens when we click the button is completely up to you.

Finally, we want to add the following code to control the button’s image index.

if (clicked) 
{
	image_index = 2;
} 
else if (hovering) 
{
	image_index = 1;
} 
else 
{
	image_index = 0;
} 

hovering = position_meeting(device_mouse_x_to_gui(0), device_mouse_y_to_gui(0), id);

if (hovering && mouse_check_button_pressed(mb_left)) 
{
	clicked = true;
} 

if (mouse_check_button_released(mb_left)) 
{
	clicked = false;

	if (hovering) 
	{
		audio_play_sound(snd_button, 1, false);
		room_restart();
	}
} 

if (clicked) 
{
	image_index = 2;
} 
else if (hovering) 
{
	image_index = 1;
} 
else 
{
	image_index = 0;
} 

Our basic button is now done and we can test it. You can hover over it and click to restart the room.

However, we have one very important step that will make this button much more useful: Inheritance.

Using inheritance to make your button reusable

Right now, we have a button. This is useful, but what if we wanted a second button?

We could duplicate this button and change some code, but what if we wanted to change how our buttons work? We'd have to make that change in every button. 

What if we wanted a way to refer to all of our buttons at once? We'd have to list every button.

This might work if we only have two buttons, but what if we had ten or twenty? Eventually, it would become very difficult to manage. 

Duplicating our entire button object every time we need a new button will create problems down the road. Instead, we'll use inheritance.

Using inheritance, we'll turn our current button into a parent and then have button children inherit the button parent's code. This means that any changes we make to the button parent will apply to the button children.

Additionally, it means we have a way of referencing all of our buttons at once by referencing the button parent.

Rename this object obj_button_parent and remove the sprite.

In the Create event, add the following code:

activate_button = function() 
{
	
}

This is a method. A method is a customized command that you create, and it can then be used as a built-in function.

Note: If you want to learn more about methods, check out their page in the manual.

Normally, you would put the code you want to run when the method is called inside the brackets. However, in this case, we want the method to be blank. We'll override this method in the children.

In GML Visual, use the New Function Code block and leave it empty.

In the Step event, replace room_restart(); with activate_button();

This will make sure the method assigned as activate_button is called when a button is pressed.

Now comes the cool part. We'll create two new objects and name them obj_button_restart and obj_button_exit and give them the same sprite we were using before.

Make them children of object_button_parent.

Modify their object variables. We'll use “Restart” and “Exit”.

The last thing we need to do is right-click on the Create event and choose “Inherit”.

For each button, we override the button_action method by recreating it. You can write code to have each button do something unique.

For the restart button, use room_restart() and for the exit button use game_end().

Add this in obj_button_restart’s Create event (after inheriting it).

activate_button = function() 
{
	room_restart();
}

Add this in obj_button_exit’s Create event (after inheriting it).

activate_button = function() 
{
	game_end();
}

Go to the room and replace obj_button_parent with these new buttons (position them how you would like), run it, and everything works.

To create more buttons, all you need to do is:

1. Create a new object and give it a sprite

2. Make it a child of the button parent

3. Change its object variable (which you can also do in the room editor)

4. Inherit the create event and give it its own activate_button method

BONUS: Using sequences to animate your buttons

The above is all you really need, but I want to leave you with one slightly more advanced feature that can make your buttons a lot more interesting and professional looking - using Sequences to animate them.

Sequences are a big topic and there are lots of other tutorials on them, but here's a short and very basic demonstration.

To create this animation, make a sequence asset and name it seq_menu.

Add your buttons to that sequence asset and make sure your playhead is at the start before continuing.

Stretch the asset keys for your tracks so they last for the whole Sequence, and then position and scale your buttons however you'd like. You can see my version below.

Next, add a colour multiply channel to your button track.

Set the alpha to zero.

Move the playhead to the end and set the alpha to 255.

Do this for both buttons.

If you hit play, you should see the buttons fade in. Make sure looping is disabled (which it is by default).

Playing the Sequence

Add a Key Press event for the space bar in obj_game, and insert the following code:

if (!layer_sequence_exists("MenuSequence", sequence_id))
{
	sequence_id = layer_sequence_create("MenuSequence", display_get_gui_width()/2, display_get_gui_height()/2, seq_menu);
}
else
{
	layer_sequence_destroy(sequence_id);
}

This code will create a sequence if none exists and destroy it if one already does.

In the first block, the sequence is being created in the center of the GUI layer. We use the display_get_gui_width (and equivalent height) function and divide the values by 2 to get the center.

The code above creates the sequence in a layer called “MenuSequence”, which we’ll create in a second.

The sequence_id variable that we’re setting here needs to be initialised in the Create event, so add this line of code there:

sequence_id = noone;