Sign in to follow this  
dupuis2387

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

Recommended Posts

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!

 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.