How do I make an eraser effect but have physics work, too?

Not favoritedFavorited Favorited 0 favourites
  • 6 posts
From the Asset Store
_______ Huge collection of metal fixtures ________
  • Is it possible to erase an image (tiled background) using drawing canvas and also have physics working well for a ball (or more of them) that you want to drive to a certain point.

    Here is an example of what I am saying:

    youtube.com/shorts/D1WCuvIidg4

  • Try Construct 3

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

    Try Now Construct 3 users don't see these ads
  • Simplest would be to cover the ground with small square sprites with the physics behavior and set to immovable. Then just destory the ones you wish to erase. You could place the tiles with a double loop at the start of the layout.

    However since that taxes the renderer, you could use one tilemap of small tiles to allow rendering to be faster. Erasing tiles becomes more involved though. You'd loop over the tiles near the mouse/touch and clear them if they are withing a certain distance away. Faster still could be to use to use the equation of a circle and erase runs of tiles at a time.

    Another way to modify a collision shape is to utilize a mesh to distort the object. That would be very light to render, but you'd need to do more logic to decompose the shape into multiple convex shapes.

    You could also probably get away by querying pixels on the drawing canvas around the ball and create hidden collision sprites on the fly to do the collisions.

    I'd search for lemmings, worms, or digging on the forum or tutorials section of the site to find examples.

  • R0J0hound I'm a noob when it comes to creating new things in Construct.

    I already searched a lot on google/forum etc... about this type of mechanic I am trying to create. With all the examples I found I've been able to make this, but for some reason I can't destroy tiles (tilemap physics collision).

    https://www.dropbox.com/scl/fi/43iynn9fugp9hpq0cvkwz/PhysicsTestDraw.c3p?rlkey=hunu2xf6bapz25chvr2m7t6js&dl=0

  • That’s unfortunate you can’t find any examples or tutorials. I know there are at least a few example of using a tilemap for digging. I’ve made some, dop2000 probably has too, and others as well.

    Had a quick look at your example. Yes, it makes it visually look like there are holes but as you’ve noticed that’s not enough to change collisions. To erase you need to destroy or distort objects.

    Here’s a mini tutorial on how to do digging with a tilemap.

    1. Add a tilemap and fill it with tiles.

    2. Add an event, on click, and add an action:

    Tilemap: erase tile at self. PositionToTileX(mouse.x), self. PositionToTileY(mouse.y)

    And that’s basically it. Reduce the tile size to make it less blocky.

    If you want to erase a shape instead of one tile you have to explicitly erase the tiles one by one. If you try to use object overlaps tilemap to erase tiles it won’t work because it won’t tell you what tiles are overlapping.

    To erase all the tiles overlapping an object you have to effectively check each tile one by one to see if they overlap. Construct doesn’t have a feature to do that so you’d need to do it indirectly.

    Loop over all the tile location on the tilemap. For each location that has a tile you’d place a square sprite the same size as the tile, then use an overlap condition to see if that square sprite overlaps the shape you want to erase. If it does erase the tile the square is over.

    To be faster you don’t have to loop over all the tiles. Just the ones around an object’s bounding box.

    Pseudo code for how the event fit that would look is this. Sprite is the object you want to erase and square is a tile sized sprite with an origin at its top left.

    For “x” from tilemap.positionToTileX(sprite.bboxLeft) to tilemap.positionToTileX(sprite.bboxRight)
    For “y” from tilemap.positionToTileY(sprite.bboxTop) to tilemap.positionToTileY(sprite.bboxBottom)
    tilemap: tile at loopindex(“x”),loopindex(“y”) <> -1
    — square: set position to tilemap.tileToPositionX(loopindex(“x”)), tilemap.tileToPositionY(loopindex(“y”))
    — square: overlaps sprite
    — — tilemap: erase tile at loopindex(“x”),loopindex(“y”)

    To texture the tilemap you’d probably just want to use a blend mode with a tiledbg.

    Anyways if that clear as mud then you’ll have to just wait till an example can be made or someone helps you find the previously made examples.

  • That’s unfortunate you can’t find any examples or tutorials. I know there are at least a few example of using a tilemap for digging. I’ve made some, dop2000 probably has too, and others as well.

    Had a quick look at your example. Yes, it makes it visually look like there are holes but as you’ve noticed that’s not enough to change collisions. To erase you need to destroy or distort objects.

    Here’s a mini tutorial on how to do digging with a tilemap.

    1. Add a tilemap and fill it with tiles.

    2. Add an event, on click, and add an action:

    Tilemap: erase tile at self. PositionToTileX(mouse.x), self. PositionToTileY(mouse.y)

    And that’s basically it. Reduce the tile size to make it less blocky.

    If you want to erase a shape instead of one tile you have to explicitly erase the tiles one by one. If you try to use object overlaps tilemap to erase tiles it won’t work because it won’t tell you what tiles are overlapping.

    To erase all the tiles overlapping an object you have to effectively check each tile one by one to see if they overlap. Construct doesn’t have a feature to do that so you’d need to do it indirectly.

    Loop over all the tile location on the tilemap. For each location that has a tile you’d place a square sprite the same size as the tile, then use an overlap condition to see if that square sprite overlaps the shape you want to erase. If it does erase the tile the square is over.

    To be faster you don’t have to loop over all the tiles. Just the ones around an object’s bounding box.

    Pseudo code for how the event fit that would look is this. Sprite is the object you want to erase and square is a tile sized sprite with an origin at its top left.

    For “x” from tilemap.positionToTileX(sprite.bboxLeft) to tilemap.positionToTileX(sprite.bboxRight)
    For “y” from tilemap.positionToTileY(sprite.bboxTop) to tilemap.positionToTileY(sprite.bboxBottom)
    tilemap: tile at loopindex(“x”),loopindex(“y”) <> -1
    — square: set position to tilemap.tileToPositionX(loopindex(“x”)), tilemap.tileToPositionY(loopindex(“y”))
    — square: overlaps sprite
    — — tilemap: erase tile at loopindex(“x”),loopindex(“y”)

    To texture the tilemap you’d probably just want to use a blend mode with a tiledbg.

    Anyways if that’s clear as mud then you’ll have to just wait till an example can be made or someone helps you find the previously made examples.

  • Thank you for making the time to explain to me R0J0hound .

    I think I used dop2000 example with the tilemap for creating this. But his, from what I recall, was using "on click event" (for making explosions probably) instead of "every tick" as I am doing, since it's a drawing system.

    I was unable to do what you wrote above. Anyhow, this is my attempt, maybe someone here will be able to reproduce it.

    https://www.dropbox.com/scl/fi/43iynn9fugp9hpq0cvkwz/PhysicsTestDraw.c3p?rlkey=hunu2xf6bapz25chvr2m7t6js&dl=0

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