Antialiased Circle

[matthen]

Hi everyone,

 

I'm using the Graphics stuff from the dev version of Pixi.js. I can draw a circle by doing this:

var graphics = new PIXI.Graphics();graphics.lineStyle ( 2 , 0x000000,  1);graphics.beginFill(this.colour);graphics.drawCircle(this.position[0], this.position[1], this.radius);

 

But I was wondering if it is possible to draw it with antialiasing? I note it looks like the webgl contexts are created with {antialias:true} by Pixi. Do I need to make a PNG of a circle? That's less ideal for changing the colours.

 

Thanks,

Matt

 

[donbrae]

Hi. Total newbie here, but I think you can pass 'true' as the fifth argument when you instantiate a new renderer object, e.g.:

myRenderer = PIXI.autoDetectRenderer(320, 480, null, false, true); // arguments: width, height, view, transparent, antialias

[Mat Groves]

Wh

 

 

Hi. Total newbie here, but I think you can pass 'true' as the fifth argument when you instantiate a new renderer object, e.g.:

myRenderer = PIXI.autoDetectRenderer(320, 480, null, false, true); // arguments: width, height, view, transparent, antialias

 

thats 100% correct! Its worth being aware that unfortunately antialiasing seems to only be supported by chrome at the moment. :/ 

[Larzan]

A workaround that i use is to use the circles line property to smooth it a bit.

e.g.; red circle on dark background, use a darker red for the border, 1px width and alpha 0.5, this makes the border a bit smoother.

 

If you need a real border for the circle, draw two circles on top of each other using the mentioned method.

[kid_karma]

Wh

 

 

thats 100% correct! Its worth being aware that unfortunately antialiasing seems to only be supported by chrome at the moment. :/ 

 

I noticed the doc shows antialias and transparent in reverse order (antialias as the 4th arg, and transparent as the 5th arg): http://www.goodboydigital.com/pixijs/docs/files/src_pixi_utils_Detector.js.html

[xerver]

That may be because the docs haven't been updated on the site, but the latest release shows that antialias is the 5th argument:

 

https://github.com/GoodBoyDigital/pixi.js/blob/master/src/pixi/utils/Detector.js#L18

[poshaughnessy]

Just to add, in case it saves anyone a couple of minutes, that for Pixi.js v2.x, the arguments for autoDetectRenderer are now: width, height, options.

 

So to enable antialias you do:

PIXI.autoDetectRenderer(width, height, {antialias: true});

[patrickfabrizius]

Since this is still one of the most relevant hits on Google, I figured I'd share the trick I ended up using, in case someone else end up here (just as I did, looking for a solution).

var radius = 20; 

// Create "intermediary" container for graphics
var gContainer = new PIXI.Container();
stage.addChild(gContainer);

var myCircle = new PIXI.Graphics();
gContainer.addChild(myCircle);

// Draw graphic x2 size
myCircle.beginFill(0xFF0000);
myCircle.drawCircle(0, 0, radius * 2);

// Use cacheAsBitmap to render bitmap 
gContainer.cacheAsBitmap = true;

// Scale down (the bitmap) to get smooth edges
gContainer.scale.set(0.5);

In case you need to modify the graphic, just set cacheAsBitmap = false, redraw the graphics, and then set cacheAsBitmap = true again. Works with PIXI 4.5.1.