Anti Alias / Smoothing Shapes

Audio and Graphics
#1

Hi all, I have searched around the forum but can only find posts that are years old…

I’m new to corona and can’t seem to make shapes look nice - they always render with jaggy edges. To me this seems crazy. Shapes solve so many problems with not having to resize images… I’m trying to produce a simple circular button with a stroke outline that pulses on touch. Everything works (animation etc…) its just that the button still has ‘jaggies’.

I understand antialias was turned off around 2012 - but surely now two years later we can render smooth shapes on screen or what’s the point of having them?

Target App platform: ios ipad retina.

Many thanks,

Ian.

#2

I recall antialias for shapes caused a lot of problems, including crashes, so they turned it off.  One technique you can use to work around this is to use small images to “stroke” your shapes.  So if you have a red circle shape with jaggies, you could stroke the outline with, say, a small image of a red dot or line the same color as the circle.  The image can of course be drawn with antialiased edges, resulting in a smooth circle covering up the jagged edge of the underlying shape.  Hope that makes sense.

http://docs.coronalabs.com/api/type/ShapeObject/stroke.html

#3

It’s still turned off.

Rob

#4

@Stephen - Thanks for the work around - I get what you’re saying but to me it seems that if you have to jump in to photoshop to create part of an asset then you may as well create the whole thing. I guess it depends on the use case.

@Rob - Is there a document that you can point me too regarding the plan for vector graphics - I did see somewhere that Graphics 2.0 would be bringing ‘illustrator’ level vectors graphics to the platform. High quality shape objects make sense on so many levels…

Thanks for the swift replies, cheers, Ian.  

#5

The workaround isn’t too bad.  You just need to create one image that is literally a small circle or line that you then reuse to stroke any and all shapes.  In fact, if you make it a white image you could also tint it to the same color you are using to define the vector shape color.  You’d just need to create a simple generic function to stroke a shape with the image tinted to the color of the shape.

But still, +1 on bringing more Illustrator level vector graphics to Corona SDK!

#6

@contact007

I do exactly the same thing as @Stephen is saying. The good thing about that approach (with a small white line) is that you can use it anywhere to stroke any vector object in any color (tinting). This means that you can reuse it in all your projects and don’t need to use Photoshop at all to create custom objects. I have a set of lines of varying length (2, 4, 8 and 16 pixels long 1 px wide) and choose the one that most closely matches the stroke width I want to use. The trick is to leave a transparent pixel at each edge of the line. This means that in the set above the actual image dimensions are 4, 6, 10, 18 pixels long by 1px wide.

The only issue is if your object and stroke use alpha transparency. It this case half of the stroke will overlap the object at the edges and create a somewhat more opaque line which isn’t visually pleasing. A solution in that situation would be to put the object into a snapshot which should render the stroke and object as one.

#7

@ingemar, 

would mind sharing some code about it? I did’t get quite well what you and Stephen are doing. Are you using a image (your white line) to fill the stroke? 

#8

You’ll need to experiment which line-widths/stroke-widths work best for you.

Here’s a screenshot of Corona vector objects with image strokes. If you follow what I outlined in my post above, the results are very good with only a small set of static 1px width images.

The code is something like this:

local rect = display.newRoundedRect(0, 0, 100, 20, 10) rect:setFillColor(1,0,0) -- red rect rect.stroke = {type="image", filename="img/brush4.png"} -- line image rect.strokeWidth = 6 -- stroke width rect:setStrokeColor(1,0,0) -- tint stroke red
#9

Thanks ingemar!

#10

I recall antialias for shapes caused a lot of problems, including crashes, so they turned it off.  One technique you can use to work around this is to use small images to “stroke” your shapes.  So if you have a red circle shape with jaggies, you could stroke the outline with, say, a small image of a red dot or line the same color as the circle.  The image can of course be drawn with antialiased edges, resulting in a smooth circle covering up the jagged edge of the underlying shape.  Hope that makes sense.

http://docs.coronalabs.com/api/type/ShapeObject/stroke.html

#11

It’s still turned off.

Rob

#12

@Stephen - Thanks for the work around - I get what you’re saying but to me it seems that if you have to jump in to photoshop to create part of an asset then you may as well create the whole thing. I guess it depends on the use case.

@Rob - Is there a document that you can point me too regarding the plan for vector graphics - I did see somewhere that Graphics 2.0 would be bringing ‘illustrator’ level vectors graphics to the platform. High quality shape objects make sense on so many levels…

Thanks for the swift replies, cheers, Ian.  

#13

The workaround isn’t too bad.  You just need to create one image that is literally a small circle or line that you then reuse to stroke any and all shapes.  In fact, if you make it a white image you could also tint it to the same color you are using to define the vector shape color.  You’d just need to create a simple generic function to stroke a shape with the image tinted to the color of the shape.

But still, +1 on bringing more Illustrator level vector graphics to Corona SDK!

#14

@contact007

I do exactly the same thing as @Stephen is saying. The good thing about that approach (with a small white line) is that you can use it anywhere to stroke any vector object in any color (tinting). This means that you can reuse it in all your projects and don’t need to use Photoshop at all to create custom objects. I have a set of lines of varying length (2, 4, 8 and 16 pixels long 1 px wide) and choose the one that most closely matches the stroke width I want to use. The trick is to leave a transparent pixel at each edge of the line. This means that in the set above the actual image dimensions are 4, 6, 10, 18 pixels long by 1px wide.

The only issue is if your object and stroke use alpha transparency. It this case half of the stroke will overlap the object at the edges and create a somewhat more opaque line which isn’t visually pleasing. A solution in that situation would be to put the object into a snapshot which should render the stroke and object as one.

#15

@ingemar, 

would mind sharing some code about it? I did’t get quite well what you and Stephen are doing. Are you using a image (your white line) to fill the stroke? 

#16

You’ll need to experiment which line-widths/stroke-widths work best for you.

Here’s a screenshot of Corona vector objects with image strokes. If you follow what I outlined in my post above, the results are very good with only a small set of static 1px width images.

The code is something like this:

local rect = display.newRoundedRect(0, 0, 100, 20, 10) rect:setFillColor(1,0,0) -- red rect rect.stroke = {type="image", filename="img/brush4.png"} -- line image rect.strokeWidth = 6 -- stroke width rect:setStrokeColor(1,0,0) -- tint stroke red
#17

Thanks ingemar!

#18

When will the anti-aliasing be fine? :frowning:

#19

Any news regarding Anti-Aliasing?

#20

When will the anti-aliasing be fine? :frowning: