HUD alpha background

Hey everyone. I'm trying to get a semi-transparent HUD up and running. The HUD will be a camera view of one thing, plus a "power bar" like the one in Tiki Golf (but not identical). I want to put both of those things on top of a translucent circular background. My questions are:

1. How was the Tiki Golf power bar implemented or how could I do something that functions the same way? (quicktime? psd?) I want to do my bar curved (so it goes around the rim of a circle). If your answer is in quicktime, is there a free program that can be substituted?

2. How do I make the background of the second camera transparent so that the only thing it shows are the objects in front of it, and not a skybox (single colored or otherwise)?

Thanks for the info.

 

Creating a round "power meter" is hard. I can't think of an easy way to do it. A flat one would be vastly easier. The other parts are easy however.

the problem with gui textures is that they get stretched by the aspect ratio of the camera. To fix this, use this script: http://www.unifycommunity.com/wiki/index.php?title=GuiRatioFixer

Create a Gui Texture, put a circle texture on it with transparency, use the transform on the object to place it correctly, add a GuiRatioFixer to in. In the layer menu of the object select "New Layer" and then type in a name like "HUD Background" in it then go back to your object ans select your new layer for it.

Now to see this Gui Texture you need a new camera. Make a new camera and make sure it is in the same place and has the same view angle as the main camera. Then set "Depth" on your new camera to a value greater then the highest "Depth" value on any camera (this makes sure it is in front of the other camera / cameras), set "Clear Flags" to "Depth Only" (this makes the camera use the lower camera layers for a background), set "Culling Mask" to be only your new layer, and no other layers. Next go to your Main Camera as remove your new layer from it's Culling Mask.

Repeat this process to make a new layer/camera.

For the "Camera view of one thing" just make a new camera and give it whatever behavior you want.

For the power bar you will want to use a small gui texture that has little or no difference along the x axis, then write a scrpt something like this for it:

Code (csharp):

1.  
2. var value = 0.00;
3. var max = 0.00;
4. var length = 0.00;
5.  
6. function Update ()
7. {
8.     factor = value / max;
9.     transform.localPosition.x = factor * length / 2;
10.     transform.localScale.x = factor * length;
11. }
12.  

and then suround the bar with some kind of edge on the same layer as the bar to make it look good.

 

if you wanted a round power meter, could you instead of having an object that scales via scripting (which is i think is a suggested method for a straight one), could you maybe have increments that light up / turn off accordingly?

kinda like the halo suit meter only circular.

 

Hey guys - thanks a lot for the quick answers! The clear camera background thing was killing me. I also like the "lighting up" idea - it would be cool to try something like a "see your name in lights" kind of sign that goes around the circle.

One thing I have heard of people doing for power bars is making a quicktime movie where you make each frame a new picture of the next power level up. I haven't tried it and I don't know how to (I don't even have quicktime pro). Supposedly you can toggle between frames for the difference in power, but I've never tried it.

Also, you no longer need the ratio fixer, I think. My target sign always stays the same size and shape no matter what ratio it's on. Now I have to specify the x/y min/max pixels from the center (0 pixels) to tell it where to go, and it won't change size unless I tell it to in a script.

 

A few thoughts on the round thing:

1. If it's a half circle, put it at the screen edge. The arc could be rotated off-screen as far as desired.

2. An animated multi-frame texture.

3. A multi-point object animated separately in your 3D app to make a growing arc. Then play the animation to the desired frame.

4. Use a needle like a speedometer instead.

 

The way I decided that I would implement it is fairly simple. I decided to make an increment-system to do it instead of a steady bar. I made a prefab with a background board (in the shape of a circle), and then made a whole bunch of segments that go on top of the board (32, in fact). I just enable/disable whichever ones I want through scripting. Thanks for the help!