How do I use 2 images - original + mask for physics?

1 favourites
  • 8 posts
From the Asset Store
500 monsters and creatures images for card games - Set 1
  • Hey guys,

    Is there any way to use 2 images:

    - Original Image

    - Mask Image


    for the collisions ?

    Imagine a labyrinth image example, with path here and there and a ball physics in it. So instead starting creating walls or add points for the collision i'm looking for faster way.

    Is this possible? Thank you!

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • Any help? Thanks!

  • You have to do something along the lines of.

    1. drawing the mask to a canvas

    2. make a tilemap with 1x1 tiles

    3. loop over the canvas pixels and set the tilemap tiles from that.

    At least for C3 i'd imagine that'd work.

  • I understand R0J0hound , thank you!

    You mean in construct 2 can work with other ways, plugins, etc?

    For example, your "Chipmunk Physics" ?

  • It’s roughly the same solution in C2. Only the canvas plugin there makes it too slow to scan the pixels.

    A tilemap with 1x1 tiles is the simplest way to work with physics, chipmunk or even just constructs collision system.

    In c2 I’ve used js to copy the pixels of a sprites image to a c2 array. It dips into the runtime though and won’t work with minifying unless it was made into a plugin. It would look different for c3 but I don’t use that. Besides the canvas in c3 provides access to pixels anyway.

    An alternate to 1x1 tiles with a tilemap is something called image tracing, or basically taking a raster image and converting it to vector. Then you’d set the collision polygon to that from js.

    Or instead of messing with js at all you could take the image of the maze, open it in something like Inkscape, convert it to vectors (it’s a one click thing there), then save it into a simple to parse format like stl.

    Then in construct add events to load the file and create a bunch of sprites stretched as lines to make up the edges.

  • I understand. Thanks again for your help! :)

  • Besides using a tilemp with 1x1 tiles, here is a different approach.

    It parses a svg file and uses sprites to make lines around the shapes to use as collisons.

    Added the original image too as a png. Had to fiddle with scale and position to make them line up, so that's not 100% ideal.

  • Awesome example!!! Many thanks R0J0hound !!! :)

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)