This Starling extension class displays a texture, trimmed to its left side, depending on a ratio. This can be used to create a progress bar or a rest-time display.

Gauge.as

package starling.extensions
{
    import starling.display.Image;
    import starling.display.Sprite;
    import starling.textures.Texture;
    import starling.utils.MathUtil;

    public class Gauge extends Sprite
    {
        private var _image:Image;
        private var _ratio:Number;

        public function Gauge(texture:Texture)
        {
            _ratio = 1.0;
            _image = new Image(texture);

            addChild(_image);
        }

        private function update():void
        {
            _image.scaleX = _ratio;
            _image.setTexCoords(1, _ratio, 0);
            _image.setTexCoords(3, _ratio, 1);
        }

        public function get ratio():Number { return _ratio; }
        public function set ratio(value:Number):void
        {
            _ratio = value > 1 ? 1 : (value < 0 ? 0 : value);
            update();
        }
    }
}

Thanks for sharing this, very useful!

Hi,
How should I change the code for horizontal direction?

Solve it :)

mImage.scaleY = mRatio;
mImage.setTexCoords(2, new Point(0.0, mRatio));
mImage.setTexCoords(3, new Point(1, mRatio));

Do you have an example of the progress bar texture?

@camelic —
An example with images would be useful but it's not that difficult to figure it out.

So a sample background would be like this one — http://cl.ly/image/222I1z2K092W
and the inner part which would be — http://cl.ly/image/1x002242273b

[Embed(source="../assets/flash/images/gauge-bg.png")]
public static const GaugeBG:Class;

[Embed(source="../assets/flash/images/gauge-inner.png")]
public static const GaugeInner:Class;

...

var gaugeBackground:Image = Image.fromBitmap(new GaugeBG());
addChild(gaugeBackground);

gauge = new Gauge(Texture.fromBitmap(new GaugeInner()));
gauge.x = gauge.y = 7;
addChild(gauge);

gauge.ratio = 0.5;

Hope this helps.