PRiSMiWi

Scratchcard

Recommended Posts

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

Share this post


Link to post
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

Share this post


Link to post
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 :( 

Share this post


Link to post
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

Share this post


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

Share this post


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

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.