Le Twitch Posted October 3, 2014 Report Share Posted October 3, 2014 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 Quote Link to comment Share on other sites More sharing options...
CtlAltDel Posted October 3, 2014 Report Share Posted October 3, 2014 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. Quote Link to comment Share on other sites More sharing options...
Le Twitch Posted October 3, 2014 Author Report Share Posted October 3, 2014 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? Quote Link to comment Share on other sites More sharing options...
CtlAltDel Posted October 4, 2014 Report Share Posted October 4, 2014 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. Quote Link to comment Share on other sites More sharing options...
alex_h Posted October 4, 2014 Report Share Posted October 4, 2014 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. Quote Link to comment Share on other sites More sharing options...
chg Posted October 4, 2014 Report Share Posted October 4, 2014 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... Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.