How to make scracthcard? [2D]

I'm trying to make a scratchcard type of thing in my game. I'm planning to put 2 sprites on top of each other. One of them will have a higher sorting number and the highest one's Z axis will be more close to the camera. When a player swipes the screen, I want to remove only the swiped area and reveal the sprite underneath from the removed area. How can I do that?

 

Not sure how you'd do that apart from the naive way of changing pixels to be transparent in the overlying Texture, which isn't going to be particularly performant.

Alternately you could fake it in reverse too, by showing a transparent result on top of the gray scratcher material, then adding the underlying revealed picture to the top texture, either by pixel blitting or by some type of RenderTexture trickery to make it work right.

 

some options:
- setting actual pixels (works fine up to 1-2k resolutions (depending on target devices).. but lower resolutions should look good enough too)
- your sprites idea: have lots of smaller sprites (even hundreds), then fade or hide them on scratch
- rendertexture painting https://twitter.com/danielsantalla/status/1356012174452391937
- painting with particles, and particles have some special material that reveal 2nd image (maybe stencils?)
- and add particle effects to scratch area to make it look nicer
- New: Paint into vertex colors and use that to fade (so can easily have different shaped meshes)
- or get ready solutions from asset store https://assetstore.unity.com/?q=scratch&orderBy=1

 

I've actually been wanting to do this effect myself, as it could be a fun adjunct for casual game discovery... so I did it!

You can see it in action here:

And the full Unity3D package with source code, sample textures, scene setup, etc. is attached to this message.

The actual meat and potato code is all in the

Scratchers2D.cs

class and it is nominally well-explained.

 

You are the best Thank you.

EDIT: I checked the code, and the solution is something about an area I don't have any knowledge I was wondering if there is a way to check how much percentage of the image is revealed?

 

That's a little trickier. Probably the best way would be to keep a second low-resolution version of what is going on visually, store only black and white, lets say a 32x32 texture, something you can scan reasonably quickly and ask how much is white and black to know what fraction is covered, approximately.

 

if you use full texture, then you already know the total pixel count,
and during drawing, you can calculate how many pixels get colored.
(could check single byte, if its 0, this pixel is not yet filled then increment filled counter, if its 1, then its already)


used something similar on this,
https://github.com/unitycoder/UnityMobilePaint

 

https://forum.unity.com/threads/tutorial-scratch-card-or-scratch-and-win-effect.1036090/