Trying to implement DeWITTER's game loop.

[Ante]

Hello. I'm trying to get the game loop from http://www.koonsolo.com/news/dewitters-gameloop/ to work on my project. The code works fine, however the interpolated object will stutter slightly while the non-interpolated object runs very smooth. I can't seem to figure out why and I was wondering if anyone could help me out with this.

Here's my code:

#include <SFML/Graphics.hpp>
#include <iostream>

const int TICKS_PER_SECOND = 25;
const int SKIP_TICKS = 1000 / TICKS_PER_SECOND;
const int MAX_FRAMESKIP = 5;

//StateManager TargetState;

int main()
{
    sf::RenderWindow Window(sf::VideoMode(800,600,32), "Test", !sf::Style::Resize | sf::Style::Close);

    // Game loop variables
    sf::Clock ticker;
    sf::Int32 next_game_tick = ticker.getElapsedTime().asMilliseconds();
    int loops;
    float interpolation;

    //TargetState.changeState(MenuState::Instance(&Window));

    while(Window.isOpen()) {
        //TargetState.input();

        // Update the game
        loops = 0;
        while(ticker.getElapsedTime().asMilliseconds() > next_game_tick && loops < MAX_FRAMESKIP) {
            //TargetState.update();
            next_game_tick += SKIP_TICKS;
            loops++;
        }

        interpolation = float(ticker.getElapsedTime().asMilliseconds() + SKIP_TICKS - next_game_tick)
                        / float (SKIP_TICKS);

        Window.clear();

        //TargetState.draw(interpolation);

        sf::Font font;
        font.loadFromFile("arial.ttf");
        sf::Text test("###", font, 250);
        sf::Text test2("###", font, 250);

        static float lex = 0.0;

        test.setPosition(lex + interpolation, 0);
        test2.setPosition(lex , 200);
        lex += 0.05;

        Window.draw(test);
        Window.draw(test2);

        Window.display();
    }
    return 0;
}
 

As you can probably see the top "###" stutters a bit while the bottom "###" runs very smoothly.

[eXpl0it3r]

The big stutter comes from the fact, that you're reloading the font in every single loop iteration, which is quite a heavy operation. When you load it only once the stuttering is only minimal. I'm not quite sure what you're interpolation is doing and I don't really want to read the whole article, so maybe you could give a quick summary? What's the actual advantage over the one without + interpolate?

Anyways the problem probably is that you eventually can only display on integer coordinates (since 1px is the smallest resolution with an untouched view), thus moving between 0.0px and 1.0px well get rounded up or down and can sometimes lead to strange stuttering.

Here's the slightly modified code:

#include <SFML/Graphics.hpp>
#include <iostream>

const int TICKS_PER_SECOND = 25;
const int SKIP_TICKS = 1000 / TICKS_PER_SECOND;
const int MAX_FRAMESKIP = 5;

//StateManager TargetState;

int main()
{
    sf::RenderWindow Window(sf::VideoMode(800,600,32), "Test", !sf::Style::Resize | sf::Style::Close);

    // Game loop variables
    sf::Clock ticker;
    sf::Int32 next_game_tick = ticker.getElapsedTime().asMilliseconds();
    int loops;
    float interpolation;

    //TargetState.changeState(MenuState::Instance(&Window));

    sf::Font font;
    font.loadFromFile("arial.ttf");

    while(Window.isOpen()) {
        //TargetState.input();

        // Update the game
        loops = 0;
        while(ticker.getElapsedTime().asMilliseconds() > next_game_tick && loops < MAX_FRAMESKIP) {
            //TargetState.update();
            next_game_tick += SKIP_TICKS;
            ++loops;

            sf::Event event;
            while(Window.pollEvent(event))
            {
                if(event.type == sf::Event::Closed)
                    Window.close();
            }
        }

        interpolation = float(ticker.getElapsedTime().asMilliseconds() + SKIP_TICKS - next_game_tick)
                        / float (SKIP_TICKS);

        Window.clear();

        //TargetState.draw(interpolation);

        sf::Text test("###", font, 250);
        sf::Text test2("###", font, 250);

        static float lex = 0.0;

        test.setPosition(lex + interpolation, 0);
        test2.setPosition(lex , 200);
        lex += 0.05;

        Window.draw(test);
        Window.draw(test2);

        Window.display();
    }
    return 0;
}

[vivo]

You are adding the "lex" value to the interpolated one, whereas you should multiply the interpolated value with a constant value wich would represent a velocity factor.

view_position = position + (speed * interpolation)

for the bottom one, it's ok (and very smoothly) while your frame rate doen't suffer variations (your case).

view_position = position + "lex"(constant var: 0.05)

Also eXpl0it3r is right, no need to load the font at each frame

[Roose Bolton of the Dreadfort]

Question..

Why not just use

App.setFramerateLimit(60);
 

Whats the difference between using that and implementing this?

[mateandmetal]

Question..

Why not just use

App.setFramerateLimit(60);
 

Whats the difference between using that and implementing this?

Tally: by using setFramerateLimit, you are saying to your window: "Hey, dont draw more than x frames per second, please". With an implementation like this, you are not setting any limit on the FPS, you are just running the game (logic) at a fixed frame rate (in this case is 25 fps), and then using interpolation to smooth the animations.

I´m currently using the Fix Your Timestep! method.

[Roose Bolton of the Dreadfort]

Okay, but limiting framerate is an okay way to go about it?

[vivo]

Okay, but limiting framerate is an okay way to go about it?

if your framerate is always higher than the limit: yes

[mateandmetal]

For a very little game, its ok

For a bigger proyect, specially if you have a physics engine, you need to implement this kind of game loop control