How I create a circle element?

[Bills]

I'm trying to use Crafty.circle but it not draw on game screen.

[witali mik]

Crafty.circle is just used to create an array of points for defining collision points for example, the circle itselfs you have to show as image. Crafty cannot draw freeforms

[Matt Petrovic]

You could probably do it with SVG if you're willing to get your hands dirty.

I mean, reaaally dirty. we have no support for svg right now.

[Benton Roberts]

Hello, Bills.

On Wednesday, June 13, 2012 9:26:59 AM UTC-4, Bills wrote:

I'm trying to use Crafty.circle but it not draw on game screen.

I found two ways to draw a circle in Crafty:

1. Perform custom drawing commands onto a Canvas-based Component. This is nicely illustrated in the Starmelt Crafty Tutorial page on Custom Canvas Drawing.
2. Use a DOM component, and use an external Javascript library to draw the shapes for you.

I'm currently using the second method, because I didn't want to write all the complex Canvas draw/stroke/fill commands. It's nicer to work with the high-level shape functions. I did a quick Google for Javascript drawing libraries, and found a bunch. I grabbed one that looked like it was in active development -- JsDraw2DX -- and built a Component that looks more or less like this:

    // Create circular element

    Crafty.c("CircularShape", {

      init: function() {

        this.requires("2D, DOM");

        var strokew = 1;

        var pen     = new jxPen(new jxColor("white"), strokew);

        var brush   = new jxBrush(new jxColor("red"));

        var center  = new jxPoint(this._w / 2, this._h / 2);

        var radius  = (this._w / 2) - strokew;

        var circle  = new jxCircle(center, radius, pen, brush);

        circle.draw(new jxGraphics(this._element));

        return this;

      },

    });

I also observe that the JSFiddle for this group lists Raphael as one of the built-in includes. This suggets that others are successfully using Raphael in a similar manner.

- benton

[Benton Roberts]

Has anyone used Raphael with Crafty? I'd love a pointer to an example of a Crafty Component that uses Raphael to draw itself.

Thanks,

- benton