Gw Temp

Menu

Tutorial - 'CMS Tutorial, Part 2' by Rast

An item about RPGMaker 2000 posted on

Blurb

Part 2 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 (you are here)
3) Distributed control and chara displays
4) Manual dereferencing, picture displays, and composite displays
5) Showing lists, dynamic menus, and scrollable cursor loops

Hail! This is part II of my big CMS tutorial. Today, we will go over how to create, display, and make work a static menu, the simplest type of CMS menu. If you haven't read part I yet, you might want to, although it isn't required (I will refer back to it as necessary).

What is a static menu?

A static menu is a menu with fixed options that do not change or scroll. These are the easist types of menus to set up, as you know when you create the menu what options are where, and all the menu entries can be incorporated into the menu graphic. The principles we will cover in static menus are also used later on in the more complex dynamic and scrolling menus.

Static menus are most often used as control menus, such as the list of commands you can do when you first go to your menu (e.g. Item, Equip, Row, etc, or from the item submenu, things like Use, Arrange, and Sort). This tut will NOT go over every possible thing you can do with a static menu, but it does cover the basics and once you get good with them you should be able to add in your own stuff easily enough.

Now that you know what we're doing, we'll go over how to do it!

Step 1 - Design

On a piece of paper or in a text file, write down what the options are on your menu, and what they do. Also write down what type of cursor you are going to be using. Nothing hard here - you are simply getting a feel for what you're about to do.

Step 2 - Set up your menu image

If you've never done this before, this will likely be the longest step in creating your static menu. Remember - practice makes perfect. After you've done this a few times this will be snap, trust me.

Image 1 - Menu entries

Create a new image. Make sure it is sized much larger than you think you will need - this gives us plenty of room to work with. Give it a background color you know you won't be using (I suggest neon-bright green, or pink if you plan on using green).

Using the text tool in your image editor, create your menu commands. You do not need to position them exactly, although it speeds things up later if you can (you won't if you're using anything but a plain-vanilla vertically-oriented menu).

Add in any special effects you like (1 pixel shadows look great on most menus, if your image editor supports them), then, using the selection tool, select a rectangle EXACTLY big enough to hold all your text, then cut it out. All you should have left is the leftover background area we didn't use. Paste what you just cut as a new image (or into a new image of the same size, if your editor doesn't support this), and throw the leftover background away. Leave your new image there - we'll come back to it in a moment.

Image 2 - Menu graphic

Create or open the image you are putting your menu on. Remember - panorama menus must be 320x240. Draw in your menu background, and remember to leave enough room on the edges to show the cursor. Your menu background is totally up to you, although gradients look good, as do patterns (as long as they are not distracting).

Next, create a new layer if your editor supports it. If it doesn't, you won't be able to reposition your menu entries, so be careful and get it right the first time (and save your background first, too).

Now, grab your menu entries from the first image, and transparently paste them onto your background and position them to your liking. Since we're doing this on a new layer, you can use the selection tool to rearrange and move them if you need to.

After everything is to your liking, move on to...

Step 3 - Set up your cursor

As before, this part is totally up to you, although I'll go over how to create a couple of the more common cursor types used.

Arrow-style cursor

This one is easy - just create an arrow-type graphic (be it an actual arrow, a finger, a dragon talon, whatever), pointing in the appropriate direction, and is the same height as your text, with the hotspot of the arrow in the middle. Make sure it's not too terribly wide or it won't look very good (and it may obscure other important parts of the screen).

Box-style cursor

To create these, cut the LARGEST menu entry from your menu entries graphic, and paste it as a new image, or into a new image of the same size, if your editor doesn't support it.

Resize this image to be six pixels larger in both height and width, then erase the image to a solid background color. Add in a 2-pixel border, and you're done.

Step 4 - Setting up and displaying your menu

On a piece of paper or in a text file, write down the X and Y size of your cursor, and the X and Y location of EVERY MENU ITEM (for box style cursors use the center, for arrows, use the coordinates of the upper left or upper right corners, as appropraite). We will use this to figure out where to place the cursor on the menu. We can (and will) fine-tune this later, but this gives us a place to start from. Save your menu background and cursor graphics, and import them into RPGMaker as the appropriate type (picture for the cursor, panorama or picture for the cursor).

