I am working on a count-down animation for a game, and I want it to be similar to a circular loading bar, but backward. To be more precise, I want a circle that is full in the beginning and circular (similar to a piechart) empties.
I tried multiple attempts but can’t figure out a way to make it work, especially with Tween (so I can adjust timings with ease). Does anyone have any suggestions or a similar guide that I can look into?
Thanks
use https://photonstorm.github.io/phaser3-docs/Phaser.GameObjects.Graphics.html#slice__anchor
https://labs.phaser.io/edit.html?src=src/input/game%20object/graphics%20object%20example.js
and tween the endAngle:
[this / scene].tweens.addCounter({
from: 0,
to: 360,
duration: 3000,
onUpdate: function(tween) {
// graphics.slice stuff
graphics.clear();
graphics.slice(500,500,30,Phaser.Math.DegToRad(tween.getValue()),Phaser.Math.DegToRad(360))
graphics.fillPath();
// use tween.getValue() to get the progress
}
});
4 Likes
Thanks. This is what I was searching for.