How do I create a circular cooldown display?

Hi! I was looking at some tutorials for healthbars and cooldown bars today but all of them were only bars and relatively simple. I have to admit that I am not very good at math and angle things (need to re-learn many things ) and wanted to ask if someone can give me some hints or post an example how to make a circular cooldown display on a button, please.

Hi,

here is one of many solutions.

[attachment=0:2qfnkfg0][/attachment:2qfnkfg0]

• xeed

Thank you very much. It creates many objects and needs a lot of CPU, but its a good start.

The canvas addon is usually the best option for drawing shapes.

I managed to do something like this earlier this morning by using 4 objects and 2 layers (to be exact one of them is an hud layer which is transparent that should be on top of the others, it is using XOR blend mode):

Basically there is 2 half circles red, and one halfcircle with the blend mode destination out (which basically erase what is under it on the same layer i ll call it the mask), the trick is to rotate the half circles to fill the circle, and make one of it go on top of the mask when needed, I cantry to make a capx with that if needed

Thanks zatyka, but a solution without addons would be even better. But I will take a look at it.

An example capx would be great —

Bl4ckSh33p

here is the capx (just change the opacity of the mask to 50 to clearly see what is going on, but don't forget to set it back to 100 after <img src="{SMILIES_PATH}/icon_e_wink.gif" alt=";)" title="Wink"> ):

https://dl.dropboxusercontent.com/u/100 ... ndbar.capx

a quick picture:

and the working version exported:

https://dl.dropboxusercontent.com/u/100 ... index.html

Hope that helps ^^, it is not performance heavy and seems to get the job done just fine

EDIT: the index . html has an annoying seams, it is because I've used multiple frames to do the half-circly bars (for the blue and green exemples), and so the spritesheeting caused that, it wont happen in the capx I gave since only one frame is used, but it is something to keep in mind if that becomes a problem

Edit 2: you can set the hud layer blend mode to normal AND the force own texture to on to achieve the same effect, it will correct display issues in canvas2d renderer

Thank you very much!

Bl4ckSh33p

just a quicky to add that it seems than adding a sprite (we will name it "texture") between (z-order wise) the mask and the top_health, and giving him the "Source atop" blend mode will apply the texture to the bar, as images speaks more than words:

texture:

Result:

Nice. This is great for a healthbar.

But I get a headache when I look at the used formula to rotate the images.

May I ask if you do know a solution without mask to have an overlay (grey/transparent square over a button for example) which rotates in a circle like a clock? A classic clock cooldown display like many MMOs have on their buttons. Do you know what I mean?

[attachment=0:22pp9avr][/attachment:22pp9avr]

The button/image is in the background and when you use it the whole button is greyed out and the "clock" runs around until the cooldown is finished and the whole button is visible again. Is this possible without the canvas or other plugins?

Nice. This is great for a healthbar.

But I get a headache when I look at the used formula to rotate the images.

May I ask if you do know a solution without mask to have an overlay (grey/transparent square over a button for example) which rotates in a circle like a clock? A classic clock cooldown display like many MMOs have on their buttons. Do you know what I mean?

[attachment=0:3pv14f8x][/attachment:3pv14f8x]

The button/image is in the background and when you use it the whole button is greyed out and the "clock" runs around until the cooldown is finished and the whole button is visible again. Is this possible without the canvas or other plugins?

Without a mask, I do not know, however I did add some modifications to my original circular healthbar to make it so its origin can spin around (to be correct, it defines the origin and max angle relative to this origin), but that did make the math rather complex (I even fell in a case when -270 and 90 degress weren t working the same way as origins, which was weird), so i am not sure, i can give it if you want

Use two sprites. Top sprite's opacity set to less than 100, you're done.

KYATRIC. Thank you, simple solution

Not what the OP asked though.

To answer Bl4ckSh33p, as far as I'm aware, you need to use masks and/or layers to have the transparency you're looking for, and that's what blending modes are for.

Thank you. I just had an idea. Maybe I can use the .gif from above (the last half of the animation) and convert it to single frames / a spritesheet and then change the frames depencing on cooldown progress.

This should produce the "clock cooldown".

And another very easy solution (without radial display) would be just a sprite on top with transparency to cover the button and then set the heigth of it depending on cooldown time.