Gw Temp

Menu

Tutorial - 'SOM Style Menu System' by Ingram

An item about RPGMaker 2000 posted on

Blurb

Learn how to make your very own menu in RPGMaker 2000 similiar to that seen in Secret Of Mana for the SNES. Tutorial Courtesy of Icon

Body

+-----------------------------------------+
| Icon's Secret of Mana Ring Menu System |
| Version 1.0 |
| |
| Skill: Advanced |
+-----------------------------------------+


I have recently been implementing into my game a Secret of
Mana ring type menu system. The only problem with it is that
the menu items do not move in a perfect circle but instead in
a sort of diamond pattern, and it also is not centered around
the character in the first version, but still none this less
it works, so I decided to share it with you, the RPGMaker 2000
community.

Techniques Used
-----------------------------
Technique Page

Switches 1
Variables 1
Fork Conditions 3
Show Picture 2
Erase Picture 2
Move Picture 2
Enter Password 3
Label 3
Goto Label 3
Set Screen Tone 2
Call Event 3
Goto Title Screen 3
Call Save Menu 3



Menu Centered on Screen
-----------------------------------------

Setting up the Menu
-----------------------------
Before we do anything else we need to setup to the menu.
What I mean by this is that you need to make your buttons.
Yes, you have to make your buttons all by yourself. Just
use a paint program and make small pictures, and make sure
that you save them in 256 Colors or RM2K will not like you.
One thing you want to keep in mind though is the size of the
image, you don't want it too big, I personally used 24x24 pixels
on my buttons, but you may use whatever you like. When your
finished, import your pictures into RM2K using the Raw Files
Editor. Now we'll set it up so that when you hit the cancel
key it will bring up the menu.

Go into your database and click on the ""Common Events"" tab.
Select a blank event and name it something along the lines of
""Call Menu"". This is the event that will bring up your menu
whenever you hit the cancel key. Now on the right side in the
events box create a new ""Fork Condition"" that checks to see if
a variable we'll call ""Menu"" is on, and make sure that the ""Else
Case"" box is not checked. Inside the fork condition set up a
""Goto Label"" command and pick any number that you want. Now
we're done with that fork condition, surprising huh? Create an
""Enter Password"" command and set the variable to anything you
want, I used ""Run Menu"", check the ""Wait until Key Hit"", and
make sure it's only set for ""Cancel (6)"" and hit Ok. Make
another Fork Condition now that will check to see if the
variable ""Run Menu"" is the ""Same"" as 6 with no ""Else Case"".
Inside this fork condition is where we are going to set
the position of our buttons and then run the actual menu.

NOTE: I'm using 8 buttons with set to 24x24 pixels for
demonstration purposes, if you are using more you will have to
play around with the coordinates to get them to look right.

First we set up the coordiantes of the menu buttons. I will be
using the following buttons: Item, Weapons, Spells, Formation,
Status, Options, Save, End, and the variables will be named
after then respectively. We'll make 'Item' the top button, or
the first button that comes up. Create a two ""Change Variable""
commands that we'll call ""Menu Item X"" and ""Menu Item Y"". Change
the first variable to ""Set"" 160, and the second to ""Set"" 70"". Now
create more X and Y variables set to the following:

Weapon X - 190
Weapon Y - 90
Spell X - 210
Spell Y -120
Formation X - 190
Formation Y - 150
Status X - 160
Status Y - 170
Options X - 130
Options Y - 150
Save X - 110
Save Y - 120
End X - 130
End Y - 90

If you are using bigger/smaller buttons or using more than you will
need to change these variables. You'll probably have to play around
with them a lot to get them right. It took me an hour and a half to
get them looking any good at all. Now the the variables are all set
and done, make a ""Change Switch"" command that will turn on the ""Menu""
switch mentioned earlier. Now outside of the fork condition on the
last line of the event, create a ""Label"" command witht he same number
as the ""Goto Label"" command you created earlier. There now we're
done setting up the menu, now lets go get it drawn and to where it
will rotate the pictures.


The Menu Itself
-----------------------------
Now goto a new blank common event and name it ""Menu"", set it
to ""Auto Start"" and check the ""Appearance Condition Switch"" and
set it to ""Menu"". Now lets get down to the nitty gritty.

