[TuT] Making a Custom HUD (Heads Up Display)
Moderator: Halo Moderators
-
- Commando
- Posts: 2468
- Joined: Wed Oct 29, 2008 1:38 am
[TuT] Making a Custom HUD (Heads Up Display)
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.
Now draw a picture on how you want the shield meter to look like. I’ve drawn mine like this:
Save that image as “shield meter”. Then, select around the shield meter.
Now go to Select > Transform Selection and change both the height to 120% and width to 105%.
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.
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.
Click Select > Expand > 4 px, and then Select > Border > 4-6 px (depending on how wide you want the border to be).
Now fill the border with white, and delete the layer with the shield meter on it.
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)
Save that as “shield outline”.
Open up Eschaton, and navigate to the shield meter bitmap (h3\ui\hud\bitmaps\shield_meter).
Import “shield meter” as the image, and “shield alpha” as the image mask.
Now select “h3\ui\hud\bitmaps\shield_outline”.
Import “shield outline” as the image and image mask.
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.
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.
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.
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.
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
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.
Now draw a picture on how you want the shield meter to look like. I’ve drawn mine like this:
Save that image as “shield meter”. Then, select around the shield meter.
Now go to Select > Transform Selection and change both the height to 120% and width to 105%.
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.
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.
Click Select > Expand > 4 px, and then Select > Border > 4-6 px (depending on how wide you want the border to be).
Now fill the border with white, and delete the layer with the shield meter on it.
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)
Save that as “shield outline”.
Open up Eschaton, and navigate to the shield meter bitmap (h3\ui\hud\bitmaps\shield_meter).
Import “shield meter” as the image, and “shield alpha” as the image mask.
Now select “h3\ui\hud\bitmaps\shield_outline”.
Import “shield outline” as the image and image mask.
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.
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.
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.
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.
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
Last edited by Rofldonutburger on Fri Aug 28, 2009 1:43 am, edited 2 times in total.
Dead. derp
-
- Ranger
- Posts: 1545
- Joined: Mon Aug 03, 2009 10:42 pm
Re: [TuT] Making a Custom HUD (Heads Up Display)
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
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
-
- Commando
- Posts: 2468
- Joined: Wed Oct 29, 2008 1:38 am
Re: [TuT] Making a Custom HUD (Heads Up Display)
Added links. You should also download Gimp, it's good and it's free.
Dead. derp
-
- Ranger
- Posts: 1545
- Joined: Mon Aug 03, 2009 10:42 pm
Re: [TuT] Making a Custom HUD (Heads Up Display)
Eh.. Im already using Eschaton 0.8.1..
You know mediafire doesn't even work for me don't you?
You know mediafire doesn't even work for me don't you?
-
- Commando
- Posts: 2468
- Joined: Wed Oct 29, 2008 1:38 am
Re: [TuT] Making a Custom HUD (Heads Up Display)
Works for the majority of the people. Now just calm down, I'm going to upload it to Filefront too >.<
Dead. derp
-
- Ranger
- Posts: 1545
- Joined: Mon Aug 03, 2009 10:42 pm
Re: [TuT] Making a Custom HUD (Heads Up Display)
Heh...its friday..Im CALM... I have 2 more days till school starts again...
Re: [TuT] Making a Custom HUD (Heads Up Display)
Hur hur hur. Nice, can't wait for the rest of the tut!
Moxus wrote:Many thanks to the people who have made my years on MGM and on Halo Demo so memorable.
-
- Operative
- Posts: 155
- Joined: Sun May 17, 2009 12:35 am
- Location: Its somewhere over there >>...Wait, nvm =_=
Re: [TuT] Making a Custom HUD (Heads Up Display)
WHO WANTS VIDEOS~!!!!!!
"I love mota and want to take him out on a date cause I am a giant faggot and like to kill mice then eat their insides." Løki
^Knock Knock
^Knock Knock
Re: [TuT] Making a Custom HUD (Heads Up Display)
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.
In any case, if you need a video..MGM Youtube (cough) would be happy to make one. When the tut's finished.
Moxus wrote:Many thanks to the people who have made my years on MGM and on Halo Demo so memorable.
-
- Operative
- Posts: 202
- Joined: Mon Aug 17, 2009 1:08 pm
- Location: inside a box, inside kirby, inside dreamland
Re: [TuT] Making a Custom HUD (Heads Up Display)
Nice tutorial. Easy to follow, well detailed. Plus I ACTUALLY GOT IT TO WORK! yay!
" When I die, I want to go peacefully like my Grandfather did, in his sleep, not screaming, like the passengers in his car."
-
- Operative
- Posts: 155
- Joined: Sun May 17, 2009 12:35 am
- Location: Its somewhere over there >>...Wait, nvm =_=
Re: [TuT] Making a Custom HUD (Heads Up Display)
Ill get it to work later!
"I love mota and want to take him out on a date cause I am a giant faggot and like to kill mice then eat their insides." Løki
^Knock Knock
^Knock Knock
Re: [TuT] Making a Custom HUD (Heads Up Display)
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.)
Disclaimer: I am no longer active. Any posts, PMs or other communication I use has no guarantee of accuracy or follow up.
Download Eschaton: Mediafire
Download Eschaton: Mediafire
Re: [TuT] Making a Custom HUD (Heads Up Display)
Though when the full tut's done you'll need some organizing..
Moxus wrote:Many thanks to the people who have made my years on MGM and on Halo Demo so memorable.
-
- Ranger
- Posts: 1545
- Joined: Mon Aug 03, 2009 10:42 pm
Re: [TuT] Making a Custom HUD (Heads Up Display)
Ehhh whens the link to filefront gonna be up?
Im excited
but a bit tired waiting and coming to this forum almost everyday
Im excited
but a bit tired waiting and coming to this forum almost everyday
-
- Commando
- Posts: 2468
- Joined: Wed Oct 29, 2008 1:38 am
Who is online
Users browsing this forum: Ahrefs [Bot] and 14 guests