Circular loading bar

Phaser 3
1

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

2

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
3

Thanks. This is what I was searching for.