Sprite Based Menu

A tutorial by Andrew Barber aka Chronic

This tutorial will show you how to make a menu system using an animated sprite an one object. This sneaky method does have a slight drawback though, having large sprites in your game will obviously make your finished game a little larger than normal, but with todays compression, download speeds and harddrive sizes, this is really nothing to worry about.

So, how is it done? Well, first of all you need to think of what your menu is going to look like, and then draw it as you would see it in game without any options selected.


single menu frame

Once you have done this click the green checkmark to save your menu sprite. Next copy and paste that frame so you have the same amount of frames as options in your menu, in my case i need 4 frames.


4 menu frames

Now that we have the right amount of frames we can then go back and edit each frame to make it look like an option is selected. You need to do this in order so the menu will behave correct when its used in your game. So the first frame you would color the first option, the second frame you would color the second option. If this sounds confusing take a look at the image below.


4 colored menu frames

Now that your sprite is made, add a new object and give it your menu sprite. Add a room and in it place the new object at the location you want the menu to be.

Next edit the object and give it a create event. Because the object is using an animated sprite we need to stop this animation so we can control it ourselves, this is done with the image_speed and image_index variables.

[CREATE]
{
  image_speed = 0;
}

Now we need to be able to control the menu, we'll do this in the keyboard press up and down events. To do this we will alter the value of the image_index.

[PRESS UP]
{
  image_index -= 1;
  if (image_index < 0) { image_index = image_number-1; }
}
[PRESS DOWN]
{
  image_index += 1;
  if (image_index > image_number) { image_index = 0; }
}

These scripts will increase/decrease the value of image_index and then make sure it doesn't go in to negative numbers or over the amount of frames we have. This will make the value of image_index the perfect variable to use for controlling a menu.

Add a keyboard press enter event to your object with the following script.

[PRESS ENTER]
{
  switch(image_index) {
    case 0:
      show_message("Start Game");
    break;
    case 1:
      show_message("Options");
    break;
    case 2:
      show_message("Instructions");
    break;
    case 3:
      show_message("Quit Game");
    break;
  }
}

And with that, your menu is now completed and ready to use. Remember that you don't have to do a simple looking sprite like i've done, your only real limit to this type of menu is you can't really have any animation in it unless you add extra code and objects to support it.

I encourage you to play around with ideas to see if you can make your menu stand out a little from other people who use this tutorial. For example, why not draw your menu horizontal, or even circular? Why change just the color of the option? you could add some type of arrow beside the option, or place a banner behind it.

Closing

This bring me to the end of this tutorial, i hope you've learnt something from it and are able to put it to use in your game. If you have any comments or suggestions please contact me via PM at the Game Maker Community.

  • Sprite Based Menu - example