Setting up Basic GUI Interactions In-Game

Introduction

In this tutorial step we are going to cover interactive GUIs for in-game responses. Basically what this boils down to is a GUI to pop up in our menu bar when we select buildings and units. Are building GUI should have a button to create units, as well as all important information, such as how many of each type of unit you have. The units should have a move command on them.

Our base GUI

Add some Gui Controls to our mainScreenGui

Open up T2D and hit "F10" to bring up the GUI Editor. You should see something like this.

Now we want to right click our Property Menu, this is the border we created in the bottom right of our screen... like this.

Now since we have our PropertyMenu right clicked we can create child controls within the control. To do t his click "New Control" and choose a GuiControl... resize it and position it to match this (note you can set the position and extent manually) then set the name and be sure to click APPLY when your done.

Now add a new GuiControl and set it just like the previous one, but make sure its position and extent settings match this.

Now that we have two new sub menus for our Actions and Properties we need to create text labels so we can visually associate them with their purpose. So click "New Control" again and choose a GuiTextCtrl... now set its position and extents to match this and be sure to make sure you set its text field as well, click APPLY to finish it off.

Now lets create another text label to match our other menu, make it match this.

Now we've extended our mainScreen Gui enough to add the proper categories to extend our GUI Interaction.

Be sure to click the File drop down menu and click save, save the GUI to the same location so it overwrites our already existing mainScreenGui.gui.

Create a new GUI file to act as our Base's menu

If T2D isn't already up make sure it is and if you don't already have the GUI Editor up press "F10" to bring it up.

We are going to create a new GUI so click on the File drop down menu at the top left of the GUI Editor and choose "New GUI..." you are then prompted with a Create Gui dialog... Set its name to "BaseMenuShell" and keep it at the default of GuiControl, like this.

The reason we're creating a gui called "shell" is to ensure it will fit inside of our menu bar. We don't want to create this inside of our mainScreenGui since we don't want to start the game out with it already accessible, if we create a new GuiControl the base control will automatically be resized to the maximum size of the screen (note when we created this GUI we didn't get an option for size), so what we will do is create a holder or "shell" for our GUI that must be a specific and rather small size, thats why we started out with "BaseMenuShell."

Now create a new GuiControl, like this.

Resize, position, and name it to match this...

How it looks
It's properties

Now we want to add some Gui Controls within our BaseMenu, so right click the BaseMenu like this.

Now that we've right clicked it click "New Control" and add a GuiButtonCtrl... Resize it, position it, and set the command to match this.

How it looks
It's properties

Now create a second button and make it match these settings.

How it looks
It's properties

Now we are going to create a total of six text controls. Three will simply be labels: "Gold:", "Workers:", and "Soldiers:". The other three will be just to the right of those three, the important part of these is setting their names to BaseGold, BaseWorkers, and BaseSoldiers. Setting these shouldn't be anything new so I'm only going to give you an image of the tree view, so their will be three text control's without names and three with the names I mentioned.

Now click the File drop down menu and click Save GUI... from the menu. Save your GUI like this.

Add this command to your game.cs

function BaseMenu::updateBaseInfo(%this)
{
   %workers = ActionMenu.obj.workerCount;
   %soldiers = ActionMenu.obj.soldierCount;
   %gold = ActionMenu.obj.goldCount;

   BaseWorkers.setText(%workers);
   BaseSoldiers.setText(%soldiers);
   BaseGold.setText(%gold);
}

Add this to your exec.cs

exec("./baseMenu.gui");

Add this to your objectTypes.cs

// --------------------------------------------------------------------
// Base::OnSelected()
//
// This is a base function that is called when selected
// --------------------------------------------------------------------
function Base::OnSelected(%this, %obj, %pos)
{
   $SelectedType = BaseMenu;
   if($playerTeam $= %obj.team.getName())
   {
      ActionMenu.obj = %obj;
      ActionMenu.add(BaseMenu);
 
      BaseMenu.updateBaseInfo();
   }   
}

