A less-known feature in Corona is the ability to trace the outline of non-transparent assets in both an image or frames from an image sheet. These outlines can then be used for drawing a polygon or generating physics bodies (no need to determine the body shapes using a 3rd-party physics tracing application). This feature is accomplished using the graphics.newOutline() API.

Basic images

Let’s explore the usage of graphics.newOutline() with a basic image:

star star_sample

Using this image, you can extract the outline like so:

local imageFile = "star.png"
local imageOutline = graphics.newOutline( 2, imageFile )

The first parameter defines the coarseness in texels which may be adjusted to increase or decrease the “resolution” of the traced outline. Higher values produce lower resolution outlines, while lower values produce larger outlines that may hurt performance. It’s up to you how detailed you want the outlines to be.

Then you can use the outline with the physics engine:

local image = display.newImage( imageFile )
physics.addBody( image, { outline=imageOutline, bounce=0.5 } )

Image sheet frames

This feature is also compatible with image sheets. For example:

local options = {
   width = 65,
   height = 64,
   numFrames = 12,
   sheetContentWidth = 260,  --width of original 1x size of entire sheet
   sheetContentHeight = 192  --height of original 1x size of entire sheet
local letterSheet = graphics.newImageSheet( "alphabet.png", options )

letter_sampleUsing this image sheet, you can extract the outline of a particular frame like so:

local frameIndex = 9

local letterOutline = graphics.newOutline( 2, letterSheet, frameIndex )

local letterImage = display.newImageRect( letterSheet, frameIndex, 65, 64 )

physics.addBody( letterImage, { outline=letterOutline, bounce=0.5 } )

In summary

While truly “customized” multi-element physics bodies may still need to be obtained from 3rd-party tools like PhysicsEditor, the new graphics.newOutline() function provides a convenience method for obtaining the outline of images or image sheet frames for use with the physics engine.

Share this post....Share on Facebook0Share on Google+12Tweet about this on TwitterShare on LinkedIn0
  1. Not available to Starter or Basic? :-( I wish I could justify paying more but I am still just testing and learning how to build games in corona, but I cannot learn to use this new feature without paying for a higher tier? or does it just not build if you don’t pay for higher tier?

    • In the next public release, you’ll be able to freely experiment with this feature in the Corona Simulator (except on device).

  2. This is a really impressive feature. I started experimenting with it yesterday afternoon and before I knew it it was 3:00 AM and I was building pinball levels :)
    The marketing partnerships, social integrations, API refreshes, etc, are all useful and important, but it is really fun to see a new API that focuses on helping a person design game interactions in a new and different way.
    Keep up the good work!

  3. I am new to Corona and I was truing to work on a basic project to learn how to use Corona, but I ran into an unknown trouble I am trying to get my balloon to gal from the top of the screen to the bottom, but it keeps stopping halfway when I display the base at the bottom. Why doesn’t it fall to the bottom?

    Here it he code and images:

    –>Hide status bar

    –> Add physics
    local physics = require(“physics”)
    –>Set gravity to down
    physics.setGravity(0, 9.81)

    –> Background Image
    local background = display.newImage(“wood.png”)
    background:scale(3, 4.3)

    –> Add balloon position
    local balloon = display.newImage(“red_balloon.png”)
    balloon.x = display.contentWidth/2
    balloon:scale(0.25, 0.25)
    physics.addBody(balloon, {bounce = 0.2})

    –> Add spikes
    local spikes = display.newImage(“spikes.png”)
    spikes.y = display.contentHeight – spikes.stageHeight/4
    spikes:scale(2.5, 0.5)
    physics.addBody(spikes, “static”)


  4. Sickerstein says:

    I tried the coding:
    physics.addBody( image_a, { friction=0.5, ounce=0.3,outline=imageOutline} )
    –physics.addBody( image_a, “dynamic”, { friction=0.5, bounce=0.3, shape=pentagonShape } )

    physics.addBody( box2, “static”, borderBodyElement )

    The Image simply drops thru the borderBodyElement. Decommenting the addBody without the outline lets the Image_a bounce nicely.
    Appreciate help.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>