I want to create a game where you have scissors that cut a sprite in a shape that you create by dragging your finger on the screen.

My problem is that I can't figure out how can I cut my sprite in the specific shape that the user creates with their finger.

So far the only solution that I found searching the web is that I'll need to create my own shader that lets me make a specific part of a texture transparent, but don't understand how I can apply that to my scenario?


1 Answer 1


One way to do this is with mask textures.

When you cut a sprite A, you will divide it into two new sprites (B and C). You can create masks based on where the user dragged to create the cut, and use those masks to represent the transparent portions of the new sprites (the parts that were "cut away").

Say the user traces the following pattern:

enter image description here

You can use a flood-fill algorithm starting at a fixed point (say, the bottom-left) to identify a entire region of the cut:

enter image description here

And then you can invert that image to find the region representing the other side of the cut:

enter image description here

Now you have two mask textures (the last two images).

You can destroy your original sprite and create two new ones. Both use the same base texture, but they also have a mask texture assigned. In the shader, you sample the base texture for the red, green and blue components of the output but you sample the mask texture for the alpha value (in the above examples, you'd use the red component of the mask texture as the final alpha component, and you wouldn't actually want the background of the mask to be grey - I did that only to make it distinct from the site's background).

As you continue to cut a sprite again and again, you should combine the new masks with the old.

This will provide you with a basic implementation. It's relatively simple to implement, and has the advantage of allowing fairly arbitrary cuts in your sprites. However, it's disadvantage is that it requires a lot of per-pixel operations on texture data (flood fills and inverts), which can become a bottleneck as the number of cuttable sprites increases. You can alleviate the problem by using lower resolution textures for the masks, to some degree.

  • \$\begingroup\$ sorry I now realized that I did not mention which software I would use(if that makes a difference), Im using unity 3D, and also thank you for your answer, so basically I will need to create my own shader(Im asking this because I never created shaders and now I need to learn how can I do that :D ), there is no way to implement this without creating my shader?? \$\endgroup\$ Dec 16, 2014 at 18:26
  • \$\begingroup\$ It doesn't. There are ways to do this without a shader, you can also physically split the geometry and recompute the texture coordinates for the split vertices. It's more efficient but harder to implement and support the general case, and doesn't necessarily allow for as arbitrary cuts. \$\endgroup\$
    – user1430
    Dec 16, 2014 at 18:28
  • \$\begingroup\$ Sorry I must be anoying, but can you explain a little bit more detail how can I do that, how can I split the texture during game, I mean we are talking about shapes like zic-zac , and for example going up and down up and down until it connects two point... never done a little more complicated stuff like this so I still dont know how can I do this.... again thank you for your answer and sorry for my anoyingness so to say.. or if it is not hard for you to explain to me the first or more efficient way how can I do that, because like I said I still dont have a clue how to approach this problem. \$\endgroup\$ Dec 16, 2014 at 18:47
  • \$\begingroup\$ That initial line is the arbitrary input from the player, so it can be a zig-zag or a circle or anything else. If you don't understand how to track the player's finger position over time and come up with the initial line I drew on the first texture, you should ask that as a separate question. \$\endgroup\$
    – user1430
    Dec 16, 2014 at 18:50
  • \$\begingroup\$ I understand how can I track and follow the players touch, but what I dont understand how can I remove that part of the texture that needs to be removed when he connects two points \$\endgroup\$ Dec 16, 2014 at 18:51

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .