interpolate player body parts

packages/client/src/lib/MyPlayer.ts

@@ -4,19 +4,19 @@ import { Player } from "./Player";
 export class MyPlayer extends Player {
   draw(): void {
     super.draw();
-    // const c = this.game.c;
-    // if (!c) return;
-    // // const playerHead = this.getHead();
-    // // if (playerHead) {
-    // //   const screenHead = worldToScreen(playerHead, this.game.camera);
-    // //   const screenCurPos = worldToScreen(this.game.cursor, this.game.camera);
-    // //   c.beginPath();
-    // //   c.moveTo(screenHead.x, screenHead.y);
-    // //   c.lineTo(screenCurPos.x, screenCurPos.y);
-    // //   c.fillStyle = "red";
-    // //   c.strokeStyle = "red";
-    // //   c.lineWidth = 2;
-    // //   c.stroke();
-    // // }
+    const c = this.game.c;
+    if (!c) return;
+    const playerHead = this.getHead();
+    if (playerHead) {
+      const screenHead = worldToScreen(playerHead, this.game.camera);
+      const screenCurPos = worldToScreen(this.game.cursor, this.game.camera);
+      c.beginPath();
+      c.moveTo(screenHead.x, screenHead.y);
+      c.lineTo(screenCurPos.x, screenCurPos.y);
+      c.fillStyle = "red";
+      c.strokeStyle = "red";
+      c.lineWidth = 2;
+      c.stroke();
+    }
   }
 }

packages/client/src/lib/Player.ts

@@ -4,19 +4,21 @@ import { Entity } from "./Entity";
 import { type Game } from "./Game";
 
 export class Player extends Entity {
-  body: Position[];
+  body: Position[]; // smoothed data
+  rawBody: Position[]; // raw data from server
   name: string;
   color: string;
 
   constructor(p: PlayerDTO, game: Game) {
     super(p.id, game);
     this.body = p.body;
+    this.rawBody = p.body;
     this.name = p.name;
     this.color = p.color;
   }
 
   update(p: PlayerDTO) {
-    this.body = p.body;
+    this.rawBody = p.body;
     this.name = p.name;
     this.color = p.color;
   }
@@ -25,6 +27,8 @@ export class Player extends Entity {
     const c = this.game.c;
     if (!c || this.body.length === 0) return;
 
+    this.interpolate();
+
     c.beginPath();
 
     let prevScreenBodyPart = worldToScreen(this.body[0]!, this.game.camera);
@@ -49,6 +53,33 @@ export class Player extends Entity {
     c.stroke();
   }
 
+  interpolate() {
+    let { body } = this;
+    const { rawBody } = this;
+
+    // remove extra body parts
+    if (body.length > rawBody.length)
+      body = body.slice(0, rawBody.length);
+
+    // add missing body parts
+    if (body.length < rawBody.length)
+      body = body.concat(rawBody.slice(body.length));
+
+    if (body.length !== rawBody.length)
+      throw new Error("Body length mismatch during interpolation");
+
+    // interpolate body parts
+    for (let i = 0; i < body.length; i++) {
+      const bodyPart = body[i]!;
+      const rawBodyPart = rawBody[i]!;
+
+      bodyPart.x += (rawBodyPart.x - bodyPart.x) * 0.1;
+      bodyPart.y += (rawBodyPart.y - bodyPart.y) * 0.1;
+    }
+    this.body = body;
+    this.rawBody = rawBody;
+  }
+
   getHead() {
     return this.body[0];
   }

packages/shared/src/constants.ts

@@ -1,16 +1,16 @@
 /**
  * The number of ticks per second.
  */
-export const TPS = 60;
+export const TPS = 10;
 
 /**
  * The speed at which the player moves when walking.
  */
-export const BASE_SPEED = 2;
+export const BASE_SPEED = 200 / TPS;
 /**
  * The speed at which the player moves when sprinting.
  */
-export const SPRINT_SPEED = 5;
+export const SPRINT_SPEED = 300 / TPS;
 
 /**
  * The radius of the player's head.