How to pixelate the screen without making it laggy?
I tried to use screencapture and then getRGB to get updating rectangles all over the screen to make it pixelated, but that is really laggy and any resolution that would be ideal is too laggy. Any other way to do this? This is what I tried: https://microstudio.dev/i/l1551/screencapture2/
https://microstudio.dev/i/joyrider3774/plasma/
https://microstudio.dev/i/joyrider3774/fire2/
https://microstudio.dev/i/Lunaryss/bitmaplib/
I'll explain why it's so slow.
Every time you call getRGB
- the browser sets the context (which is only needed the first time)
- downloads the entire image from the video card's memory and (the larger the image, the longer it takes)
- recalculates the coordinates you provided to a linear address.
- downloads 4 values from memory and returns the pixel color.
These problems are also known in other graphics engines in javascript.
There are also some errors (I don't know if they occur in everyone or just in mine) that can occur individually or in any combination when the draw function is executed for a very long time.
- FPS calculation is incorrect, when you check the system.FPS counter it will tell you that you have 67 fps, but if you count it yourself it's 2-3 fps.
- not drawing the whole screen if you draw in a loop
draw = function() // long drawing time
for( i .... )
for(j .... )
screen.fillRect( i, j ...... )
end
end
end
You should never see on the screen that the screen is partially drawn. However, I manage to achieve this (your example code also has this effect).
How to counteract this
- optimize the code
- use libraries that provide fast access to graphics memory (which will fetch data only once, for example)
- fetch the graphic to Array once and perform operations there.
- instead of drawing the image using screen.fillRect use screen.drawImagePart, also set screen.setPixelated.
- if you use the graphic multiple times, transfer the result of the work to the object img = new msImgae() and then draw only this object,