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\$
  • 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 May 25 '15 at 18:22
  • \$\begingroup\$ I think he wants what he showed in the image. \$\endgroup\$ – JPtheK9 May 25 '15 at 19:09
  • 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 May 26 '15 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 May 28 '15 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 May 29 '15 at 0:36
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\$
  • \$\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 Jun 8 '15 at 14:00
  • \$\begingroup\$ Excellent, glad it did the job 😊 \$\endgroup\$ – TJClifton Jun 8 '15 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\$
  • \$\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 May 29 '15 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 Jun 8 '15 at 14:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.