Animated GUI Elements using GML

In this little tutorial we’ll make some animated GUI elements in GML: buttons and menu stuff. Nicely animated GUI can make your game look a lot better and more professional!

5.gif
What you will learn to make in this tutorial

Buttons

1.gif

First of all we’ll create a button. This is fairly easy to do. Create an object and assign your button sprite to it. Make sure the origin of the sprite is at its center.

Create event:

scale = 1;
alpha = 1;
button_speed = 0.3;

Three variables declared: scale will hold the scaling value of the button, alpha will hold the opacity of the button, and button_speed is the speed at which the button will animate (always keep it under 1).

Step event:

image_xscale = lerp(image_xscale, scale, button_speed);
image_yscale = image_xscale;
image_alpha = lerp(image_alpha, alpha, button_speed);

if (position_meeting(mouse_x, mouse_y, id)){
 if (scale!=0) scale = 1.2;
 if (mouse_check_button_pressed(mb_left)){
 scale = 0;
 alpha = 0;
 }
}else{
 if (scale!=0) scale = 1;
}

if (image_xscale < 0.1){
 //BUTTON ACTION
}

The first three lines lerp the image_x/yscale and image_alpha values to the variables we created, so that the animation feels smooth.

Then we’re checking for the mouse. If it’s hovering over the button, it will set the scale to 1.2 so it gets bigger. When it’s not hovering, it will set the scale back to 1. While hovering, if the left mouse button is clicked, it will set the scale and alpha to 0.

Then there is this condition which checks if the image_xscale is lower than 0.1 – which means the button has been clicked and has almost disappeared. Put your button action in this code block after this condition (for example, room_goto_next() or whatever action you want the button to perform).

So now that you know how the button code functions, you can modify the code to adjust the button to your liking.

Slide Menu

2.gif

This is a slide menu which comes up as you hover your mouse over it.

First up, you’ll have to set your sprite’s origin at the correct position. It should be at the point where your menu’s head ends. Like this (the origin is marked in red):

3.png

Now to make its object. Let’s add some code:

Create event:

dist = 0;
dist_apply = dist;
slide_speed = 0.2;

dist holds the y offset of the menu from its starting point. dist_apply holds the same but incrementally, to make the animation look smooth. slide_speed is the speed at which the menu comes up and goes down (keep this too under 1).

Step event:

y = ystart - dist_apply;
dist_apply = lerp(dist_apply, dist, slide_speed);

if (position_meeting(mouse_x, mouse_y, id)){
 dist = sprite_height - sprite_yoffset;
}else{
 dist = 0;
}

The first line offsets the object’s y coordinate according to dist_apply. Second line lerps dist_apply to dist for a smooth effect. Then the dist variable is being changed to the size of the menu if the mouse is being hovered or back to 0 if not.

This was for a vertical menu. If you want to create a horizontal one, replace its Step event code with this:

x = xstart - dist_apply;
dist_apply = lerp(dist_apply, dist, slide_speed);

if (position_meeting(mouse_x, mouse_y, id)){
 dist = sprite_width - sprite_xoffset;
}else{
 dist = 0;
}

This will result in a horizontal menu.

4.gif

Slide Menu with Buttons

We’re created buttons and slide menus. Now let’s do a combination of them – a slide menu with buttons!

This is fairly simple to do. In your button objects, you just need to specify their positions in the End Step event. For example, here I have 3 buttons that go inside a slide menu. Their End Step event codes are as follows…

Button1:

x = obj_slidemenu.x + 80;
y = obj_slidemenu.y + 64;

Button2:

x = obj_slidemenu.x + 220;
y = obj_slidemenu.y + 64;

Button3:

x = obj_slidemenu.x + 360;
y = obj_slidemenu.y + 64;

Note that we’re using the End Step event, instead of the Step event, for proper placement of the buttons in respect to the slide menu’s changing coordinates.

You can create the buttons using instance_create() in your slide menu object’s Create event.

The buttons follow the slide menu quite nicely:

5.gif

Conclusion

Now go make some impressive GUI for your game!

Click here to download this project


Want to learn more interesting things about GameMaker? Browse this blog to learn more and Follow to stay updated (scroll to the bottom to find the Follow button).

Need more help, or want to ask something? Use the comment section below or mail me at gurpreetsingh793@gmail.com. If it helped you out, why not share it with others and help them out too? 😉

Join your fellow GameMakers on GameMaker’s Guild (Facebook) and on the GameMaker Community (YoYoGames forum).

Thanks for reading, and have a great day!

Advertisements

One thought on “Animated GUI Elements using GML

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s