How do I create a circular cooldown display?

Get help using Construct 2

Post » Fri Jun 20, 2014 6:25 pm

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 :oops: ) 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.
Bl4ckSh33p-Soft - Custom Software and Indie Games
B
58
S
18
G
6
Posts: 756
Reputation: 9,591

Post » Fri Jun 20, 2014 8:09 pm

Hi,

here is one of many solutions.

circularcountdown0.1.capx


- xeed
You do not have the required permissions to view the files attached to this post.
B
15
S
3
G
5
Posts: 396
Reputation: 4,977

Post » Fri Jun 20, 2014 9:32 pm

Thank you very much. It creates many objects and needs a lot of CPU, but its a good start. :)
Bl4ckSh33p-Soft - Custom Software and Indie Games
B
58
S
18
G
6
Posts: 756
Reputation: 9,591

Post » Fri Jun 20, 2014 10:51 pm

The canvas addon is usually the best option for drawing shapes.
You do not have the required permissions to view the files attached to this post.
B
64
S
19
G
8
Posts: 341
Reputation: 12,195

Post » Sat Jun 21, 2014 3:54 pm

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
Game design is all about decomposing the core of your game so it becomes simple instructions.
B
54
S
22
G
18
Posts: 2,123
Reputation: 17,150

Post » Sat Jun 21, 2014 4:06 pm

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 @Aphrodite.
Bl4ckSh33p-Soft - Custom Software and Indie Games
B
58
S
18
G
6
Posts: 756
Reputation: 9,591

Post » Sat Jun 21, 2014 4:25 pm

@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 ;) ):
https://dl.dropboxusercontent.com/u/100 ... ndbar.capx

a quick picture:
Image

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
Game design is all about decomposing the core of your game so it becomes simple instructions.
B
54
S
22
G
18
Posts: 2,123
Reputation: 17,150

Post » Sat Jun 21, 2014 5:52 pm

Thank you very much! :)
Bl4ckSh33p-Soft - Custom Software and Indie Games
B
58
S
18
G
6
Posts: 756
Reputation: 9,591

Post » Sat Jun 21, 2014 9:41 pm

@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: Image
Result: Image
Game design is all about decomposing the core of your game so it becomes simple instructions.
B
54
S
22
G
18
Posts: 2,123
Reputation: 17,150

Post » Mon Jun 23, 2014 1:58 pm

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?
circular298.GIF

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?
You do not have the required permissions to view the files attached to this post.
Bl4ckSh33p-Soft - Custom Software and Indie Games
B
58
S
18
G
6
Posts: 756
Reputation: 9,591

Next

Return to How do I....?

Who is online

Users browsing this forum: No registered users and 30 guests