Smooth lines using Primitives addon
simast

I need to draw some rounded rectangles and the primitives addon can do that using al_draw_rounded_rectangle. However, the rounded lines are all jagged and not anti-aliased. I have found out that one solution is to enable full-screen anti-aliasing aka multisampling, but that is just not an option for me (other parts of the application need jagged things like for font glyphs and I never draw primitives directly to backbuffer).

What else can be done? Note, that I can actually do primitive line drawing and anti-aliasing using software/CPU if required, thus using something like Cairo lib is an option, but that would give me quite a large lib just for anti-aliased line support..

Mark Oates

One option is to offset the coordinates of your rounded rectangle by (+0.5, +0.5), assuming that the coordinates are presumed to be whole numbers.

james_lohr

If its using OpenGL to render the rounded rectangle, it should be possible to enable anti-aliasing. Otherwise if its old-style allegro, and just rendering to a bitmap, then you could do your own supersampling on the rounded rectangle only (i.e. render to a larger bitmap, then downscale this in software using a high quality scaling algorithm - though you won't want to be doing this every frame).

Elias

One option is to offset the coordinates of your rounded rectangle by (+0.5, +0.5), assuming that the coordinates are presumed to be whole numbers.

If he disables multi-sampling that wouldn't help.

[edit:]

But what should work is enable multisampling, then draw the things you want to have sharp edges on integer positions only.

Mark Oates
Elias said:

If he disables multi-sampling that wouldn't help.

Assuming multi-sampling is off, here's what I'm looking at:

al_draw_rounded_rectangle(100, 100, 220, 180, 7, 7, al_color_name("black"), 1.0);
{"name":"605440","src":"\/\/djungxnpq2nug.cloudfront.net\/image\/cache\/1\/a\/1ad0bc37de2f717543cb37771e0eb1ec.png","w":266,"h":207,"tn":"\/\/djungxnpq2nug.cloudfront.net\/image\/cache\/1\/a\/1ad0bc37de2f717543cb37771e0eb1ec"}605440

al_draw_rounded_rectangle(100+0.5, 100+0.5, 220+0.5, 180+0.5, 7, 7, al_color_name("black"), 1.0);

{"name":"605441","src":"\/\/djungxnpq2nug.cloudfront.net\/image\/cache\/b\/3\/b36ae9349539be0a8762b5b7cee73dc2.png","w":266,"h":199,"tn":"\/\/djungxnpq2nug.cloudfront.net\/image\/cache\/b\/3\/b36ae9349539be0a8762b5b7cee73dc2"}605441

I interpreted "the rounded lines are all jagged" to mean the jagged roundness of the first one.

weapon_S
simast said:

like for font glyphs

I think you can explicitly turn off loading ttf fonts with anti-aliasing. (Bitmap fonts shouldn't be a problem.) Draw on 'integer positions[1]' only, and it should be 'hard edge'.

References

  1. Whole numbers with an offset of 0.5 to draw in the center of the pixels.
Johan Halmén

I think the latter one of Mark's rectangles looks very good. If you want something smoother, try to draw such rectangle with any graphic editor and show us how you like it to be.

I've drawn smooth circles and arcs like this:
605447
The routine goes through all pixels in the bounding square of a circle (or an arc) and measures the distance to the center. The blackness or opacity of the contour is determined by how much it's off the radius.

simast

Thanks for the feedback guys,

Mark Oates suggestion of 0.5 offsets does help with making the rectangle a bit more rounded (as illustrated). As for line anti-aliasing, I am kind of postponing the idea until I really need this done and, instead of Cairo, I was thinking maybe it's worth going for platform specific code - like Win32 GDI+ line drawing.

SiegeLord

I do want to reiterate this, if this works for you:

If its using OpenGL to render the rounded rectangle, it should be possible to enable anti-aliasing.

You'd do:

glEnable(GL_LINE_SMOOTH);
glEnable(GL_POLYGON_SMOOTH);

//Draw primitives

glDisable(GL_LINE_SMOOTH);
glDisable(GL_POLYGON_SMOOTH);

Thread #609347. Printed from Allegro.cc