[SOLVED]Efficient ways to draw large grids?

[Elias Daler]

I have a level editor in my game and potentially maps may be pretty large. I want to draw grid overlay which shows borders for each tile. I realize that I must use VertexArray for grids, but as the map size gets large (e.g. more than 200x200 tiles), the size of VertexArray grows fast. And it doesn't make much sense to draw the entire grid when I only see some region of the map, so I would like to draw only the grid for tiles currently on the screen.

Any tips?

[Hapax]

Resize and recreate the vertex array for the borders that are in view.

How you decide which borders to draw can be the same decision for deciding which map cells to draw in a gridlike map.

e.g. If your map is showing (20,20) to (40,40) then only draw the borders in that range.

Which type of border? Single lines per edge? Use sf::PrimitiveType::Lines. Thick edges? Use sf::PrimitiveType::Quads or sf::PrimitiveType::Triangles.

I hope I understood correctly what you were asking.

[Laurent]

Why don't you just draw a grid which has the same size as the window? You just have to apply a small offset to align it on your actual tiles, depending on the current view.

[Elias Daler]

The problem is that I can zoom in and out, so the number of cells I have to draw will change.
But thinking about it and what Hapax said (I forgot about sf::PrimitiveType::Lines, thanks!)... My monitor is 1920x1080. When each cell is only one pixel, only 810x590 cells will fit on the screen. If I wanted to draw them all, I'd have to store 2 * 810 + 2 * 590 = 2800 vertices, which isn't that bad! I'll see if drawing that many vertices is okay in every frame (don't want to reallocate arrays when zoom level changes).

But I think if I'll notice slowdowns, I can just have two arrays: for horizontal and for vertical lines. So when I only need to draw 30x40 grid, I can just draw the grid using part of preallocated array of maximum allowed size.

[Elias Daler]

Seems like 500x500 grid is enough to draw grids on 1920x1080 monitor (the second picture is a part of 1920x1080 screenshot). At some zoom value I just don't draw the grid as it doesn't make much sense.

Thanks for suggestions! (Especially the one about moving the grid with camera, I didn't think about that. I'm transforming sf::RenderStates, not moving the grid, of course)

[Hapax]

Drawing the horizontal lines and the vertical lines separately will only result in an extra draw call. The same area is covered by both calls and the same number of vertices are still used. I'd say that all in one would be the better option.

If you're worried about reallocations, use a vector of vertices instead of a vertex array:
std::vector<sf::Vertex> vertices;
That way, you can reserve the size you need in advance. You can reserve and also "shrink to fit" (C++11) as needed.

Also, remember that the x position of the vertices for the horizontal lines can always be the edges of the window and similar for y position of vertical lines since your grid is constant. (originally, I thought you wanted each cell have the option of having its borders drawn)