Hud Images to Represent State of Player Health

We are going to replace the stock HealthHUD (which displays a numerical value for Player Health) with a series of warning Signs that equate to a percentage of Player health. Let's split these into 4 states:


76-100% = Good
51-74% = Okay
26-50% = Caution
01-25% = Danger


We need images for to display so in your favourite 2D art app, make your images 128x64 and save them to (game-> art-> gui-> images). In your project directory, in "game-> art-> gui" make a new folder called "images" and place your four new images there. (The ones that I am using are specially coloured for visibility if the player is colourblind)

Now to Torque3D and we'll start with the GUIs. Open up the Gui Editor in-game (F10).
First up, let's get rid of the standard HealthHud. Rather than delete a stock asset, let's just set it's visibility to false. Uncheck "visibile" and "active" in the Inspector Panel. As far as the player is concerned, the numerical Health display is now off.
Create a new Gui object to hold all of our custom Gui objects inside of, this will also double as the border for the background. (Library-> Images ) and select "GuiBitmapBorderCtrl". Select the Gui tab so we can see our list of Guis again and select the new object. Let's name this "HealthImageHud" and in the "Profile" drop-down menu in the Inspector choose "ChatHudBorderProfile". Save, we're using the stock PlayGui.gui so you don't need to create a new file.

A thick border should have appeared on-screen, right at the top left corner. Move it towards the lower left corner using the position "6 685". We're going to make it similar to the original HealthHud, only longer. Set the "extent" to "144 80". To keep it in place regardless of screen resolution we need to set "horizSizing" to "right" and "vertSizing" to "top". In other words - the areas of the screen that it is AWAY from, NOT closest to. Now it will keep it's position when you change screen resolution. Finally check "isContainer" under "Editing". Now we can move other gui elements inside it.

Next let's fill that blank space inside the border. Create a GuiBitmapCtrl (Library-> Images->). Back in the Gui tab, name this "HealthImageBack". If this new element is not nested underneath "HealthImageHud", drag and drop it on to it. A little arrow will appear next to "HealthImageHud" to show that you can expand/collapse it to view the gui elements nested underneath. Returning to "HealthImageback" in bitmap find and select "hudfill" (game-> core-> art-> gui-> images-> hudfill.png). Set "position" as "8 8" and "extent" to "128 64" so it does not overlap the border.

Considering that this is the perfect size and placement for our set of Player Health state images, let's duplicate it. With "HealthImageBack" selected, In the toolbar menu, select edit and then copy, and then paste. You should now have a new gui element called "HealthImageback1". Rename it "healthGood". Now copy and paste this element another three times, and rename these three copies as "healthOkay", "healthCaution" and "healthDanger". Finally move "HealthImageBack" to the top of this mini-list under "HealthImageHud". Gui displays in order of last to first, so "HeathImageHud" is now at the back and "HealthDanger" is at the front.


Right click -> view image for larger pic

Select "healthGood" and in bitmap find the image you made named "Good". Now uncheck visibility to hide it. Do the same for each of the other three guis which will hold our remaining images, and then hide their visibility. You should now just be able to see our border and background image.
Finally, as our new HealthImageHud is larger than the older one, you'll want to move the "WeaponHud" over a little so that they don't overlap. Select "weaponHud" and set it's "position" to "158 689". Now there should be no conflict. Save and quit, Torque3D.

Scripting time. In your favourite text editor open the file "game->scripts->server->player.cs. Find the function called "Player::updateHealth", and comment out the commandToClient, and add this.

commandToClient(%player.client, 'setImageHealthHUD', %curHealth);
		//commandToClient(%player.client, 'setNumericalHealthHUD', %curHealth);

Save.

Next in "game->scripts->client->client.cs" we shall make out new CommandToClient.

function clientCmdSetImageHealthHUD(%curHealth)
{
	echo("healthImageHud has been called on the client");
   // Skip if the hud is missing.
	if (!isObject(HealthImageHUD))
	{
		echo("no HealthImageHud! Wrong!");
		return;
	}

   // Ensure the HUD is set to visible while we have health / are alive
	if (%curHealth)
	{
		HealthImageHUD.setVisible(true);
		echo("HealthImageHud is visible");
	  
	}
	else
	{
		HealthImageHUD.setVisible(false);
		echo("HealthImageHud is hidden");
	}
	  
	echo("current health is " @ %curHealth);

	if(%curHealth > 75)
	{
		echo("health is good");
		healthGood.setvisible(true);
		healthOkay.setvisible(false);
		healthCaution.setvisible(false);
		healthDanger.setvisible(false);
	}
	
	if(%curHealth > 50 && %curhealth < 76)
	{
		echo("health is okay");
		healthGood.setvisible(false);
		healthOkay.setvisible(true);
		healthCaution.setvisible(false);
		healthDanger.setvisible(false);
	}
	
	if(%curHealth > 25 && %curhealth < 51)
	{
		echo("health is caution");
		healthGood.setvisible(false);
		healthOkay.setvisible(false);
		healthCaution.setvisible(true);
		healthDanger.setvisible(false);
	}
	
	if(%curHealth < 26)
	{
		echo("health is danger");
		healthGood.setvisible(false);
		healthOkay.setvisible(false);
		healthCaution.setvisible(false);
		healthDanger.setvisible(true);
	}
}

Save.

And now, when the player's health changes in-game, the correct image should show.