Drawing API with Starling

Drawing APIThis week a very cool contribution was added to Starling by Robert Silverton, the Graphics API Extension! So what is it? From github:

This extension adds Jon Pace's 'Fill' and 'Stroke' display objects, with 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.

Once the basics have been reproduced, the API can be augmented with more powerful features. An ear-clipping algorithm is currently used for triangulating the simple polygons generated by the moveTo, lineTo methods. Supports both simple and non-simple (self-intersecting) polygons.

For those of you who always felt that not having a drawing API was limiting, there you go. We are already thinking about some new APIs we could add to Flash Player and AIR to make this extension even more powerful. Graphics query, anyone? ;)

Feel free to contribute and enhance it. Lee Thomason from our team has already sent some optimizations for curveTo. See you there!

Below is an example of the Lava demo powered by Starling's Drawing API extension, source code available here.

Get Adobe Flash player

Comments (18)

  1. zuzzu wrote:

    Looks really nice. Thanks for sharing.

    Saturday, October 6, 2012 at 11:20 am #
  2. Szymon Brych wrote:

    Cool thing. Definitely Graphics query would be a great feature since it effectively would remove need for DOs serialization. Or maybe this is the only reason why DOs aren’t serializable?

    Saturday, October 6, 2012 at 2:57 pm #
  3. ElliotGeno wrote:

    I have a ton of questions!

    First, I thought you had said on Twitter that. This is shader based. Not simply tesselating the shapes.

    Wouldn’t finding a way to draw crazy shapes on two triangles (quad) be more efficient purely as a shader?

    What about curveTo()?

    You also mentioned on twitter possibly queryDisplayObject… What about queryMovieClip or querySimpleButton?

    Saturday, October 6, 2012 at 3:02 pm #
  4. This is an excellent project. It’ll be very useful for shape debugging functionality we have for game objects. Currently we are using Flash graphics API and uploading results as textures, which can be very slow.

    Also we have a few custom shapes for the game, it’s a bit of a pain to do them as custom DisplayObjects, yet hardly justifies writing a library like this.

    Saturday, October 6, 2012 at 3:09 pm #
  5. Tyler wrote:

    I’ll definitely have to check this out. My main project for the last year has been so dependent on the drawing API that it’s forced me to stay away from Starling and other 2D Stage3D libraries.

    Saturday, October 6, 2012 at 7:28 pm #
  6. reMuniz wrote:

    awesome :D
    great extension!

    Sunday, October 7, 2012 at 9:10 am #
  7. Pretty cool. It’s a pity that it’s tied into Starling though.

    Sunday, October 7, 2012 at 3:20 pm #
  8. Szymon Brych wrote:

    Hope you don’t mind my question but would you like to use it with another framework or rather as an indie plugin? Just curious. I have always wondered why Adobe picked Starling for their major 2d gpu framework since, for instance, nd2d was, at least in my opinion, more advanced at that time.

    Monday, October 8, 2012 at 8:36 am #
  9. ben w wrote:

    Nice one,

    I had a crack at this. Implemented lineTo, curveTo, drawRect, drawCircle, and drawElipse. Also added a drawLine that takes in a start point and an end point.

    These were all lines without fills though, the fills scared me – triangulation didn’t look fun so props to Jon for that one.

    Also had a crack at shader based curves with some success but without access to ddx/ddy in the shaders anti aliasing is a no-go :(

    If anyone wants me to upload some demos or some code for any of the above I would be happy to so just shout.

    Monday, October 8, 2012 at 10:58 am #
  10. Hope this brings AlivePDF back from the dead :)

    Monday, October 8, 2012 at 11:00 am #
  11. daklab wrote:

    Flare3D looks like they’re rocking 3D GPU Graphics drawing as well – http://www.youtube.com/watch?v=iTLENGOFcCc&feature=player_embedded

    Monday, October 8, 2012 at 4:25 pm #
  12. Mark wrote:

    Wow that’s neat! Is there a demo that shows how much lines you can have using this approach? Is this faster than the ‘native’ graphics API?

    Tuesday, October 9, 2012 at 11:38 am #
  13. JonP wrote:

    @Mark – There’s a fairly complex example at https://github.com/unwrong/Starling-Extension-Graphics/blob/master/examples/04_Fill_Stroke_Example/src/FillStrokeExample.as

    It has a fair number of vertices, and is using a vertex shader to ripple the water. The triangulation is only done once at startup, after that it’s all down to the GPU. So as long as you’re not changing the vertices each frame, it should be many times faster to render than the ‘native’ API.

    Tuesday, October 9, 2012 at 11:48 am #
  14. JohnP wrote:

    Hello Thibault,

    I m a Java developer looking into Starling.
    I came accross this project http://emitrom.com/flash4j/tutorials/hello-starling which seems to provide a Java API for Flash/Starling.

    What do you think of it ?



    Wednesday, October 10, 2012 at 10:47 am #
  15. Awesome ! The Player (or compiler) should internaly turned the DisplayList engine in Stage3D seamlessly .. :) Maybe for AS4.. :)

    Wednesday, October 10, 2012 at 1:23 pm #
  16. ben w wrote:

    The display list should never be run through stage3d/the GPU, they are very separate things and should stay that way.
    A GPU graphics api is great but should not replace the current one.

    What should happen is that the current API gets a fat performance overhaul! The display list is a powerful concept and one extremely difficult (impossible?)to emulate on the GPU, but I do think it should be faster… maybe with ASNext we can expect a performance boost of the graphics API too?? Thibault is that likely or will the speed up only really be in the generic code execution speed. Would be epic if we could smash out vector graphics with so much speed the audience will have no option but crap them selves on the spot (CPUs are more than fast enough)

    Wednesday, October 10, 2012 at 3:34 pm #
  17. Brent Rosenquist wrote:

    Wow… can’t wait to get home and try it out. I am continuously excited about the progress being made with Starling.

    Thursday, October 11, 2012 at 11:27 pm #
  18. It’s really very cool! Now I’m hoping that Starling can support fill bitmapdata directly to render, I’m now facing a performance neck-bottle.

    Wednesday, January 23, 2013 at 5:27 am #

Trackbacks/Pingbacks (3)

  1. Drawing API with Starling – ByteArray.org « eaflash on Monday, October 8, 2012 at 10:05 am

    [...] on http://www.bytearray.org Share this:TwitterFacebookLike this:LikeBe the first to like [...]

  2. [...] par de extensiones muy útiles que me gustaría destacar son la DrawingAPI , que reproduce la API gráfica de Flash (lineTo, moveTo, beginFill, etc) pero por supuesto [...]

  3. [...] will render vector graphics directly to Stage3D vertices, textures, and shaders.  Similar to this [...]