Jump to content


Photo
* * * * - 2 votes

Sprite Based Menu (2 Tutorials)


  • Please log in to reply
4 replies to this topic

#1 Chronic

Chronic

    Administrator

  • Global Moderators
  • 2729 posts
  • Version:GM:Studio

Posted 03 January 2008 - 05:41 AM

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.


Posted Image
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.


Posted Image
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.


Posted Image
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.

{
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.

{
image_index -= 1;
if (image_index < 0) { image_index = image_number-1; }
}

{
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.

{
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.
  • -1

My recent tutorials: [Auto-Tiling] [Text Based Menu] [Sprite Based Menu] [View more at my site]
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
R.I.P Mom (1951-2008)


#2 Chronic

Chronic

    Administrator

  • Global Moderators
  • 2729 posts
  • Version:GM:Studio

Posted 03 January 2008 - 06:00 AM

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.


Posted Image
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).


Posted Image
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_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.

{
  y -= sprite_height;
  if (y < ystart) { y = ystart+(sprite_height*3); }
}

Next the keyboard press down event.

{
  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.

{
  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.
  • 0

My recent tutorials: [Auto-Tiling] [Text Based Menu] [Sprite Based Menu] [View more at my site]
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
R.I.P Mom (1951-2008)


#3 Kylo

Kylo

    GMC Member

  • GMC Member
  • 126 posts

Posted 03 January 2008 - 04:14 PM

This is a pretty simple way to do it. I admit, I've tried this before, and it works well. Nice job for posting it.
  • 0

#4 3lliot

3lliot

    GMC Member

  • New Member
  • 293 posts

Posted 25 July 2008 - 10:09 AM

I like my ways of making tutorials. This one is simple and easy tho. Nice.
  • 0

#5 Nocturne

Nocturne

    Nocturne Games

  • Administrators
  • 25708 posts
  • Version:GM:Studio

Posted 10 August 2011 - 08:00 AM

Nice and simple and very useful for beginners who want something functional with no frills. Staff pick!
  • 0

U1FVsm3.png

40799.png