How do I cut a hole in a sprite using the drawing canvas object?

Not favoritedFavorited Favorited 2 favourites
  • 9 posts
From the Asset Store
Hand-painted tiles, objects, animated objects, and background to build a colorful Mayan civilization environment.
  • I have roughly 35 sprites on the screen, all on their own layer. When the player clicks on one of these sprites I want to punch a hole in it.

    I found an example from dop2000 and tried to adapt it, but the sprite clicked on either turns black, or it cuts out a sprite shaped hole in everything else in the background.

    Note: My canvas object is on the same layer as my sprites. I also set the "Force own texture" to true for this layer.

    Any suggestions?

  • Try Construct 3

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

    Try Now Construct 3 users don't see these ads
  • The object that "cuts a hole" into the drawing canvas, must have the blend mode "destination out" set on it.

    When you set this, it won't always look how you're expecting in layout view, but once you paste, it will do exactly what you hope.

    If you still need a visual sprite to show the area you're about to make a hole, then I'd suggest 2 sprites, one with destination out, one without. (you could do 1 sprite and "set blend mode to destination out, paste, set blend mode to Normal, but it will change it's appearance during the paste).

    If you used many layers with Force Own Texture, just for this hole system, you may not need all of this - even 1 layer, without Force Texture, will still punch a hole when you paste a Destination Out sprite.

    Hope this helps!

  • Thanks for the reply, Jase00!

    I was trying to follow dop2000's example described here:

    construct.net/en/forum/construct-3/how-do-i-8/punch-hole-sprite-reveal-layer-156127

    I modified it to work on just the sprite being clicked on:

    This works... but those same events don't work in my game. I tried to match the sprite and layer details, but with no luck.

    One difference is the way I had to use containers. My game uses spr_card and fam_cards (with spr_card as the only member), and all card references use fam_cards. Unfortunately, I apparently can't use a family in a container... so I had to add spr_card instead. Not sure if that messed anything up or not.

  • Not sure what I'm doing wrong but I just can't get this to work.

    Here's basically what I'm trying to do. If anyone sees an issue with any of these steps, please let me know.

    - Player clicks on sprite

    - Make sprite invisible

    - Create instance of sprite on "Effects" layer (texture draw = true)

    - Make new instance invisible

    - Copy new instance to canvas (also on "Effects" layer)

    - Wait for events (give time for draw to happen)

    - Set canvas blend mode to Destination Out

    - Paste hole sprite to canvas

    When I do this my sprite image turns black. Any ideas?

  • One of the issues you’re encountering is the object’s blend mode and the “drawing blend mode” are two different things. You’d want to set the drawing blend mode to destination-out before filling the ellipse, but you should leave the object’s blend mode as normal.

    So roughly this would create a canvas over the sprite, draw the sprite to the canvas, and erase a circle out of it. What you do with the sprite after is up to you, but I destroyed it here.

    On clicked sprite
    — create canvas at sprite position
    — set canvas size to sprite size
    — canvas: paste sprite
    — sprite: destroy
    — canvas: set drawing blend mode to destination-out
    — canvas: fill ellipse at mouse

    The other way could be to use circle sprites with the destination-out blend on layers with “force own texture”.

    You said each sprite is on its own layer, so just make sure each of those layers has “force own texture” enabled. Then erasing holes would be as simple as:

    On sprite clicked
    — create: circleSprite on layer: sprite.layer at mouse.x, mouse.y
    — circleSprite: set blend mode to destination-out
  • Thanks for trying to help everyone! I'm not sure what I'm doing wrong here, but it's still not working.

    Layer 1 is set to force own texture.

    + Mouse: On Left button Clicked on Sprite2

    -> System: Create object canvas on layer 1 at (Sprite2.X, Sprite2.Y), create hierarchy: False, template: ""

    -> canvas: Set size to (Sprite2.Width, Sprite2.Height)

    -> canvas: Paste object Sprite2 with effects

    -> Sprite2: Destroy

    -> canvas: Set drawing blend mode to Destination out

    -> canvas: Fill ellipse at (Mouse.X, Mouse.Y) radius (15, 15) with rgba(0, 0, 0, 100) (Smooth edge)

    When I click on the sprite it just disappears.

    I think I'm going to just do this with art. That should still work well!

  • You cant destroy the sprite immediately, since the drawing canvas requires the next tick to update, so the sprite is being destroyed i think before it gets a chance to be pasted.

    You may need to add a wait 0.1 seconds before you destroy it.

  • Thanks, mOOnpunk! I'll give that a try.

  • "Paste" is now an asynchronous action, so you can use "Wait for previous action to complete" instead of "Wait 0.1s" - it would be more reliable.

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