Amitdante

Scratch Card Effect.

Recommended Posts

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.

 

Share this post


Link to post
Share on other sites

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);

 

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.