I have a task to create a power bar for my game. The previous one was easy, a rectangular bar drawn in UnityUI that I adjusted width of based on the current power.
Now, the design calls for the “bar” to be a curved triangle. That’s not so simple. Can anyone who’s done this in UnityUI share the best method for accomplishing this?
There are a couple ways I’ve thought of. First is to have a bunch of images that I cycle through based no health (1-100). This seems really inefficient.
Another is to dynamically create the texture by having a separate mask texture that I load, and then doing SetPixel() (eliminating masked pixels) to create the power bar in a given state, and then using the dynamic texture created as a source for the DrawTexture call. That doesn’t seem efficient, either.
I’ve dealt mostly in UnityUI, so not sure if the GUITexture methods would be more appropriate in this instance.
Any insight appreciated.
Could you perhaps include the texture you need to use in a post here, so people can get a clear idea of what sort of shape you’re dealing with?
There are two ways basically:
- If you don’t have the bar behind a skin:
the best way to achieve that is using an alpha image where the “irregular part” is alpha-ed out.
The bar itself is handled by a simple quad which you expand to the right and as you expand it, you change the UV coords on the right end of the quad accordingly.
Thats pretty easy if you have some basic knowledge how meshes and UV work and pretty straight forward and offers you a much higher granularity than 1% steps.
- If the bar is behind another skin:
well make the bar just a normal quad / progressbar or whatever and use the skin thats in front to reduce the visible area to the unregular shape.
I was just trying to solve a similar problem. I ended up making a orthographic camera and pasting the texture onto a plane that could be masked off.
Check it out…
Hey there! Thanks everyone for your responses.
I attached a picture of the ‘housing image’ for the bars. The bars are filled in the middle part as a players health/mana are regenerated.
dreamora, thanks for the insight. I was anticipating (if I could) using a GUI.Drawtexture() call to pull this off. Do the methods you’ve mentioned work with that (or would that be more the realm of GUITextures?)
Ablaze, thanks for the lead, I’ll check out the thread you mentioned (I had viewed it shortly after I posted this yesterday, but didn’t know if it was applicable to using UnityUI or was only for GUITextures). It may be, judging from the advice you all have given, that I’ll need to forego using UnityUI and use GUITextures.
Thanks again!
Yeah, what you are doing will simply not work with UnityGUI unless you want to use canned images for the lifebar.
I don’t believe my method will even work with GUI Textures. If you could get it to work I would love to hear about that, but I tried and couldn’t. I believe you have to go straight to making a separate camera for any 3d elements and any elements that you want to apply a non-square mask to. There is a page on cameras that goes over basically how to do it.
Ablaze, thanks for the reply. Yeah, I exhausted a myriad of options trying to make the irregular shape work, but none of them did. You’re right, the only recourse I see is to create a separate camera and render to texture and then use the texture as a source for the UI piece.
In the short term, we ended up compromising a bit on the design, and I was able to create a power bar that has the odd shape using only UnityUI and two images, the irregular shape and a second image of the same shape “filled” to “100%”. I then drew the first shape using DrawTexture(), and then made a GUI.Group() the size of the current health, and then drew the second filled texture into the group (which clips), offsetting it so that it laid over the first image. It works well enough, but doesn’t allow for a few niceties.
I’ll eventually rewrite using camera and render texture.
Could you not use a material texture and just offset its UV position.
In max I would create a mesh with two materials (known as a Multi-Sub object material), the actual health part would have one texture (bitmap) and everything else a different texture (bitmap).
The health texture would look like the attached so its 50% filled with white (or whatever your background colour is), the visible part of that texture in game is just the coloured area.
Now if you animate the UV offset of this texture so it moves to the left then it appears the health alone is going down.
What you could do would be to use GUI.BeginGroup to get custom clipping. Sth. like:
GUI.Box (Rect (0,0,100,50), backgroundTexture);
GUI.BeginGroup (Rect (100 - health, 0, health, 50)
GUI.Box (Rect (0,0,100,50), filledHealthTexture);
GUI.EndGroup ();