Starting in Daily Build #2154, we’ve added 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 new graphics.newOutline() API.

(NOTE: This is a premium graphics feature. It is available to Pro and Enterprise users.)

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 coarsenessInTexels 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 } )

To see this in action, please see the Png2Box2D sample located in the application folder of the associated Daily Build:

CoronaSDK → SampleCode → Physics → Png2Box2D

Image Sheet Frames

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

alphabet

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. Enjoy!

  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
    display.setStatusBar(display.HiddenStatusBar)

    –> Add physics
    local physics = require(“physics”)
    physics.start()
    –>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”)

    red_balloon.png
    wood.png
    spikes.png

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=""> <strike> <strong>