You will also need to assign all your menu entries numbers. For straight horizontal or straight vertical menus, this is easy, just start at zero on the top or left, and go up. For other menu styles, you're on your own, but remember to start at zero and try to make it something that makes some kind of mathmatical sense - this is important for when they navigate your menu.

First off - if this menu has submenus, remember to cycle this part (see tut 1 in this tutorial series for more details). Set up a label after this cycle - it will make getting out of the menu easier since you'll have to break out of two cycles instead of just the one, which we will go over in the next step.

Create a new variable that will hold the value of the menu item the cursor is currently pointing at (we'll call it CursorPosition), and set it to zero.

Now, when you want to show your menu, first show the background. If it's a picture, just pop it up where appropriate. If it's a panorama, refer to part 1 of this tutorial series.

Next, you need show your cursor. For box style cursors, show a new picture at the coordinates you wrote down a moment ago for menu entry zero. For arrows, use the X coordinate and add half the arrow's height to the Y coordinate of menu entry zero. Neither one of these will put the cursor exactly where it needs to go but it'll be close and we can fix it later.

Step 5 - Navigating your menu

This step, and the next two, both take place inside of a cycle. We'll call it the Navigation Cycle.

For the first action in this cycle, use an Enter Password event to read the keyboard input. You will want to check for all keys (all the boxes), and make sure to check "Wait Until Key Hit". This will cause RPGMaker to wait until the player hits a key to continue with this event.

Now, for every direction that your menu takes input for (up and down for vertical menus, left and right for horizontal menus, or maybe all four for nonstandard menus), add in a fork inside the cycle and check the keyboard input the Enter Password event took.

Each fork should handle one direction. For its actions, have it add or subract one from the CursorPosition variable (or do another operation as appropriate for nonstandard menus - this is why I said to set it up mathmatically earlier). Next, check the CursorPosition variable to see if it went out of bounds (past the last item or below zero). If it did, set it back like it was. If it didn't, call a new event we'll go over in a moment, called "Move Cursor". This will move the cursor and play the appropriate 'move cursor' sound.

Move Cursor Event

The Move Cursor event is what the menu navigation cycle will call whenever one of the forks needs to move the cursor. This event should be a map event if the map is always displayed on the same map, or a common event if the map is displayed on different maps.

This event does the following:

1) Plays the menu navigation sound
2) Forks through all the different values on the menu and moves the cursor as appropriate to the correct location for each menu entry (calculate them the same way we did for the zero value in step 4)

Step 6 - Correcting the cursor positions

Now you should have a menu that works, even if you can't do anything with it. Test play your game and run your menu. Note the inaccuracies in your cursor positions, press ALT-F4 to quit out of your game, and go back and fix them. Rinse, repeat. Do it again - I guarantee you'll need to do it at least twice, many more if you haven't had much practice. Keep doing it until it looks right.

Step 7 - Taking action based on what is selected in your menu

Go back to your navigation cycle in the editor. Add in a fork for the Confirm button (which has a value of 5 in the Enter Password event). This fork should contain forks for all your menu values and take whatever actions are necessary based on what is currently selected. This will vary from game to game, and even from menu to menu, so I can't go over this in any detail.

Remember to refer to tut 1 of this series if you plan on using submenus, so you'll be able to easily come back to this menu.

Step 8 - Getting out of your menu

And lastly, to get out of your menu, add in a fork to your navigation cycle for the cancel button (Enter Password value 6). This event should erase the menu graphic and cursor, and break out of the navigation cycle (use the Goto Label command if you cycled your menu setup and set up a label back in step 4). This will completely break out of the menu event, and go back to the calling event.

In conclusion...

Yes, we have a conclusion this week! Anyway - using this tutorial as a guide, you should be able to create pretty much any static menu you can think of. I would suggest you PRACTICE first - create a throwaway menu with a few entries and a couple of static submenus and get it all working right and you should be good to go for your own 'real' menus.

Be creative - remember, it's all pictures, and you're not limited to strict menu spacing/positioning rules like with the dynamic or scrolling menus. Try using pictures, or fancy text, to achieve the best effects. You can also call an event every time the cursor position changes to do something based on what's selected (such as showing some help text). The possibilities are endless.

That's it for part II. Stay tuned for Part III - Distributed control and chara displays, where you will learn how to make those neat number displays, as well as other dynamic elements.