Page 1 of 1

[TuT] Making a Custom HUD (Heads Up Display)

Posted: Fri Aug 28, 2009 1:00 am
by Rofldonutburger
HUD Tutorial

Okay, this tutorial will cover how to make a custom HUD (Heads Up Display). There will be a few sections to this tutorial. Pictures will be included.

1. Requirements/Tools
2. Shield Meter/Background
3. Grenade HUD (grhi)
4. Ammo meters
5. Visor (Overlay)
6. Radar + Sweeper
7. Misc stuff (Score meters, extra elements)
8. Links


1. Requirements/Tools needed:

- Eschaton 0.7 or above
- My HUD template
- Image editing program (Photoshop, Gimp, etc.)
- Basic knowledge of modding
- Common sense


2. Shield Meter/Background

We’re going to start off with the shield bar and the health meter.

First, make a 1024x256 sized image with a black background in your image editing program. I’ll be using Photoshop in this tutorial. Make sure it’s all black (#000000) or the background contents will show.

Image

Now draw a picture on how you want the shield meter to look like. I’ve drawn mine like this:

Image

Save that image as “shield meter”. Then, select around the shield meter.

Image

Now go to Select > Transform Selection and change both the height to 120% and width to 105%.

Image

Using the colors #ffffff (white) and #505050, make a gradient over the shield meter. Save that file as “shield alpha”. Don’t close it yet.

Image

We’re now going to make an outline for the shield meter. Hit undo, so there’s no gradient covering the shield meter.

Use Smart Selection and select the shield bar. Make a new layer.

Image

Click Select > Expand > 4 px, and then Select > Border > 4-6 px (depending on how wide you want the border to be).

Image

Now fill the border with white, and delete the layer with the shield meter on it.

Image

Fill the space inside the border with gray (brighter if you want it to be more opaque, darker if you want it to be transparent)

Image

Save that as “shield outline”.

Open up Eschaton, and navigate to the shield meter bitmap (h3\ui\hud\bitmaps\shield_meter).

Image

Import “shield meter” as the image, and “shield alpha” as the image mask.

Image

Now select “h3\ui\hud\bitmaps\shield_outline”.

Import “shield outline” as the image and image mask.

Image

Try your map in Halo Demo.

*Optional*

If your shield meter is too big or too small, follow these steps:

Scroll down to the “unhi” tag and select “h3\ui\hud\cyborg_mp” in Eschaton.

Image

Select “Floats”, and change the SPB and SPM width and height scale. Make sure the SPB and SPM’s width and height scales are the same.

Image

If your shield meter is in the wrong position, follow these steps:

Scroll down to the “unhi” tag and select “h3\ui\hud\cyborg_mp” in Eschaton.

Image

Select “Int16s”, and change the anchor offset of the SPB and SPM to your liking. X = move horizontal, and Y = move vertical. Make sure the X and Y offsets of the SPB and SPM are the same.

Image

Tutorial will be updated.

8. Links

HUD Template:
Mediafire: http://www.mediafire.com/download.php?o4mmlgnlyzm
Filefront: http://www.filefront.com/14414649/HUD-Template.zip/

Eschaton 0.8.1:
Mediafire: http://www.mediafire.com/download.php?dntx405mb2d

Re: [TuT] Making a Custom HUD (Heads Up Display)

Posted: Fri Aug 28, 2009 1:05 am
by Sugarlumps
Hm..not bad a tut..

Okay its pretty good

I just gotta learn how to mange with using my one pic-editing tool: PAINT

LOLS im putting it in my USB and transfering to my PC

LOL

Nice tut

Re: [TuT] Making a Custom HUD (Heads Up Display)

Posted: Fri Aug 28, 2009 1:09 am
by Rofldonutburger
Added links. You should also download Gimp, it's good and it's free.

Re: [TuT] Making a Custom HUD (Heads Up Display)

Posted: Fri Aug 28, 2009 1:14 am
by Sugarlumps
Eh.. Im already using Eschaton 0.8.1..

You know mediafire doesn't even work for me don't you?

Re: [TuT] Making a Custom HUD (Heads Up Display)

Posted: Fri Aug 28, 2009 1:32 am
by Rofldonutburger
Works for the majority of the people. Now just calm down, I'm going to upload it to Filefront too >.<

Re: [TuT] Making a Custom HUD (Heads Up Display)

Posted: Fri Aug 28, 2009 1:37 am
by Sugarlumps
Heh...its friday..Im CALM... I have 2 more days till school starts again...

Re: [TuT] Making a Custom HUD (Heads Up Display)

Posted: Fri Aug 28, 2009 4:18 am
by G[v]N
Hur hur hur. Nice, can't wait for the rest of the tut!

Re: [TuT] Making a Custom HUD (Heads Up Display)

Posted: Fri Aug 28, 2009 4:30 am
by Candy
WHO WANTS VIDEOS~!!!!!!

Re: [TuT] Making a Custom HUD (Heads Up Display)

Posted: Fri Aug 28, 2009 4:41 am
by G[v]N
Why would you need a video when it's already laid out in perfect detail here?

In any case, if you need a video..MGM Youtube (cough) would be happy to make one. When the tut's finished. :P

Re: [TuT] Making a Custom HUD (Heads Up Display)

Posted: Fri Aug 28, 2009 8:02 am
by Dudedragon
Nice tutorial. Easy to follow, well detailed. Plus I ACTUALLY GOT IT TO WORK! yay!

Re: [TuT] Making a Custom HUD (Heads Up Display)

Posted: Fri Aug 28, 2009 8:58 am
by Candy
Ill get it to work later!

Re: [TuT] Making a Custom HUD (Heads Up Display)

Posted: Fri Aug 28, 2009 10:46 am
by Altimit01
Very nice tut. Will be added to the tutorials section once it falls off the front page. (Rofldonutburger PM me when it does so I can add it.)

Re: [TuT] Making a Custom HUD (Heads Up Display)

Posted: Fri Aug 28, 2009 7:36 pm
by G[v]N
Though when the full tut's done you'll need some organizing..

Re: [TuT] Making a Custom HUD (Heads Up Display)

Posted: Sat Aug 29, 2009 5:22 pm
by Sugarlumps
Ehhh whens the link to filefront gonna be up?

Im excited
but a bit tired waiting and coming to this forum almost everyday

Re: [TuT] Making a Custom HUD (Heads Up Display)

Posted: Sat Aug 29, 2009 9:43 pm
by Rofldonutburger
The link's already up.