Creating a scratch card effect

Hey,

I'd like to create a scratch card effect, so that when you hover your mouse over the object, it will reveal the object behind in an area around the cursor.

I downloaded a canvas plugin to achieve the effect, but so far no luck. Also the capx's on the site I found were deleted files and couldn't be opened.

Thanks in advance :)

You can also use the Paster plugin. It performs better with webgl, although it doesn't have as many features as the Canvas plugin.

Anyway here are is an example for each plugin:

https://dl.dropboxusercontent.com/u/5426011/examples19/scratcher_canvas.capx

https://dl.dropboxusercontent.com/u/5426011/examples19/scratcher_paster.capx

The trick to erasing is to paste a sprite with the "destination out" blend.

Wow. Thank you so much. Exactly what I was looking for.

Thanks for the quick reply, I really like this community! :)

Awesome, just the behavior I was looking for. Ty

Sadly, these do not seem to be suitable for a scratch card because

a) you get staccato dots, instead of the required smooth swiping reveal, if you do it quickly. I tried changing the project to use Is Touching instead of every tick - same problem. I guess this is a limitation of how often C2 samples the mouse.

b) its not possible to know how much of the canvas was scratched, to complete the reveal and award the prize.

c) it doesnt work on mobile (ipad at least), even if you use touch events. No idea why.

a) you can replace the round effect by any other sprite that will look like more a scratch, or even use frames or multiple sprites to create a kind of random effect. Plus you can increases the move precision by calculating intermediate coordinates between the actual mouse coordinates and the mouse coordinates during the previous tick (thanks r0j0hound for this advice for my own project)

Check my example file.

[attachment=0:289oslif][/attachment:289oslif]

nutmix

a) This is because of how a computer samples the mouse. The solution is to use a line from position to position or draw at in between positions like Coin-coin le Canapin's example.

b) With the canvas plugin you can by using canvas.alphaAt(x,y) for each pixel or use the slightly more esoteric yet faster canvas.AsJSON expession to get the pixel data into an array.

rojohound - is it possible to determine things like "what percentage of the image below is visible?" ,

or, is the entire image revealed or not?

thx

You can also use the Paster plugin. It performs better with webgl, although it doesn't have as many features as the Canvas plugin.

Anyway here are is an example for each plugin:The trick to erasing is to paste a sprite with the "destination out" blend.

Good work, R0J0hound!

Anyone here know how to reward the player for the cleanup of an object through this plugin?

lukezero

I briefly mentioned how above and here is an example:

https://www.dropbox.com/s/mzjg78cf38zqa ... .capx?dl=1

/examples27/scratcher_canvas_with_percent_clear2.capx

The issue is it's slow to check all the pixels in the canvas. I first tried the .AsJSON method but it would make the game freeze up for too long while checking. Next I used the .AlphaAt(x,y) expression, but only checked so many pixels per second to even it out so it wouldn't freeze. The draw back is it would take a bit to check all the pixels. What I settled on was to first paste the canvas to a lower resolution canvas and check the pixels on that so we could do it per frame.

It works perfectly with your plugin, R0J0hound!

Thanks one more time for your help!