Change out your Base, Worker, and SOldier objects with this.

   // our root Base class for our team fortresses
   new ScriptObject(Base){
      imageMap = CityImageMap;
      size = "12 12";
      hitPointsMax = 1000;
      hitPointBarScaleFactor = 22;
      isSelectable = true;
      soldierCount = 0;
      workerCount = 0;
      goldCount = 200;
   };

   // now lets create our second level of classes, Worker and Soldier
   new ScriptObject(Worker : Entity){
      superClass = Entity;
      size = "5 5";
      speed = 12;
      hitPointsMax = 60;
      goldMiningAmmount = 20;
      miningDelay = 3000;
      goldCost = 30;
   };
   new ScriptObject(Soldier : Entity){
      superClass = Entity;
      size = "5 5";
      creationTime = 4;
      attackRange = 7;
      attackPower = 15;
      attackDelay = 2;
      followDistance = 5;
      goldCost = 50;
   };

Change out the createObject() and creatingObject() functions in data.cs with these

// --------------------------------------------------------------------
// gameData::createObject()
//
// This is the initial function in our unit creation function chain,
// this function will initalize the process and then call 
// gameData::creatingObject() which will repeat until the creation process
// is finished
// --------------------------------------------------------------------
function gameData::createObject(%this, %type, %team)
{
   if($count $= "")
   {
      $count = 0;
   }

   // check if this is the player's team, that way we can handle
   // things such as the progress bar gui, etc
   if(%team == $playerTeam)
   {
      %isPlayer = true;
   } else
   {
      %isPlayer = false;      
   }   
   
   // then lets check if we're already creating something
   // we want to make sure we can only create one thing at a time
   if(%team.isCreating)
   {
      // lets return out so we don't do anything    
      return;      
   }
   
   // grab the team's gold count
   %gold = %team.base.goldCount;

   // grab the unit's creation cost
   %cost = %type.goldCost;

   // check if the team has enough gold, if not exit, if so take out the cost
   if(%gold < %cost)
   { 
      // not enough gold
      return;
   } else
   {
      %team.base.goldCount -= %cost;
      BaseMenu.updateBaseInfo();
   }

   // now we set that we have started creating something
   %team.isCreating = true;
   
   // initiate the creating count value that we will use during the
   // creation process
   %team.creatingCount = 0;

   // now we call the repeatable function to create the object
   // we pass %isPlayer so we don't have to do this check again
   // for the progress bar updates during creation
   %this.creatingObject(%type, %team, %isPlayer);

   $count++;
}

// --------------------------------------------------------------------
// gameData::creatingObject()
//
// This is a re peatable function that will call itself until creation
// is done, this allows us to make unit creation a process that can have
// a linked update and pogress bar
// --------------------------------------------------------------------
function gameData::creatingObject(%this, %type, %team, %isPlayer)
{   
   // increment the team's creating count to represent progress
   // this is based off of a value in the object's type...
   // 1 will go through at a normal speed, 2 will go through at double
   // the speed, etc
   %team.creatingCount = %team.creatingCount + %type.creationTime;
   
   // if we  haven't reached the creation time then we want to continue 
   // creating the object with a schedule passing all viable information
   if(%team.creatingCount <= $creationCount)
   {
      %this.schedule(100, "creatingObject", %type, %team, %isPlayer);
   } else
   {
      // this means we have finished the creation time of the object
      // so we need to increment the team's object type count
      %eval = "%team.base." @ %type.class.getName() @ "Count++;";
      eval(%eval);

      // now lets spawn the actual object
      %this.spawnUnit(%type, %team, %type.getName() @ $count);

      // set the isCreating to false so we can continue on with something else
      %team.isCreating = false;   
   }
}

Make your onSelected attached to t2dSceneObject look like this

// --------------------------------------------------------------------
// t2dSceneObject::onSelected()
//
// This is the function all objects pass through when selected
// it places the description text that comes directly from the object
// and places it into a temporary GUI that gets attached to the 
// description section of the Object Properties box
// --------------------------------------------------------------------
function t2dSceneObject::onSelected(%this, %pos)
{
   %this.type.onSelected(%this, %pos);
}

Now you should be able to select your base, create a worker or soldier, it will deduct the cost from your gold and you can see the total gold, worker, and soldier count on your base selection menu.