Inventory v2 Tutorial

Download Code File

Inventory v.2 Tutorial

This tutorial will help you create a Graphical Display of the items that the player has on them. To invoke the Gui you press the letter i and press i again to exit it.

*UPDATED* -> Simplified Gui
The tutorial now requires my latest tutorial (Adding Mouse Events to Gui Controls) it can be found here: www.garagegames.com/index.php?sec=mg&mod=resource&page=view&qid=1864

You need to add mouse events to GuiTextCtrl and GuiBitmapCtrl for this tutorial.

I also updated with ExoDuS's suggestion in the comments of this tutorial to make the GUI easier to create.

I also updated the code in the zip file since it might not compile properly on some compilers. I also put GuiObjectView.cc and GuiObjectView.h in engine/gui so note that change.

*END UPDATE*

Note: This tutorial was done with the head version from the CVS. Warning: the C++ code changes ONLY work with the head version since the resManager.cc and resManager.h are from the head version. You can get it to work with non head by following the link and modifying your resManager.cc and resManager.h files, but still use the GuiObjectView.cc and GuiObjectView.h in the zip on this page.

This tutorial is a modification of the Inventory Popup Tutorial, so you can find some info on the GUI creation in that tutorial. The dts viewing code was given to me by ExoDuS, he got it from this tutorial - perso.wanadoo.fr/hysteria/docs/guiCtrls.htm You will need the following zip for the tutorial to work (since it was modified from the orginal by ExoDuS for the setEmpty() command) (Code File link at the top of this page). The zip contains the files guiObjectView.cc, GuiObjectView.h (they go in /engine/gui) and resManager.cc, resManager.h (they replace the ones in your /engine/core) Add those to your project and recompile. More on the GUI at the end of this tutorial.

This version of the Inventory has a list of your inventory items on the left (with headers like "Weapons" and "Ammo") and you click on the name of the item to display its model with a description.

Even though this is a modification I am going to show you all of the coding that it takes to complete it. The only file that were modified though were (InventoryGui.cs, commands.cs, and inventory.cs)

First open the file - C:\GarageGames\torque\example\fps\client\scripts\default.bind.cs Go down to the section:

//------------------------------------------------------------------------------
// Item manipulation
//------------------------------------------------------------------------------

and add the following code:

$InvState = false;

function toggleInventory() {
   if ($InvState == false) {
      commandToServer('DisplayInventory');
      $InvState = true;
   } else {
		Canvas.setContent( PlayGui );
		$InvState = false;
   }

}

moveMap.bindCmd(keyboard, "i", "toggleInventory();", "");

Next open the file - C:\GarageGames\torque\example\fps\client\config.cs and add the following line to the end:

moveMap.bindCmd(keyboard, "i", "toggleInventory();", "");

