Drawing mechanic with poor performance

Questions & Answers
, ,
1

Hello folks, first time here, hope im in the right place.
Im working on a system where the player is shown a drawing, a pattern:

dMWIB5F
dMWIB5F636×539 82.1 KB

Then the player has to draw on top of it tracing it as good as posible. The closer the players drawing is to the original pattern, the higher the score should be. If the player messes up and draws out of the given pattern, the score should descrease.

I’ve tried several approaches but none of them seem to be heading me in the right direction.
So far:

I tried instantiating a Texture2D on top of the pattern texture, and every frame painting on it and then comparing it to the original pattern. This is extremely inefficient dropping the FPS to 2 - 5.

The most recent approach i’ve tried involves painting (SetPixel) over the original sprite of the pattern. Painting it green when the player clicks and drags around the non-transparent pixels and painting it red when it misses.

wiAj9VA_d

This kinda with works but it still drops the fps significantly, specially if i make the “brush” wider (more pixels).

This approach makes the system terribly static and gives me a headache just by thinking about how to continue adding things to it (different brushes, vfx to the brush…)

I’ve been stuck and kinda given up a month ago but maybe someone can guide me a little bit on this. Such a simple mechanic has to have a more simple approach but I can’t seem to figure it out.

Any help is very much appreciated, needless to say, im just a newbie trying out.

2

Do not use SetPixel as it is really slow, especially when you do affect many pixels at once. Use a cached Color32 array and use SetPixels after your changes to the array. Keep in mind that the array is a flattened array of the whole image, so when you do a for loop to apply a larger brush to it, make sure you clamp / cut off at the x axis. Otherwise it would wrap around into the next line on the other side.

Here’s for example my parallel Mandelbrot renderer which also uses a Texture2D and sets the pixel colors of those pixels which “settled” this frame. It iterates all pixels in parallel unlike most other renderers, so you can see the iterations “grow”. It runs decently even in a WebGL build.