Before we get started make sure you are in a new project (in the Level Builder: 'File>New Project...'). Now press 'F10' to toggle the Gui Builder.

Ok, let's get started! If you've done the Score and Time GUI Mini Tutorial, this first part should be very familiar. Create a new GUI ('File>New GUI...') named "mainMenuGui" with the default GUI Class ('GuiControl'). Select the main gui in the tree view and set the profile to 'GuiModelessDialogProfile' in the settings panel so the clear parts won't hog mouse clicks.

With our clear background ready we can focus on the part people will see. Click the 'New Control' list (the first dropdown list on the top-left of the window) and select 'GuiControl'. Move the new box towards the center and set it's profile to 'GuiWindowProfile' so we can see it. Scale it to whatever size you want your menu to be. Keep in mind we're going to have three buttons!

Right-click on your new menu background to highlight it and create a 'GuiButtonCtrl' via the 'New Control' list. The button should appear inside the menu. If it didn't, delete the button and try again making sure that the menu box was 'highlighted', not 'selected'. Scale this button to the size you want all your buttons to be, and then make two copies of it using 'Copy' and 'Paste'. Place your buttons where you want them.

Now let's edit the text on the buttons. Edit the 'Text' field of the first button to say "New Game". This is slightly different from the 'GuiTextCtrl' in that the 'Text' field is listed under 'Misc' in the settings panel, rather than 'General'. Edit the other two buttons to say "Load Game" and "Exit" respectively.

Now here's the important part, the 'Command' field! Whatever is in this field will be run whenever the button is pressed. Because of this fact, it is important to check your 'Command' fields for syntax errors.

Rather than using global functions, we are going to use the namespace of this GUI. Set the 'Command' field of the first button to "mainMenuGui.newGame();" (note the semicolon!). As you might have guessed, the next two should be set to "mainMenuGui.loadGame();" and "mainMenuGui.exit();".

Make sure you save your new GUI in the '/gui' folder for your project and then you can close out of TGB.

Time to script! First we want to execute our .gui file from 'main.cs' so TGB will know about our GUI next time we run it. Edit your initializeProject function to look like the following:

function initializeProject()
{
   // Load up the in game gui.
   exec("~/gui/mainScreen.gui");
   
   // load the main menu gui
   exec("~/gui/mainMenuGui.gui");
   
   // Exec game scripts.
   exec("./gameScripts/game.cs");
   
   // Remove the following four lines if you would like to start the game without running the
   // level builder.
   if ($runWithEditors)
   {
      toggleLevelEditor();
      return;
   }
   
   // This is where the game starts. Right now, we are just starting the first level. You will
   // want to expand this to load up a splash screen followed by a main menu depending on the
   // specific needs of your game. Most likely, a menu button will start the actual game, which
   // is where startGame should be called from.
   startGame($levelEditor::LastLevel[$currentProject]);
}

Now we need to set up a seperate script file to handle our window commands. Let's create a new script in our '/gameScripts' folder and call it 'menuCommands.cs' to store all our menu commands. We need it to handle the three functions we gave to our buttons, and maybe some extra stuff. Lets start off with a key bound to toggle the window:

// bind key
moveMap.bindCmd(keyboard, "delete", mainMenuGui @ ".toggleMenu();", "");

// toggle the main menu
function mainMenuGui::toggleMenu(%this)
{
   if(!%this.isAwake())
   {
      Canvas.pushDialog(%this);
   }
   else
   {
      Canvas.popDialog(%this);
   }
}

Great, now let's define our button functions:

// start a new game
function mainMenuGui::newGame(%this)
{
   // write your 'new game' code here!
   echo("New game clicked!");
}

// load a saved game
function mainMenuGui::loadGame(%this)
{
   // write your 'load game' code here!
   echo("Load Game clicked!");
}

// exit the game
function mainMenuGui::exit(%this)
{
   // exit T2D
   quit();
}

We are done with this script. Now we need to make sure it get's executed when the game is run. Save 'menuCommands.cs' and open 'game.cs'. Edit your 'startGame' function to look like this:

function startGame(%level)
{
   // Set The GUI.
   Canvas.setContent(mainScreenGui);
   Canvas.setCursor(DefaultCursor);
   
   moveMap.push();

   // exec game scripts
   exec("./menuCommands.cs");
   
   if( isFile( %level ) || isFile( %level @ ".dso"))
      sceneWindow2D.loadLevel(%level);
}

All done! Now load up your menu project in TGB and the 'delete' key should make the menu pop up. The New and Load buttons should spam the console (use the '~' key to check). And the Exit button should quit TGB all together!

Thanks for reading and congratulations on completing this tutorial!