Inventory v3 Tutorial

Download Code File

Inventory v.3 Tutorial

Note: This is Inventory v2 but it has been modified to use My new Inventory Manager which is also required for this tutorial. It can be found at Inventory Manager Tutorial. There was a slight change in the game.cs file when I posted this tutorial (Healthkit's type needs to be "healthKit" not "item")

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.

The tutorial requires my 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

Using the above tutorial, you need to add mouse events to GuiTextCtrl and GuiBitmapCtrl for this tutorial.

Note: This tutorial was done with the head version (but it was a bit old, hopefully nothing has changed that will effect this tutorial) 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 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 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;
};

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

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

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

function serverCmdDisplayInventory(%client)
{
   %player = %client.player;
   //Send the info to the client to display it   
   commandToClient(%client, 'PopInventory',%player);
  
}

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
//-------------------------------------------------

$invCount = -1;
$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(%player) {

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

    //Set the Pointer back to the beginning
    if (%player.moveCurPtr("first") == 0) {
        echo("Inventory Manager::Pointer error");
        return 0; 
    }

    if (%player.getInvItem("current","amount") > 0) {
	
		$invCount++;
		$ItemTokens[$invCount] = %player.getInvItem("current","name");
		$AmountTokens[$invCount] = %player.getInvItem("current","amount");
		$TypeTokens[$invCount] = %player.getInvItem("current","type");
		$DescTokens[$invCount] = %player.getInvItem("current","description");  

		//right now only useful for ammo and healthkit (hackish but required because of the paths for the model viewer)
		if (%player.getInvItem("current","type") $= "healthKit")
			$strippedItemTokens[$invCount] = "items";
		else
			$strippedItemTokens[$invCount] = strreplace($ItemTokens[$invCount],"Ammo","");

	}
    
    while (%player.moveCurPtr("next") == 1) {

        if (%player.getInvItem("current","amount") > 0) {
		    
		$invCount++;
		$ItemTokens[$invCount] = %player.getInvItem("current","name");
    		$AmountTokens[$invCount] = %player.getInvItem("current","amount");
    		$TypeTokens[$invCount] = %player.getInvItem("current","type");
    		$DescTokens[$invCount] = %player.getInvItem("current","description");  

		    if (%player.getInvItem("current","type") $= "healthKit")
	    		$strippedItemTokens[$invCount] = "items";
		    else
			$strippedItemTokens[$invCount] = strreplace($ItemTokens[$invCount],"Ammo","");
		}
    }

    //This block is copy and pasted 11 times due to the hardcoded GUI names...not 
	//sure of a better way to do this
    //////////////////////////////////////////////////////////////////////////////////
    if ($invCount > -1) {  //Slot 1
         
         Slot1.setText($ItemTokens[0]);
         Amount1.setText("Amount: " @ $AmountTokens[0]);
		 
    } else {
	 Slot1.setText("");
         Amount1.setText("");
    }
	//////////////////////////////////////////////////////////////////////////////////
    if ($invCount > 0) {  //Slot 2
         
         Slot2.setText($ItemTokens[1]);
         Amount2.setText("Amount: " @ $AmountTokens[1]);
		 
    } else {
	 Slot2.setText("");
         Amount2.setText("");
    }
	//////////////////////////////////////////////////////////////////////////////////
    if ($invCount > 1) {  //Slot 3

         Slot3.setText($ItemTokens[2]);	 
         Amount3.setText("Amount: " @ $AmountTokens[2]);

    } else {	 
	 Slot3.setText("");
         Amount3.setText("");
    }
	//////////////////////////////////////////////////////////////////////////////////
    if ($invCount > 2) {  //Slot 4

         Slot4.setText($ItemTokens[3]);
         Amount4.setText("Amount: " @ $AmountTokens[3]);
		 
    } else {
	 Slot4.setText("");
         Amount4.setText("");
    }
	//////////////////////////////////////////////////////////////////////////////////
    if ($invCount > 3) {  //Slot 5

         Slot5.setText($ItemTokens[4]);
         Amount5.setText("Amount: " @ $AmountTokens[4]);
		 
    } else {
	 Slot5.setText("");
         Amount5.setText("");
    }
	//////////////////////////////////////////////////////////////////////////////////
    if ($invCount > 4) {  //Slot 6

         Slot6.setText($ItemTokens[5]);
         Amount6.setText("Amount: " @ $AmountTokens[5]);
		 
    } else {
	 Slot6.setText("");
         Amount6.setText("");
    }
	//////////////////////////////////////////////////////////////////////////////////
    if ($invCount > 5) {  //Slot 7

         Slot7.setText($ItemTokens[6]);	 
         Amount7.setText("Amount: " @ $AmountTokens[6]);

		 
    } else {
	 Slot7.setText("");
         Amount7.setText("");
    }
	//////////////////////////////////////////////////////////////////////////////////
    if ($invCount > 6) {  //Slot 8

         Slot8.setText($ItemTokens[7]);
         Amount8.setText("Amount: " @ $AmountTokens[7]);
		 
    } else {
	 Slot8.setText("");
         Amount8.setText("");
    }
	//////////////////////////////////////////////////////////////////////////////////
    if ($invCount > 7) {  //Slot 9

         Slot9.setText($ItemTokens[8]);	
         Amount9.setText("Amount: " @ $AmountTokens[8]);
		 
    } else {
	 Slot9.setText("");
         Amount9.setText("");
    }
	//////////////////////////////////////////////////////////////////////////////////
    if ($invCount > 8) {  //Slot 10

         Slot10.setText($ItemTokens[9]);	
         Amount10.setText("Amount: " @ $AmountTokens[9]);
		 
    } else {
	 Slot10.setText("");
         Amount10.setText("");
    }
	//////////////////////////////////////////////////////////////////////////////////
    if ($invCount > 9) {  //Slot 11
         
         Slot11.setText($ItemTokens[10]);
         Amount11.setText("Amount: " @ $AmountTokens[10]);
		 
    } else {
	 Slot11.setText("");
         Amount11.setText("");
    }
	//////////////////////////////////////////////////////////////////////////////////

    Canvas.setContent( InventoryGui );
}

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

    displayWindow.setModel("fps/data/shapes/" @ $strippedItemTokens[%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 ($invCount > 10 && $CurrentBottomSlot > 11) {
        
		$CurrentBottomSlot--;

        Shift();
		
	}
}

function DownArrow::onMouseDown(%this, %obj)
{
    if ($invCount > 10 && $CurrentBottomSlot < ($invCount+1)) {

	    $CurrentBottomSlot++;

        Shift();

	}
}

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

    Slot2.setText($ItemTokens[$CurrentBottomSlot-10]);	
    Amount2.setText("Amount: " @ $AmountTokens[$CurrentBottomSlot-10]);
	   
	Slot3.setText($ItemTokens[$CurrentBottomSlot-9]);
        Amount3.setText("Amount: " @ $AmountTokens[$CurrentBottomSlot-9]);
	
	Slot4.setText($ItemTokens[$CurrentBottomSlot-8]);
        Amount4.setText("Amount: " @ $AmountTokens[$CurrentBottomSlot-8]);
	
	Slot5.setText($ItemTokens[$CurrentBottomSlot-7]);
        Amount5.setText("Amount: " @ $AmountTokens[$CurrentBottomSlot-7]);

	Slot6.setText($ItemTokens[$CurrentBottomSlot-6]);
        Amount6.setText("Amount: " @ $AmountTokens[$CurrentBottomSlot-6]);

	Slot7.setText($ItemTokens[$CurrentBottomSlot-5]);
        Amount7.setText("Amount: " @ $AmountTokens[$CurrentBottomSlot-5]);

	Slot8.setText($ItemTokens[$CurrentBottomSlot-4]);
        Amount8.setText("Amount: " @ $AmountTokens[$CurrentBottomSlot-4]);

	Slot9.setText($ItemTokens[$CurrentBottomSlot-3]);
        Amount9.setText("Amount: " @ $AmountTokens[$CurrentBottomSlot-3]);

	Slot10.setText($ItemTokens[$CurrentBottomSlot-2]);
        Amount10.setText("Amount: " @ $AmountTokens[$CurrentBottomSlot-2]);

	Slot11.setText($ItemTokens[$CurrentBottomSlot-1]);
        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. New in version 3 - Set the DisplayText profile to CenterInventoryProfile so the text is centered.

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