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..
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 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).
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.
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"}
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"}
I interpreted "the rounded lines are all jagged" to mean the jagged roundness of the first one.
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:
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.
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.
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);