SFML - Weird RenderTexture behaviour when resizing window - c++

Question

I am currently trying to recreate Chess in SFML. Generating the board normally works as intended but when I am resizing the window I get weird white borders.
Before Resize:
After Resize:
It looks like the view is not aligned with the window properly so I think my problem is not in the board generation but how I am handling resizes. I thought manually updating the window view would help but it only ensured that the squares don't get streched. The border issue remains however so now I am quite clueless as to how I could fix this problem.
Board.h:
#pragma once
#include <SFML/Graphics.hpp>
class Board
{
public:
void createBoard(sf::Vector2u windowSize);
void drawBoard(sf::RenderWindow& window) const;
private:
sf::RenderTexture board;
sf::Color lightColor = sf::Color(159, 144, 176);
sf::Color darkColor = sf::Color(125, 74, 141);
sf::Color backColor = sf::Color(32, 31, 32);
};
Board.cpp:
#include <SFML/Graphics.hpp>
#include "Board.h"
void Board::createBoard(sf::Vector2u windowSize)
{
const float xOffset = static_cast<float>(windowSize.x - windowSize.y) / 2.f;
const float squareSize = static_cast<float>(windowSize.y) / 8.f;
board.create(windowSize.x, windowSize.y);
board.clear(backColor);
for (int i = 0; i < 8; i++) {
for (int j = 0; j < 8; j++) {
sf::RectangleShape currSquare({ squareSize, squareSize });
currSquare.setFillColor((i + j) % 2 ? lightColor : darkColor);
currSquare.setPosition(xOffset + static_cast<float>(i) * squareSize, (static_cast<float>(j) * squareSize));
board.draw(currSquare);
}
}
}
void Board::drawBoard(sf::RenderWindow& window) const
{
window.draw(sf::Sprite(board.getTexture()));
}
main.cpp:
#include <SFML/Graphics.hpp>
#include "Board.h"
int main()
{
sf::RenderWindow window(sf::VideoMode(500, 300), "Chess");
sf::Event event;
sf::View view = window.getDefaultView();
Board board;
board.createBoard(window.getSize());
while (window.isOpen()) {
while (window.pollEvent(event)) {
if (event.type == sf::Event::Closed) {
window.close();
}
else if (event.type == sf::Event::Resized) {
view.setSize({ static_cast<float>(event.size.width), static_cast<float>(event.size.height) });
window.setView(view);
board.createBoard({ event.size.width, event.size.height });
}
}
window.clear(sf::Color::White);
board.drawBoard(window);
window.display();
}
return 0;
}
Does anyone know how I could fix this problem?

Answer 1

The problem is that you don't only need to resize the view, but also recenter it. As right now you are not doing it, the center remains where the smaller board was and the bigger view takes a chunk from the outside in the top left corner.
So just change your code like this:
...
else if (event.type == sf::Event::Resized) {
float w = static_cast<float>(event.size.width);
float h = static_cast<float>(event.size.height);
view.setSize({w , h});
view.setCenter({w/2.f , h/2.f}); // <----- !
window.setView(view);
board.createBoard({ event.size.width, event.size.height });
}
...