This was the closest question on found here: Help with a Fast 2D Grid-Based world rendering technique

I'm doing a basic 2d grid where each box is filled with a texture pulled from a chipset. I'm doing this in JavaScript.

There are two ways I can imagine going about it:

  1. By Row / Col: iterate over every row and column, finding the texture for each block, then drawing it. The pros are that the 2d array iterates better (should be fast access in RAM), as does writing pixels to the canvas (should also still be pretty fresh in RAM).

  2. By Texture: organize the blocks by texture (heavy load once, up front), then draw each texture filling in every block it occupies. The pro here is that I'm not constantly loading up a new texture to draw for each step.

I'm pretty sure #2 is better. The loss for changing texture buffers over and over (all done on RAM) should be significantly worse than what is lost by iterating a relatively small array awkwardly (the world map blocks), or what's lost by jumping around the canvas.

Any insight on chosing between these two approaches is what I'm looking for.

  • 1
    \$\begingroup\$ This looks like a question you can answer by profiling. What have the results of your tests been so far? Did you run into an obstacle you need help overcoming? Also, have you considered using WebGL as a way to use the parallel rendering hardware to speed this up? \$\endgroup\$
    – DMGregory
    Commented Jan 18, 2021 at 3:06
  • \$\begingroup\$ I'm doing row / col, it's totally fine efficiency wise. I have definitely considered WebGL and intend to use it if this game gets far enough along. I'd have the same question for that situation... not sure how many texture buffers can be active at a time in GL code though. \$\endgroup\$
    – Seph Reed
    Commented Jan 18, 2021 at 3:10


You must log in to answer this question.

Browse other questions tagged .