Pie mask in AS3
Sometimes I have the need for a rotational progress bar that acts like a pie growing bigger (or smaller if that strikes your fancy). As usual, I made my own =)
The function drawPieMask takes first the graphics object of the displayObject instance and draws a part of pie on it, percentage set’s how big the part is.
If you want to offset the rotation of the pie (it starts to the right by default) you can set the rotation parameter. Note that rotation is in radians, not degrees, but you can multiply your degrees by (Math.PI/180) to convert to radians.
Lastly, the sides property determines how many sides the circle drawn in the mask has. You can see an example of different pie masks after the code.
To make the code as customizable as possible, it does not make a call to beginFill in case you want to set your own fill (or gradientfill even?).
If you just want to use it as a basic mask, just call beginFill(0) before and endFill() after the call to drawPieMask.
function drawPieMask(graphics:Graphics, percentage:Number, radius:Number = 50, x:Number = 0, y:Number = 0, rotation:Number = 0, sides:int = 6):void {
// graphics should have its beginFill function already called by now
graphics.moveTo(x, y);
if (sides < 3) sides = 3; // 3 sides minimum
// Increase the length of the radius to cover the whole target
radius /= Math.cos(1/sides * Math.PI);
// Shortcut function
var lineToRadians:Function = function(rads:Number):void {
graphics.lineTo(Math.cos(rads) * radius + x, Math.sin(rads) * radius + y);
};
// Find how many sides we have to draw
var sidesToDraw:int = Math.floor(percentage * sides);
for (var i:int = 0; i <= sidesToDraw; i++)
lineToRadians((i / sides) * (Math.PI * 2) + rotation);
// Draw the last fractioned side
if (percentage * sides != sidesToDraw)
lineToRadians(percentage * (Math.PI * 2) + rotation);
}
Example of different sides values. The last circle has a pie with 3 sides as a mask.
November 13th, 2009 at 19:07
Do you actually know all that Math right from the top of your head? I have no idea how that works, but I thinks it is amazing.
November 14th, 2009 at 01:15
Thanks Nizzle,
in this case I knew most of the math beforehand (I like trigonometry) except for the line where I increase the length of the radius, but for that I had to check my trigonometry cheat sheet =)
I also don’t just code it directly, I scribble it down on some post-it notes first to get the formulas out of my head.
I hope the function came to good use for you.
November 20th, 2009 at 09:21
Thanks. The .fla isn’t in the zip file, only the swf.
November 20th, 2009 at 10:22
Oops, thanks for spotting that, I zipped the wrong file.
I uploaded the right one, you might have to clear your cache to get the new one.
May 7th, 2010 at 03:52
Excellent, just what i needed for my games indicator bars, kudos to you my friend :)
November 30th, 2010 at 14:55
Great stuff! I have been trying with this one for hours, then found your solution which is much more elegant than I thought! Thanks a bunch!
June 22nd, 2011 at 11:33
Great! Thank you
September 2nd, 2011 at 18:23
Thank you! This saved me a lot of time.
Later today I just took this brilliant algorithm and coded a class out of it:
https://github.com/JulianG/as3-PieMask
November 3rd, 2011 at 13:37
Thank god there are clever people like you to help me out
November 21st, 2011 at 19:03
Is there any way I can put a timer on the drawPieMask Function so it creates the pie according to some duration specified on the function?
December 7th, 2011 at 08:02
@pheck: You can create an instance of Timer and call drawPieMask in your event handler.
April 10th, 2013 at 05:30
thanks a lot Flassari and Julian! :)
November 28th, 2013 at 08:24
Did anyone try to use this with the Starling framework?
May 22nd, 2014 at 09:10
hi,
excellent work, I found it very useful. How do I reverse the mask animation to go from 100 to 0, ie. from fully revealed circle to circle gone completely?
May 22nd, 2014 at 09:48
ok, I’ve got it sorted :)
June 23rd, 2014 at 10:04
Hey Arthur, how did you do it ? I’m stuck on this..
Thanks,
Thib
January 4th, 2015 at 22:47
Excellent post! I’ll try to implement this in Starling, i’m curious about how this will work from a performance point of view.
January 3rd, 2016 at 15:29
I have recreate this script using Polygon and Canvas class to starling. More here:
http://forum.starling-framework.org/topic/radial-progress-bar
January 4th, 2016 at 09:10
@Zwick looks great!