Gw Temp

Menu

Tutorial - 'CMS Tutorial, Part 5' by Rast

An item about RPGMaker 2000 posted on

Blurb

The fifth and final part of a very long tutorial by Rast, detailing how to design and make your custom menu systems.

Body

1) Overall design, getting to/from your menu, and cycle-based submenu design
2) Basic cursor loops and static menus
3) Distributed control and chara displays
4) Manual dereferencing, picture displays, and composite displays
5) Showing lists, dynamic menus, and scrollable cursor loops (you are here)

Hello. This is the fifth and final part of this tutorial series. In this lesson, we shall go over the complex parts of a menu that tend to cause people the most problems, namely, showing lists, making a dynamic menu, and making a menu that scrolls. None of these tasks are particularly easy, but if you've followed along and understood everything up to now you shouldn't have any problems.

Since all of these tasks work together to show a scrollable menu (such as an item list), this tutorial is not broken up into sections like the previous ones. Instead, we're going to do it all in go. By now you should know how to design a menu screen, so we'll skip right to the events you're going to need to make this work. After that, we'll go over how to use your events to set up your menu.

1) The controller event (common event)

The controller event is what sets up and runs your list. It has two main tasks:

- Prepare the menu when it is first shown.
- Run the cursor loop and handle input accordingly.

It also sets up these variables which you'll need for your menu:

- A pointer to the first item actually on the screen (We'll call this the Top Pointer)
- A pointer to the item currently selected (... and this one the Selection Pointer)

It also uses these switches:

- Map Suspend

If Map Suspend is off, set the Top Pointer to a pointer to the first item on your list. Set the Selection Pointer to the same. If it's on, turn it off but leave the variables alone. This will allow your menu to be suspended if you transition away from it (such as when you use an item and have to go back to the party screen for a moment).

Next, it calls the refresh event to show the list for the first time, and then it calls the cursor calculations event, and loads the cursor and sets its position to the value specified by the cursor calculations event. It then calls the selection handler to handle the initial selection.

Now it runs the cursor loop. For this, it starts a cycle which reads the keyboard input and acts on it in this manner:

Up / Down

If up or down is pressed, the selection pointer is incremented or decremented by one as necessary. It is then compared to the ID numbers of the first and last item on the list being displayed. If it has gone past the end, it set back like it was and nothing happens.

If not, it checks to see if a non-visible item has been selected. It does this by checking to see if the Selection Pointer is greater than or equal to the top pointer and less than the top pointer plus the number of items that can be displayed at one time.

If the newly-selected item is visible, the cursor calculations event is called and the cursor is moved to the new location.

If not, the refresh event is called to scroll the menu, and then the cursor calculations event is called and the cursor is set to the new location.

In either case, when they're done, the selection handler is called to handle the new selection, and that's the end of the up/down handler.

Left/Right

If your list is long, I recommend that you have the left and right keys page the list up and down. To do this, save the current selection pointer into a temporary variable, and then add or subtract the number of items that can be displayed at once from the selection pointer. Check this value to see if it went below the top pointer or past the last item on the list. If it did, set it back to the top pointer or the top item on the list.

Compare this new selection pointer to the old one you just saved a moment ago. If they're the same, nothing happened and we don't go on.

If they're different, we handle this just like an up/down selection that scrolled - we call the refresh event to scroll the menu, and then the cursor calculations event and set the cursor to the returned position. Then the selection handler is called, and we're done.

Confirm

When they press the Confirm button, they're indicating that they want to do whatever it is your menu does (such as use an item or skill) with the selected item on your list. Set the Menu Suspend switch on and break the cycle, a fork after the cycle will pick it up from there.

Cancel

This indicates they're done. This should break the cycle and allow the previous controls to take effect.

After the cycle you'll need to check to see if the Map Suspend switch is on. If it is, they selected something. Call the choice handler event, and then use a Goto Label command to go all the way back to the top of this event to transition back to the menu and set it back up just like it was.

If it's off, they're done with the menu and this event should terminate and return control to the menu event that called this one.

2) Cursor calculations event

This event has but one purpose:

- To locate the x,y coordinates of the cursor

You'll normally know the X coordinate in advance with a vertically scrolling menu, but if your menu scrolls horizontally, you can find it the same way we'll go over finding the Y coordinate.

To find the Y coordinate, load a temporary variable with the current selection pointer. Subtract the top pointer from this to get an offset into the currently visible menu items. Multiply this value by your menu spacing (which we'll go over in more depth in a moment), and add in the Y coordinate of the topmost menu item.

This will give you the X and Y coordinates of the currently selected menu item. If you're using a box style cursor, you can stick it right here. If you're using another style of cursor, add in any necessary x and y offsets to put it in the right spot.

3) The refresh event (with manual dereferencing events)

The refresh event does two things:

- Erase and redraw the list
- Show or hide the scroll arrows

It is important to note here that your menu items MUST be evenly spaced. If you're using a composite display, this will be some multiple of 16 (usually just 16), for picture-only menus, it can be any spacing as long as it looks good.

To erase the list, erase all the pictures and use the Move Event->Change Graphic events to make all the chara elements invisible.

To show the list, we first have to set up the Display Current pointer, which starts out as the same as the Top Pointer. Next we go through and set up the list. We can't do this in a cycle because we're using manual dereference events, but these should be short enough that copy and paste won't be too much of a problem.

Each of these should do the following:

- 1) Ensure the Display Current pointer is valid. If it's not pointing at your list, the end of your list is visible on the screen and you should Goto Label to the arrow setup section since we don't need to do any more setup.
- 2) Load the value the Display Current pointer is pointing at into your dereference variable.
- 3) Do any special setup your manual dereference events require
- 4) Call the manual dereference event for the slot you are setting up.
- 5) If this is a composite display, set up the chara element for this slot.
- 6) Increment the Display Current pointer.

After you've done this for each slot, you need to set up your arrow switches. You'll need to key two events to these switches, one that shows an arrow pointing up and another that shows an arrow pointing down. These are used to let the player know that the menu can be scrolled in the pointed direction.

Check to see if the Top Pointer holds the ID number of the first item on the list. If it does, you know the first item on the list is visible so turn the up arrow switch off. If it's not, the first item isn't visible, so turn the up arrow switch on.

For the bottom arrow switch, load a temporary variable with the top pointer, and add the total number of items that can be displayed at once and subtract one. If this value is SMALLER than the ID number of the last item on your list, then the last item isn't visible and you should turn the down arrow switch on. If it's not smaller, it is visible and the down arrow switch should be turned off.

4) The selection handler

The selection handler is called whenever the selection changes. It should do things that are dependant on what's selected, such as show a little description or the current selection. How this works will depend on what you're using it for.

5) The choice handler

This event is called when they select something. You can get what they selected by retrieving the value that the Selection Pointer is pointing at, and taking whatever action you need to based on it.

And in conclusion...

This last article should serve as a decent guide for you to get started on the toughest types of custom menus. You will need to customize this heavily to suit your needs (for example, if your choice handler doesn't transition away from the map, you'll probably want to add a second switch to keep the Reset event from being called, to speed things up on the return), but like I said, it should get you started.

And that's the end of this series. It may have been heavy in theory and light on the specifics, but that's just the way big custom systems are - they're called custom for reason. But still, once you get good at custom menus, you'll find that with practice they're really not that hard and can plugged in just about anywhere the regular menus won't work without a whole lot of work.