frenetikm Posted October 12, 2015 Share Posted October 12, 2015 Hi, For a project I'm wondering how to do a countdown timer like this ones :http://www.jqueryscript.net/demo/Modern-Circular-jQuery-Countdown-Timer-Plugin-Final-Countdown/ Is this possible without using images ? I have seen circles in geometry, but not partial circles... My need is to set a timer with variable seconds (level easy => 20 seconds, level hard => 10 seconds) Link to comment Share on other sites More sharing options...
megmut Posted October 12, 2015 Share Posted October 12, 2015 Have a look at drawing an arc line or a quadric line in a canvas here: http://www.html5canvastutorials.com/tutorials/html5-canvas-arcs/ My hunch, would be to draw those with a timer and put the time on that timer inside the 'circle' If I get 5, I'll take a look at making a demo for you Link to comment Share on other sites More sharing options...
jmp909 Posted October 12, 2015 Share Posted October 12, 2015 you can draw an archttp://phaser.io/examples/v2/display/arc Link to comment Share on other sites More sharing options...
frenetikm Posted October 12, 2015 Author Share Posted October 12, 2015 thanks, I found by myself, I made a jsfiddle to demonstrate : https://jsfiddle.net/snggus7a/3/ tidelake and shohan4556 2 Link to comment Share on other sites More sharing options...
shohan4556 Posted October 12, 2015 Share Posted October 12, 2015 thanks, I found by myself, I made a jsfiddle to demonstrate : https://jsfiddle.net/snggus7a/3/This is COOL man, I just forked it , Thanks for sharing Link to comment Share on other sites More sharing options...
frenetikm Posted October 12, 2015 Author Share Posted October 12, 2015 you're welcome, it was made very quickly, I will try to improve it with some animation. WombatTurkey 1 Link to comment Share on other sites More sharing options...
WombatTurkey Posted October 12, 2015 Share Posted October 12, 2015 you're welcome, it was made very quickly, I will try to improve it with some animation. This could actually turn into a plugin as well for cooldown animations and timers in general. Great Work! Edit: For example, circular cooldown animations, square animations, etc. (a lot of mmo's use this method) Link to comment Share on other sites More sharing options...
jmp909 Posted October 12, 2015 Share Posted October 12, 2015 i was just making one too, but showing seconds of the current time, rather than a countdown (sorry wasn't really paying attention to the question!)http://phaser.io/sandbox/JQRnncnq/play frenetikm and megmut 2 Link to comment Share on other sites More sharing options...
frenetikm Posted October 12, 2015 Author Share Posted October 12, 2015 I made an update, with an alpha effect :https://jsfiddle.net/snggus7a/6/ I didn't succeed to tween on endAngle, if someone has a solution for this ? Link to comment Share on other sites More sharing options...
frenetikm Posted October 12, 2015 Author Share Posted October 12, 2015 @jmp909: thanks for the example it's really nicer with the background circle Link to comment Share on other sites More sharing options...
Recommended Posts