Next open the file - C:\GarageGames\torque\example\fps\client\init.cs and add after the other Gui exec statements (under // Load up the shell GUIs):

exec("./ui/InventoryGui.gui");

and add after the other script exec statements (under // Client scripts):

exec("./scripts/InventoryGui.cs");

Next open the file - C:\GarageGames\torque\example\fps\client\ui\defaultGameProfiles.cs and add this code to the end:

//-----------------------------------------------------------------------------
// Inventory popup profile

new GuiControlProfile ("InventoryProfile")
{
   opaque = false;
   fillColor = "128 128 128";
   fontColor = "0 0 0";
   border = true;
   borderColor = "0 0 0";
   fontType = "Arial";
   fontSize = 18;
};

Next open the file - C:\GarageGames\torque\example\fps\server\scripts\commands.cs and add this code to the beginning of the file:

//All of my Game defined Inventory Items
//-----------------------------------------------------
//Important note: strings have a 255 char limit when being sent to the clients,
//but you can make multiple strings and then concat all of them on the client.
//-----------------------------------------------------
//Weapons
$InvItems[0] = "Weapons";    //Weapons Heading
$InvItems[1] = "Rifle";
$InvItems[2] = "Crossbow";
$InvItems[3] = "Ammo";       //Ammo Heading
$InvItems[4] = "Rifle";
$InvItems[5] = "Crossbow";

//Matching array that describes item type
$InvTypes[0] = "heading";
$InvTypes[1] = "weapon";
$InvTypes[2] = "weapon";
$InvTypes[3] = "heading";
$InvTypes[4] = "ammo";
$InvTypes[5] = "ammo";

//Matching array that holds item description
$InvDesc[0] = "";
$InvDesc[1] = "This is a rifle made by H&K";
$InvDesc[2] = "This is a strange blue crossbow";
$InvDesc[3] = "";
$InvDesc[4] = ".45 ACP Ammo";
$InvDesc[5] = "Crossbow Arrows";

//Length of my Inventory Array 
$InvItemsLength = 6;

//-----------------------------------------------------------------------------

Then add this code to the end:

//-----------------------------------------------------------------------------

function serverCmdDisplayInventory(%client)
{
   //create our string of items to parse on the client
   for (%i = 0; %i < $InvItemsLength; %i++) {
		if (%client.player.hasInventory($InvItems[%i], $InvTypes[%i]))
			%InvData = %InvData @ $InvTypes[%i] @ "\t" @ $InvItems[%i] @ "\t" @ %client.player.hasInventory($InvItems[%i],$InvTypes[%i]) @ "\t" @ $InvDesc[%i] @ "\t";
   }

   //Send the info to the client to display it   
   commandToClient(%client, 'PopInventory',%InvData);
  
}

Open file C:\GarageGames\head\torque\example\fps\server\scripts\inventory.cs and add the following code to the end:

function ShapeBase::hasInventory(%this, %data, %type) {
    if (%type $= "ammo")
	    return %this.inv[%data @ "Ammo"];
    else if (%type $= "heading")
	    return "1";
    else
	    return %this.inv[%data];
}

Next create a new .cs file (blank text file with a .cs extension) and put it in the dir C:\GarageGames\head\torque\example\fps\client\scripts then add the following code as its contents:

//-------------------------------------------------
// InventoryGui.cs
//-------------------------------------------------

$InvWordCount = 0;
$CurrentBottomSlot = 11;

new ActionMap(InvMap);
    InvMap.bindCmd(keyboard, "i", "toggleInventory();", "");

function InventoryGui::onWake()
{
    displayWindow.setEmpty();
    DisplayText.setText("");

    $enableDirectInput = "1";
    activateDirectInput();
    
    InvMap.push();
}

function InventoryGui::onSleep()
{
    InvMap.pop();
}

function clientCmdPopInventory(%InvData) {

    $InvWordCount = getFieldCount(%InvData);

    //reset the Bottom Slot to default
    $CurrentBottomSlot = 11;

    %InvWdCount = 0;
    if ($InvWordCount > 0) {

        for (%i = 0; %i < ($InvWordCount/4); %i++) {
		    $TypeTokens[%i] = getField(%InvData,%InvWdCount);
            %InvWdCount++;
            $ItemTokens[%i] = getField(%InvData,%InvWdCount);
		    %InvWdCount++;
			$AmountTokens[%i] = getField(%InvData,%InvWdCount);
		    %InvWdCount++;
            $DescTokens[%i] = getField(%InvData,%InvWdCount);
		    %InvWdCount++;
		}


	}

    //This block is copy and pasted 11 times due to the hardcoded GUI names...not 
	//sure of a better way to do this
    //////////////////////////////////////////////////////////////////////////////////
    if ($InvWordCount > 0) {  //Slot 1
         Slot1.setText($ItemTokens[0]);
		 if ($TypeTokens[0] $= "heading") {
     	     Amount1.setText("");
		     
		 } else {
             Amount1.setText("Amount: " @ $AmountTokens[0]);
		 }
    } else {
	     Slot1.setText("");
         Amount1.setText("");
	}
	//////////////////////////////////////////////////////////////////////////////////
    if ($InvWordCount > 4) {  //Slot 2
         Slot2.setText($ItemTokens[1]);
		 if ($TypeTokens[1] $= "heading") {
     	     Amount2.setText("");
		 } else {
             Amount2.setText("Amount: " @ $AmountTokens[1]);
		 }
    } else {
	     Slot2.setText("");
         Amount2.setText("");
	}
	//////////////////////////////////////////////////////////////////////////////////
    if ($InvWordCount > 8) {  //Slot 3
         Slot3.setText($ItemTokens[2]);
		 if ($TypeTokens[2] $= "heading") {
     	     Amount3.setText("");
		 } else {
             Amount3.setText("Amount: " @ $AmountTokens[2]);
		 }
    } else {
	     Slot3.setText("");
         Amount3.setText("");
	}
	//////////////////////////////////////////////////////////////////////////////////
    if ($InvWordCount > 12) {  //Slot 4
         Slot4.setText($ItemTokens[3]);
		 if ($TypeTokens[3] $= "heading") {
     	     Amount4.setText("");
		 } else {
             Amount4.setText("Amount: " @ $AmountTokens[3]);
		 }
    } else {
	     Slot4.setText("");
         Amount4.setText("");
	}
	//////////////////////////////////////////////////////////////////////////////////
    if ($InvWordCount > 16) {  //Slot 5
         Slot5.setText($ItemTokens[4]);
		 if ($TypeTokens[4] $= "heading") {
     	     Amount5.setText("");
		 } else {
             Amount5.setText("Amount: " @ $AmountTokens[4]);
		 }
    } else {
	     Slot5.setText("");
         Amount5.setText("");
	}
	//////////////////////////////////////////////////////////////////////////////////
    if ($InvWordCount > 20) {  //Slot 6
         Slot6.setText($ItemTokens[5]);
		 if ($TypeTokens[5] $= "heading") {
     	     Amount6.setText("");
		 } else {
             Amount6.setText("Amount: " @ $AmountTokens[5]);
		 }
    } else {
	     Slot6.setText("");
         Amount6.setText("");
	}
	//////////////////////////////////////////////////////////////////////////////////
    if ($InvWordCount > 24) {  //Slot 7
         Slot7.setText($ItemTokens[6]);
		 if ($TypeTokens[6] $= "heading") {
     	     Amount7.setText("");
		 } else {
             Amount7.setText("Amount: " @ $AmountTokens[6]);
		 }
    } else {
	     Slot7.setText("");
         Amount7.setText("");
	}
	//////////////////////////////////////////////////////////////////////////////////
    if ($InvWordCount > 28) {  //Slot 8
         Slot8.setText($ItemTokens[7]);
		 if ($TypeTokens[7] $= "heading") {
     	     Amount8.setText("");
		 } else {
             Amount8.setText("Amount: " @ $AmountTokens[7]);
		 }
    } else {
	     Slot8.setText("");
         Amount8.setText("");
	}
	//////////////////////////////////////////////////////////////////////////////////
    if ($InvWordCount > 32) {  //Slot 9
         Slot9.setText($ItemTokens[8]);
		 if ($TypeTokens[8] $= "heading") {
     	     Amount9.setText("");
		 } else {
             Amount9.setText("Amount: " @ $AmountTokens[8]);
		 }
    } else {
	     Slot9.setText("");
         Amount9.setText("");
	}
	//////////////////////////////////////////////////////////////////////////////////
    if ($InvWordCount > 36) {  //Slot 10
         Slot10.setText($ItemTokens[9]);
		 if ($TypeTokens[9] $= "heading") {
     	     Amount10.setText("");
		 } else {
             Amount10.setText("Amount: " @ $AmountTokens[9]);
		 }
    } else {
	     Slot10.setText("");
         Amount10.setText("");
	}
	//////////////////////////////////////////////////////////////////////////////////
    if ($InvWordCount > 40) {  //Slot 11
         Slot11.setText($ItemTokens[10]);
		 if ($TypeTokens[10] $= "heading") {
     	     Amount11.setText("");
		 } else {
             Amount11.setText("Amount: " @ $AmountTokens[10]);
		 }
    } else {
	     Slot11.setText("");
         Amount11.setText("");
	}
	//////////////////////////////////////////////////////////////////////////////////

    Canvas.setContent( InventoryGui );
}

//--------------------------------------------------------------------
//  Display function
//--------------------------------------------------------------------
function DisplayItem(%num) {

    if ($TypeTokens[%num] $= "heading") {
         //do nothing this is a heading
	} else {

	   displayWindow.setModel("fps/data/shapes/" @ $ItemTokens[%num] @ "/" @ $TypeTokens[%num] @ ".dts" , "");
	   DisplayText.setText($DescTokens[%num]);
	}

}
//--------------------------------------------------------------------
// Slot click events
//--------------------------------------------------------------------
function Slot1::onMouseDown(%this, %obj) {
   DisplayItem($CurrentBottomSlot - 11);
}

function Slot2::onMouseDown(%this, %obj) {
   DisplayItem($CurrentBottomSlot - 10);
}

function Slot3::onMouseDown(%this, %obj) {
   DisplayItem($CurrentBottomSlot - 9);
}

function Slot4::onMouseDown(%this, %obj) {
   DisplayItem($CurrentBottomSlot - 8);
}

function Slot5::onMouseDown(%this, %obj) {
   DisplayItem($CurrentBottomSlot - 7);
}

function Slot6::onMouseDown(%this, %obj) {
   DisplayItem($CurrentBottomSlot - 6);
}

function Slot7::onMouseDown(%this, %obj) {
   DisplayItem($CurrentBottomSlot - 5);
}

function Slot8::onMouseDown(%this, %obj) {
   DisplayItem($CurrentBottomSlot - 4);
}

function Slot9::onMouseDown(%this, %obj) {
   DisplayItem($CurrentBottomSlot - 3);
}

function Slot10::onMouseDown(%this, %obj) {
   DisplayItem($CurrentBottomSlot - 2);
}

function Slot11::onMouseDown(%this, %obj) {
   DisplayItem($CurrentBottomSlot - 1);
}


//--------------------------------------------------------------------
// "Arrow Keys"
//--------------------------------------------------------------------

function UpArrow::onMouseDown(%this, %obj)
{
    if ($InvWordCount > 44 && $CurrentBottomSlot > 11) {
        
		$CurrentBottomSlot--;

        Shift();
		
	}
}

function DownArrow::onMouseDown(%this, %obj)
{
    if ($InvWordCount > 44 && $CurrentBottomSlot < ($InvWordCount/4)) {

	    $CurrentBottomSlot++;

        Shift();

	}
}

//-----------------------------------------------------------------
// Shift - shifts the slots
//-----------------------------------------------------------------
function Shift() {
    
    	Slot1.setText($ItemTokens[$CurrentBottomSlot-11]);
		if ($TypeTokens[$CurrentBottomSlot-11] $= "heading") {
     	    Amount1.setText("");
		} else {
            Amount1.setText("Amount: " @ $AmountTokens[$CurrentBottomSlot-11]);
		}

        Slot2.setText($ItemTokens[$CurrentBottomSlot-10]);
		if ($TypeTokens[$CurrentBottomSlot-10] $= "heading") {
     	    Amount2.setText("");
		} else {
            Amount2.setText("Amount: " @ $AmountTokens[$CurrentBottomSlot-10]);
		}
       
	    Slot3.setText($ItemTokens[$CurrentBottomSlot-9]);
		if ($TypeTokens[$CurrentBottomSlot-9] $= "heading") {
     	    Amount3.setText("");
		} else {
            Amount3.setText("Amount: " @ $AmountTokens[$CurrentBottomSlot-9]);
		}

		Slot4.setText($ItemTokens[$CurrentBottomSlot-8]);
		if ($TypeTokens[$CurrentBottomSlot-8] $= "heading") {
     	    Amount4.setText("");
		} else {
            Amount4.setText("Amount: " @ $AmountTokens[$CurrentBottomSlot-8]);
		}

		Slot5.setText($ItemTokens[$CurrentBottomSlot-7]);
		if ($TypeTokens[$CurrentBottomSlot-7] $= "heading") {
     	    Amount5.setText("");
		} else {
            Amount5.setText("Amount: " @ $AmountTokens[$CurrentBottomSlot-7]);
		}

		Slot6.setText($ItemTokens[$CurrentBottomSlot-6]);
		if ($TypeTokens[$CurrentBottomSlot-6] $= "heading") {
     	    Amount6.setText("");
		} else {
            Amount6.setText("Amount: " @ $AmountTokens[$CurrentBottomSlot-6]);
		}

		Slot7.setText($ItemTokens[$CurrentBottomSlot-5]);
		if ($TypeTokens[$CurrentBottomSlot-5] $= "heading") {
     	    Amount7.setText("");
		} else {
            Amount7.setText("Amount: " @ $AmountTokens[$CurrentBottomSlot-5]);
		}

		Slot8.setText($ItemTokens[$CurrentBottomSlot-4]);
		if ($TypeTokens[$CurrentBottomSlot-4] $= "heading") {
     	    Amount8.setText("");
		} else {
            Amount8.setText("Amount: " @ $AmountTokens[$CurrentBottomSlot-4]);
		}

		Slot9.setText($ItemTokens[$CurrentBottomSlot-3]);
		if ($TypeTokens[$CurrentBottomSlot-3] $= "heading") {
     	    Amount9.setText("");
		} else {
            Amount9.setText("Amount: " @ $AmountTokens[$CurrentBottomSlot-3]);
		}

		Slot10.setText($ItemTokens[$CurrentBottomSlot-2]);
		if ($TypeTokens[$CurrentBottomSlot-2] $= "heading") {
     	    Amount10.setText("");
		} else {
            Amount10.setText("Amount: " @ $AmountTokens[$CurrentBottomSlot-2]);
		}

		Slot11.setText($ItemTokens[$CurrentBottomSlot-1]);
		if ($TypeTokens[$CurrentBottomSlot-1] $= "heading") {
     	    Amount11.setText("");
		} else {
            Amount11.setText("Amount: " @ $AmountTokens[$CurrentBottomSlot-1]);
		}

}

The last thing to do know is create the actual gui.

Some Pointers on the Gui....the names on the left side are GuiTextCtrls named Slot1 - Slot11, beside them are Amount1 - Amount11 (They contain the "Amount: 1"). Then I moved the arrow keys over so that they match up with the slots. The Slots have onMouseDown functions so they can change the GuiObjectView (displayWindow) and Desc text (DisplayText) on the right side.

Here is a screenshot of my GUI, it should help you out. Inventory version 2 Screenshot

Here is another screenshot with the names and types of the gui controls in red. Inventory version 2 Gui reference