Home > Tutorials > RPG Maker 2003 > Custom Menu Tutorial: Phase 2
Custom Menu Tutorial: Phase 2
This is the second part of my custom menu tutorial. This adds some interactivity to the menu that was not present in the first part of the tutorial. Basically, this menu setup will now interact with in-game conditions, will also interact with the cursor position, and assumes that you know the programming used in the first part of the tutorial. Again, this was all completed in 2k3, but is also applicable in VX or XP.
The example I am using is a screen to level up skills for a particular job class. For this menu, skills that are available and can be purchased are white, skills that are available but cost too much are grey, and purchased skills are black. Moving the cursor will also give a description of the attack at the bottom of the screen, and will come up notifying the player that a skill has been purchased if it has been brought.
These are two examples of the completed menu. To begin, create the initial screen, which is simply the title of the screen at the top, and a blank background.
To add the different skills as text, each skill name needs to be created in a paint-style program, so that it fits onto the menu grid that for the class skills. I divided my 'Class Skills' screen into three columns, and made each row the same height. Copy one of the cells and open it as a new file, write the skill name in grey (use any colour except white, and the text colour can be altered in RPG Maker later), and save. Repeat for each skill you wish to have on the screen in the menu.
After the skill names have been completed, for each skill that you are putting on this screen, create a description of the skill, including the cost, in the same colour as your skill names. Make these fit across the entire screen. Also create text that states 'Skill Purchased' in your default colour. Import each text picture, including the menu screen. Make sure everything has a transparent background, except the menu screen itself.
The coding for this event is slightly more complicated than that of my previous example. Our loop event needs to contain all of the text display events, which will be run at the start of the event, and whenever a skill is purchased. First insert your menu picture on the centre of the screen, assuming it is a full-screen menu.
In your loop event, be sure to place a label above the text display events, which allows for the text to be recoloured after purchasing a skill.
There are three possible alternatives for our skill status - we have already learnt it, we can learn it and meet the requirements, or we can learn it but have not met the requirements. The first thing to do is to set up a conditional branch event that checks whether the player has the skill in question. If this is so, we display the text as black. If we have not got the skill yet, we check whether the player can purchase the skill yet or not, according to some requirement. If it can be purchased, make the skill white, if not, make it grey (default text colour). Use the same picture ID for each possibility, and all should be displayed in the same position. You can also run a conditional branch here to check whether the skill is available or not, and if not, display a text picture such as 'Not Available Yet'.
http://i280.photobucket.com/albums/kk178/rojse/SkillScreenProgramming.jpg
This is a picture of the programming used at the start of the event, and shows how the displayed picture changes according to switches.
For each possibility, we display the text in the same position, (the centre of each grid cell) but we alter the colour of the text with the colour slider option at the bottom of the 'Show Picture Event'. White is 200%, 200%, 200%, black is simply 0%, 0%, 0%, the default text colour you used is 100%, 100%, 100%, and all of the other colours are somewhere between black and white.
The rest of the coding for the event is the same for the first part of the tutorial - a key input processing event, check the variable used for the direction of the key press, and use conditional branches to add/subtract numbers to a cursor variable, to calculate the current cursor position. You also need conditional branch events that change the variable if it goes outside the grid area, the cancel key which removes all picture instances, and the decision key which runs the skill choose event. I go into more detail in the previous tutorial, so if you have difficulties here, have a look at the first part of the tutorial, or ask me for help on this thread.
For the second event, check the cursor position, and check whether the player has the skill or not. If they do, display a message: '[Hero name] already has this skill.' If they do not, check that the player is able to purchase the skill. If they can, add the skill to the hero, put in a 'Jump To Label' event, and display a message: '[Hero name] has learnt [skill]'. Complete for each cursor position.
The skill cursor updater is completed in the same manner as the previous tutorial, but for each cursor position, make two conditional branch events, one for whether the skill is known or not, and the second for whether the skill can be brought or not. If you are going to put in skills that may or may not yet be available, also code this here. Display the skill information text at the bottom of the screen for each, and change the text colour to the same colours used for the skills themselves for various conditions. Again, use the same picture ID for each possibility. This will change the text, depending on the cursor position.
http://i280.photobucket.com/albums/kk178/rojse/SkillCursorProgramming.jpg
I hope this tutorial helps people make interactive custom menus. Please leave feedback or suggestions on how the tutorial can be improved, and if you are having any difficulties, please feel free to ask questions.
|
|
Details
|
|
Tutorial:
|
Custom Menu Tutorial: Phase 2 |
|
Date Listed:
|
2008-06-15 |
|
Author:
|
rojse
|
|
Total Hits:
|
8315 |
|
|
Submit Your Article
Guild Wars 2 Forum
RPG Maker VX.com
