Menu Making
Making a menu is easier than you think. If you think about it carefully, you can already determine what you'll need for it.
A pointer image, and a variable that keeps track of the pointer's position.A background image.
Menu text.
Functions for when the user activates a menu item.
Now that we know what we need, we can now begin designing a menu! (In this example, we'll be creating a simple startup menu, with options for starting a new game, viewing the credits, and quiting.) All the code in this example is inside system.vc.
The first thing we'll need to do, is make the pointer image. The pointer will be small: a simple 8x8 image should do it.
We'll be using my window drawing function to draw the background for the menu, so we won't need to create an image for it. This function is contained inside a seperate vc file, so you'll need to include it into system.vc. (window.vc can be found in the scripts sections, or in the finished zip at the bottom of this article.)
#include "window.vc";
Now we can start writing the menu function. This is a startup menu, so we'll name it Startup.
void Startup()
{
We only need 2 variables: One to store what menu item the pointer is pointing at (Pointer), and one to store it's image (PImage).
int Pointer, PImage;
Pointer automatically initializes to 0, so we'll use that as the first position in the menu. But we'll still need to load the pointer image.
PImage = LoadImage("pointer.gif");
Now that we've done all the "pre-menu" stuff, we can get into the actual menu code. The menu will be inside a loop. We'll use an infinite While loop for this, because we don't know how long the menu will be onscreen.
While(1)
{
Why are we using a number as a condition? Because of the way computers use true and false. A value of 0 is always false, and any other number is true, although traditionally 1 is used. A While loop will continue to loop while the condition is true, and because a number other than 0 will always be "true", the loop will always loop. (Re-read that a few times if you have to. ;)
Next, we'll need to redraw the map, and draw the window.
Render();
DrawGradientWindow(120, 80, 210, 135);
What's that DrawGradientWindow there? That's that function inside of window.vc, which you included eariler. You don't need to know how the function works to use it, although you're welcome to take a look inside window.vc to see. :) All it does is draw a window, FF style, at the co-ordinates you give it.
Next, we write the menu text.
GotoXY(130, 90); PrintString(0, "New Game");
GotoXY(130, 105); PrintString(0, "Credits");
GotoXY(130, 120); PrintString(0, "Quit");
So far so good... but what about the pointer? This is where a little bit of math comes in. If you look carefully, you'll notice that the text is spaced 15 pixels apart, starting from 90. This means that we can use multiplication to figure out where to place the pointer.
TCopySprite(125, 90+(15*Pointer), 8, 8, PImage);
Don't worry if you can't see patterns like that right away. As you become more advanced, they'll become easier to spot. :)
Now, we'll need to copy everything we drew onto the screen, and update the keyboard keys.
ShowPage();
UpdateControls();
Here's where it actually starts looking like a menu. We need to move the pointer down if the user pressed down, and move it up if the user pressed up. We also don't want the pointer to move past positions 0 and 2, so it stays within the valid menu choices.
If(up && pointer>0) { Unpress(5); pointer--; }
What that basically says, is if the user pressed up and the pointer is greater than 0, move the pointer up. The thing to remember here is that positon 0 is the menu's top, so the lower the number, the higher the pointer is on the screen. Now, we'll need to do the same thing for if the user pressed down.
If(down && pointer<2) { Unpress(6); pointer++; }
Ok, so now the pointer moves up and down, but we still need to add functionality to the menu. We need it to do something if the user pressed enter.
If(B1)
{
We'll use a Switch statement for deciding what to do depending on where the pointer was pointing when the user pressed enter.
Switch(Pointer)
{
Our first option was to start a new game. Let's assume that the first map the game starts on is Intro.map.
Case 0: Map("Intro.map");
Our second option was to see the credits.
Case 1: Credits();
Lastly, we have an option to quit the game.
Case 2: Exit("Thanks for playing!");
All we have to do is add closing braces, and we're done! How many closing braces do we need though? We need 4, for closing the switch statement, the If(B1) statement, the While loop, and the function header.
}
}
}
}
Of course, we can't forget about that Credits function that we used inside the menu. However, I'll leave it up to you to code that. Think of it as a little practice project; I'm sure you can do it. :)
Now, the menu is finished. But we still need to call it in the autoexec event of the first map that Verge runs (Or the autoexec function if you're using V2.5). This is also a fairly simple thing to do.
