|
I'd like to know how to make a circular progressbar or timer-type effect. Basically, given a value [0..1], it will "fill in" a portion of a circle on the GUI that circularly represents the value. So if I give it 0.33, it should fill in 1/3 of the circle, and so on. These types of GUI elements are useful for timers and that sort of thing. I really can't think of a way to do this off the top of my head, so if anyone can either post some code or point me in the right direction, that would be awesome. :)
(comments are locked)
|
|
The easiest way is to use an alpha gradient texture:
Which is used as a mask in an alpha test (transparent cutout) shader. You change the _Cutoff property to indicate which percentage should be used, ranging from 0..1. This code would make the bar empty when the mouse pointer is on the right side of the screen, going up to full as you move the mouse pointer to the left side (see demo): In the demo, there are three textures; one for the regular graphics (using normal alpha for nice anti-aliasing), one for the green health bar (using alpha cutoff), and a solid red behind the first two that shows through where there's no green. The non-alpha part of the health bar texture is just a block of solid green, although it doesn't have to be...you can make it look like whatever you want of course.
A unitypackage of this is available here. Absolutely the information I needed. Thank you!
Apr 10 '10 at 03:01 AM
qJake
great answer eric! do you use shaders much? do you know shader programming?
May 03 '10 at 04:26 PM
Ashkan_gc
A little, but you don't need to know any shader programming for this, just use a transparent cutout shader.
May 05 '10 at 08:48 PM
Eric5h5
To make this work on many buttons in OnGUI, would you need to set up a camera and poly on separate layers for each button, and render each to a RenderTexture? If you had, say, 50 of them, would that kill performance? (50 extra cameras, 50 extra render textures)
Aug 04 '10 at 02:25 PM
Molix
Just use material instances to be able to change the cutoff value for each button individually.
Aug 04 '10 at 05:19 PM
Wolfram
(comments are locked)
|
|
That's a kind of involved process, because you can't just scale a circle. However, the Lerpz tutorial explains it. Basically, how it works is you have, say, 6 images arranged in a circle. Based on your variable, you would set the transparency of an image to be either 0 or 1, thus causing it to fade away, and make it look like a part of the circle has disappeared. For a background, you could just put a normal circle just underneath it.
(comments are locked)
|
|
You could do it with an animation. The animation would contain all the stages from 'full' to 'empty' for the circle timer. Then just link the position of the animation to the timer variable. (I don't know alot about Unity so this is just experience from general game building, you would have to work out how to animate and refere to animations in Unity) You can't animate pic animations in Unity. You have to use script. I can see where you might think that, coming from a general game building background, however, because that's a common thing to do.
Apr 09 '10 at 01:59 PM
e.bonneville
Ah. Ok. How would you have an animated image then? Would have you have manually change the picture via scritp?
Apr 09 '10 at 02:34 PM
Sydan
The best approach for that is either a MovieTexture, or you can tile all your animated images together into one large texture, and use the textureOffset and textureScale to selectively display only one of these tiles.
Aug 04 '10 at 05:22 PM
Wolfram
It can be animated if you use a 3D mesh. Then just put it on the GUI camera layer.
Jan 31 '11 at 01:04 PM
Rblain
Huh? Of course obviously you drop it on a mesh (like anything you want to "see"!! heh) If you prefer use one of the many 2D sprite systems available on the Asset Store, they all work fine (or again just drop it on a plane mesh). Then animate your heart out using the wonderful animation system. Your answer is the correct one Sydan!
May 28 '12 at 08:48 PM
Fattie
(comments are locked)
|
|
The same in Antares Universe : http://forum.antares-universe.com/load-from-resources-and-animated-alpha-texture-in-gui-t461.html
(comments are locked)
|
|
If you are using NGUI, you can do this with a progress bar component by setting the Foreground sprite to use radial fill.
(comments are locked)
|
it's incredibly simple to do this using Unity's built-in animation system. just spin one part on top of the other! have done this dozens of times in production games .. unless you mean something different???