Background created from rectangles, low FPS.

oen432

Hi, Just started using P5 since I'm making 2D online shooter (got it all working without P5, switching to P5). So, what I want to do is create a background (very big) that's made from rectangles.

Here is a function that draw such background.

function drawMap() {
    var x = width/2 - player.x;
    var y = height/2 - player.y;

    background(127);

    /**   THIS IS MIDDLE OF THE MAP */
    for (var i = 0; i < rows; i++) {
        for (var k = 0; k < cols; k++) {
            if (i <= 40 && k <= 40 && i >= rows-3 && k >= cols-3) continue;
            if(player.x-width/2 > (k+1)*scl || player.x+width/2 < k*scl) continue;
            if(player.y-height/2 > (i+1)*scl || player.y+height/2 < i*scl) continue;
            noFill();
            stroke(32);
            rect(x + (k*scl), y + (i*scl), scl, scl);
        }
    }

    /**   THIS IS BORDER OF THE MAP */
    for (var i = 0; i < rows; i++) {
        for (var k = 0; k < cols; k++) {
            if(player.x-width/2 > (k+1)*scl || player.x+width/2 < k*scl) continue;
            if(player.y-height/2 > (i+1)*scl || player.y+height/2 < i*scl) continue;
            if (i > 40 && k > 40 && i < rows-3 && k < cols-3) continue;
            stroke(32);
            fill(0);
            rect(x + (k*scl), y + (i*scl), scl, scl);
        }
    }
}

As you can see, I did some optimizations like not drawing rectangles offscreen.

Player is always centered and everything else is acting like there is camera above player so it's moving around etc.

Here is some image to that:

Still, it's not doing well, ~10 FPS, that's bad, very bad.

If we look at http://diep.io you can see that it's using the same way to draw background and it's way more optimized.

Any ideas what to do with this?

GoToLoop

http://studio.SketchPad.cc/sp/pad/view/ro.9Ql2E8JBC54LJ/latest

oen432

Sorry but that didn't help at all.

koogs

^ ¯\_(ツ)_/¯

your problem is that the grid is too small. imagine tiling a bathroom. do it with individual tiles 1cm across and it'll take you forever. use bigger tiles, painted with a 1cm grid and it'll take you much less time. better still, use a roll of vinyl...

and there's no need to draw the background as individual tiles, just set the background to black (instead of mid grey) and just don't draw anything for the background.

koogs

and runnable examples are always more useful

oen432

I know that if I set the size of tiles to higher it will help but they are the same size as in diep.io and still there is a performance diffrence.

oen432

Here - http://retrodroid.eu/canvas

And source code - http://retrodroid.eu/canvas/source.txt

Use arrow keys to move around. I have removed border tiles.

oen432

And I just noticed that I selected your comment as Answer... I hope it won't change anything, that's just my missclick.

jeremydouglass

One way to optimize a scrolling continuously textured background is to load it as an image. If you want to render the image rather than loading it from disk, render it just once using createImage() and image():

• https://p5js.org/reference/#/p5/createImage

If your screen size is w,h -- and your tile texture size is tw,th -- then make your create an image of size w+tw,h+th. 400x400 screen, 10x10 tile texture, make a 410x410 image.

Now, draw your image based on the offset of your player location i,j: image(img, i,j). i,j will vary from 0,0 to 9,9, and the background will appear to scroll by continuously in any direction.

jeremydouglass

Also, if you are doing a one-time render into a PImage / PGraphics, you can do this from a smaller image using the texture() command with textureWrap() set to REPEAT:

• https://processing.org/reference/texture_.html
• https://processing.org/reference/textureWrap_.html