Scratch Card Effect.

[Amitdante 1]

Hey,

I want to create a scratch card effect, as there are in games with luck and all where you scratch on some image and in the scratched area you can see the image below it.

I think this can be done by manipulating pixels somehow, but i am not experienced with pixi and don,t know how to do it exactly.

It will be a great help if you point out a way or tutorial to do it, or give a basic code snippet here to help me figure this mechanism out.

Regards.

 

[ivan.popelyshev 1064]

Yeah, I know just a hack for it. Hope you understand that im not posting al the code, only the essential parts.

Use a renderTexture, then try to clear it with this one:

(renderer.state as any).blendModes[21] = [0, WebGLRenderingContext.ONE_MINUS_SRC_ALPHA];

//put a card inside a renderTexture
var rt = PIXI.RenderTexture.create(200,200);
renderer.render(cardSprite, rt);

//add it to stage
stage.addChild(new PIXI.Sprite(rt));

//and that's how you can clear a pattern, for example if you have a circle. You can use either Sprite either Graphics, whatever suits you
var clearingSprite = new PIXI.Sprite(patternTexture);
clearingSprite.position.set(50,50);
clearingSprite.blendMode = 21;
renderer.render(cardSprite, rt, false);

 

[Amitdante 1]

20 minutes ago, ivan.popelyshev said:

Yeah, I know just a hack for it. Hope you understand that im not posting al the code, only the essential parts.

Use a renderTexture, then try to clear it with this one:

(renderer.state as any).blendModes[20] = [0, WebGLRenderingContext.ONE_MINUS_SRC_ALPHA];

//put a card inside a renderTexture
var rt = PIXI.RenderTexture.create(200,200);
renderer.render(cardSprite, rt);

//add it to stage
stage.addChild(new PIXI.Sprite(rt));

//and that's how you can clear a pattern, for example if you have a circle. You can use either Sprite either Graphics, whatever suits you
var clearingSprite = new PIXI.Sprite(patternTexture);
clearingSprite.position.set(50,50);
clearingSprite.blendMOde = 20;
renderer.render(cardSprite, rt, false);

 

Hey, Thank you for replying so fast.

I can understand some of the things in the code you have posted but can not understand a few parts.

Specially the first block of code.

I am very new to Pixi but not to game development (Unity User).

Can you please explain more about what's happening in this code?

Sorry for being such a newbie.

Regards.

[ivan.popelyshev 1064]

The other way: http://pixijs.github.io/examples/#/demos/mask-render-texture.js

But that one is slower. It creates renderTexture with black color and puts white brush where user clicks. That texture is used as a mask for image to reveal.

[Amitdante 1]

Thank you so much, that's really what i wanted, I can play around with that code now and can learn and understand from it.

If you can, can you provide working code like that one, with your method?

But, Anyways, you are a life saver, thanks a lot man.

May God bless you.

Regards.