Jump to content



Recommended Posts


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


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.



Link to comment
Share on other sites

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 by ivan.popelyshev
Link to comment
Share on other sites

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 :( 

Link to comment
Share on other sites

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 by PRiSMiWi
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 2 years later...

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

Link to comment
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.

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.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...