SFML community forums

Help => Graphics => Topic started by: phisn on May 15, 2019, 08:34:09 pm

Title: Drawing a Grid
Post by: phisn on May 15, 2019, 08:34:09 pm

In my project I need to have a "moveable" and "scaleable" grid. In the past I have implemented it using a Image create at runtime at initialization and used the "repeat - feature" from the texture class. But using a Image with scales and offsets results in strange behaviour and cuts flexibility.

How could I represent such a infinite structure with vertexes (preferably Vertexbuffer)?

[How the grid looks like]

+ + + + + + + + + +
+ + + + + + + + + +
+ + + + + + + + + +
+ + + + + + + + + +

Title: Re: Drawing a Grid
Post by: phisn on May 15, 2019, 09:42:30 pm

A important note, the spaces between the pluses in the example of the grid are important and the reason for this question. Without them the solution would be obvious.

Title: Re: Drawing a Grid
Post by: Hapax on May 15, 2019, 10:48:33 pm

I was going to suggest using lines primitive for horizontal and vertical lines but your follow-up post makes it unclear for what exactly you are aiming.

Title: Re: Drawing a Grid
Post by: Elias Daler on May 16, 2019, 03:32:25 pm

Use sf::VertexArray (sf::Lines) version. Generate a lot of such "pluses" (for example, 100x100 pluses)
Then, you can just move it along the view to give illusion of it being "infinite".
When you zoom out too much, just don't draw anything, it wouldn't be seen anyway.

Title: Re: Drawing a Grid
Post by: Elias Daler on May 16, 2019, 03:38:45 pm

In my game I have a grid which is drawn like this:

void LevelEditor::drawGrid(sf::RenderTarget& target) const
{
    const auto viewRect = sfe::getViewRect(target.getView());
    const auto viewSize = mh::getSize(viewRect);

    if (viewSize.x < 8000.f && viewSize.y < 8000.f) {
        const auto tileWorldSize = static_cast<float>(Tile::Size);
        sf::RenderStates renderStates;
        renderStates.transform.translate(mh::floor(mh::getTopLeftCorner(viewRect) / tileWorldSize) * tileWorldSize);

        target.draw(gridVertexArray, renderStates);
    }
}
 

gridVertexArray is a grid of 500x500 cells. Should be the same with "pluses"
(obviously, there's quite a few helper functions there, but it's easy to guess what they do)