Antialias a Polygon with Corona SDK
2 min read

Antialias a Polygon with Corona SDK

Antialias a Polygon with Corona SDK

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):

Polygons

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:

local paint = {
  type = "image",
  filename = "com/laurivan/assets/circle.3.png"
}

local color = {0.3, 0.9, 0.12, 0.7}
local player = display.newPolygon(0, 0, {-50,-30, -50,30, 50,0})

player.stroke = paint
player:setStrokeColor(unpack(color))
player.strokeWidth = 4

player:setFillColor(unpack(color))

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:

Antialiased

IMHO, it looks much better than:

Aliased

(or, at 100%):

Antialiased Aliased
Antialiased Aliased}

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

HTH,