Site News
• Basic Tutorials •
The Database
Graphic Resources
• More Advanced Tutorials •
The Database
Event Systems
• RGSS •
Script Fixes
Script Systems
• Other •
Using RMXP
Mini Tutorials
• Reference •

In this tutorial you will learn…

• How to make a picture-based menu…
• …Using events and pictures
• More about the uses of pictures

Hi there, and welcome to my tutorial on picture-based menus! This sort of goes hand-in-hand with my evented title screen, which will be the next tutorial and will use a lot of the same techniques. So, without further ado, let's make this menu!

To demonstrate this system, I will be making a character-select screen that the player will go through when they begin a new game, and, in doing so, they will be able to choose which character they play as. So, for this picture-based menu, you will need:

ê A blank 20 × 15 map
ê A variable
ê Two switches
ê A bit of know-how with a graphics program (Paint Shop Pro or Photoshop will do nicely)

Okay. Get your blank map, and, in the corner, create an autorun event called Picture Menu or something similar. This is the event which will be controlling all of the menu process when we're going through the character select. Now, before we begin the actual eventing, we need to make sure that we have all the pictures that we'll need for this system. The basic rule with systems like this is: if it moves, it must be its own picture. In this menu, I'm only going to have a cursor that moves; all the other pictures will remain still. This means that I can have all the other images on a single image, which I will call the backdrop. Here is a picture of it…

(Good ol' RMXP RTP battlers!) This will be the picture that forms the main part of my menu. Of course, you could have the character images separate and do all sorts of snazzy fading, spinning and stretching with the different pictures, but we'll keep it simple enough for the moment.

So, now all we need is a cursor. I am going to use this (rather simple) image for my cursor:

Don't forget to import these into your game using the Materialbase! (If you want more info on importing, check out this tutorial.)

Okay, now that we have the images, it's time to get going with the commands! However, just before we do, we just need to make sure that there are no players in our initial party, otherwise we'll get that annoying player flicker when we start on our blank map, like in my Cutscenes tutorial. But, we know how to solve this: just go into the Database and head over to the System tab. You should see, in the top-left corner, a list of all the initial party members. Delete all of these, so the list is blank, like so…

And then press OK. Alright! We're good to go! So, in our autorun event, the first command we're going to input is a Change Menu Access command. This will allow us to stop the player from accessing the in-game menu when your menu is on the screen. This command is on the first page of event commands, near the bottom of the second column. When you click on it, you'll get this box…

Obviously, we're going to set this to Disable - but we'll have to enable it again at the end, otherwise our player will be a bit stuck! So, once we've done that, we need to make our picture visible. If you're feeling adventurous, you could do something fancy with the Move Picture command, but for now, I'm just going to go through how to make a picture fade in from invisible.

Firstly, insert a Show Picture command, which you'll find on the top of the second page's second column. From the select box, select the main picture that you're going to show as your backdrop, making sure that you set the picture number to 1. Everything else can be left the same, except for the opacity. Because we want the picture to fade-in, we don't want it to be visible at first, otherwise it will flash before going to transparent and then fading in - so, we need to set the opacity to 0. Your picture box should look like this…

Okay, the next thing we're going to do is to make the picture fade in. To do this, the next command we're going to put in is a Move Picture command, which is located underneath the Show Picture command on the second page of event commands. With this command, we're not going to move our picture as such; we're going to use the opacity command to “move” the opacity to 255 at a time of 20 frames (you can change this if you want). See my Move Picture box here…

Okay, now we have the fading-in backdrop. The next thing we'll add is a Wait command for 20 frames - this will make sure that the opacity of the picture has finished moving before the system does anything else.

After that, I am going to introduce my system with a simple Show Text command. All it says is: ‘Select your character!’, and then we need to add a wait command for five frames. This stops the system getting confused with our button presses, so don't miss this out!

Now we're ready to do the actual processing of the system. So, our next command is going to be to show the cursor. In this example, I'm going to show you how to do a flashing cursor to give the system a little realism. The first thing we need to do, however, is to locate the coordinates on the screen where the cursor is going to move from and to - and this involves a little non-RMXP work.

Open up your backdrop image in an image-editing program - in my example, I'm going to be using Paint Shop Pro 8. You can use Photoshop or anything else you like - you can even use Windows Paint if you really want to! So, now that you have your backdrop image opened up in PSP, you need to open up your cursor image in the same program, select the whole of it, copy it, and then paste it into your backdrop image as a floating selection. To do this in PSP, go Edit > Paste... > Paste as Transparent Selection. Click anywhere to set it down, and then you can pick it up again, and read off the coordinates for the top-left corner in the bottom right of PSP's window. You'll find them here…

(Sorry to all you Photoshop users out there - I did look at how to do this in PS, but I've only been using it for about three months, so I'm not too good with it yet!)
These are the coordinates that you need to write down. As you can see, mine are 32 × 250 for the top-left image. I need to do this for the other four possible positions of the cursor and write down the pixel coordinates. Make sure that you take the coordinates that are from the top-left of the image! If you're using paint, the coordinates you'll see at the bottom of the screen are the coordinates of the cursor, so make sure that you move the cursor as close to the top-left corner as you can get it before taking the coords.

Okay, now we've got the fiddly bit out of the way, we can go back to our event. The next command we're going to put in is another Show Picture command, showing our cursor picture - ensure that the picture number is set to 2, otherwise it won't show! However, before you hurry ahead and go to press OK on the Show Picture box, we need to input some coordinates. In the Display Position section of the box, make sure that the Origin is set to Upper Left, and then you can input your coordinates in the boxes below. Here is how my picture box turned out…

See? Okay, now we've done that, we need to input a command controlling a variable called Cursor Position to be 1. This variable will keep track of where the cursor is, so that we can input event commands effectively later on. Got that? Okay, your first page of event commands for your menu should look like this…

Just one thing to note: make sure that you do put in the Wait command after the text box. It only needs to be 4 or 5 frames long, but without it, the system will take the button input of you pressing enter at the message as you pressing enter at the menu.

Right. This is where things get a little bit tricky. Press OK on your event, and then, next to it on the map, make another event called Cursor. This event will control the cursor loop while we're checking for button input in the other event. So, on the first page of this event, set the trigger to parallel and the conditions to the variable Cursor Position being 1 or higher. Okay? Then, in the command section, put in a Loop, which you'll find on the first page of event commands, underneath the conditional branch. This command does what it says; it repeats everything that's inside it until you break the loop.

Inside the loop, we're going to have the commands for the flashing cursor. Firstly, insert a move picture command for picture 2 (your cursor) changing the opacity to 25. Make sure that the coordinates are what they're supposed to be! After that command, add a wait for however many frames you used (I used 10), and then add another move picture command, changing the opacity back to 255 for the same number of frames. After that, add a final wait, and you have a flashing cursor! Here are the event commands…

Right. Now we've got that, head back to your first event, and make a new page, with the condition being that variable Cursor Position is 1 or higher. Now we need to do some branching for buttons. This page is going to be for when the cursor moves from position 1, which is the top-left character select. So, insert a conditional branch with the condition being that button C (enter or space bar) is being pressed, and uncheck the box at the bottom. Inside this conditional branch, insert the commands Break Loop (you'll find this underneath the loop command, on the first page of event commands). Also, to add some realism to your system, you can insert a Play SE sound to play 002-System02, which is the SE played throughout the game when the player makes a decision. We'll come back to what else we'll put in this branch later.

