MMORPG Tutorial article 1 Inventory for the Client.

I am currently writing a Massively Multiplayer Online RolePlaying Game called Dream, and since the actual resources to help are a little skimpy on how to start, I figured I should show what I have accomplished so others can build from it.

To start with we will build a client side inventory system.
To begin an inventory you really need to decide which style you want to choose, since the GUI is a little limited in the area of building dynamic slots, I have decided to go with a "Backpack and List" concept, similar in fact to other systems.

The first step would be to track down one of the various GuiObjectView.cc files floating around, I'm using the one from eXodus,
www.garagegames.com/index.php?sec=mg&mod=resource&page=view&qid=4063
but for our purposes any will do.

The next step would be to track down the Array handling tutorial
www.garagegames.com/index.php?sec=mg&mod=resource&page=view&qid=4711

and add that to your project and compile.

After you have all that compiled in, we want to take advantage of it and create a new InventoryGUI.gui and place it in client/ui/InventoryGUI.gui then add the following line to your client/init.cs

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

Here is the code for the GUI file.

//--- OBJECT WRITE BEGIN ---
new GuiControl(InventoryGUI) {
   profile = "GuiDefaultProfile";
   horizSizing = "right";
   vertSizing = "bottom";
   position = "0 0";
   extent = "640 480";
   minExtent = "8 2";
   visible = "1";

   new GuiWindowCtrl(InventoryWindow) {
      profile = "GuiWindowProfile";
      horizSizing = "right";
      vertSizing = "bottom";
      position = "2 -2";
      extent = "621 476";
      minExtent = "8 2";
      visible = "1";
      text = "Inventory";
      maxLength = "255";
      resizeWidth = "1";
      resizeHeight = "1";
      canMove = "1";
      canClose = "1";
      canMinimize = "1";
      canMaximize = "1";
      minSize = "50 50";
      CloseCommand = "Canvas.PopDialog(InventoryGUI);";
     new GuiObjectView(InventoryItemView) {
	profile = "GuiDefaultProfile";
	horizSizing = "relative";
	vertSizing = "relative";
	position = "0 0";
	extent = "400 400";
	minExtent = "8 2";
	visible = "1";
	helpTag = "0";
	cameraZRot = "0";
	forceFOV = "0";
      };
      new GuiScrollCtrl() {
         profile = "GuiScrollProfile";
         horizSizing = "right";
         vertSizing = "bottom";
         position = "410 30";
         extent = "200 400";
         minExtent = "8 2";
         visible = "1";
         willFirstRespond = "1";
         hScrollBar = "alwaysOn";
         vScrollBar = "alwaysOn";
         constantThumbHeight = "0";
         childMargin = "0 0";

         new GuiTextListCtrl(InventoryListView) {
            profile = "GuiTextArrayProfile";
            horizSizing = "right";
            vertSizing = "bottom";
            position = "2 2";
            extent = "178 2";
            minExtent = "8 2";
            visible = "1";
            enumerate = "0";
            resizeCell = "1";
            columns = "0";
            fitParentWidth = "1";
            clipColumnText = "0";
         };
      };
   };
};
//--- OBJECT WRITE END ---
function toggleInventoryGUI(%val){
	if(%val)
      		InventoryGUI.toggle();
}

function InventoryGUI::OnWake(%this){
	UpdateInventoryListView();
}

//This function updates the InventoryListView
function UpdateInventoryListView(){
	echo("UpdatingInventoryListView, lets start by clearing it");
	InventoryListView.clear();
	echo("Done now looping through Inventory");
	for(%x = 0; %x < $Inventory.count(); %x++){
		InventoryListView.addRow(%x,$Inventory.getKey(%x) SPC $Inventory.getValue(%x));
		echo("Added Item at "@%x);
	}
	echo("Complete!, now sorting and cleaning");
	InventoryListView.sort(0);
	InventoryListView.setSelectedRow(0);
	InventoryListView.scrollVisible(0);
}

function InventoryGUI::toggle(%this)
{
   if (%this.isAwake()){
      Canvas.popDialog(%this);
    }else{
      Canvas.pushDialog(%this);
   }
}

function InventoryListView::OnSelect( %this, %id, %text ){
	InventoryItemView.setEmpty();
	$SelectedItem = getField(InventoryListView.getRowTextById(%id),0);
	$SelectedItem = getWord($SelectedItem,0);
	InventoryItemView.setObject($SelectedItem,$InventoryImage.getValue($InventoryImage.getIndexFromKey($SelectedItem)),"", 0);
}

Make sure to bind the toggleInventoryGUI function in your defaultbinds.cs file under client/scripts.

Now we need to make the client aware that it has an inventory.
Since this will be a MMORPG one design decision that I made was to minimize requests to the server for things like inventory, so I went with a "server push" concept, which only notifies the client when there is an UPDATE to the inventory.

First go to server/scripts/inventory.cs and replace

ShapeBase::setInventory(%this,%data,%value)

function with this

function ShapeBase::setInventory(%this,%data,%value)
{
   // Set the inventory amount for this datablock and invoke
   // inventory callbacks.  All changes to inventory go through this
   // single method.

   // Impose inventory limits
   if (%value < 0)
      %value = 0;
   else {
      %max = %this.maxInventory(%data);
      if (%value > %max)
         %value = %max;
   }

   // Set the value and invoke object callbacks
   %name = %data.getName();
   echo("Adding "@%name@" to client inventory");
   if (%this.inv[%name] != %value) 
   {
      %this.inv[%name] = %value;
      %data.onInventory(%this,%value);
      %this.getDataBlock().onInventory(%data,%value);
      %Image  = %data.shapefile;
      CommandToClient(%this.client,'UpdateInventory',%name,%value,%Image);
      echo("If we are seeing this then client inventory command has been issued");
      echo("\n\n\n\n\nSent the following info to client",%this.client,%name,%value,%Image);
   }
   return %value;
}

Notice the command to client?
Next we need to go to the client/scripts directory and add a file I am calling client_commands.cs (make sure to exec it in your init.cs file after adding it)

$Inventory = new array();
$InventoryImage = new array();
//This function handles Inventory Update messages from server
function clientCmdUpdateInventory(%Item,%Amount,%Image){
	echo("Recieved Inventory Item Update from server");
	if(%Item !$=""){
		echo("Item is not NULL");
		if(!$Inventory.getValue($Inventory.getIndexFromKey(%Item))){
			echo("Evidently a new item");
			$Inventory.add(%Item, %Amount);
			$InventoryImage.add(%Item,%Image);
			echo("Added new item successfully");
		}else{
			$Inventory.erase($Inventory.getIndexFromKey(%Item));
			$Inventory.add(%Item, %Amount);
		}
	}else{
		echo("Whoops!  There was no Item in that call!");
	}
	echo("Recieved "@$Inventory.getValue(%Item)@" of "@%Item);
	echo("If we are seeing this there were no segfaults in UpdateInventory");
	//UpdateInventoryListView();
}

The above allows us to create an array of inventory items, and then adds them to the Inventory List in our backpack.

Thats it, you now have a 3D backpack that will reflect your inventory.

Enjoy!

In my next Tutorial I will explain how to implement a proper targeting system.