How to fix time step in box2d so that sprites move smoothly? - c++

Question

The following is my timestep:
void step(float dt){
static double UPDATE_INTERVAL = 1.0f/60.0f;
static double MAX_CYCLES_PER_FRAME = 5;
static double timeAccumulator = 0;
timeAccumulator += dt;
if (timeAccumulator > (MAX_CYCLES_PER_FRAME * UPDATE_INTERVAL))
{
timeAccumulator = UPDATE_INTERVAL;
}
int32 velocityIterations = 3;
int32 positionIterations = 2;
while (timeAccumulator >= UPDATE_INTERVAL)
{
timeAccumulator -= UPDATE_INTERVAL;
this->world->Step(UPDATE_INTERVAL,
velocityIterations, positionIterations);
this->world->ClearForces();
}
}
While the game as such works great regardless of the framerate, it causes sprites to "tremble", or "stutter" even when the framerate is 60fps!
I think this is because each frame the sprite moves by a different amount, because each frame the number of times the while loop executes is different.
What is a better way to fix the time step ? I have read a number of articles on fixing the time step, and am very confused. The above "works" except for the stutter.
EDIT: Just to clarify, the tremble is very small! People with poor eyesight don't notice it, but it makes a game look very low budget if you look carefully. It makes the game look not smooth.

Answer 1

you don't clamp your timeAccumulator correctly:
timeAccumulator += dt;
if (timeAccumulator > (MAX_CYCLES_PER_FRAME * UPDATE_INTERVAL))
{
timeAccumulator = UPDATE_INTERVAL;
}
should be
timeAccumulator = std::min(dt + timeAccumulator, MAX_CYCLES_PER_FRAME * UPDATE_INTERVAL);
Concerning the stepping: you'll need to interpolate the last full step with the next full step according to the left-over in timeAccumulator. There was a tutorial on this by Allan Bishop though the original site is no longer reachable (blog.allanbishop.com). Here's how his smooth step (only that last one with the fractional step) looks like:
// for the remaining timeAccumulator < UPDATE_INTERVAL
fixedTimestepAccumulatorRatio = timeAccumulator / UPDATE_INTERVAL;
private function smoothStates():void
{
const oneMinusRatio:Number = 1.0 - fixedTimestepAccumulatorRatio;
//Makes it easier to wrap up the Box2D body in another object so we can track other variables.
for each (var body:Body in bodies)
{
var box2Dbody = body.box2DBody;
texture.position.x = fixedTimestepAccumulatorRatio * box2Dbody.GetPosition().x + oneMinusRatio * body.previousPosition.x;
texture.position.y = fixedTimestepAccumulatorRatio * box2Dbody.GetPosition().y + oneMinusRatio * body.previousPosition.y;
texture.rotation = box2Dbody.GetAngle() * fixedTimestepAccumulatorRatio + oneMinusRatio * body.previousAngle;
}
}