Tutorial: Create physics bodies from texture assets

new-outline
Share on Facebook0Share on Google+12Tweet about this on TwitterShare on LinkedIn0

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:

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:

Image sheet frames

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

alphabet

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

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 on Facebook0Share on Google+12Tweet about this on TwitterShare on LinkedIn0
albert90

This entry has 20 replies

  1. Pablo Isidro says:

    Oh my god, this is a really good feature!! Thank you so much!!

  2. Ojnab says:

    Wow this is cool.

  3. Lerg says:

    Already using it, thanks!

  4. I want to change the scale of the physic body to Corona

    • Albert Yale says:

      Box2D, our underlying physics engine, doesn’t support that.

  5. Pablo Isidro says:

    I found a little issue here. If I use a completely black figure, for example, a black star (0,0,0). It doesn’t work. Just use (0.01,0.01,0.01) 🙂

    • Albert Yale says:

      The alpha channel drives the cutout process. Please verify that your black star has a non-zero alpha channel, then let me know if you still experience the same problem.

      • Matt says:

        I’m having this trouble too. I cannot get a non-rectangular body from an image with transparency. From what I’ve read (and I’m not image/PS master) PNGs don’t have alpha channels, they have true transparency.

        http://forums.adobe.com/message/4057765

        • Matt says:

          Well, turns out that saving an image for web and checking ‘transparency’ does it 🙂

  6. Doug Davies says:

    I think I just wet myself…. awesome!

  7. Tim says:

    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?

    • Albert Yale says:

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

  8. Satwant says:

    This really is fantastic!

  9. JB says:

    Well done!
    this saves a lot of time

  10. RichieLoco says:

    yep, i’ll be making use of this! Great stuff

  11. Joseph Baird says:

    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!

  12. Jack D. says:

    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

  13. Sickerstein says:

    Hi,
    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.
    Thanks.
    Dieter

  14. marlon says:

    how to i scale it

    • Rob Miracle says:

      You cannot scale physics bodies. If you scale their display object, the physics stays the size of the original. You have to remove the physics body and re-add it.

Leave a reply

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