Sign in to follow this  

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.

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.