Sprite Based Menu 2

A tutorial by Andrew Barber aka Chronic

This tutorial will show an alternative method of using a sprite to create a menu as shown in part 1. It is very much the same as part 1 of this tutorial but i will be putting a banner behind the menu options instead of coloring them.

I will use the same menu text as i did in part 1, but with uncolored options. I've gave this sprite the name of spr_menuText.


menu text - spr_menuText

This sprite has the dimensions of 168x119, we need to know these so we can create the banner that will go behind each of the options.

Create a new sprite which has the same width as it (168), and height divided the number of options in your menu. For my menu this would equate to: 119 / 4 = 29, giving me a sprite with the dimensions of 168x29. In this new sprite draw what you wish to use for the banner, you could even animate it. Name this sprite spr_menuBack

Here is a frame from the sprite i used (see example for animated version).


banner - spr_menuBack

Now that i have made the sprites we are able to move on to the coding side of things. Add a new object and assign the spr_menuBack sprite to it. Add a room, and place an instance of the object to it at the location you want your menu to appear.

Open the object up for editing and add a drawing event. This object will draw both of the sprites we've added

[DRAW]
{
  draw_sprite(sprite_index,image_index,x,y);
  draw_sprite(spr_menuText,image_index,x,ystart);
}

We will be moving the y axis of the object, but require the spr_menuText to remain static at the location we placed the object. To acheive this we have used the variabl ystart which is the location that this instance first appears in the room.

Next we need to make the banner moveable, we will use the keyboard up and down press events for this. First the keyboard press up event.

[PRESS UP]
{
  y -= sprite_height;
  if (y < ystart) { y = ystart+(sprite_height*3); }
}

This script will move the y axis of the object up the same amount as the height of its sprite which is 29. It then checks if the new value of y is less than the starting y value, as this would mean is would be above the menu text which is not something we want. It then will move it to the bottom of the menu with a simple equation. The 3 in that equation is equal to the amount of options in the menu, minus 1 (4-1=3). Note, you can remove this equation completely if you choose to do so and hardcode the value, just make sure you update that value if you choose to move your menu at a later time.

Next the keyboard press down event.

[PRESS DOWN]
{
  y += sprite_height;
  if (y > sprite_get_height(spr_menuText)) { y = ystart; }
}

Very much the same idea as the up event, except we are now moving down and checking if the new value is larger than the height of the menu text sprite. If it is then we reset this to the top, which is also conveniently ystart.

Now on to the keyboard press enter event, so we can make the menu actually do something.

[PRESS ENTER]
{
  switch((y-ystart) mod 4) {
    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;
  }
}

This event is identical to the script in part one except for one slight change. The switch statement is now checking "(y-ystart) mod 4". This will work out where the y axis of the object is minus the location is starts at, then mod it to the amount of options in the menu. The result is a number from 0 to 3, which is then used for each case inside the switch statement.

Don't forget to experiment with your version of the menu, don't just copy all of this and end up with something that looks exactly the same except for a change of sprites. Why not try and make the object slide to the next menu option instead of instantly move?

Closing

If you have any comments or suggestions please contact me via PM at the Game Maker Community.

  • Sprite Based Menu 2 - example