SFML render (draw) order

Why is the rendering order different from what I expect it to be?

<!-- language: c++ -->

window.draw(cell);
window.draw(player);

Doing this, player should be rendered on top of any cell. This is what I get though (cells below the line marked are rendered on top of player) – why?:

<img src="https://i.stack.imgur.com/jMNWS.png" width="250" />
<img src="https://i.stack.imgur.com/i640u.png" width="250" />

<p>
</p>

Minimal reproducible example:

<!-- language: c++ -->

#include <SFML/Graphics.hpp>
int main() {
sf::RenderWindow window(sf::VideoMode(1280, 960), "Sample");
sf::Texture texture; texture.loadFromFile("assets/images/player.png");
sf::Sprite sprite(texture);
int **map = new int *[3]{new int[3]{0, 0, 0}, new int[3]{0, 0, 0}, new int[3]{0, 0, 7}};
struct Entity { int x, y; } entity{};
while (window.isOpen()) {
for (auto event = sf::Event(); window.pollEvent(event);) {
std::swap(map[entity.y][entity.x],map[entity.y - (event.type == sf::Event::KeyPressed && event.key.code == sf::Keyboard::Up ? 1 : 0)][entity.x - (event.type == sf::Event::KeyPressed && event.key.code == sf::Keyboard::Left ? 1 : 0)]);
}
window.clear(sf::Color::Black);
float cell_size = 960.f / 19;
for (int y = 0; y < 19; ++y) {
for (int x = 0; x < 19; ++x) {
sf::RectangleShape cell(sf::Vector2f(cell_size, cell_size));
if (x >= 3 || y >= 3) {
continue;
}
switch (map[y][x]) {
case 0:
cell.setPosition(float(x) * cell_size + float(1280 - 19 * cell_size) / 2,float(y) * cell_size);
window.draw(cell);
break;
case 7:
sprite.setPosition(float(x) * cell_size, float(y) * cell_size);
entity = {x, y};
window.draw(sprite);
break;
}
}
}
window.display();
}
}

SFML (Simple and Fast Multimedia Library) should respect the order in which you draw your objects to the window. Meaning, the object that is drawn last will appear on top of all others.

But that is not what I see in your code, specifically the part where all the drawing to the window happens:

for (int y = 0; y < 19; ++y) {
    for (int x = 0; x < 19; ++x) {
        //...

        switch (map[y][x]) {
            case 0:
                //...
                window.draw(cell);
                break;

            case 7:
                //...
                window.draw(sprite);
                break;
        }

    }
}

In your case, when a 7 is encountered, the sprite is drawn, but the loops do not stop there. If there are any cells (with value 0) left in the current row after the sprite has been drawn, they will be drawn after the sprite, making them appear on top of the sprite.

This is why some cells appear on top of the player sprite in your game, even though you might expect the player to always be on top.

So the issue is that you are drawing both the cells and the player in the same nested loops.

One way to fix this issue is to separate the drawing of the player from the cells. You can store the player's position when you encounter a 7 (in playerPosition), and then draw the player after all the cells have been drawn.

Something like:

//...

sf::Vector2f playerPosition;

window.clear(sf::Color::Black);

float cell_size = 960.f / 19;
for (int y = 0; y < 19; ++y) {
    for (int x = 0; x < 19; ++x) {
        sf::RectangleShape cell(sf::Vector2f(cell_size, cell_size));

        if (x >= 3 || y >= 3) {
            continue;
        }

        switch (map[y][x]) {
            case 0:
                cell.setPosition(float(x) * cell_size + float(1280 - 19 * cell_size) / 2,float(y) * cell_size);
                window.draw(cell);
                break;

            case 7:
                playerPosition = sf::Vector2f(float(x) * cell_size, float(y) * cell_size);
                entity = {x, y};
                break;
        }

    }
}

// Draw the player after all cells have been drawn
sprite.setPosition(playerPosition);
window.draw(sprite);

window.display();

//...

This way, the player will always be drawn last and therefore will appear on top of all cells.