MinApp Tutorial #3 - Main Menu GUI

Download Code File

Tutorial #3 - Main Menu GUI

Now that we've added in support for most of the basic Torque tools, we can start down the path of
actually making our FPS demo. As with any game you make, it is always best to do some design work
first. As this is a pretty simple FPS, and a flexible tutorial series, we're just going to do some
very minimal designs to keep us going in the right direction.

In my mind's eye I see the result of this series producing a basic demo very similiar to the FPS
starter kit that comes with Torque. It seems to me that most all of the elements needed for an FPS
are in that demo.

With that as a goal, it is pretty easy to map out what needs to be done. At this point in time, a
lot :)

The first thing we're going to run through are the menus. At the absolute minmum we will need a
Main Menu. The main menu would need a way to exit the demo and a way to get into a mission.
Typically the main menu would link to other menus. We will eventually do this, but let's start
with our main menu.

The minimal GUI that James made uses an overlay GUI. I have to admit that I just can't seem to get
a good handle on the operation of this GUI type and it seems to be causing me all sorts of
problems. The overlay seems to stay up, even when I switch to other menus. So for the time being,
we're going to remove this overlay and do a normal GUI. Rest assured though that we will be
coming back to overlays at some point so that we can understand them fully. Just not now.

Overview
We will remove the overlays and then build a standard GUI. This main menu will contain options for
Quit, Options, Credits, and Play Game. All of those except Quit will eventually invoke other GUIs
but the scope of this tutorial is to simply get our main menu built.

1) Remove the overlays
To remove the overlay GUIs, or any GUI for that matter, is simply a matter of deleting the GUI
files, and removing the exec() statements in our scripts.
Open up minapp/demo/client/init.cs and delete the following code:

// Demo page & scene gui
   exec("./ui/MainMenuDlg.gui");
   exec("./ui/overlayDlg.gui");

Then go into minapp/demo/client/ui and delete the files:
mainMenuDlg.gui
overlayDlg.gui

2) Add "Quit" button to the Main Menu GUI
Now that we've removed our overlays, we can start building our new main menu. The rest of this
tutorial uses the Torque GUI editor, so start up the MinApp and press F10 to open the GUI editor.
In the upper portion of the screen, you will see a button labeled "New Control". Left clicking on
this button will present us with a list of all possible control profiles. Selecting a profile will
create a new control using that profile. We want to make a button. There are in general, two
types of buttons. Regular windows type UI buttons, and Bitmap buttons. Bitmap buttons use a
bitmap as the visual element for the button and is what you would almost always use when making a
game. However, since I can't draw a straight line with a ruler, I am not going to be making any
bitmap buttons. If someone out there wants to contribute them i'd be glad to use them. For our
purposes we will be using the normal Windows type buttons. Select GuiButtonCtrl from the control
profiles. You will now see a default pushbutton on the main menu gui.

First, let's position our button down somewhere near the bottom of the GUI. You typically want
your user to think of the "Quit" option last not first :) Left click and drag the button down near
the bottom of the UI and to the right a bit so it isn't on the edge.

Next, let's change the text displayed on the button to "Quit". In the lower right corner of your
screen you will see the button's properties. This is where you can edit just about everything
about the button. Look for the property named "text" and change that from "Button" to "Quit". Once
you have done that, click the APPLY button at the top of the properties window, and you will see
your button text change.

Now the big question is this -- "How do I bind my button to code?". We do this with the "command"
property. By placing code in this property, that code will be ran when the user left clicks the
button. Typically this code will be a function. In the case of our Quit button, we want the
command to be "quit();". Note that you aren't just putting the name of a function to run, but you
are putting actual code in there. Add that and click apply. Now let's test out our new button.

First, click on the File menu and then Save GUI, then click Save to save it. Now, press F10 to
close the GUI editor. Click on the new button, and if all goes well, you should exit the demo.

3) Add the "Options", "Credits", and "Play Game" buttons
Using what we learned in step #2, we can go ahead and add the other buttons. For now, leave the
command property blank, as we don't have anything to tie them into yet.

Summary
In this tutorial we learned how to create new GUI controls, specifically buttons. Our buttons
don't do much yet, but in the next tutorial we will be creating brand new GUIs and hooking our
buttons into them. This next tutorial should be fun!