Slower movement (Snake)

[MitjaHD]

I'm trying to create a snake game and I have  a shape 20x20 and I want to move it 20 units in some direction. However just typing +=20 obviously doesn't work because it's too fast. Could I fixed this using time? I don't know how, but it's important that it always moves exactly 20 units not less.

[Hapax]

Adding 20 to its position will move it 20 in the positive direction. If you perform this addition every frame, it will move it 20 every frame. If you have 30 frames per second, this is a movement of 600 per second, which is probably quite fast.
If you want it to move slower, modify the value by a smaller amount: adding 1 instead of 20 would move it approximately 30 per second, which is, of course, 20 times slower.

If you haven't limited your frame rate in some way, chances are you'll be getting hundreds or thousands of frames per second so the amount of movement would be a lot higher and therfore a lot faster. Different computers, devices or even situations can change the number of frames that one would actually experience so there should be some attempt to control movement independantly of the frames speed.
Try first limiting your framerate:

window.setFramerateLimit(30u);

That way you can have some sort of idea as to how much movement you will get.

You can also multiply the movement amount by the time passed for that frame. Easiest way is to use values for movement that you expect to happen per second and then multiply it by the number of seconds passed for that frame (it will almost always be a small or very small fraction of a second).

That then brings us to timesteps...

To have more control over how frame rates and time affect the updates in your program, you can implement a form of timestep. The simplest version of a time step is the approach above (multiplying by the frame's time - also called delta time). There are other, more involved versions that can allow other features, probably most notably that the update delta time can be fixed so can give more predictable results including accurate re-runs of identical events.

For more information on timesteps, you can read the article, Fix Your Timestep.

Also, after having a look through that article - and you don't want to implement it yourself - you can take a look at Kairos, a timing library that provides classes for time steps: Timestep and Timestep Lite.

[MitjaHD]

Yeah I'm actually moving it by setting the position each frame, I used a clock and elapsed time to control the speed at which the position is changed, probably not the best solution but it works.

if(elapsed.asSeconds()>0.1)
{
    glava.setPosition(x+=dir.x, y+=dir.y);
    //code....
}

 

I actually finished the whole snake (without collisons yet) but I had to put the code for adding tail inside this if statement, otherwise I would only have 1 tail since all of them would be set to the same position, probably because they were given a position each frame, unlike head/glava. Thanks for reply.

[Hapax]

The simplest option is the multiplication:

const float elapsedTime{ elapsed.asSeconds() };
glava.setPosition(x += (dir.x * elapsedTime), y += (dir.y * elapsedTime));