HUD Editing - Guide to Perfect Meters

This if for tutorials and information for the community to use for great works.
Keep them organized now!..
Post Reply
User avatar
Click16
Posts: 1941
Joined: Mon Dec 31, 2007 4:36 am
Location: United States

HUD Editing - Guide to Perfect Meters

Post by Click16 »

Hello everyone. I learned better methods for creating perfect meters in-game and decided it was time to rewrite this tutorial.

Some notes before we get started:
HUD shit is incredibly fun to poke around with, but also can be a pain in the ass when something goes wrong, so loads of patience and willingness to try again must be present.

So with that said let's get started.

Requirements:
Image editing software such as Adobe Photoshop, Gimp, etc.
Troy's latest Entity build.
a bit of patience.


Section 1: Creating Meter


So take any clean map, and find the Rocket Launcher's ammo meter. Take a look at it in Photoshop. What do you see? Be sure to check the alpha, and the RGB channels.

Even if you are new to HUD editing, It doesn't take a rocket scientist to figure out what's going on.

Let's take a look...

Image

The image on top is the Rocket Launcher's RGB, or Red Blue Green, channel. The image below it is the Alpha channel.

So in the RGB channel, we see the Rocket launcher ammo counters indicated by the Green and light blue figures, and around them are blue and black. Well exact color data shows...

RGB Colors
Ends at
██████████████
Surrounded by
██████████████
Starts at
██████████████
Surrounded by
██████████████

So what we know is that the Light blue and dark blue are the lighter end of the meter. And we know that meters flow from dark to light so that covers how to map out the colors. Now to make a meter...

I kinda am a fan of Nerf dart guns, so I figure I could make a standard clip ammo meter. I know that a standard clip holds at max, 6 darts. So I will make an image at size 6x1 pixels right? Wrong. I will explain why.

If I where to take the light blue and green colors exact, put them next to each other at 1 pixel size and transformed them over the length of the image I get these results.

Image

As you obviously see, there are only 2 pixels that are different. So we will only get a meter that moves 3 places evenly. The meter will crumble if we tried it in-game.

So there must be a trick to get around this. The truth is that there is. Basically because 2/6 pixels where different. This ratio stays about consistent no matter what size your working with. But if you are working with anything over 128 pixels, just go for a 1/2 ratio instead of a 1/3.

So lets duplicate the original process but change the size to the correct width. So if we want 6 spots, we will need to multiply 6 by 3 and get 18. So instead of 1x6 make it 1x18 and then stretch the two pixels over the length. But this isn't enough. You want the number to be odd. So add one to the even number to get 19.

Image

Now we can still see the same repeating color, but there are more differences in the middle. So basically use the Canvas Size option to change it to 6 pixels and you should get every color different. That's the trick. Now what do you do with these pixels? You basically make one bullet one pixel color then move on to the next.

Repeat the process for the blue colors as well. Here are my results.

Image

This only leaves the alpha which shows up behind the bullets to show depleted bullets.

Shield meters also work this way, but the alpha will tell how transparent the meter is.

Section 2: Injection
I recommend getting a clean map and copying it to its own directory, then editing the image, save it and build it into your main map to reduce the chance for error.

So before you begin I recommend you Resize or Add submaps to your bitmap.

When ready, just simply inject your bitmap, link it to your HUD tag, and test.
Last edited by Click16 on Fri Nov 05, 2010 5:11 am, edited 3 times in total.
Image
User avatar
Gary
Posts: 1946
Joined: Thu Feb 14, 2008 10:17 pm
Location: USA, FL
Contact:

Re: HUD Editing - Custom Meters

Post by Gary »

I like it, simple and decently written.
User avatar
NotZachary82
Posts: 1846
Joined: Thu Dec 20, 2007 8:39 pm

Re: HUD Editing - Custom Meters

Post by NotZachary82 »

Click16 wrote:Results:
Not quite what I had in mind, but really all I need to do is edit the shader. But the meter performs correctly.
Image
Those colors should NOT look like that. I'm sure it's because of your color scheme.
4) Now we need to set up the meter. For the RGB this is what you need to do. Set the "Gradient Tool" in Photoshop. Next, we need to set two opposite colors. when in the color selection, lets say that Red is set to 255 while the Blue and Green are set to 0. The background has to be the darker color, in this case, red, and the foreground needs to be the exact opposite of red. If Red = 255 and blue and green = 0, Red has to be 0 and Blue and green need to be 255. That's how you can find the opposite. Another method is to select a color, and dump it into a new layer, use the Invert tool to get the opposite.
I've made perfect looking meters and not once have I remotely used these colors. I'm going to spare you a long post and just tell you that there are better color schemes than yours.

I'd be happy to share.
User avatar
Click16
Posts: 1941
Joined: Mon Dec 31, 2007 4:36 am
Location: United States

Re: HUD Editing - Custom Meters

Post by Click16 »

I am almost certain its because of the shader I have used. I will experiment though... Maybe you're right.
Image
User avatar
neodos
Posts: 1493
Joined: Sun Dec 09, 2007 8:58 pm

Re: HUD Editing - Custom Meters

Post by neodos »

Who cares about color schemes on amod make your owns, great tutorial.
User avatar
Click16
Posts: 1941
Joined: Mon Dec 31, 2007 4:36 am
Location: United States

Re: HUD Editing - Custom Meters

Post by Click16 »

neodos wrote:Who cares about color schemes on amod make your owns, great tutorial.
Thanks neodos.

Video is up for download.
Image
User avatar
Aumaan Anubis
Staff
Posts: 1812
Joined: Thu Dec 13, 2007 12:18 am
Contact:

Re: HUD Editing - Custom Meters

Post by Aumaan Anubis »

Moved to Tutorials.
User avatar
Click16
Posts: 1941
Joined: Mon Dec 31, 2007 4:36 am
Location: United States

Re: HUD Editing - Custom Meters

Post by Click16 »

NotZachary82 wrote:Those colors should NOT look like that. I'm sure it's because of your color scheme.
I know this might be a bump, but this is the reason. Upon re-reading the Tutorial, I noticed that the shader was the Plasma Meter. This uses red as the weapon's Heat.

Image

Ya see?
Image
User avatar
NotZachary82
Posts: 1846
Joined: Thu Dec 20, 2007 8:39 pm

Re: HUD Editing - Custom Meters

Post by NotZachary82 »

Also, for standard ammo meters, if I remember correctly from studying the stock ones:
  • The red channel should be black,
  • The green channel should have your meter with a white color overlay (similar to an alpha),
  • The blue channel should have the white to black gradient (white being full, etc.)
This will make the gradient appear turquoise and fade to green.

However, I've never messed with heat meters before.
Post Reply