[SBARINFO TUTORIAL] An advanced Health Bar

[amv2k9]

Some games (notably RPGs) have a neat effect in their HP bars; when you get hit, a portion of the bar appears red while the bar decreases. In this tutorial, I'll show you a simple method to emulate this using SBARINFO; no ACS required! Note that this tutorial assumes you understand the basics of editing the [wiki]SBARINFO[/wiki] and [wiki]TEXTURES[/wiki] lumps.

First, an overview. Our health bar is actually going to consist of two health bars drawn on top of each other; one with interpolation, and one without. Interpolation, as it applies to DrawBar, simply means that the bar will slowly increase and decrease, rather than instantly change to the new position.

To start, we need graphics. For simplicity's sake, I'm using Doom's medkit sprite (MEDIA0). We'll also need three more; a transparent sprite, and MEDIA0 as a full red sprite and full black sprite. These four sprites will form the foreground and background images for our bars. Rather than edit MEDIA0 externally in an image editing program and then import it, we'll save time and define these sprites in the TEXTURES lump.

Code: Select all

sprite MEDIT0, 28, 19 // transparent sprite
{
 offset 13, 19
 patch TNT1A0, 0, 0
} 

sprite MEDIR0, 28, 19 // red sprite
{
 offset 13, 19
 patch MEDIA0, 0, 0
 {
  translation "0:255=176:176"
 }
}

sprite MEDIB0, 28, 19 // black sprite
{
 offset 13, 19
 patch MEDIA0, 0, 0
 {
  translation "0:255=0:0"
 }
}

MEDIT0 uses TNT1A0, a special sprite that is always rendered as completely transparent, even if your archive has a sprite named TNT1A0, unlike NULLA0, which was the sprite name traditionally used for this purpose. MEDIR0 and MEDIB0 use translations to change every color in the sprite to 176 (bright red) and 0 (black) in the Doom palette, respectively.

Now, for the SBARINFO editing. For simplicity's sake, we're just going to import the base ZDoom HUD, and edit it to display our new health bar.

Code: Select all

statusbar fullscreen, fullscreenoffsets
{
	//health
	drawimage "MEDIA0", 20, -2, centerbottom;
	drawnumber 2147483647, HUDFONT_DOOM, untranslated, health, drawshadow, 82, -20;

For the purposes of this tutorial, our health bar (or rather, health bars) will be taking the place of the DrawImage definition.

The first bar we're defining will be the one that has interpolation, and it will be rendered below the one without interpolation. Remember, any HUD elements that are defined in HUD definition will be rendered beneath elements defined after it!

Code: Select all

drawbar "MEDIR0","MEDIB0",health,horizontal,interpolate(2),20,-2;

As you can see, the bar's foreground image will be the red sprite, and its background image will be the black sprite. The '2' in parantheses next to interpolate will dictate the speed at which the bar raises and lowers. We're setting it to something fairly slow.

Next is the bar without interpolation.

Code: Select all

drawbar "MEDIA0","MEDIT0",health,horizontal,20,-2;

As this bar will be the one on top, its foreground image will be the unchanged medkit sprite, and its background image will be the transparent sprite; otherwise, we'd never see the red bar. The start of your HUD definition should now look like this:

Code: Select all

statusbar fullscreen, fullscreenoffsets
{
 drawbar "MEDIR0","MEDIB0",health,horizontal,interpolate(2),20,-2;
 drawbar "MEDIA0","MEDIT0",health,horizontal,20,-2;
 drawnumber 2147483647, HUDFONT_DOOM, untranslated, health, drawshadow, 82, -20;

Now, let's save our archive, and test the results.

Success! Our healthbar has a chunk highlighted in red as the player takes damage. It really is that easy.

You can also take this technique and reverse it, rendering the bar without interpolation on the bottom and the bar with interpolation on top, to highlight a portion of your health bar when you've picked up a health-restoring item.

Attached below is a example of the HUD effect we created, ready for you to test out in-game.

[Sgt. Shivers]

Good stuff, Amv!

[Captain J]

i never knew that would be coming handy, also it's gonna working at armors too!

[Mikk-]

Cool! It would be great for a Dark Souls style HUD.

[zrrion the insect]

Where you have MEDIT0 as the transparent part, you can specify "nullimage" in SBARINFO and it'll do the same thing without the need for a new patch to be defined.
Cool tutorial btw. I plan on using this sort of thing in the near future.