best way to do a pie timer?

[Le Twitch]

What is the best way to do a pie timer in phaser, similar to this, but starting as a full circle.

https://codepen.io/agrimsrud/pen/EmCoa

[CtlAltDel]

using ye ole math and some graphics.arc magic.

 

Seriously the codepen you linked shows you everything you need. If that's not enough nothing is.

[Le Twitch]

using ye ole math and some graphics.arc magic.

 

Seriously the codepen you linked shows you everything you need. If that's not enough nothing is.

 

would that be considered the best way to do it though?

[CtlAltDel]

I would use a bitmap of the full circle and then mask out the part I want to show using the .mask property of sprites.

[alex_h]

There's a related topic here:

 

http://www.html5gamedevs.com/topic/8955-animated-pie-chart/

 

in which I suggested an alternative way of achieving the same effect by rotating segment sprites.

[chg]

I don't think there is an ultimate "best" way, instead it depends heavily on your situation and your criterion.

 

One of the fastest approaches for the webgl renderer might say be a dynamically created triangle fan of up to 6-8 triangles for a full circle (and less for partial pies) textured with a bitmap image of the full circle, and drawn with a call directly to drawElements(). You can add a quad along the diagonal edge of the mouth of the pie, of about 1px width if you want to fake antialiasing, just vary the opacity of the vextex colors from 100% for the vertices on the edge touching the mouth, and 0% for the vextices 1px away...