Improve movement

backend/src/helper/delta-time-calculator.ts

@@ -9,4 +9,12 @@ export class DeltaTimeCalculator {
 
     return seconds * 1000 + nanoSeconds / 1000 / 1000;
   }
+
+  public getDeltaTimeInMilliseconds(): number {
+    const deltaTime = process.hrtime(this.previousTime);
+
+    const [seconds, nanoSeconds] = deltaTime;
+
+    return seconds * 1000 + nanoSeconds / 1000 / 1000;
+  }
 }

backend/src/main.ts

@@ -8,6 +8,7 @@ import {
   TransportEvents,
   deserialize,
   StepCommand,
+  settings,
 } from 'shared';
 import './index.html';
 import { Player } from './players/player';
@@ -30,8 +31,9 @@ createDungeon(objects);
 
 objects.initialize();
 
-const app = express();
+let players: Array<Player> = [];
 
+const app = express();
 const deltaTimeCalculator = new DeltaTimeCalculator();
 
 app.use(
@@ -60,6 +62,7 @@ app.get('/', function (req, res) {
 io.on('connection', (socket: SocketIO.Socket) => {
   socket.on(TransportEvents.PlayerJoining, () => {
     const player = new Player(objects, socket);
+    players.push(player);
     socket.on(TransportEvents.PlayerToServer, (json: string) => {
       const command = deserialize(json);
       player.sendCommand(command);
@@ -67,14 +70,13 @@ io.on('connection', (socket: SocketIO.Socket) => {
 
     socket.on('disconnect', () => {
       player.destroy();
+      players = players.filter((p) => p !== player);
     });
   });
 
   socket.on('join', (room_name: string) => {
     socket.join(room_name);
   });
-
-  //socket.on('disconnect', () => {});
 });
 
 server.listen(port, () => {
@@ -86,8 +88,15 @@ const handlePhysics = () => {
   const step = new StepCommand(delta);
 
   objects.sendCommand(step);
+  players.forEach((p) => p.sendCommand(step));
 
-  setTimeout(handlePhysics, 5);
+  const physicsDelta = deltaTimeCalculator.getDeltaTimeInMilliseconds();
+  const sleepTime = settings.targetPhysicsDeltaTimeInMilliseconds - physicsDelta;
+  if (sleepTime >= settings.minPhysicsSleepTime) {
+    setTimeout(handlePhysics, sleepTime);
+  } else {
+    setImmediate(handlePhysics);
+  }
 };
 
 handlePhysics();

backend/src/objects/character-physical.ts

@@ -7,10 +7,9 @@ import {
   CommandExecutors,
   MoveActionCommand,
   serializesTo,
+  clamp,
 } from 'shared';
-
 import { ImmutableBoundingBox } from '../physics/bounding-boxes/immutable-bounding-box';
-
 import { CirclePhysical } from './circle-physical';
 import { Physical } from '../physics/physical';
 import { PhysicalContainer } from '../physics/containers/physical-container';
@@ -21,6 +20,8 @@ export class CharacterPhysical extends CharacterBase implements Physical {
   public readonly isInverted = false;
   public readonly canMove = true;
 
+  private jumpEnergyLeft = settings.defaultJumpEnergy;
+
   public head: CirclePhysical;
   public leftFoot: CirclePhysical;
   public rightFoot: CirclePhysical;
@@ -37,27 +38,25 @@ export class CharacterPhysical extends CharacterBase implements Physical {
   private static readonly rightFootOffset = vec2.fromValues(20, -10);
 
   constructor(private readonly container: PhysicalContainer) {
-    super(
-      id(),
-      new CirclePhysical(vec2.clone(CharacterPhysical.headOffset), 50, null, container),
-      new CirclePhysical(
-        vec2.clone(CharacterPhysical.leftFootOffset),
-        20,
-        null,
-        container,
-      ),
-      new CirclePhysical(
-        vec2.clone(CharacterPhysical.rightFootOffset),
-        20,
-        null,
-        container,
-      ),
+    super(id(), undefined, undefined, undefined);
+    this.head = new CirclePhysical(
+      vec2.clone(CharacterPhysical.headOffset),
+      50,
+      this,
+      container,
+    );
+    this.leftFoot = new CirclePhysical(
+      vec2.clone(CharacterPhysical.leftFootOffset),
+      20,
+      this,
+      container,
+    );
+    this.rightFoot = new CirclePhysical(
+      vec2.clone(CharacterPhysical.rightFootOffset),
+      20,
+      this,
+      container,
     );
-
-    this.head.owner = this;
-    this.leftFoot.owner = this;
-    this.rightFoot.owner = this;
-
     container.addObject(this.head);
     container.addObject(this.leftFoot);
     container.addObject(this.rightFoot);
@@ -77,9 +76,14 @@ export class CharacterPhysical extends CharacterBase implements Physical {
     return this;
   }
 
-  // todo
-  public distance(_: vec2): number {
-    return 0;
+  public distance(target: vec2): number {
+    return (
+      Math.min(
+        this.head.distance(target),
+        this.leftFoot.distance(target),
+        this.rightFoot.distance(target),
+      ) - 20
+    );
   }
 
   private sumAndResetMovementActions(): vec2 {
@@ -102,15 +106,32 @@ export class CharacterPhysical extends CharacterBase implements Physical {
   public step(c: StepCommand) {
     const deltaTime = c.deltaTimeInMiliseconds;
 
+    this.head.applyForce(settings.gravitationalForce, deltaTime);
+    this.leftFoot.applyForce(settings.gravitationalForce, deltaTime);
+    this.rightFoot.applyForce(settings.gravitationalForce, deltaTime);
+
     const movementForce = this.sumAndResetMovementActions();
-    if (!this.leftFoot.isAirborne || !this.rightFoot.isAirborne) {
-      movementForce.y = 0;
+
+    const isAirborne = this.leftFoot.isAirborne && this.rightFoot.isAirborne;
+    if (isAirborne) {
+      this.jumpEnergyLeft -= deltaTime;
+    } else {
+      this.jumpEnergyLeft = settings.defaultJumpEnergy;
     }
+    const xMax = deltaTime * settings.maxAccelerationX;
+    const yMax = this.jumpEnergyLeft > 0 ? deltaTime * settings.maxAccelerationY : 0;
+
+    vec2.set(
+      movementForce,
+      clamp(movementForce.x, -xMax, xMax),
+      clamp(movementForce.y, -yMax, yMax),
+    );
 
     this.head.applyForce(movementForce, deltaTime);
-    this.head.applyForce(settings.gravitationalForce, deltaTime);
+    this.leftFoot.applyForce(movementForce, deltaTime);
+    this.rightFoot.applyForce(movementForce, deltaTime);
 
-    const bodyCenter = vec2.sub(
+    const bodyCenter = vec2.subtract(
       vec2.create(),
       this.head.center,
       CharacterPhysical.headOffset,
@@ -127,38 +148,35 @@ export class CharacterPhysical extends CharacterBase implements Physical {
       CharacterPhysical.rightFootOffset,
     );
 
-    const leftFootDelta = vec2.sub(vec2.create(), this.leftFoot.center, leftFootPositon);
-    const rightFootDelta = vec2.sub(
+    const leftFootDelta = vec2.subtract(
+      vec2.create(),
+      this.leftFoot.center,
+      leftFootPositon,
+    );
+
+    const rightFootDelta = vec2.subtract(
       vec2.create(),
       this.rightFoot.center,
       rightFootPositon,
     );
 
-    vec2.scale(leftFootDelta, leftFootDelta, 0.0006);
-    vec2.scale(rightFootDelta, rightFootDelta, 0.0006);
+    if (vec2.squaredLength(leftFootDelta) > 0) {
+      vec2.scale(leftFootDelta, leftFootDelta, 0.001);
+      this.head.applyForce(leftFootDelta, deltaTime);
+      vec2.scale(leftFootDelta, leftFootDelta, -4);
+      this.leftFoot.applyForce(leftFootDelta, deltaTime);
+    }
 
-    this.head.applyForce(leftFootDelta, deltaTime);
-    this.head.applyForce(rightFootDelta, deltaTime);
-
-    vec2.scale(leftFootDelta, leftFootDelta, -0.5);
-    vec2.scale(rightFootDelta, rightFootDelta, -0.5);
-
-    this.leftFoot.applyForce(movementForce, deltaTime);
-    this.rightFoot.applyForce(movementForce, deltaTime);
-    this.leftFoot.applyForce(leftFootDelta, deltaTime);
-    this.rightFoot.applyForce(rightFootDelta, deltaTime);
-    this.leftFoot.applyForce(settings.gravitationalForce, deltaTime);
-    this.rightFoot.applyForce(settings.gravitationalForce, deltaTime);
+    if (vec2.squaredLength(rightFootDelta) > 0) {
+      vec2.scale(rightFootDelta, rightFootDelta, 0.001);
+      this.head.applyForce(rightFootDelta, deltaTime);
+      vec2.scale(rightFootDelta, rightFootDelta, -4);
+      this.rightFoot.applyForce(rightFootDelta, deltaTime);
+    }
 
     this.head.step(deltaTime);
     this.leftFoot.step(deltaTime);
     this.rightFoot.step(deltaTime);
-
-    /*this.flashlight.center = vec2.add(
-      vec2.create(),
-      this.head.center,
-      vec2.fromValues(0, 0)
-    );*/
   }
 
   public destroy() {

backend/src/objects/circle-physical.ts

@@ -1,13 +1,5 @@
 import { vec2 } from 'gl-matrix';
-import {
-  Circle,
-  clamp,
-  CommandExecutors,
-  GameObject,
-  serializesTo,
-  settings,
-  StepCommand,
-} from 'shared';
+import { Circle, clamp, GameObject, serializesTo, settings } from 'shared';
 import { Physical } from '../physics/physical';
 
 import { BoundingBox } from '../physics/bounding-boxes/bounding-box';
@@ -22,17 +14,12 @@ export class CirclePhysical implements Circle, Physical {
   readonly canMove = true;
 
   private _isAirborne = true;
-
   private velocity = vec2.create();
 
   public get isAirborne(): boolean {
     return this._isAirborne;
   }
 
-  protected commandExecutors: CommandExecutors = {
-    [StepCommand.type]: this.step.bind(this),
-  };
-
   private _boundingBox: BoundingBox;
 
   constructor(
@@ -117,7 +104,7 @@ export class CirclePhysical implements Circle, Physical {
     vec2.set(
       this.velocity,
       clamp(this.velocity.x, -settings.maxVelocityX, settings.maxVelocityX),
-      clamp(this.velocity.y, -settings.maxVelocityY, settings.maxVelocityY),
+      this.velocity.y,
     );
   }
 
@@ -140,7 +127,7 @@ export class CirclePhysical implements Circle, Physical {
     let wasHit = false;
 
     for (let i = 0; i < stepCount; i++) {
-      const { tangent, hitSurface } = moveCircle(
+      const { normal, tangent, hitSurface } = moveCircle(
         this,
         distance,
         this.container.findIntersecting(this.boundingBox),
@@ -149,10 +136,9 @@ export class CirclePhysical implements Circle, Physical {
         vec2.scale(this.velocity, tangent!, vec2.dot(tangent!, this.velocity));
         wasHit = true;
       }
-
-      this._isAirborne = hitSurface;
     }
 
+    this._isAirborne = !wasHit;
     return wasHit;
   }
 

backend/src/players/player.ts

@@ -1,4 +1,3 @@
-import { vec2 } from 'gl-matrix';
 import {
   CommandExecutors,
   CommandReceiver,
@@ -10,6 +9,7 @@ import {
   SetViewAreaActionCommand,
   TransportEvents,
   UpdateObjectsCommand,
+  StepCommand,
 } from 'shared';
 import { CharacterPhysical } from '../objects/character-physical';
 
@@ -18,18 +18,15 @@ import { PhysicalContainer } from '../physics/containers/physical-container';
 import { Physical } from '../physics/physical';
 
 export class Player extends CommandReceiver {
-  public isActive = true;
-
   private character: CharacterPhysical;
 
   private objectsPreviouslyInViewArea: Array<Physical> = [];
   private objectsInViewArea: Array<Physical> = [];
 
   protected commandExecutors: CommandExecutors = {
+    [StepCommand.type]: this.sendObjects.bind(this),
     [SetViewAreaActionCommand.type]: this.setViewArea.bind(this),
     [MoveActionCommand.type]: (c: MoveActionCommand) => {
-      vec2.normalize(c.delta, c.delta);
-      vec2.scale(c.delta, c.delta, 15);
       this.character.sendCommand(c);
     },
   };
@@ -54,7 +51,7 @@ export class Player extends CommandReceiver {
   }
 
   public setViewArea(c: SetViewAreaActionCommand) {
-    const viewArea = new BoundingBox(null);
+    const viewArea = new BoundingBox();
     viewArea.topLeft = c.viewArea.topLeft;
     viewArea.size = c.viewArea.size;
 
@@ -103,15 +100,9 @@ export class Player extends CommandReceiver {
         ]),
       ),
     );
-
-    if (this.isActive) {
-      //setImmediate(this.sendObjects.bind(this));
-      setTimeout(this.sendObjects.bind(this), 5);
-    }
   }
 
   public destroy() {
-    this.isActive = false;
     this.character.destroy();
     this.objects.removeObject(this.character);
   }

backend/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "outDir": "lib",
+    "sourceMap": true,
+    "declaration": true,
+    "declarationMap": true,
+    "target": "es2015",
+    "esModuleInterop": true,
+    "strict": true,
+    "experimentalDecorators": true,
+    "downlevelIteration": true,
+    "moduleResolution": "Node",
+    "module": "es6",
+    "composite": true,
+    "lib": ["dom", "es2017"]
+  }
+}