Create A Countdown Like This (Pic Inside)

Solar2D General Questions/Discussion
#1

Hey guys,

I want to make a polished countdown for my app. But right now I can’t think of a nice way to create a countdown like this

countdown.jpg

In my oppinion the countdown contains three elements:

  1. The number counting down is easy.

  2. It must rotate with decreasing time. Easy too

  3. It must overlay the red area more and more while the time goes down. Any ideas how to do that? :) Masks?

#2

Hi @lornz87,

I haven’t tested my theory, but how about putting each “quadrant” as a separate layer and then placing a white rectangle between the proper “quadrant” which it’s supposed to overlay? This rectangle rotates and, via a Runtime listener, moves up one layer when it crosses the -90, 180, and 90 degree thresholds respectively. Also, the various quadrants would need to be hidden when they were considered “finished”.

So, it would start like this, in layered order (top to bottom):

NUMBER/CIRCLE

top-right quadrant (light yellow)

bottom-right quadrant (normal yellow)

bottom-left quadrant (orange)

WHITE RECTANGLE

top-left quadrant (red)

The white rectangle is merely an image (or vector) which covers half of the overall square area. When it covers over the entire top-left quadrant, that quadrant disappears and the white rectangle moves up one layer, so it begins to obscure the bottom-left quadrant… and so on as it rotates across the entire cycle.

Does this make any sense? I can visualize it better than I can describe it.

Brent

#3

Thanks for your reply Brent.

I guess this would work. The solution with different layers and coming to top is a good idea I guess.  I will try that :slight_smile:

For now I’m just using a classic progress bar to visualize the time left.

#4

Hi @lornz87,

I haven’t tested my theory, but how about putting each “quadrant” as a separate layer and then placing a white rectangle between the proper “quadrant” which it’s supposed to overlay? This rectangle rotates and, via a Runtime listener, moves up one layer when it crosses the -90, 180, and 90 degree thresholds respectively. Also, the various quadrants would need to be hidden when they were considered “finished”.

So, it would start like this, in layered order (top to bottom):

NUMBER/CIRCLE

top-right quadrant (light yellow)

bottom-right quadrant (normal yellow)

bottom-left quadrant (orange)

WHITE RECTANGLE

top-left quadrant (red)

The white rectangle is merely an image (or vector) which covers half of the overall square area. When it covers over the entire top-left quadrant, that quadrant disappears and the white rectangle moves up one layer, so it begins to obscure the bottom-left quadrant… and so on as it rotates across the entire cycle.

Does this make any sense? I can visualize it better than I can describe it.

Brent

#5

Thanks for your reply Brent.

I guess this would work. The solution with different layers and coming to top is a good idea I guess.  I will try that :slight_smile:

For now I’m just using a classic progress bar to visualize the time left.