[Eventing]Custom Menu Creation, Learn how to create a custom menu system - includes pictures. Options

[rojse]

This is a tutorial detailing how to make a custom menu on RPG Maker, which is applicable to any RPG Maker system. I will be using 2K3 to do my example, and will be assuming that you have some knowledge of switches, variables, and so forth.

Although the possibilities with custom menus are endless, from a special level-up screen to an entire custom menu system, I am going to start with a simple example, a screen which allows you to change your sprite and battle animation to one of twenty-odd different colours, which I have lifted from one of my previous games. Change this example to any sort of menu that you want.

The first thing to do is to make the menu screen and cursor, but you need to plan out what you want the menu to do. I won’t go into too much detail here, because each menu screen is different, but I would suggest that you keep the size of the selectable icon on your picture the same size, to make programming easier. Using a grid for your menu is the easiest to program, but obviously, you are not limited to this.

After copying the down and centre sprite from each spriteset, pasting them onto my screen, using transparent colour selection and removing my notches, I end up with this screen:



To create a cursor is quite simple: create a box the same size as the box used for your menu (slightly larger if your image fits exactly into the box and you do not wish to block it out) create a hollow rectangle, and round its edges off.



Import your images to RPG Maker. Remember your picture size and colour limitations, and make the centre colour of your cursor transparent.

Now, let’s get on to the actual programming, which we are all more interested in. Set up three events: Dress Cursor, Dress Selector, and Dress Updater. A basic overview of the events is this - Dress Cursor displays the menu picture, and accepts key input. This also runs the other two events when needed. Dress Selector is the event that looks at our cursor selection and runs the event that we wish it to, and Dress Cursor Updater changes the cursor position as we press the directional keys, so that we can see what we are selecting from the menu. When you wish to run your menu, you call the first event.

For the first event, “Dress Selector”, display the menu in the centre of the screen (assuming it is a full-screen menu). Display your cursor in the centre of the first box (for example, in my 53x60 box that I use for my menu, my cursor will be displayed at 26,30) and set “Cursor” variable as 0. Create a loop event, put in “label 1”, put in a call for your third event (which updates the menu cursor as you press the directional buttons). Put in a key input processing event, call your key input variable “Key Input”, which is memorable and original. You will need to know if the directional buttons, and the cancel and enter keys, are pressed, so check these boxes, and remove any others that may be on.

Put in six conditional branches, checking for “Key Input” being equal to numbers one to six, put your comments in the following order (I find it helpful when running through events later for possible problems)

Key Input == 1 “Down”,
Key Input == 2 “Left”
Key Input == 3 “Right”
Key Input == 4 “Up”
Key Input == 5 “Decision”
Key Input == 6 “Cancel”

When down is selected, you add the amount of columns in your menu to your “Cursor” variable, when left is selected, add one, right, take one, up, subtract the amount of columns. Mine has six columns, so I would add or subtract six for up and down.

We now need to set our events up for when someone tries to move out of the bounds of our menu – for example, pressing up at the first point. For those wishing to create a more complex menu, that is not a simple grid, use this to edit the variable total to reconfigure the cursor movement. According to my menu, as our start position is zero, our variable would now equal -6, and be above the top of the screen. So, we need to make a conditional branch that checks the total after it is calculated, and changes the value if it is outside of tolerance. When we do this, we have the option as to what the cursor will do instead. I will stick with the simplest option, the cursor stays on the same line when pressing left and right and on the same column when pressing up or down, which is the easiest to program, but you can do your own menu however you choose.

For something as simple as pressing up at the top row, my six “bad-values” that I will change are -6 to -1. I change this in the first menu to numbers 18, 19, and 20 for -6, -5 and -4, and 15, 16, and 17 for -3, -2, and -1 in my menu. Jump to Label 1 after all of these calculations, because this will redraw the cursor in the correct spot. Do the same eventing for the other three keys, setting them at the opposite side of the grid-menu.

The “Decision” option removes the menu and cursor picture, and calls event two, which checks the cursor position, and runs the desired event. However, it does not end the event, because the player may wish to select a different option after they select one option.

“Cancel” removes the menu and cursor picture, and ends the event.



This is what the start of the first event looks like, and displays some of the coding used. This should give you some idea of the eventing that I was trying to explain previously.

The second event, called by pressing the decision key, runs your menu selection. For each position variable, create the desired event. I won’t go into the eventing here for my menu, because it is specifically for changing your character’s outfit, but it basically stores the equipment worn as variables, removes them, changes the sprite and the class, and reequips the weapons and armour to the new class. The sprite and class type varies depending on the cursor position variable, and this is a conditional branch event.

The third event changes the cursor position itself, and you called this at the start of your key input processing loop. This event checks the cursor value, and displays the picture in the correct spot. You need to calculate the position of the cursor for each possible spot, and display the cursor picture in the desired spot, through a series of conditional branches. Make sure that the cursor picture has the same picture number for each.



This is what the coding of the third event looks like. Simple, isn’t it?

After having completed the coding, check your menu setup. You should be able to call the first event and move the cursor in any way you choose. If you move the cursor out of the boundary, it should appear at the opposite side, on the same line (if that is how you set it up). Check the position of the cursor for each possible position, as this may be out of alignment. If it is, check your screen position for that cursor picture. If the cursor appears in the wrong spot after you move the cursor out of the original boundary, you need to fix your variable adjustments in the first menu.

An example of the completed menu (this tutorial needed more screenshots.)



I hope that this tutorial helped people learn how to create a custom menu system. Please feel free to leave your comments if I need to clarify a point or two, or if you found this tutorial helpful.

[Modesty]

Wow..thank you so much. I was looking for a CMS tutorial for 2k3 so this is awesome. *faves*

[rojse]

Thanks for the reply! It's nice to get feedback on a tutorial. (I don't check this part too often, sorry for the late reply.)

I'll see if I can expand this tutorial over the next few days, as I have also done several menu screens that change, depending on the game itself, such as skills learnt, gold owned, and so forth, seeing as many people have found this useful.