SFML Lag when moving rectangle on screen /Small stutters - c++

Question

whenever I move the rectangle on the screen, it seems to stutter at times. I have tried to reinstall SFML but it hasn't worked.
This is the code:
#include <SFML/Graphics.hpp>
int main()
{
sf::RenderWindow window(sf::VideoMode(800, 600), "This is the title");
window.setFramerateLimit(60);
sf::RectangleShape rect(sf::Vector2f(20, 20));
rect.setFillColor(sf::Color::Green);
rect.setPosition(sf::Vector2f(50, 50));
while (window.isOpen())
{
if (sf::Keyboard::isKeyPressed(sf::Keyboard::Up))
{
rect.move(0, -5);
}
if (sf::Keyboard::isKeyPressed(sf::Keyboard::Down))
{
rect.move(0, 5);
}
if (sf::Keyboard::isKeyPressed(sf::Keyboard::Left))
{
rect.move(-5, 0);
}
if (sf::Keyboard::isKeyPressed(sf::Keyboard::Right))
{
rect.move(5, 0);
}
sf::Event event;
while (window.pollEvent(event))
{
if (event.type == sf::Event::Closed)
{
window.close();
}
}
window.clear();
window.draw(rect);
window.display();
}
return 0;
}
These are my laptops specs:
coreM 6y30
intel HD 515
8Gb RAM
Windows 10
if anyone knows what the problem is, please help me.
thank you very much
henry

Answer 1

As per Jesper's comment, your time step has to be taken into account when doing the graphics. The time step is the time between the different frames. There are several ways to handle this. This page Jesper referred (Fix Your Timestep) summarizes them perfectly. It is kind of a reference.
I did a quick code adaptation to give you some guidance. Code is for Linux.
#include <SFML/Graphics.hpp>
#include <iostream>
int main(){
sf::RenderWindow window(sf::VideoMode(800, 600), "This is the title");
window.setFramerateLimit(60);
sf::RectangleShape rect(sf::Vector2f(20, 20));
rect.setFillColor(sf::Color::Green);
rect.setPosition(sf::Vector2f(50, 50));
// Timing
sf::Clock clock;
while (window.isOpen()){
// Update the delta time to measure movement accurately
sf::Time dt = clock.restart();
// Convert to seconds to do the maths
float dtAsSeconds = dt.asSeconds();
// For debuging, print the time to the terminal
// It illustrates the differences
std::cout << "Time step: " << dtAsSeconds << '\n';
// Calculate movement per dt
// Since the dt is a very small number,
// you have to multiply it with a large number to see faster movement
float movement = 250.0f * dtAsSeconds;
if (sf::Keyboard::isKeyPressed(sf::Keyboard::Up)){
rect.move(0, -movement);
}
if (sf::Keyboard::isKeyPressed(sf::Keyboard::Down)){
rect.move(0, movement);
}
if (sf::Keyboard::isKeyPressed(sf::Keyboard::Left)){
rect.move(-movement, 0);
}
if (sf::Keyboard::isKeyPressed(sf::Keyboard::Right)){
rect.move(movement, 0);
}
sf::Event event;
while (window.pollEvent(event)){
if (event.type == sf::Event::Closed){
window.close();
}
}
window.clear();
window.draw(rect);
window.display();
}
return 0;
}