Antialias a Polygon with Corona SDK

Posted by in Software, Tutorial

The other day I figured I needed to draw a polygon in Corona SDK. With display.newPolygon(...), the job is extremely easy and a result like (apologies for the JPEG artefacts):

It is obvious that in non retina cases, one can see the aliasing of the polygon’s edges. Hence I’ve thought and searched of various ways to provide the polygons with antialiasing. The sum of solutions I found is:

  1. Find a flag to enable antialiasing for a polygon
  2. Use effects to perform e.g. a blur or a glow and adapt it
  3. stroke with a bitmap

First two ideas didn’t result in something decent:

  1. I’ve looked on various forums and I found that shapes used to be able to antialias edges in previous versions. However, issues on different platforms resulted in disabling the feature by the devs. The current version (3.0 at the moment of writing, still doesn’t have it).
  2. I was e.g. able to tint the polygon with shaders, but not to extend the effect beyond the limit.

The last option was to build a bitmap and perform the stroke with it. My solution is as follows:

The code performs the following operations:

  1. Creates a paint object with a 3-pixel wide circle
  2. Creates a green-ish color array
  3. Creates a triangular polygon (the player)
  4. Sets the player’s stroke details (the painter, its tinting color and width)
  5. Sets the player’s fill color (same as the paint’s)

The result is:

IMHO, it looks much better than:

(or, at 100%):


antialiased
vs
aliased

You an download the above pics and the small circle image here.

HTH,


A little experiment: If you find this post and ad below useful, please check the ad out :-)