This next command is optional, but it makes it look good. Create a
""Set Screen Tone"" command, leave all the colors at 100%, but set
the chroma to 50%, and the wait to 5. What this will do is darken
the screen some when the menu is opened. Now we'll draw our menu,
using the buttons above. First we'll set up our Item button. Create
a ""Show Picture"" command and make sure the number is something your
not using, if all the buttons have the same number it will not work,
and if you've used other pictuers that are displayed at the same time
you must make sure that they do not have the same number either, set
the picture to the item button picture that we imported at the beginning
and the 'Show Position' to ""By Variable: Menu Item X and Menu Item Y""
respectively. Leave everything else blank unless you want your buttons
to be a little transparent. I think you know how to get the other butons
going, just make sure that the pictures do not have the same number.

Now after your done making the ""Show Picture"" commands, create an Enter
Password command and name the variable ""Menu"", set the rest up so that
everything is checked. Now create a fork condition that checks to see if
""Menu"" is the ""same"" as 3, this will check to see if the right arrow key
is hit. Leave the fork condition blank for now, because we're going to go
work on another common event that will do the actual rotating of the menu.


Rotating the Menu
-----------------------------

Name the new common event ""Rotate Clokwise"" (I know it's mispelled, but
thats because of size limitations) and set it up to ""Call"". We'll start
off by making two ""Change Variable"" commands. The first one will change
a new variable named, ""Menu Top X"" to 160, and the second will change a
new variable named, ""Menu Top Y"" to 70 (Notice this is the same coords as
our Item button?) Now that thats out of the way I'll explain a little of
what is going to happen. We are going to create 8 fork conditions (8 buttons)
to check which button is at the top and then rotate them correctly by changing
the X and Y coordinates we created earlier. Just to warn you this is going to
be the most boring part because it is very repetative and a lot of cut and
paste. We'll start with the Item button since it starts at the top anyways.
Create a fork condition that checks to see if ""Menu Item Y"" is the ""same"" as
""Menu Top Y"". Now inside the fork conditions we'll change the X and Y coords.
Create a ""Change Variable"" command that will change ""Menu Item X"" to ""Menu Weapon
X"" and another to change ""Menu Item Y"" to ""Menu Weapon Y"", and then go down the
list, weapon to spell, spell to formation, formation to status, status to
options, options to save, save to end, and then end is a little different,
instead of changing it to the items X and Y coords (Which have already been
changed), change it to the variable ""Menu Top X"" and ""Menu Top Y"". (I bet you
were wondering when those were gonna come in, huh?) Now create a ""Goto Label""
command that will goto a number you havn't picked yet for a label. There, now
our menu will rotate clock wise, but wait, it only works if the Item button is
on top. To move it when the other buttons are on top we'll have to do a fork
condition just like this one, for all of the buttons. (Told you it was a lot
of cut and paste didn't I?) The next fork conditions checks to see if the
if ""Menu End Y"" = 90, then ""Menu Save Y"", ""Menu Options Y"", ""Menu Status Y"",
""Menu Formation Y"", ""Menu Spells Y"", ""Menu Weapons Y"" and by that time we're
back around to Items. What you'll need to remember to do is make sure that the
two variables at the bottom for the button that moves to the top are moved to
the top of the ""Change Variable"" commands so that it can get the button to the
rights X and Y coords before it moves (I hope people can understand that). If
you didn't understand that, my e-mail address is at the bottom and there should
be a sample included in the zip file this should've come in. Now ofter all of
the fork conditions, create a ""Label"" command set to the number that we've been
using in this Common Event, then underneath the level we are going to setup the
""Move Picture"" commands to move them to the right spots. All you have to do to
do this is create the commands that will move the picture (By number, if the Item
picture number is 1, you'd set the 'Pic Number' to 1) and set the coords to what
else but the variables ""Menu Item X"" and ""Menu Item Y"". And if you want, afterwards
set up a ""Play Sound Effect"" command and set it to a sound that plays everytime the
menu is rotated. Now before we go back to the menu, how about we set up the Counter
clock wise too?

Create a new common event and name it ""Rotate Ctr-Clokwize"". Counter clock
wise is essentially the same thing as clock wise, except that you'll have to do
everything all over again, but in reverse order. So when the Item button is on
top, instead of change the end X and Y coords to the top, you'll change the Weapon
X and Y coords to the top. Just work your way down along the left and you'll be
fine (I hope). If you need a better explination of counter clock wise you can
e-mail me or look at the sample. If I get enough e-mails about it I may go into
detail about it in a later version of this tutorial. So now we go back to the
menu and set up the rotation.

Now back in the Menu common event, go back to that fork condition that we create
before that would check to see if ""Menu"" equaled 3. Inside the fork condition set
up a ""Call Event"" command that runs the ""Rotate Clokwise"" common event. Yay! Now
are menu rotates! Create another fork condition that will check to see if ""Menu""
equals 2, inside the fork condition have it call the ""Rotate Ctr-Clokwise"" common
event, now our menu rotates counter clock wise too!! Yippee!!! Next we'll cover
the Decision key and Cancel Key to select a menu item or leave it.


Select Menu Items and Leaving the Menu
-----------------------------
We'll start off with the cancel key, because this is probably the easiest to
do. Create a fork condition in your ""Menu"" commonon event that checks to see if
""Menu"" equals 6. Inside the fork conditions, create an ""Erase Picture"" command
for every button (Making sure to use the correct numbers), then afterwards create
a ""Set Screen Tone"" command that is set to everything at 100%, wait to 5. Then
a ""Change Switch"" command that turns the switch ""Menu"" off. Now we can get back
to moving our characters, wasn't that easy?

Selecting a button isn't all that much more difficult, it's just longer. Create
a fork condition that will check to see if ""Menu"" equals 5. We'll start off checking
to see if the button ""End"" is hit because it is 1 of the 2 buttons I created that
does not requrie a custom menu. Creating a fork condition inside of the previous
fork condition that will check the variable ""Menu End Y"" to see if it equals 70.
Inside this fork condition, setup, if you wish, a ""Change Sound Effect"" command
that will play a decision sound whenever a menu item is selected and if done, a
wait command that will wait at least half a second (5). Afterwards create a
""Goto Title Screen"" command and thats it for end. I will also go through save as
it is the other button that does not require a custom menu. Create another fork
condition just under the last one that checks to see if ""Menu Save Y"" equals 90.
Inside it set make it play the sound effect if you want, then create an ""Erase
Picture"" command for each button, making sure to change the pic number accordingly.
Then afterwards, create a ""Change Switch"" command that turns off the switch ""Menu"".
Afterwards make a ""Call Save Menu"" command, then create a ""Change Switch"" command
that turns ""Menu"" back on. Now we can save our game and end it too. To do the
other buttons, use the same techniques and have it teleport or show the pictures of
the custom menu you create, making sure to erase the menu and turn off the switch
when you do, otherwise the menu will still be visible.



Menu Centered on Character
-----------------------------------------
To do a menu centered on the character all you have to do is change around the
""Call Menu"" common event a little. What I am showing you is how to redo the variables,
this means that the varables done before are gone. Everything else is the same.

Create a ""Change Variable"" command inside the fork condition for ""Menu Item X"",
and set it to ""Event: Hero: Scene X"" to get the pixel coords of the character. Now
create another ""Change Variable"" for ""Menu Item Y"" that is set to ""Event: Hero: Scene Y""
, then another afterwards that changes ""Menu Item Y"" by subtracting 50 from it. This
will put it 50 pixels above the character. Then set up the other variables the same
adding/subtracting as follows:

Menu Weapon X + 30
Menu Weapon Y - 30
Menu Spell X + 50
Menu Formation X + 30
Menu Formation Y + 30
Menu Status Y + 50
Menu Options X - 30
Menu Options Y + 30
Menu Save X - 50
Menu End X - 30
Menu End Y - 30

Now we'll also have to go into the rotation common events and take out the change variable
commands for the ""Menu Top X"" and ""Menu Top Y"" variables and put them here in the ""Call
Menu"" event. Set them up the same as above, and subtract 50 from the ""Menu Top Y"" variable,
so that it is the same height as the Item button. Now it should be done and centered around
the character. Be careful using this tho, because if the character is on the edge of the
screen some of the buttons may be hidden off the edge.

End