The first thing you want to do is start up a new Project in TGB. In the Level Builder select 'File>New Project...' and name your project whatever you like. Now that we're in a fresh new project, let's open up the GUI Builder. You can do so by pressing the 'F10' key, or by selecting 'Project>GUI Builder...' from the menu.

Once in the GUI Builder, select 'File>New Gui...' from the menu and enter the name "ScoreboardGui". The name is important because we will reference this GUI object by name later. Leave "GuiControl" as the GUI Class and click 'Create'.

Now we see our blank GUI object. The first thing we want to do is make sure that the background doesn't steal mouse events from objects beneath it. In other words: we want to make sure the user can 'click through' the clear parts. So select 'GuiControl - ScoreboardGui' from the tree view at the top right, then below in the settings panel under 'Parent' set 'Profile' to 'GuiModelessDialogProfile'.

Now let's create the background for our GUI. In the leftmost listbox at the top of the screen, scroll down and select 'GuiControl' to add a new GUI panel to this GUI.

You should now see a clear bounding box - this is our new GUI Control. Drag this box towards the center of the screen. We want to see the box, so let's give it a profile that has a background color. With the box still selected, go the settings panel and select 'GuiWindowProfile' from the 'Profile' listbox. The box should now have a grey background.

Now let's put some text controls in our new box. We want them to be local to this smaller GuiControl box, so to make that happen we need to highlight it by right-clicking the box before we can continue.

Note the difference between 'highlighted' and 'selected': when an item is 'selected' it will show black transform handles and green measurement lines out towards the edges of the window, when an item is 'highlighted' it will show only a green and yellow border. If you ever want to cancel highlighting something, Right-Click on the background.

Now right-click on the grey GuiControl to highlight it. Now that the control is highlighted, any other controls we create will be local to it.

Let's add some text to our GUI. Select 'GuiTextCtrl' from the 'New Control' listbox at the top left. Notice that the new text control was created within the gray box. With the new GuiTextCtrl selected, set the profile to 'GuiText24Profile' and a little higher set the field called 'Text' to "Score:". Then scale down the bounding box of the Text control to an appropriate size.

With the grey window still highlighted, create another 'GuiTextControl' the exact same way, only this time set it's text field to 'Time:' and place it directly below the existing one.

Now add a third text control the same way and place it to the right of the one that says "Score:". This will be the text control we use to write the score. For now it's just important that we place it appropriately, so just put some generic numbers for the 'Text' field for now and get your text control to a nice size and position. I used "123".

Now let's make our fourth text field for holding our time value, this time by copying the one that currently says "123". Select it, press 'Ctrl-C' and then 'Ctrl-V' and drag your new text control to an appropriate position next to the control that says "Time:".

Now we need to make sure that we can access these two fields from script so we can change the text on the fly. There are several ways to do this, we will cover the simplest way, which is by just naming them. Naming objects is powerful, but these names must be unique which can be limiting. When using this method, make sure you give your controls very specific names to avoid overwriting existing names.

Select the "123" text control next to "Score:" and enter "ScoreboardGuiScore" in it's 'Name' field.

Do the same for the lower "123" text control, but this time enter "ScoreboardGuiTime".

That's all we need to do in the GUI Builder. Now let's make sure we save our new GUI so we can actually use it. You can save your GUI wherever you want, but there's a /gui folder in your project folder, so let's save it there!

Now close the application, because the scripts we need to edit require a restart of TGB.

The first script we're gonna edit is 'main.cs' in our project folder. We need to make sure that our .gui file is executed when TGB starts back up so we can use our GUI. Open it up and edit the initializeProject function to make it look like the following:

function initializeProject()
{
   // Load up the in game gui.
   exec("~/gui/mainScreen.gui");
   
   // load the Scoreboard Gui
   exec("~/gui/ScoreboardGui.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]);
}

We're done with main.cs, so save it and open 'game.cs' in your 'gameScripts' folder. Here we need to do several things, first initialize the two text controls in our GUI to 0 and then 'push' the GUI onto the canvas. Edit the startGame function to looks like this:

function startGame(%level)
{
   // Set The GUI.
   Canvas.setContent(mainScreenGui);
   Canvas.setCursor(DefaultCursor);
   
   // initialize ScoreboardGui fields to 0
   ScoreboardGuiScore.setValue("0");
   ScoreboardGuiTime.setValue("0");
   
   // push ScoreboardGui to the canvas
   Canvas.pushDialog(ScoreboardGui);
   
   moveMap.push();
   
   if( isFile( %level ) || isFile( %level @ ".dso"))
      sceneWindow2D.loadLevel(%level);
}

We also need to make sure the GUI is 'pop'ed when the game is over. Do so by editing your endGame function to look like this:

function endGame()
{
   sceneWindow2D.endLevel();
   moveMap.pop();
   
   // pop ScoreboardGui from the canvas
   Canvas.popDialog(ScoreboardGui);
}

Now we can manipulate the GUI from script! Let's write up a quick implementation to make sure it works. We can schedule a function to add 1 to the value of ScoreboardGuiTime once a second and create a callback for the scene window to increment ScoreboardGuiScore once every mouse click event:

// scenegraph onLevelLoaded callback
function t2dSceneGraph::onLevelLoaded(%this)
{
   // schedule the timer update function for 1 second
   %this.timerSchedule = %this.schedule(1000, updateScoreboardTimer);
}

// scenegraph onLevelEnded callback
function t2dSceneGraph::onLevelEnded(%this)
{
   // cancel the timer update event if it's currently pending
   if(isEventPending(%this.timerSchedule))
      cancel(%this.timerSchedule);
}

// updateScoreboardTimer function
function t2dSceneGraph::updateScoreboardTimer(%this)
{
   // increment scoreboard time field
   ScoreboardGuiTime.setValue(ScoreboardGuiTime.getValue() + 1);
   
   // reschedule ththis function for 1 second
   %this.timerSchedule = %this.schedule(1000, updateScoreboardTimer);
}

// scene window onMouseDown callback
function t2dSceneWindow::onMouseDown(%this, %modifier, %pos, %clicks)
{
   // increment scoreboard score field
   ScoreboardGuiScore.setValue(ScoreboardGuiScore.getValue() + 1);
}

Now if you open up and run the project in TGB you should be able to click anywhere outside of the grey box to increment the score. Time should increment automatically once every second. Note that clicking directly on the grey box does'nt cause an onMouseDown callback on our scene window. This is because the Profile on our grey GuiControl is not set to be modeless.

That's it. Thanks for reading, and congratulations on completing the tutorial!