AS3 – Drawing Circles With IGraphicsData

Schell — Fri, 19 Jun 2009 16:20:06 +0000

Lately I’ve been working on a game with some of my free time. It’s a slow process made a little bit faster through the use of Box2D, which is a great 2D physics lib. In my game the user controls a robot that wheels around and smashes other robots. I decided that I would write some functions for drawing geometric primitives, and that I would draw everything into one sprite, or two, depending on how many layers I’d need. In an attempt to squeeze out some more frames per second I switched these functions over to use flash 10+ IGraphicsData API. It’s interesting, to say the least. When using the new API we loose the ability to easily draw rectangles and circles. We can still use familiar functions like moveTo, lineTo and curveTo – so I’ve written a function that draws a circle using these. It uses some fun almost calculus [parametrization of a curve in so many points] minus any derivatives or integrals. Is that still calculus? Meh. Here’s what happens:

We create a new GraphicsStroke [the line], a new GraphicsSolidFill [the fill], a new GraphicsPath [the path] and an IGraphicsData Vector to store them all in.

var _stroke :GraphicsStroke = new GraphicsStroke(1);
_stroke.fill = new GraphicsSolidFill(0xFF00FF, 1);
var _fill :GraphicsSolidFill = new GraphicsSolidFill(0xF0F0F0, 1);
var _path :GraphicsPath = new GraphicsPath();
var _graph :Vector.<IGraphicsData> = new Vector.<IGraphicsData>()

Now what we’ll need to do is populate the path with some commands and some points. To do this, we can use GraphicsPath’s familiar functions moveTo, lineTo and curveTo. These functions will fill path.command and path.data with commands and data, respectively. The parameters to each command are stored in the data array, where as a number representing each command are stored in the command array. You can read more about it here. So here is a function that will fill your path with points and commands to form a circle.

private function r_addCircle(_x:Number, _y:Number, r:Number, path:GraphicsPath, numPoints:int = 8):void
{
var twoPI:Number = Math.PI * 2;
var curve:Number = 1 + 1/(numPoints*1.75);
path.moveTo((_x + r), _y);
for (var i:int = 1; i <= numPoints; i++)
{
var th :Number = twoPI * i/numPoints;
var thm :Number = twoPI * (i-0.5)/numPoints;
var px:Number = (_x + r * Math.cos(th));
var py:Number = (_y + r * Math.sin(th));
var hx:Number = (_x + r * curve * Math.cos(thm));
var hy:Number = (_y + r * curve * Math.sin(thm));

path.curveTo(hx, hy, px, py);
}
}

In this function _x and _y represent the center of the circle, r is the radius and path is your GraphicsPath. numPoints refers to the number of points you’d like to use for approximating your circle. The more points, the more “perfect” the circle will look, although more points will tax your frameRate. We can get a pretty nice looking circle with 8 points. 4 looks a little boxy, but around 8 is nice. Experiment. Here’s the next step – we’ll add the points to our path and then add the stroke, fill and path to our Vector and then have a sprite draw our graphics data:

r_addCircle(50, 50, 50, _path, 2);
r_addCircle(150, 50, 50, _path, 4);
r_addCircle(250, 50, 50, _path, 6);
r_addCircle(350, 50, 50, _path, 8);

_graph.push(_stroke, _fill, _path);

var sprite:Sprite = new Sprite();
addChild(sprite);

sprite.graphics.drawGraphicsData(_graph);

This should draw 4 circle approximations of different resolution. This is what it looks like:

approximated circles

You can see that as n [numPoints] increases, the closer to an actual circle our object becomes. I hope this entry helps some of you out there save a little time.

The efnx code blog. » fp10

AS3 – Drawing Circles With IGraphicsData