New to PixiJs: Showing percent of image revealed using mask?

[dupuis2387]

Hello,

I'm super new to pixijs and am trying to do a scratch off type game, using the code samples from

https://pixijs.github.io/examples/#/demos/mask-render-texture.js

and

https://pixijs.github.io/examples/#/demos/batch.js

 

Wherein, there's a bunch of particles on screen, using the particle container, that you're meant to "scratch-off" within a given time limit....I've tapped into

function pointerMove(event) {
			if (dragging) {
				brush.position.copy(event.data.global);
				app.renderer.render(brush, renderTexture, false, null, false);
				
				var hits = 0;
			        var imageData = app.renderer.extract.pixels(renderTexture);

			for (var i = 0, ii = imageData.length; i < ii; i = i + 4) {
				if (imageData[i] == 0 && imageData[i + 1] == 0 && imageData[i + 2] == 0 && imageData[i + 3] == 0)
					hits++;
			}
			scratchOffPercentage = Math.ceil((hits / totalTextureSize) * 100);

			}
		}

from the mask-render-texture.js example, but doing app.renderer.extract.pixels(renderTexture); as the mouse is moving, seems to be quite taxing and makes the particles lag....is there a better way of doing this?

Essentially, with the example  https://pixijs.github.io/examples/#/demos/mask-render-texture.js in mind, can i show how much of the picture underneath is showing/has been drawn by the "brush"?

 

Thanks for any help!

 

[ivan.popelyshev]

Hey! There are some demos that might help you.

One that is used in http://cutiedie.crazypanda.ru/main.html to clean up the blood. Look into devtools, sources, find "background.ts".

 

Two, just an example but a bit laggy on mobiles: https://pixijs.github.io/examples/#/demos/mask-render-texture.js

[ivan.popelyshev]

Oh , right, now i get it :)) you need that percent.. I dont know how to do that  I'll think about it. May be do it only when mouse is up, one time? You can even do a graphic effect to mask this calculation somehow. Use extra renderTexture there to hold previous position, and blend it to current one when mouse is up , to show that percent was increased

[ivan.popelyshev]

New thread has more info on it! Please look, I think I figured out better way.