Scratchcard

[PRiSMiWi]

Hello,

I know this question has been already answered and posted. But I am having a problem trying to achieve this "scratchard effect"

https://pixijs.io/examples/#/demos-advanced/scratchcard.js

I have it working nice, with a superb brush and drawing nicely from last postiion to new one, when I have one image over another and I apply a mask. It works flawlessly. No complaints at all.

The problem is when I want to have this overlay as "standalone" scratchable overlay. What I mean is I want to cover a few sprites, with this overlay and scratch this surface/overlay and draw what it is under it.

I am used to PIXIJS 4, and even upgraded to version 5 to try to use BLENDER_MODES.ERASE but it does not work in any way.

Is there anyway to:

• Access overlay sprite texture
• Paint with the brush so we add ALPHA to the "selected pixels"?

In this way i think it does not matter what's below the overlay/scratchable image, as we will draw "holes" on it and see through the sprite.

 

Cheers

[ivan.popelyshev]

Hello! This is my example that was added before we had ERASE blendMode. There are several ways to do the same thing. 

Yes, there's an easy way to do it through ERASE blendMode in brush sprite, if you draw that brush in overlay renderTexture. That way you dont need masks/filters, you just need a sprite with renderTexture over everything.

But, even if you described situation correctly, you made something wrong if it doesnt work for you. Please share your demo in pixiplayground.com or jsfiddle or codepen.

One of ways to debug whats going on there is to use https://spector.babylonjs.com/ , it can capture one frame and give you information about webgl commands inside.

Edited January 31, 2020 by ivan.popelyshev

[PRiSMiWi]

Thanks for the spector, didn't know it!

I am using the brush as a randomly generated PIXI.Graphics, drawing a lot of small circles, then using it as in your example:

brush.copy ...
app.rendered.render(brush, renderTexture, false, null, false)

If I set the blend mode of this brush (GRAPHICS type) it does not work.

So, as I understand I don't need the mask property, I just need to paint in the texture of the overlay sprite, with the brush with a blendMode = ERASE. But it still does not work  

[ivan.popelyshev]

it should work.

[PRiSMiWi]

I am trying hard

Now I am painting on an EMPTY texture. The sprite which has this texture has BLEND_MODE.ERASE. So when I paint on it, EVERYTHING BEHIND IT it's erased... Even the things I have to show.

If instead of empty texture, i draw the overlay first, and then paint with the brush, it's the same. Everything is already deleted.

if I set BLEND_MODE.ERASE on the brush, brush is not painting on the texture

Thank you

Edited January 31, 2020 by PRiSMiWi

[ivan.popelyshev]

> if I set BLEND_MODE.ERASE on the brush, brush is not painting on the texture

does texture has anything to erase inside?

Just to clarify once more, all your thoughts are logical and correct. you are doing something wrong., and , unfortunately, my telepathy cant pick it up  IT usually works but not in this case.

What can you do:

1. continue tryharding

2. share the demo.

[PRiSMiWi]

Ivan, I just want to say thank you for your support.

Thank you for guiding me to the right point. Yes, I was in the right direction, but something  was missing very stupid from my side.

So, if someone might need info, my problem was:

 

The "overlay" texture was not the initial overlay image. It was indeed empty already.

I needed to create a auxiliar sprite with the overlay texture, so I could create a RenderTexture object, and then position the auxiliar overlay sprite and then render this sprite on the render texture.

[ivan.popelyshev]

Its good that you fought it and won. Now you know basics of layering  Welcome to the world where A*(B*C) is not equal to (A*B)*C !

[ivan.popelyshev]

Now I really recommend to look at your demo with spectorJS. However to capture the actual frame where ERASE happens you have to spam ERASE automatically, not just on click.

Edited February 4, 2020 by ivan.popelyshev

[b10b]

Thanks for this, I just used it today (ERASE aka DST_OUT) - masks well for both WebGL and Canvas with great performance on both.

Implementation tips: 

1) Extend from https://pixijs.io/examples/#/demos-advanced/scratchcard.js
2) Set "brush" blendmode to ERASE (aka 26)
3) render "background" into renderTexture on setup
4) no need to add mask to "imageReveal"
5) no need to add "background" to stage

And if you want to check whether everything's been scratched away use:

renderer.extract.pixels( renderTexture ) ... return false if it contains anything but zeros