Okay, so far, so good! Now we just need two more conditional branches on this page. The first is when the player presses the down button. Under this conditional branch, put in the commad Break Loop, then the sound effect 001-System01 (this is the sound effect that is played whenever the player moves the cursor in-game. You don't have to add this, but I think that it's a nice touch!) Erase Picture 2, then Show Picture 2 as your cursor again - but this time, make sure that the coordinates are for the new position, which, in this case, will be the position below where the cursor was. Then add in a control variable command, controlling the variable Cursor Position to a new value. Make sure that you're consistent with these values. I am going to have the following: Top-left = 1, Top-right = 2, Bottom-left = 3, and Bottom-right = 4. The final conditional branch is if the player presses the right button (this is the only other way he / she could choose to go). Obviously I'll add the same commands as the previous branch, but I'll change the coords and the variable to 2 (it will be in the top-right corner now). Here's a picture of my cursor-1 commands…

Phew! Okay, now that we've got the commands for the cursor moving from position 1, we need to add the other commands for when it moves from positions 2, 3 and 4. Just follow the same pattern - but make sure that you've used the same variable values for the positions! Also, don't forget to add the C conditional branch to the top of each event page.

Just before I show you some pictures of the events, you also need to do some editing in your Cursor event. Add three more pages exactly the same as the first, but change the condition so that the variable increases by one. Now you'll have a page with condition variable Cursor Position is 1 or higher, and the second page would be condition Cursor Position is 2 or higher, and so on. In the commands section, you can copy and paste them from the first page, but make sure you change the coordinates to match the cursor position!

Okay, to help you out, I've embedded pictures of my commands below (click on the page tabs to look at the different pages!)…

Okay, so that's the main menu event. Here are the pictures of the Cursor event (click the page number tabs)…

See how the coordinates change in each loop? Also, take note of how the values for the Cursor Position variable match up in both events.

Okay, we're doing well! We need to now enter the commands for when we press Enter. This is going to be quite a long text explanation, so sorry about that!

So, go back into your Picture Menu event, and, under the conditional branch for pressing the C button, we need to add in the commands for selecting the character. The first command we're going to put in is actually a control switches command, controlling a new switch called Cursor Finish to be ON. This is so we can stop the cursor looping and fade it out without it continuing to flash.

