Post by ©³~ SilentK on Jan 19, 2011 14:17:12 GMT -6
Tools Needed:
Part 1
Creating a Halo 3 Style HUD
Original tutorial by Philly (Quagmirian), so credit goes to him for figuring out how to position the HUD and writing up most of part 1 this tutorial.
By the end of this tutorial you should end up with something like this:
Files needed:
Step 1: Create your visor outline
Firstly you'll need to create a bitmap which will become your visor outline. Feel free to be creative, you don't have to stick to the boring MkVI Spartan style if you don't want to. Philly made a few like the Elite's visor, and an idea of what the MkV Spartan visor would be like. Choose whatever style you want, I'd like to see someone make one for a grunt.
Anyway, open up your image editing program and create a 1024x1024 image. Fill it with black. Or you can use the .psd that I have provided in the above download.
Using the top 1024x768 area, paint your outline using whatever methods you wish (create a new layer if you're using my .psd). I recommend using Photoshop's path tools to do this part. Gradients, lines, whatever. You can always change it later. Generic alpha gray scale rules apply here, white is visible and black is not, in between grays vary the opacity levels. Here's one I have made:
You'll notice the box in the top left hand corner, this is necessary for the method we're using (unless you are creating a HUD like my ODST version that does no have the ammo box). I've included a PSD to download which is a template with everything you need to make skinning the visor easy. This box is included. When you're happy with the image, select and copy everything:
Paste this into a new channel if you don't already have one. To create a new channel, go to the channels tab and click the icon which is a square with a circle in:
Save your image as a DXT3 DDS texture. The name and location don't really matter, as long as you know where it is.
Step 2: Injecting the Texture
I'll be injecting the texture with HMT, because that's the program with which I am most familiar, but for those who are on Macs or prefer Eschaton should use the relative equivalent.
Open HMT and then the map you are using.
Open the [bitm] tab, and find 'ui\hud\bitmaps\combined\hud_ammo_outlines'. Click on '3- 128x32'.
First click EoF (1) then hit Update (2)
Then hit inject and browse and select your HUD texture. When you import you should see the following screen come up; hit yes to continue.
Then you'll get another dialogue box saying "Texture imported successfully"; hit OK.
You should be able to see your new texture in the preview window. Close the map, you're done with HMT.
Step 3: Adjusting the HUD so that the visor works
Once you have your texture injected, you need to change a few numbers so that it fits onto the screen correctly. If you test the map at this point you'll find that the outline is too big and is shifted to the right hand side of the screen. Trial and error led me to use the values that I do.
Open Eschaton, and then the map that you are using.
Open the [wphi] tab and click 'ui\hud\master plasma'.
Expand 'static elements - 2', and make the following changes (You have to hit enter after you finish typing in each value to lock it in):
Click on 'ui\hud\master rounds' and 'ui\hud\master fuel' and make the same changes.
Close the map.
Step 4: Test it!
What have we just done?
Play your map and test it to see if it appears properly. It should appear only in first person. If it doesn't, make sure you followed all the key steps correctly. Post here if you have any further problems.
It should look something like this if you used the version with the ammo box:
Part 2
Editing HUD Unit Meters
Here I will show you how to correctly edit the shield meters, health meters, and the flashlight meter; you saw some examples back at the top of this tutorial.
Files used:
Step 1: Extract bitmaps using HMT
You'll need to extract the following three textures:
Save these to your project directory. I like to keep things organized, so I usually keep textures I have extracted in a folder separate from where I am saving the edited one, but keeping them all in one master project folder.
Step 2: Editing ui\hud\bitmaps\combined\hud_unit_backgrounds 1
First I'll be working with hud_unit_meters, so open that up. Make a new layer, and cover up the parts you will be editing with black:
Also block out those same parts in the alpha channel.
Here I will just be editing the shield meter and making the health meter disappear.
Now I've just made a simple block with rounded edges to use as an example here:
I then added in a gradient using a layer style, but you can use brushes or whatever you want:
White will show up the most opaque in the game and then going down the gray scale to black will make it less opaque.
Step 3: Editing hud_unit_meters Alpha
Your basic shield meter will just look like this in the alpha channel, with #505050 being the darkest color:
To get this you need to duplicate your shield meter layer and enlarge it's width and length by 105%, you'll want the edges of the alpha to be just a bit past the edges of the shield texture. Then select it and past it in place on the alpha channel:
You can also change it up a bit and have the shield deplete from both ends and go into the middle:
Now flatten your image and save it as .DDS in DXT 5 format. Open HMT and hit EoF and Update on ui\hud\bitmaps\combined\hud_unit_meters and inject your new texture.
Now try it out in-game and see if you didn't mess anything up, it should look like this (I have over shields on):
Don't worry about the part that is over the meter, that's next.
Step 4: Editing ui\hud\bitmaps\combined\hud_unit_backgrounds
Now have open ui\hud\bitmaps\combined\hud_unit_backgrounds 1 - 256x64, copy and paste it in a new layer in your shield meters texture. Make all of the edits that you made invisible and position the background texture over the shield meter (bring down the layer opacity to about 50% so you can see what you're doing) where it would be in the game. I have included a .psd with it already in place.
Make the hud_unit_backgrounds invisible. Make a duplicate of the shield meter and fill it with #2d2d2d and give it a white 2px stroke. Now in photoshop you can just ctrl click on the hud_unit_backgrounds layer and then copy merged to the hud_unit_backgrounds texture.
Also copy it to the alpha channel of hud_unit_backgrounds.
It should look something like this in-game:
You can then use the same process to edit the flashlight meter, which is the bar under the shield meter.
Part 3
Moving HUD components and changing colors with Eschation 0.7.*
Here I'm just going to tell you what the different parts of the HUD are labeled as, seeing as changing the color and entering x y values are self explanatory. I may update this with the values needed to make it look like a Halo 3 HUD.
GRHI - Grenade HUD Interface
ui\hud\default (Frag Grenades)
ui\hud\plasma_flare (Plasma Grenades) use the same labels.
HUDG - HUD Globals
ui\hud\default
UNHI - Unit HUD Interface
ui\hud\cyborg
Other Information
Tips and Files
Work in Progress
Files:
ODST HUD
Tips:
- Photoshop or program with equivalent capabilities. The better the program and your knowledge of using it, the better the result will be.
- nVidea .dds plugin
- Eschaton version 0.5.1 or later (may work with earlier versions). Version 0.7.2 is the latest stable version.
- HMT for injecting bitmaps. You can use Eschaton if you prefer, but I'm more of the nostalgic type and I stick to HMT.
- An ability to copy and paste numbers.
Part 1
Creating a Halo 3 Style HUD
Original tutorial by Philly (Quagmirian), so credit goes to him for figuring out how to position the HUD and writing up most of part 1 this tutorial.
By the end of this tutorial you should end up with something like this:
Files needed:
Step 1: Create your visor outline
Firstly you'll need to create a bitmap which will become your visor outline. Feel free to be creative, you don't have to stick to the boring MkVI Spartan style if you don't want to. Philly made a few like the Elite's visor, and an idea of what the MkV Spartan visor would be like. Choose whatever style you want, I'd like to see someone make one for a grunt.
Anyway, open up your image editing program and create a 1024x1024 image. Fill it with black. Or you can use the .psd that I have provided in the above download.
Using the top 1024x768 area, paint your outline using whatever methods you wish (create a new layer if you're using my .psd). I recommend using Photoshop's path tools to do this part. Gradients, lines, whatever. You can always change it later. Generic alpha gray scale rules apply here, white is visible and black is not, in between grays vary the opacity levels. Here's one I have made:
You'll notice the box in the top left hand corner, this is necessary for the method we're using (unless you are creating a HUD like my ODST version that does no have the ammo box). I've included a PSD to download which is a template with everything you need to make skinning the visor easy. This box is included. When you're happy with the image, select and copy everything:
Paste this into a new channel if you don't already have one. To create a new channel, go to the channels tab and click the icon which is a square with a circle in:
Save your image as a DXT3 DDS texture. The name and location don't really matter, as long as you know where it is.
Step 2: Injecting the Texture
I'll be injecting the texture with HMT, because that's the program with which I am most familiar, but for those who are on Macs or prefer Eschaton should use the relative equivalent.
Open HMT and then the map you are using.
Open the [bitm] tab, and find 'ui\hud\bitmaps\combined\hud_ammo_outlines'. Click on '3- 128x32'.
First click EoF (1) then hit Update (2)
Then hit inject and browse and select your HUD texture. When you import you should see the following screen come up; hit yes to continue.
Then you'll get another dialogue box saying "Texture imported successfully"; hit OK.
You should be able to see your new texture in the preview window. Close the map, you're done with HMT.
Step 3: Adjusting the HUD so that the visor works
Once you have your texture injected, you need to change a few numbers so that it fits onto the screen correctly. If you test the map at this point you'll find that the outline is too big and is shifted to the right hand side of the screen. Trial and error led me to use the values that I do.
Open Eschaton, and then the map that you are using.
Open the [wphi] tab and click 'ui\hud\master plasma'.
Expand 'static elements - 2', and make the following changes (You have to hit enter after you finish typing in each value to lock it in):
- Can use on map type - any
- Anchor offset x: -10
- Anchor offset y: -10
- Width scale: 0.6276
- Height scale: 0.6276
- Flash length: 0
Click on 'ui\hud\master rounds' and 'ui\hud\master fuel' and make the same changes.
Close the map.
Step 4: Test it!
What have we just done?
- Created a visor outline texture
- Inject the texture
- Adjusted it so that it fits the screen
Play your map and test it to see if it appears properly. It should appear only in first person. If it doesn't, make sure you followed all the key steps correctly. Post here if you have any further problems.
It should look something like this if you used the version with the ammo box:
Part 2
Editing HUD Unit Meters
Here I will show you how to correctly edit the shield meters, health meters, and the flashlight meter; you saw some examples back at the top of this tutorial.
Files used:
Step 1: Extract bitmaps using HMT
You'll need to extract the following three textures:
- ui\hud\bitmaps\combined\hud_unit_meters
- ui\hud\bitmaps\combined\hud_unit_backgrounds (1 - 256x64 and 2 - 256x16)
Save these to your project directory. I like to keep things organized, so I usually keep textures I have extracted in a folder separate from where I am saving the edited one, but keeping them all in one master project folder.
Step 2: Editing ui\hud\bitmaps\combined\hud_unit_backgrounds 1
First I'll be working with hud_unit_meters, so open that up. Make a new layer, and cover up the parts you will be editing with black:
Also block out those same parts in the alpha channel.
Here I will just be editing the shield meter and making the health meter disappear.
Now I've just made a simple block with rounded edges to use as an example here:
I then added in a gradient using a layer style, but you can use brushes or whatever you want:
White will show up the most opaque in the game and then going down the gray scale to black will make it less opaque.
Step 3: Editing hud_unit_meters Alpha
Your basic shield meter will just look like this in the alpha channel, with #505050 being the darkest color:
To get this you need to duplicate your shield meter layer and enlarge it's width and length by 105%, you'll want the edges of the alpha to be just a bit past the edges of the shield texture. Then select it and past it in place on the alpha channel:
You can also change it up a bit and have the shield deplete from both ends and go into the middle:
Now flatten your image and save it as .DDS in DXT 5 format. Open HMT and hit EoF and Update on ui\hud\bitmaps\combined\hud_unit_meters and inject your new texture.
Now try it out in-game and see if you didn't mess anything up, it should look like this (I have over shields on):
Don't worry about the part that is over the meter, that's next.
Step 4: Editing ui\hud\bitmaps\combined\hud_unit_backgrounds
Now have open ui\hud\bitmaps\combined\hud_unit_backgrounds 1 - 256x64, copy and paste it in a new layer in your shield meters texture. Make all of the edits that you made invisible and position the background texture over the shield meter (bring down the layer opacity to about 50% so you can see what you're doing) where it would be in the game. I have included a .psd with it already in place.
Make the hud_unit_backgrounds invisible. Make a duplicate of the shield meter and fill it with #2d2d2d and give it a white 2px stroke. Now in photoshop you can just ctrl click on the hud_unit_backgrounds layer and then copy merged to the hud_unit_backgrounds texture.
Also copy it to the alpha channel of hud_unit_backgrounds.
It should look something like this in-game:
You can then use the same process to edit the flashlight meter, which is the bar under the shield meter.
Part 3
Moving HUD components and changing colors with Eschation 0.7.*
Here I'm just going to tell you what the different parts of the HUD are labeled as, seeing as changing the color and entering x y values are self explanatory. I may update this with the values needed to make it look like a Halo 3 HUD.
GRHI - Grenade HUD Interface
ui\hud\default (Frag Grenades)
- GHB - The solid box behind the amount of grenades
- TGB - The outline around the box
- TGN - Grenade count
- TGO (Overlay Bitmap) Chunk 1 - Depleted grenade icon
- TGO (Overlay Bitmap) Chunk 2 - Grenade icon
ui\hud\plasma_flare (Plasma Grenades) use the same labels.
HUDG - HUD Globals
ui\hud\default
- MeP - Pickup/action text
- HDI - Damage arrows
UNHI - Unit HUD Interface
ui\hud\cyborg
- SPB - Shield meter background
- SPM - Shield meter
- HPB - Shield monitor +
- HPM - Health meter
- MSB - Radar backrground
- Meters B - Flashlight meter background
- Meters M - Flashlight meter
Other Information
Tips and Files
Work in Progress
Files:
ODST HUD
Tips:
- Halo 3 visor color - R: 74 G: 165 B: 255
- ODST visor color - R: 233 G: 188 B: 64