Game Shakes

[ConnorLee]

I'm relatively new to C++ and coding in general so I'm trying to make a basic Snake game to improve, I have a version of it working using ASCII characters instead of real graphics so I thought I would try SFML to make it look better. This is the code I wrote that uses SFML:

void Board::printBoard(sf::RenderWindow& window) {
        for (int y = 0; y < Board::sizeOfBoardY; y++) {
                for (int x = 0; x< Board::sizeOfBoardX; x++) {
                        //window.clear();
                        if (board[x][y] == 5) {
                                sf::RectangleShape rectangle;
                                rectangle.setSize(sf::Vector2f(10, 10));
                                rectangle.setFillColor(sf::Color::Red);
                                rectangle.setPosition(x * 10, y * 10);
                                window.draw(rectangle);
                        }
                        else if (board[x][y] == 0) {
                                sf::RectangleShape rectangle;
                                rectangle.setSize(sf::Vector2f(10, 10));
                                rectangle.setFillColor(sf::Color::White);
                                rectangle.setPosition(x * 10, y * 10);
                                window.draw(rectangle);
                        }
                        else if (board[x][y] == 9) {
                                sf::RectangleShape rectangle;
                                rectangle.setSize(sf::Vector2f(10, 10));
                                rectangle.setFillColor(sf::Color::Black);
                                rectangle.setPosition(x * 10, y * 10);
                                window.draw(rectangle);
                        }
                        else {
                                sf::RectangleShape rectangle;
                                rectangle.setSize(sf::Vector2f(10, 10));
                                rectangle.setFillColor(sf::Color::Green);
                                rectangle.setPosition(x * 10, y * 10);
                                window.draw(rectangle);
                        }
                        window.display();
                }
        }
}

It should produce a square with a black border and a white center, that you can move the snake around in and get the little red dots to grow the snake. However at the moment there are black lines appearing in the inbetween the white:

http://tinypic.com/view.php?pic=zlvp10&s=8#.U8_GS-kg9jE

The whole thing also shakes within the window and I cant figure out why, link to video of shaking below:



 Any help would be greatly appreciated,

Thanks.

[zmertens]

I know window.clear() will paint the render window black (the absence of all color or sf::Color(0, 0, 0, 255)). So you could just let the window clear and then just draw the snake and food on top of the black screen instead of manually drawing black rectangles.

As far as the shaking, I think it the grid gets drawn once with a white rect on the far left and then the offset changes by whatever offset constant is being used and the board is shifted by that offset. I couldn't find where in the code that could be happening though.

[Hapax]

I concur. Definitely uncomment that window.clear(); line but put it before both loops. Take the window.display(); out of the loops too.
Remember:
clear,
draw, (everything)
display.

Technically, I believe these stripes are because of the double-buffering used. Every time you call display() - you do that after every square - it swaps the display with the buffer. You should only call display() after you have drawn everything to the buffer with draw().

[ConnorLee]

Thanks for the help! Both problems were caused by the display() being inside the loop. I read somewhere you didn't need the clear if you were using the entire screen each frame?

Looks much better

http://tinypic.com/r/es5dmt/8

Cheers!

[Laurent]

I read somewhere you didn't need the clear if you were using the entire screen each frame?

In the official tutorials. So it must be true

The clear() function just fills the render target with a background color. It doesn't do anything special related to the OpenGL context, like display() does.