1
\$\begingroup\$

I want to create a scratch-card-like effect in new Unity UI's new Image tag. I know it's possible with setPixels, but that's prohibitively expensive on mobile devices.

Something like this:

a real-life scratch card

I'd like the user to be able to drag on any part of the image to "scratch off" the top layer and reveal the content underneath it.

How can I do this?

\$\endgroup\$
4
  • 2
    \$\begingroup\$ There are a lot of ways this can be achieved. Can you be a bit more specific about your requirements? Do you just need an animation of an opaque layer scratching away to reveal content underneath? Or do you need the player to be able to selectively scratch just parts of the image, so that the revealed area exactly matches the path of their touch/click/drag? \$\endgroup\$
    – DMGregory ♦
    Commented May 25, 2015 at 18:22
  • 1
    \$\begingroup\$ @DMGregory oh yes sorry, Actually I want to do is when user touch the screen, reveal that part of the image.I know this can be done with setPixels, but that's too expensive for mobile devices. \$\endgroup\$
    – idurvesh
    Commented May 26, 2015 at 0:45
  • \$\begingroup\$ Here's a similar question about detecting how much has been scratched off. (It doesn't talk about the graphics aspect though.) \$\endgroup\$
    – Anko
    Commented May 28, 2015 at 9:43
  • \$\begingroup\$ @Anko thanks, the technique used in it call Marching Cubes, good solution but thats too complex and overhead just for simple scratch card effect. \$\endgroup\$
    – idurvesh
    Commented May 29, 2015 at 0:36

2 Answers 2

Reset to default
1
\$\begingroup\$

I have done something similar to this in the past.

My solution to this would be to make use of Unity's new UI Mask and a Render Texture.

When the player touches the screen you would draw a circular sprite at that location and render it to a texture. You would then use this texture for the mask. Over time these sprites will reveal more and more of the image giving you the effect you are after without having to go down the SetPixels route.

This is a similar question that was asked which has a load of good links on it if you don't mind that it's XNA/C# but the concepts are the same.

\$\endgroup\$
2
  • \$\begingroup\$ thanks, with modifications to this link I able to get it work on uGUI studio.openxcell.com/remove-dustfog-object-unity-swipe.html \$\endgroup\$
    – idurvesh
    Commented Jun 8, 2015 at 14:00
  • \$\begingroup\$ Excellent, glad it did the job 😊 \$\endgroup\$
    – TJClifton
    Commented Jun 8, 2015 at 15:22
1
\$\begingroup\$

Assuming no setPixel,

make a "single dirt bitmap"(1). Place a bunch of texture2d objects(2) (using image(1)) over the "card" and make them disappear when you move over them.

You can define properties on each (2) , so that one Texture object may take two (or more) scratch to disappear.

\$\endgroup\$
2
  • \$\begingroup\$ hi thanks ,I thought of 1st approach but thing is after image gets disable it shows "Box" instead of "Circle" in empty space, any idea how to overcome it? \$\endgroup\$
    – idurvesh
    Commented May 29, 2015 at 0:30
  • \$\begingroup\$ thanks, with modifications to this link I able to get it work on uGUI studio.openxcell.com/remove-dustfog-object-unity-swipe.html \$\endgroup\$
    – idurvesh
    Commented Jun 8, 2015 at 14:00

You must log in to answer this question.

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