Quad Section

author:
Daniel Sperl
description:
A mesh displaying a slice of a quad (like a pie chart, but rectangular).
compatible:
v2.2
tag:
progress indicator, mask, circle, pie
homepage:
https://gist.github.com/PrimaryFeather/8431bdb3102d27c2326e45f4cc253c3e

Overview

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 Adobe Flash Plugin is needed to display this content.

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);
 
// 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.

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.

Changelog

  • 2017/10/19: First public version

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: 2017/10/19 14:01 by daniel
 
Powered by DokuWiki