Creating a scratch card effect

Get help using Construct 2

Post » Tue Nov 19, 2013 8:04 am

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 :)
B
3
Posts: 4
Reputation: 208

Post » Tue Nov 19, 2013 8:38 am

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.
B
92
S
32
G
110
Posts: 5,298
Reputation: 71,507

Post » Tue Nov 19, 2013 8:47 am

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

Thanks for the quick reply, I really like this community! :)
B
3
Posts: 4
Reputation: 208

Post » Fri Feb 28, 2014 5:50 pm

Awesome, just the behavior I was looking for. Ty
B
2
Posts: 1
Reputation: 152

Post » Thu Nov 06, 2014 11:19 am

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.
B
17
S
6
G
3
Posts: 370
Reputation: 3,942

Post » Thu Nov 06, 2014 2:03 pm

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.

scratch.capx
You do not have the required permissions to view the files attached to this post.
Last edited by Coin-coin le Canapin on Thu Nov 06, 2014 8:04 pm, edited 1 time in total.
B
12
S
7
G
7
Posts: 450
Reputation: 4,276

Post » Thu Nov 06, 2014 7:00 pm

@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.
B
92
S
32
G
110
Posts: 5,298
Reputation: 71,507

Post » Thu Mar 19, 2015 2:33 am

@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
B
87
S
44
G
16
Posts: 1,005
Reputation: 17,938

Post » Wed May 20, 2015 4:22 pm

Message: lukezero is not yet permitted to post plain text URLS (300 rep required). 2 URLS removed. Why?
R0J0hound wrote: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! :D

Anyone here know how to reward the player for the cleanup of an object through this plugin?
B
39
S
9
G
3
Posts: 260
Reputation: 4,357

Post » Thu May 21, 2015 1:13 am

@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.
Last edited by R0J0hound on Mon May 22, 2017 1:21 am, edited 1 time in total.
B
92
S
32
G
110
Posts: 5,298
Reputation: 71,507

Next

Return to How do I....?

Who is online

Users browsing this forum: No registered users and 26 guests