Skip to content

Instantly share code, notes, and snippets.

@PrimaryFeather
Last active February 29, 2020 09:35
Show Gist options
  • Save PrimaryFeather/2310972 to your computer and use it in GitHub Desktop.
Save PrimaryFeather/2310972 to your computer and use it in GitHub Desktop.
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.
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();
}
}
}
@dimitris-c
Copy link

@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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment