Starling Graphics is a Starling extension that adds Jon Pace’s ‘Fill’ and ‘Stroke’ display objects, reproducing the flash.display.Graphics
class. It has support for adding arbitrary vertices that are then triangulated for rendering on the GPU.
The aim is to reproduce Flash’s graphics API as closely as possible via simplified lineTo()
, moveTo()
etc calls within Shape.graphics
and Sprite.graphics
.
Sample
package { import flash.display.Bitmap; import flash.display.GradientType; import flash.events.MouseEvent; import flash.geom.Matrix; import flash.geom.Point; import starling.display.Shape; import starling.display.Sprite; import starling.display.graphics.Fill; import starling.display.graphics.Stroke; import starling.display.materials.StandardMaterial; import starling.display.shaders.fragment.TextureVertexColorFragmentShader; import starling.display.shaders.vertex.StandardVertexShader; import starling.events.Event; import starling.textures.Texture; public class GraphicsAPIExample extends Sprite { [Embed( source = "/assets/Rock2.png" )] private var RockBMP :Class; [Embed( source = "/assets/Checker.png" )] private var CheckerBMP :Class; [Embed( source = "/assets/marble_80x80.png" )] private var MarbleBMP :Class; [Embed( source = "/assets/Grass.png" )] private var GrassBMP :Class; public function GraphicsAPIExample() { addEventListener(Event.ADDED_TO_STAGE, onAdded); } private function onAdded ( e:Event ):void { var top:int = 0; var left:int = 0; var right:int = 100; var bottom:int = 100; var fillColor:uint = 0x08acff; var fillAlpha:Number = 1; var strokeColor:int = 0xc07732; var strokeAlpha:Number = 1; var strokeThickness:int = 3; // Rect drawn with drawRect() var shape:Shape = new Shape(); addChild(shape); shape.x = 100; shape.y = 100; shape.graphics.beginFill(fillColor, fillAlpha); shape.graphics.lineStyle(strokeThickness, strokeColor, strokeAlpha); shape.graphics.drawRect(top, left, right, bottom); shape.graphics.endFill(); // Rect drawn with lineTo() shape = new Shape(); addChild(shape); shape.x = 300; shape.y = 100; shape.graphics.beginFill(fillColor, 0.2); shape.graphics.lineStyle(5, 0xFF0000, strokeAlpha); shape.graphics.moveTo(left, top); shape.graphics.lineTo(right, top); shape.graphics.lineTo(right, bottom); shape.graphics.lineTo(left, bottom); shape.graphics.lineTo(left, top); shape.graphics.endFill(); // Filled Circle shape = new Shape(); addChild(shape); shape.x = 150; shape.y = 300; shape.graphics.beginFill(fillColor, 0.2); shape.graphics.lineStyle(5, 0x00FF00, strokeAlpha); shape.graphics.drawCircle(0, 0, 50); shape.graphics.endFill(); // Line Ellipse shape = new Shape(); addChild(shape); shape.x = 350; shape.y = 300; shape.graphics.lineStyle(3, 0x0000FF, strokeAlpha); shape.graphics.drawEllipse(0, 0, 75, 50); // Triangle shape = new Shape(); addChild(shape); shape.x = 500; shape.y = 100; shape.graphics.beginFill(fillColor, 0.2); shape.graphics.lineStyle(2, 0xFF0000, 0.5); shape.graphics.moveTo(left, top); shape.graphics.lineTo(right, bottom); shape.graphics.lineTo(left, bottom); shape.graphics.lineTo(left, top); shape.graphics.endFill(); // Triangle with CheckerBMP shape = new Shape(); addChild(shape); var m:Matrix = new Matrix(); m.translate(0, 0); shape.x = 100; shape.y = 400; shape.graphics.beginBitmapFill(new CheckerBMP(), m); shape.graphics.lineStyle(2, 0xFF0000, 0.5); shape.graphics.moveTo(left, top); shape.graphics.lineTo(right, bottom); shape.graphics.lineTo(left, bottom); shape.graphics.lineTo(left, top); shape.graphics.endFill(); // Marble shape = new Shape(); addChild(shape); shape.x = 350; shape.y = 450; m = new Matrix(); m.translate(-25, -25); shape.graphics.beginBitmapFill(new MarbleBMP(), m, false); shape.graphics.lineStyle(2, 0xFF0000, strokeAlpha); shape.graphics.drawCircle(0, 0, 25); shape.graphics.endFill(); // Rect drawn with textured fill and stroke shape = new Shape(); addChild(shape); m = new Matrix(); m.translate(0, 0); shape.x = 500; shape.y = 400; var rockTexture:Texture = Texture.fromBitmap( new RockBMP(), false ); var grassTexture:Texture = Texture.fromBitmap( new GrassBMP(), false ); shape.graphics.beginTextureFill(rockTexture, m); shape.graphics.lineTexture(20, grassTexture); shape.graphics.drawRect(top, left, right, bottom); shape.graphics.endFill(); } } }
see it in action here
http://www.yopsolo.fr/wp/2012/09/28/starling-graphic-api-extension/
Great demonstration, Christophe! Thanks for sharing the link.