A Starling Mesh that displays a slice of a quad (just like a pie chart, but rectangular). Useful e.g. for a circular progress indicator, or as a mask for screen transitions.

The QuadSection class can be used almost like the normal 'Quad' class. Use the ratio property to define how much of the quad is shown (e.g., 0.1 displays just a small slice).

By assigning a texture, this provides a flexible way to display a circular progress bar, as shown in the sample above. All without masking and without interrupting batching.

// a grey quad section, 200x200 points
var quadSection:QuadSection = new QuadSection(200, 200, 0x808080);
quadSection.ratio = 0.75; // between 0 and 1
addChild(quadSection);
 
// make the pie grow counter-clockwise (the default is clockwise)
quadSection.clockwise = false;
 
// a textured quad section
var quadSection2:QuadSection = QuadSection.fromTexture(texture);
quadSection2.ratio = 0.25;
quadSection2.color = 0xff8020; // colorize just like a regular quad
addChild(quadSection2);

If you want to use the circular texture from above, grab it from here.

• The class ignores texture frames.

• 2017/10/19: First public version
• 2018/02/28: Added 'clockwise' property

Feel free to edit this part of the page if you want to add information that's lacking in the above description.
Questions are better asked in the forum, though.