Jump to content

Phaser 3 : Draw Circle style timer


Recommended Posts

This example on Phaser 3 Labs could help. You can draw a stroked circle and a thicker arc inside a Graphics object to reproduce that timer. You'd need to clear the Graphics object every frame and redraw the arc based on how close your timer is to completion.

Keep in mind the angles are in radians. 0 radians is the rightmost (east) side. You'd need to start at -90 degrees and go up to 270 degrees clockwise - the end angle will, of course, be a function of the elapsed time.

The text in the center of the timer can just be a normal Text object.

Link to comment
Share on other sites

  • 9 months later...
  • 2 years later...

  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...