[Eventing]How to Make Menu-like screens!, No scripting required! Options

[Stern]

Hello everyone!
(Download Link)

This is a tutorial on how to make a custom menu-like system using nothing but events and pictures. I will try to explain everything in detail so that everyone will understand, no matter your skill level with events. If you're an advanced user you might just want to look at the pictures to get it.
For this tutorial, I'm going to assume that you already have basic knowledge about switches and variables.

List of Switches and Variables used.
S: 0001: Menu Allowed?
S: 0002: Menu Open?
V: 0001: Cursor Position

These are all the basic switches and variables needed. I recommend that you use the same names as I am, because I will be referring to them by name.


The first thing you will want to do is to make the pictures you want to use for your menu.
Here are the graphics I'm going to use for this tutorial. I made it very basic for the sake of keeping it simple.

[Show/Hide] Menu Preview

"


It is important that you separate Background, Content (menu items) and the cursor in different pictures. All the parts of this image are included in the example demo above. I've used the method of 1 picture per position for the cursor. You can use move picture if you like, but this tutorial won't be covering that.

When you're happy with how your menu looks it's time to move on to the next step; Common Events.


Common Events

For the menu to be accessible from any point in your game you'll want to make sure it's called from a common event. This is an easy way of doing it;

In this example I'm making this menu to replace the standard menu. Therefore it will be called using
the cancel button, B (Esc, X, Num 0). Other ways of doing it is to have it called from the menu to complement
the basic menu with more interesting features.

[Show/Hide] Common Event 001: Menu-Open-Close

[Show/Hide] Reference Picture

I've marked 1-7 in Red in the text. Just look at this picture if you're confused.

Make the first common event and call it whatever you want. I'm going with [001: Menu-Open-Close]
to make it simple. Set this common event's trigger as Parallel(1) with the condition switch set to: [0001: Menu Allowed?](2). This means that this event will be active as long as you have turned ON the switch [0001: Menu Allowed?] Now to the actual event!

We want to make sure the menu comes up only when you want it to so we need to add a conditional branch. Set this conditional branch to check if the script below was ran.(3)

CODE

Input.trigger?(Input::B)

This simply means it's checking if you are pressing your B-key (Again; Esc, X, Num 0).

Now that the event knows when you press B, you want it to do something when that button is pressed.
Before we get into that we will need another conditional branch. This conditional branch will be checking if the menu is already open or not and then act upon that (4). This conditional branch needs to be set to; If Switch [0002: Menu Open?] = OFF. Don't forget to tick the box called "Set handling when conditions do not apply", otherwise you will not be able to close your menu.
Now that all the conditional branches are properly set up all we need to do is set the cursor position and show the actual graphics for the menu.
(5)

• To set the cursor position, simply set variable [0001: Cursor position] to 1. (I will explain why a bit further down in this tutorial.)
• To show your graphics simply use the Show Picture command.

Now end this branch with turning ON the switch [0002: Menu Open?]
This is to let your common event know that the menu is open and next time you press escape it is to close the menu.

Now go to your second conditional branch and find the : else:(6). Under this you need to do the following;
(7)
Turn OFF the switch [0002: Menu Open?] - This will let your event know that the menu is no longer open.

You will also have to erase all the pictures used. The amount of pictures used may vary depending on how advanced your system is. In this case we are only using 3 pictures and therefore we only have to add:

Erase Picture: 1
Erase Picture: 2
Erase Picture: 3

You're now finished with the first common event. Two more to go!

[Show/Hide] Common Event 002: Menu-Graphics

[Show/Hide] Reference Picture

I've marked a-e in Red in the text. Just look at this picture if you're confused.

Now make the second common event. I called it Menu-Graphics.

Set the trigger to Parallel(a) and the Condition switch to [0002: Menu Open?]. (b)
In this event we will be controlling all the graphics that will change in the menu. With this simple menu it will only be controlling the cursor. Let's get started!

Start off by making a conditional branch with If Switch [0002: Menu Open?] is ON©. Make sure you don't forget to tick the box Set handling when conditions do not apply.

Allow me to explain how we'll be using the variable [0001: Cursor Position]

This variable will be controlled through the third common event and will essentially be the base for any keypresses made except for opening and closing the menu. The variable will have a value for each individual menu-item (Save,Exit, Option1, etc) Then the third common event will be registering keypresses depending on what value this variable has. Now let's get to it.

Inside your conditional branch you need to make one conditional branch per value of the variable [0001: Cursor Position] and also two extra branches to loop your cursor. I will explain more about this further down.

First we make one conditional branch per menu-item. In this case I've made 5 menu-items (d) (Option 1, Option 2, Option 3, Save, Exit). Set each branch to If variable [0001: Cursor Position] = X. Replace X with the number of the current menu-item.

In each branch we need to show the corresponding picture. So in branch number 1 you'll be displaying picture number one. In my case it looks like this;



The erase picture is necessary to erase any previously used cursor picture. Now repeat this procedure with all the menu-items you've made.


Now let's get to the "looping branches".(e) These will move the cursor back to the top if you go all the way down and vice versa.

Simply make a top branch that will check if the value of the variable [0001: Cursor Position] is less than 1. If it is, make the event move your cursor to the highest number in your menu. In this case it's 5. To do this simply set the variable to 5. Easy as that.

Now repeat the same procedure but make a branch that checks if the variable is more than 5. If it's more than five it will move to 1. By using the same command of course.

[Show/Hide] Common Event 003: Button-Presses

[Show/Hide] Reference Picture

I've marked I-IV in Red in the text. Just look at this picture if you're confused.

Now we're going to take a look at the third common event. I called it 003: Button Presses. This event will act upon the players key inputs. You want to be able to navigate properly in your menu, right? Let's start!

Set the event's trigger to Parallel(I) and the Condition Switch to [0002: Menu Open?].(II)

Now make a conditional Branch for each key input (III) , except open/close. I prefer having left and right scrolling up and down as well. So I'll be setting up the keys: Left, Right, Up Down and C. (C is the action button or confirm button if you like.)

Let's start with the directional arrows.

I want Down and Right to move my cursor down so here's the setup for them;


Make sure you add the Set Player Route: Wait 10 Frames. This will prevent your player from moving around while you're navigating the menu. It's important that you untick the box called "Wait for completion". Otherwise your whole menu will stop for 10 frames before it continues. Because we already have set up the graphics display in the previous event, this is all we need to do.

I do the exact same with Up and Left. The only difference is that instead of adding 1 to the variable
It will subtract. This will make my cursor go up.


Simple so far, right?
Now we need to decide what happens when we press C (Enter, Space, Z), for each menu item.

First make sure the event knows that we're pressing C by using the same script as I've mentioned above.
Make a conditional branch with the script;

CODE

Input.trigger?(Input::C)

(IV)

Now inside this branch we add another branch for each Menu option we have.
Currently I have nothing In my option 1-3 so I will just have the game give off a buzzer sound effect when those are pressed.

Let's take a closer look at the Save and Exit commands. When my cursor variable is at 4 and I press enter, I will open the save screen. When it's 5, I will return to title screen. It's pretty simple.


In this case it's a very simple event, however if you're planning on taking this a bit further, this particular
Event will be a bit of a hassle to set up. I will explain that in the next part of this tutorial.

Now the important thing you need to do for this to work in your game, is to disable menu access and enable the switch [0001: Menu Allowed?]

If you have any questions, fire away! :)

I hope this helps or inspires at least someone :)

This post has been edited by Stern: Jun 7 2011, 05:40 AM

[banditred1]

This is really creative This really shows the flexibility of RPG maker. I'll be sure to try it out in future games
Nice job!