Quad Section

Daniel Sperl
A mesh displaying a slice of a quad (like a pie chart, but rectangular).
progress indicator, mask, circle, pie


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
// 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

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

Don't look for a “background” property: the rightmost sample in the embedded SWF clip just displays the same texture in a standard Image behind the QuadSection.

Known issues

  • The class ignores texture frames.


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

User Comments

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.

  extensions/quad_section.txt · Last modified: 2021/01/07 16:41 by daniel
Powered by DokuWiki