Better interpolation.

[Hezzy002]

For some simple time-based interpolation I didn't like the way move() worked (It's not time based, it's updated based on when you send the request), and this method had so many issues and was grossly overcomplicated, so I wrote my own.

Anyway, just do your movement as normal on the server and do this at the end of your timeout loop:

PHP Code:

this.attr[1] = "x" @ this.newX;
this.attr[2] = "x" @ this.newY;
this.attr[5] = (this.attr[5] + 1)%200; 


I wouldn't suggest writing anything to this.x directly, because if this.x updates, it'll send it to the client and might cause the NPC to jump around on the client. I don't think there's a way around this, at least I haven't thought of it.

In the clientside portion, add this. The lerpBufferSize value dictates how much movement information should be buffered as the server sends it over, and then it's "played back" as if it was a movie. The best way I can relate this is as if you were streaming a video on YouTube and on your **** connection didn't pause it to buffer at the beginning, and instead it has to pause every few seconds while waiting for the server. Similar concept, this smooths it out.

PHP Code:

//#CLIENTSIDE
function onCreated() {
  this.lerpBufferSize = .3;
  this.firstLerp = true;
  onTimeOut();
}

function onTimeOut() {
  setTimer(.05);
  
  for (i=0;i<this.frames.size()-1;i++) {
    f = this.frames[i];
    nf = this.frames[i+1];
    if (timevar2 >= f.time) {
      if (timevar2 <= nf.time) {
        if (!this.firstLerp) {
          temp.lerp = (timevar2-f.time)/(nf.time-f.time);
      
          this.x = linearInterpolateValue(f.x, nf.x, temp.lerp);
          this.y = linearInterpolateValue(f.y, nf.y, temp.lerp);
        }
      } else {
        this.firstLerp = false;
        f.delete = true;
      }
    }
  }
  
  for (i=0;i<this.frames.size();i++) {
    if (this.frames[i].delete) {
      this.frames.delete(i);
      i=0;
    }
  }
  
  if (this.attr[5] != this.lupdate) {
    temp.newFrame = new TStaticVar();
    
    temp.newFrame.x = this.attr[1].substring(1);
    temp.newFrame.y = this.attr[2].substring(1);
    temp.newFrame.time = timevar2 + ((this.firstLerp) ? 0 : this.lerpBufferSize);
    
    this.frames.add(temp.newFrame);
    
    this.lupdate = this.attr[5];
  }
}

function linearInterpolateValue(temp.ov, temp.nv, temp.l) {
  return (temp.ov*(1-temp.l)+temp.nv*temp.l);
} 


Here's a video demonstrating it real quickly, I toggle it frequently throughout the video. The NPC is just moving around with a .5 timeout on the server using cos/sin, and the interpolation smooths it out to 20 FPS even though the script is running at 2 FPS on the server. Save bandwidth, time, and money! Even if it was running at a .1 timeout on the server, it'd still look really crappy. Interpolation keeps everybody synchronized without looking like garbage.



Thanks! If anybody knows a way to force floating point accuracy into an attr[] without "casting" it as a string, do tell.