How do I make a circle "Timer" where a part is transparent?

Sorry about the title, I didn't know how else to explain what is needed in the space allowed.

Basically I need a Timer that is shaped like a circle. There are two lines from the center of the circle to the edge. One line doesn't move while the movable line slowly spins away from it. The lines origin points are at the center of the circle, it looks like and acts like a circle clock with an hour hand and a second hand. "Area A" starts off as the small area between the Lines. "Area B" starts out as the larger area on the other side of the lines. I need transparency to stay in "Area A" even when "Area A" gets bigger than "Area B". When the two lines touch each other and "Area B" is gone, it will be destroyed.

In other words I need transparency between two lines and it needs to follow a circular path. The two lines are only touching at the origin point. The transparency needs stay on the same side of the lines even when they spin above 180 degrees. When it gets to 360 I need the whole object to be destroyed.

Almost like the Super Mario 64 Health Bar, but without segments. It would be as a whole that slowly goes away.

This needs to be done in an event sheet, as the movement of the movable line can be adjusted due to triggers in the game. The movable line will sometimes slowly move and other times it will jump x%. It is unpredictable due to how the player plays the game. This is an in-game timer, a long term timer. It barely moves unless the player effects it somehow. I also would like the visible part of the timer to be able to overlap objects, if possible.

I know this is kind of an odd thing to ask. I only asked for a circle timer because I assumed it would be easier than a square. A square Timer will work as well. With a square I can hide the unneeded parts. I have no idea where to start on this. It is why I am asking... I wouldn't know how to even look it up. I was wanting to avoid making it an animation. If the end of the lines need to go past the circle's edge it should be okay. I am aware there may be the need for many lines.. Maybe some type of points are used as well.

Thank you. sorry for any complications.

Will be a small while before I am able to reply.

Now That I posted this.. I just figured that I may be able to Blend and Spin Game Objects to make it looks like it is a timer. What would be the best way of doing that if it is in fact a solution?

Is this what you are looking for ?

https://www.scirra.com/tutorials/1377/how-to-create-a-radial-lifebar-in-construct-2

For the Transparent part, just make you timer in 2 or 3 parts. Topmost layer should be transparent. That's what I did for my game.

alanziy That is more like it. Was wanting to avoid objects if possible to prevent a foreseeable issue later on. I'll manage with it. Can't seem to be able to fill pixels between points without a plug in, which would have been the solution.

Depending on how many steps this circular bar needs to show (if not to many), it can be done without plugins. Just use an animation. 100 frames is no problem. And that is every 3,6 degrees.

At the end of this post I add a possible solution: post.

Here is the .capx if you want: HPbar.capx. (note: I'm not the only author of this solution... read the thread).

On a computer everything is nice(60FPS) but on mobile, it is more difficult. On my Nexus 5 this experiment alone run at 60FPS but when I include the bar in a real project, FPS depends on how high the bar resolution is. You will have to experiment.

lapinchatware Thank you for the Capx.

It is what I was seeking, but I am not fully understanding the structure the Capx. is using. I am not sure what it is using an Array for and am not sure what the "gamedata" is being used for. Seeing how it works I now have an idea of how to do what I needed.

From my understanding there is a small rectangle that has 5 different frames to allow 4 different sprite colors and 1 transparent. This sprite is rendered next to itself to make an illusion of a bar.

It is given a spawn point for the small rectangles and renders it a certain distance away from the the spawn and the angle of the point changes an equal amount depending on the health variable. This creates the illusion of a circle using the small rectangles.

Below may help performance for mobile devices.

The Capx. file that was given uses 500 small rectangles in order to show a health bar circle.

You can reduce this by using larger segments of the health bar and switching to smaller segments when needed. Having collision off when it isn't needed is good to do for any object.

Also if you create/destroy segments as needed instead of having rendered objects as transparent then it will help reduce the number objects. No need in having an object on screen when it doesn't have a purpose.

Another way is to use larger segments of circle, then you can rotate by a set angle to animate the bar. If you have 100 health you can divide 360 by 100 and know each health point to rotate the quarter segment by 3.6 degrees. Since a quarter is 25%, at 75 and 50 health you would know to erase a quarter segment to keep the flow looking normal. At 76 and 51 health you would have to create a quarter piece to prevent a gap between segments. The issue with this is the last quarter of the Circle bar would have to be small rectangles. You can replace the last quarter with small rectangles when it is needed or you can just make the last quarter small rectangles to start off with.

If performance is an issue and you are just doing a line health bar you shouldn't use small rectangles. One object should be used and then it should be scaled depending on the health variable.

I think you understood really well how it works. To answer your questions:

• the Array is used to store the UID of each segment in order. This way it is possible to switch visibility state of specific section of the bar. This is where the magic reside.
• gameData is used to keep data between layout switch. In this case the player HP.

Since I posted this, I found another way to do it. I needed a round HP bar. This solution need only one sprite. This sprite could be any shape. This shape should be filled with a gradient from a solid color to transparency. Then you apply this effect to your sprite. You set "Smoothness" to 1 and "Flat Colors" to 1. By changing the "Threshold" parameter from 0 to 100, you should see the sprite gradually appear or disappear. Here's an example .capx

The effect is not perfect but I haven't worked a lot on fine tuning this.

The alpha threshold effect I used can be replace by 'vanilla' effect but I preferred the result with this one.

To change the color of your sprite, you simply rotate the HUE with the effect "AdjustHSL".

If you want to also move the "other side" of the bar, I guess you can simply rotate the sprite at the same time.

I hope it is not to confusing.