The next command we're going to put in is a Show text, saying something like the following: ‘So, you've chosen <Name> to be your character?’ Obviously we'll replace <Name> with the name of the character, depending on the cursor position. After this, we're going to put in a choice with Yes and No, and, under the Yes branch, insert a Change Transparent Flag command. Now, you won't have come across this before - but what it does is make the player's graphic invisible. The reason that we need to do this is so that the player doesn't suddenly show up in the background! You'll find this command on the second page of event commands, third up from the first section. When you click it, you'll get this…

Obviously the two options either make the player transparent, or normal.

After this, we need to add Sera to the party (which will make her the first character). After that, we need to make the system finish. To do this, we first need to fade out the backdrop and the cursor, using two more move picture commands, changing the opacity of both the images to 0. Make sure also that the move picture command for the cursor has the cursor's coordinates in it, otherwise it'll move! After that, we'll add a wait for however long our move picture commands are (mine are going to be 20 frames), and then we need to erase both picture 1 and 2 (make sure that you erase the pictures after the Wait command!).

After this, we can add any other commands that we want - for example, transferring the player to a new map to continue with the game. If you want to put in any commands that happen when the system is finished, here is the place to do it. (You could also use a new event page to do this for the sake of not repeating yourself on every page: just turn on a self switch here, and then create a new autorun page with the condition being that that self switch is on, and then put in your commands. After that, you just need to remember to do the rest, which is explained below.)

Note: Remember that we've turned on the Transparency Flag, so after you've transferred your player to a new map, you need to change it back to normal again in an autorun event, otherwise the player will remain invisible! Just make sure that you don't change it back to early, otherwise the player will just appear on the blank map.

At the end of those commands, we need to add something important. Remember how we disabled the menu? Now we need to enable it again. Just use the Change Menu Access button, and change it to Enable. Then, we need to insert a control switches command, controlling a new switch called something like Menu Finish to be on. Your Yes branch should now look something like this…

Okay, now that we've done the Yes branch, we need to do the No branch. If the player selects No, obviously the system will continue looping until they do make a choice. However, if we leave the branch blank, then the option branch will keep looping, and we don't want this. So, firstly, we need to add another short wait command - only for 4 or 5 frames, just so that the system waits for the C button press on No to clear. If we don't do this, the system will think we've pressed C again, and will keep asking us the same question. After that, we need to add in a Jump to Label command to exit from the choice loop and resume the cursor loop. This command is at the bottom of the first column on the first page of event commands, and when you click on it, you'll get this box…

This is an extremely handy function which allows you to have your event process jumping all over the place - and it is especially useful for menus such as this, where a lot of the commands are repeated from different places. In our case, we're going to call the label Cancel, and press OK. But wait!, I hear you cry, We don't have a label! Fear not - we're just about to make one. Right below the Branch End of the conditional branch that checks for button C input, put in a Label command, which is just above the Jump to Label command that we've just used. The input boxes look almost exactly the same, so make sure you click the right command button! When you click on it, you'll get a box asking you for the name of the label. Our is going to be called - yup, you got it - Cancel. Okay, now your event commands for the choice branch should look something like this…

Now we've got this, we just need to do this in the other button C conditional branches in our main event, changing the name in the text and the party member added to our party and making sure that we add the labels in the right place.

Okay, there's just a couple more things that we need to do before we're done! At the end of your main event, add another page with the condition being that switch Menu Finish is on. This will stop the system from looping when the choice has been made. (If you've used this page for the finishing event commands, then just turn on a self switch at the end of that page, and then use that to run into another page, with trigger action button, to stop the system from looping in autorun). Also, make sure that the trigger is left on action button to stop any looping. Now, in the Cursor event, we need to add one more page - with the trigger set to action button and the condition set to the switch Cursor Finish being on.

Okay! We're all good to test out our system! Don't forget, if you want to add in some commands transferring the player to another map to continue the game, you need to add them just before you turn on the Menu Finish switch in the main event. And, just so you can see what it looks like, here is a video of the system that we've (hopefully!) just made…

Recently, I've had quite a few e-mails regarding trouble with Picture-Based menu systems. This is not a problem; in fact, I'm glad that people are using my tutorial! To try and offer some extra guidance, I've also created a demo of this system so that you can look at my event commands and match them to your own. Click below to download the Picture-Based Menu Demo:

Download Picture Menu.zip: 845kb

And, I think that's it! If you're still having trouble with your menu system, they have a habit of being awkward and very pernickety, so by all means, just e-mail me and I'll see what I can do. Good luck! My next tutorial will be on making the evented title screen. See you there!

:: << Previous Tutorial ::      :: Home ::      :: Next Tutorial >> ::

RPG Maker XP © 2005 Enterbrain Inc.           © 2004 Xiph. Org Foundation           Ruby © 1993 - 2003 Yukihiro Matsumoto
This site, including images and textual content, were created by and belong to me.
© 2006 - 2011 All rights reserved.

This website and tutorials have all been written in my free time (what there is of it!), and hosting can be rather costly, so any donations are very gratefully received - no matter how small - even if you can spare 50p I would be grateful!