Jump to content

ScratchCard - How much is "painted"?


Recommended Posts

Hi all.
I'm starting with PixiJS now and want to know about Render ()

In the ScratchCard example (https://pixijs.io/examples/#/demos-advanced/scratchcard.js), its possible "paint" an image in my board, its very NICE!
But, how can I watch to do some action when all image is "painted" in screen?
Can I watch this? If yes, How?

I want do an action when my image is all "painted" e other if my image is 50% "painted"

Thank You all! ❤️


Link to comment
Share on other sites


In my case i use canvas 2d render for mathematics calculation and RenderTexture for view. I update image on both, but math texture is 512, when view texture is 2048.

Why? Because there are some botlenecks:

1. GPU is waiting when you request pixels from GPU to CPU for calculating. I got lag about 30ms when request 2048x2048 texture on mobile, this is long time, and drops framerate twice. Reading of 512 is faster, but in some cases you can use smallest images.

2. Iteration over buffer with 512x512 (or more) pixels is very heavy. I pass this task to Web Worker. (Really i use adaptive resolution for filling percentage calc: 16x16 for <10%, 128x128 for <25%, 256x256 < 75%< 512x512 > 95%)


Is best way: use RenderTexture for painting and visuallise in main thread, then use OffscreenCavas for Chrome with 2d context for percentage mathing in WebWorker directly. For other browsers use getImageBitmap or gl.readPixels, and then pass pixel buffer to worker.


Edited by eXponeta
Link to comment
Share on other sites


Welcome to the forums!

As you see, answer to your question is not safe for newbie :) it requires knoweldge of both how can you get data from canvas2d and webgl, and webworkers. At least its in production. If you want just a prototype with small texture - using PIXI extract plugin on renderTexture and iterating through pixels should work. Extract is bundled in PixiJS, it wont be a problem to find it. If you want to go into production and cover all the devices - well, you have to learn all those things @eXponeta mentioned.

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...