From 37954e2ef12cae280ce1b71aac3eb87d70c12613 Mon Sep 17 00:00:00 2001 From: schmelczerandras Date: Thu, 8 Oct 2020 13:16:05 +0200 Subject: [PATCH] Improve multiplayer --- .devcontainer/devcontainer.json | 11 +- .gitattributes | 2 +- .../src/helper/get-time-in-milliseconds.ts | 5 + backend/src/main.ts | 22 +++ backend/src/map/create-dungeon.ts | 4 +- backend/src/objects/character-physical.ts | 146 +++++++++--------- backend/src/objects/circle-physical.ts | 26 ++-- backend/src/objects/spring.ts | 37 +++++ backend/src/physics/move-circle.ts | 3 +- backend/src/players/player.ts | 50 ++++-- backend/tsconfig.json | 17 -- declared.code-workspace | 21 --- .../commands/generators/keyboard-listener.ts | 6 +- .../commands/generators/touch-listener.ts | 34 ++-- frontend/src/scripts/game.ts | 64 ++++---- frontend/src/scripts/objects/camera.ts | 31 ++-- .../scripts/objects/game-object-container.ts | 7 +- frontend/tsconfig.json | 17 -- shared/src/commands/types/move-action.ts | 4 +- .../commands/types/set-aspect-ratio-action.ts | 13 ++ .../commands/types/set-view-area-action.ts | 14 -- shared/src/helper/calculate-view-area.ts | 22 +++ shared/src/helper/circle.ts | 4 + shared/src/main.ts | 5 +- shared/src/settings.ts | 16 +- shared/src/transport/identity.ts | 2 +- shared/src/transport/transport-events.ts | 2 + shared/tsconfig.json | 2 +- tsconfig.json | 1 - 29 files changed, 321 insertions(+), 267 deletions(-) create mode 100644 backend/src/helper/get-time-in-milliseconds.ts create mode 100644 backend/src/objects/spring.ts delete mode 100644 backend/tsconfig.json delete mode 100644 declared.code-workspace delete mode 100644 frontend/tsconfig.json create mode 100644 shared/src/commands/types/set-aspect-ratio-action.ts delete mode 100644 shared/src/commands/types/set-view-area-action.ts create mode 100644 shared/src/helper/calculate-view-area.ts diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json index 27b8503..1856878 100644 --- a/.devcontainer/devcontainer.json +++ b/.devcontainer/devcontainer.json @@ -12,7 +12,8 @@ "**/node_modules": true, "**/package-lock.json": true, "**/dist": true, - "**/lib": true + "**/lib": true, + "**/.firebase": true }, "editor.tabSize": 2, "editor.detectIndentation": false, @@ -42,10 +43,10 @@ "workspaceMount": "source=${localWorkspaceFolder},target=/workspace,type=bind,consistency=cached", "workspaceFolder": "/workspace", "mounts": [ - "source=decla-red-root-node_modules-static,target=/workspace/node_modules,type=volume", - "source=decla-red-frontend-node_modules-static,target=/workspace/frontend/node_modules,type=volume", - "source=decla-red-backend-node_modules-static,target=/workspace/backend/node_modules,type=volume", - "source=decla-red-shared-node_modules-static,target=/workspace/shared/node_modules,type=volume" + "source=decla-red-root-node_modules-volume,target=/workspace/node_modules,type=volume", + "source=decla-red-frontend-node_modules-volume,target=/workspace/frontend/node_modules,type=volume", + "source=decla-red-backend-node_modules-volume,target=/workspace/backend/node_modules,type=volume", + "source=decla-red-shared-node_modules-volume,target=/workspace/shared/node_modules,type=volume" ], "forwardPorts": [3000, 8080], "postCreateCommand": "chown node:node ./**/node_modules && npm install && npm run initialize && npm run build" diff --git a/.gitattributes b/.gitattributes index 1b186de..32bea41 100644 --- a/.gitattributes +++ b/.gitattributes @@ -1,2 +1,2 @@ *.psd filter=lfs diff=lfs merge=lfs -text -* text=auto +* text=auto eol=lf diff --git a/backend/src/helper/get-time-in-milliseconds.ts b/backend/src/helper/get-time-in-milliseconds.ts new file mode 100644 index 0000000..3ff0437 --- /dev/null +++ b/backend/src/helper/get-time-in-milliseconds.ts @@ -0,0 +1,5 @@ +export const getTimeInMilliseconds = (): number => { + const [seconds, nanoSeconds] = process.hrtime(); + + return seconds * 1000 + nanoSeconds / 1000 / 1000; +}; diff --git a/backend/src/main.ts b/backend/src/main.ts index 0d1c62c..be08247 100644 --- a/backend/src/main.ts +++ b/backend/src/main.ts @@ -83,14 +83,36 @@ server.listen(port, () => { console.log(`server started at http://localhost:${port}`); }); +let deltas: Array = []; + const handlePhysics = () => { const delta = deltaTimeCalculator.getNextDeltaTimeInMilliseconds(); + deltas.push(delta); const step = new StepCommand(delta); + if (deltas.length > 100) { + deltas.sort((a, b) => a - b); + console.log(`Median physics time: ${deltas[50].toFixed(2)} ms`); + console.log( + `Memory used: ${(process.memoryUsage().rss / 1024 / 1024).toFixed(2)} MB`, + ); + deltas = []; + console.log(players.map((p) => p.latency)); + } + + if (deltas.length > 100) { + deltas.sort((a, b) => a - b); + console.log(`Median physics time: ${deltas[50].toFixed(2)} ms`); + console.log( + `Memory used: ${(process.memoryUsage().rss / 1024 / 1024).toFixed(2)} MB`, + ); + deltas = []; + } objects.sendCommand(step); players.forEach((p) => p.sendCommand(step)); const physicsDelta = deltaTimeCalculator.getDeltaTimeInMilliseconds(); + deltas.push(physicsDelta); const sleepTime = settings.targetPhysicsDeltaTimeInMilliseconds - physicsDelta; if (sleepTime >= settings.minPhysicsSleepTime) { setTimeout(handlePhysics, sleepTime); diff --git a/backend/src/map/create-dungeon.ts b/backend/src/map/create-dungeon.ts index 237831b..f654b71 100644 --- a/backend/src/map/create-dungeon.ts +++ b/backend/src/map/create-dungeon.ts @@ -10,8 +10,8 @@ export const createDungeon = (objects: PhysicalContainer) => { let tunnelsCountSinceLastLight = 0; - for (let i = 0; i < 500000; i += 500) { - const deltaHeight = (Random.getRandom() - 0.5) * 2000; + for (let i = 0; i < 50000; i += 500) { + const deltaHeight = (Random.getRandom() - 0.5) * 500; const height = previousEnd.y + deltaHeight; const currentEnd = vec2.fromValues(i, height); const currentToRadius = Random.getRandom() * 300 + 150; diff --git a/backend/src/objects/character-physical.ts b/backend/src/objects/character-physical.ts index b6a1742..93eecd0 100644 --- a/backend/src/objects/character-physical.ts +++ b/backend/src/objects/character-physical.ts @@ -8,11 +8,14 @@ import { MoveActionCommand, serializesTo, clamp, + last, + Circle, } 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'; +import { Spring } from './spring'; @serializesTo(CharacterBase) export class CharacterPhysical extends CharacterBase implements Physical { @@ -27,6 +30,7 @@ export class CharacterPhysical extends CharacterBase implements Physical { public rightFoot: CirclePhysical; private movementActions: Array = []; + private lastMovementAction: MoveActionCommand = new MoveActionCommand(vec2.create()); protected commandExecutors: CommandExecutors = { [StepCommand.type]: this.step.bind(this), @@ -34,11 +38,11 @@ export class CharacterPhysical extends CharacterBase implements Physical { }; private static readonly headOffset = vec2.fromValues(0, 40); - private static readonly leftFootOffset = vec2.fromValues(-20, -10); - private static readonly rightFootOffset = vec2.fromValues(20, -10); + private static readonly leftFootOffset = vec2.fromValues(-20, -35); + private static readonly rightFootOffset = vec2.fromValues(20, -35); constructor(private readonly container: PhysicalContainer) { - super(id(), undefined, undefined, undefined); + super(id()); this.head = new CirclePhysical( vec2.clone(CharacterPhysical.headOffset), 50, @@ -76,6 +80,10 @@ export class CharacterPhysical extends CharacterBase implements Physical { return this; } + public get center(): vec2 { + return this.head.center; + } + public distance(target: vec2): number { return ( Math.min( @@ -87,92 +95,82 @@ export class CharacterPhysical extends CharacterBase implements Physical { } private sumAndResetMovementActions(): vec2 { + let direction: vec2; if (this.movementActions.length === 0) { - return vec2.create(); + direction = vec2.clone(this.lastMovementAction.direction); + } else { + direction = this.movementActions.reduce( + (sum, current) => vec2.add(sum, sum, current.direction), + vec2.create(), + ); + + vec2.scale(direction, direction, 1 / this.movementActions.length); + + this.lastMovementAction = last(this.movementActions)!; + this.movementActions = []; } - const movementForce = this.movementActions.reduce( - (sum, current) => vec2.add(sum, sum, current.delta), - vec2.create(), - ); - - vec2.scale(movementForce, movementForce, 1 / this.movementActions.length); - - this.movementActions = []; - - return movementForce; + return direction; } 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(); + const deltaTime = c.deltaTimeInMiliseconds / 1000; + const direction = this.sumAndResetMovementActions(); 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; + this.jumpEnergyLeft += isAirborne ? -deltaTime : deltaTime; + this.jumpEnergyLeft = clamp(this.jumpEnergyLeft, 0, settings.defaultJumpEnergy); - vec2.set( - movementForce, - clamp(movementForce.x, -xMax, xMax), - clamp(movementForce.y, -yMax, yMax), + const xMax = deltaTime * settings.maxAccelerationX; + const yMax = this.jumpEnergyLeft > 0 ? settings.maxAccelerationY : 0; + const movementForce = vec2.multiply( + direction, + direction, + vec2.fromValues(xMax, yMax), + ); + + const sumBody = vec2.add(vec2.create(), this.head.center, this.leftFoot.center); + vec2.add(sumBody, sumBody, this.rightFoot.center); + vec2.scale(sumBody, sumBody, 1 / 3); + + const headPosition = vec2.add(vec2.create(), sumBody, CharacterPhysical.headOffset); + + Spring.step(new Circle(headPosition, 0), this.head, 0, 30, deltaTime); + + const footDistance = vec2.distance( + CharacterPhysical.headOffset, + CharacterPhysical.leftFootOffset, + ); + + Spring.step( + new Circle(this.head.center, this.head.radius), + this.leftFoot, + footDistance, + 25, + deltaTime, + ); + Spring.step( + new Circle(this.head.center, this.head.radius), + this.rightFoot, + footDistance, + 25, + deltaTime, + ); + Spring.step( + this.leftFoot, + this.rightFoot, + vec2.distance(CharacterPhysical.leftFootOffset, CharacterPhysical.rightFootOffset), + 100, + deltaTime, ); this.head.applyForce(movementForce, deltaTime); this.leftFoot.applyForce(movementForce, deltaTime); this.rightFoot.applyForce(movementForce, deltaTime); - const bodyCenter = vec2.subtract( - vec2.create(), - this.head.center, - CharacterPhysical.headOffset, - ); - - const leftFootPositon = vec2.add( - vec2.create(), - bodyCenter, - CharacterPhysical.leftFootOffset, - ); - const rightFootPositon = vec2.add( - vec2.create(), - bodyCenter, - CharacterPhysical.rightFootOffset, - ); - - const leftFootDelta = vec2.subtract( - vec2.create(), - this.leftFoot.center, - leftFootPositon, - ); - - const rightFootDelta = vec2.subtract( - vec2.create(), - this.rightFoot.center, - rightFootPositon, - ); - - 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); - } - - 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.applyForce(settings.gravitationalForce, deltaTime); + this.leftFoot.applyForce(settings.gravitationalForce, deltaTime); + this.rightFoot.applyForce(settings.gravitationalForce, deltaTime); this.head.step(deltaTime); this.leftFoot.step(deltaTime); diff --git a/backend/src/objects/circle-physical.ts b/backend/src/objects/circle-physical.ts index 27a733a..a4872ad 100644 --- a/backend/src/objects/circle-physical.ts +++ b/backend/src/objects/circle-physical.ts @@ -62,7 +62,7 @@ export class CirclePhysical implements Circle, Physical { return vec2.distance(target, this.center) - this.radius; } - public distanceBetween(target: CirclePhysical): number { + public distanceBetween(target: Circle): number { return vec2.distance(target.center, this.center) - this.radius - target.radius; } @@ -94,17 +94,17 @@ export class CirclePhysical implements Circle, Physical { this._boundingBox.yMax = this.center.y + this._radius; } - public applyForce(force: vec2, timeInMilliseconds: number) { + public applyForce(force: vec2, timeInSeconds: number) { vec2.add( this.velocity, this.velocity, - vec2.scale(vec2.create(), force, timeInMilliseconds), + vec2.scale(vec2.create(), force, timeInSeconds), ); vec2.set( this.velocity, clamp(this.velocity.x, -settings.maxVelocityX, settings.maxVelocityX), - this.velocity.y, + clamp(this.velocity.y, -settings.maxVelocityY, settings.maxVelocityY), ); } @@ -112,14 +112,15 @@ export class CirclePhysical implements Circle, Physical { this.velocity = vec2.create(); } - public step(timeInMilliseconds: number): boolean { + public step(deltaTimeInSeconds: number): boolean { vec2.scale( this.velocity, this.velocity, - Math.pow(settings.velocityAttenuation, timeInMilliseconds), + Math.pow(settings.velocityAttenuation, deltaTimeInSeconds), ); - const distance = vec2.scale(vec2.create(), this.velocity, timeInMilliseconds); + const distance = vec2.scale(vec2.create(), this.velocity, deltaTimeInSeconds); + const distanceLength = vec2.length(distance); const stepCount = Math.ceil(distanceLength / settings.physicsMaxStep); vec2.scale(distance, distance, 1 / stepCount); @@ -127,13 +128,20 @@ export class CirclePhysical implements Circle, Physical { let wasHit = false; for (let i = 0; i < stepCount; i++) { - const { normal, tangent, hitSurface } = moveCircle( + const { tangent, hitSurface } = moveCircle( this, - distance, + vec2.clone(distance), this.container.findIntersecting(this.boundingBox), ); + if (hitSurface) { vec2.scale(this.velocity, tangent!, vec2.dot(tangent!, this.velocity)); + if ( + vec2.length(this.velocity) < + settings.frictionMinVelocity * deltaTimeInSeconds + ) { + this.velocity = vec2.create(); + } wasHit = true; } } diff --git a/backend/src/objects/spring.ts b/backend/src/objects/spring.ts new file mode 100644 index 0000000..91f121b --- /dev/null +++ b/backend/src/objects/spring.ts @@ -0,0 +1,37 @@ +import { vec2 } from 'gl-matrix'; +import { Circle } from 'shared'; +import { CirclePhysical } from './circle-physical'; + +export class Spring { + constructor( + private a: CirclePhysical | Circle, + private b: CirclePhysical | Circle, + private distance: number, + private strength: number, + ) {} + + public step(deltaTimeInSeconds: number) { + Spring.step(this.a, this.b, this.distance, this.strength, deltaTimeInSeconds); + } + + public static step( + a: CirclePhysical | Circle, + b: CirclePhysical | Circle, + distance: number, + strength: number, + deltaTimeInSeconds: number, + ) { + const length = vec2.dist(a.center, b.center) - distance; + + const abDirection = vec2.subtract(vec2.create(), b.center, a.center); + vec2.normalize(abDirection, abDirection); + const force = vec2.scale(abDirection, abDirection, strength * length); + if (a instanceof CirclePhysical) { + a.applyForce(force, deltaTimeInSeconds); + } + if (b instanceof CirclePhysical) { + vec2.scale(force, force, -1); + b.applyForce(force, deltaTimeInSeconds); + } + } +} diff --git a/backend/src/physics/move-circle.ts b/backend/src/physics/move-circle.ts index d470c5d..1c30524 100644 --- a/backend/src/physics/move-circle.ts +++ b/backend/src/physics/move-circle.ts @@ -73,10 +73,11 @@ export const moveCircle = ( circle.center = vec2.add(circle.center, circle.center, approxNormal); + vec2.normalize(approxNormal, approxNormal); return { realDelta: delta, hitSurface: true, - normal: vec2.normalize(approxNormal, approxNormal), + normal: approxNormal, tangent: rotate90Deg(approxNormal), }; }; diff --git a/backend/src/players/player.ts b/backend/src/players/player.ts index 3cc6ad0..757a004 100644 --- a/backend/src/players/player.ts +++ b/backend/src/players/player.ts @@ -6,11 +6,13 @@ import { DeleteObjectsCommand, MoveActionCommand, serialize, - SetViewAreaActionCommand, TransportEvents, UpdateObjectsCommand, StepCommand, + SetAspectRatioActionCommand, + calculateViewArea, } from 'shared'; +import { getTimeInMilliseconds } from '../helper/get-time-in-milliseconds'; import { CharacterPhysical } from '../objects/character-physical'; import { BoundingBox } from '../physics/bounding-boxes/bounding-box'; @@ -19,16 +21,31 @@ import { Physical } from '../physics/physical'; export class Player extends CommandReceiver { private character: CharacterPhysical; + private aspectRatio: number = 16 / 9; + private isActive = true; private objectsPreviouslyInViewArea: Array = []; private objectsInViewArea: Array = []; + private pingTime?: number; + private _latency?: number; + public measureLatency() { + this.pingTime = getTimeInMilliseconds(); + this.socket.emit(TransportEvents.Ping); + if (this.isActive) { + setTimeout(this.measureLatency.bind(this), 10000); + } + } + + public get latency(): number | undefined { + return this._latency; + } + protected commandExecutors: CommandExecutors = { [StepCommand.type]: this.sendObjects.bind(this), - [SetViewAreaActionCommand.type]: this.setViewArea.bind(this), - [MoveActionCommand.type]: (c: MoveActionCommand) => { - this.character.sendCommand(c); - }, + [SetAspectRatioActionCommand.type]: (v: SetAspectRatioActionCommand) => + (this.aspectRatio = v.aspectRatio), + [MoveActionCommand.type]: (c: MoveActionCommand) => this.character.sendCommand(c), }; constructor( @@ -47,18 +64,24 @@ export class Player extends CommandReceiver { serialize(new CreatePlayerCommand(this.character)), ); + socket.on( + TransportEvents.Pong, + () => (this._latency = getTimeInMilliseconds() - this.pingTime!), + ); + + this.measureLatency(); + this.sendObjects(); } - public setViewArea(c: SetViewAreaActionCommand) { - const viewArea = new BoundingBox(); - viewArea.topLeft = c.viewArea.topLeft; - viewArea.size = c.viewArea.size; - - this.objectsInViewArea = this.objects.findIntersecting(viewArea); - } - public sendObjects() { + const viewArea = calculateViewArea(this.character.center, this.aspectRatio, 1.5); + const bb = new BoundingBox(); + bb.topLeft = viewArea.topLeft; + bb.size = viewArea.size; + + this.objectsInViewArea = this.objects.findIntersecting(bb); + const newlyIntersecting = this.objectsInViewArea.filter( (o) => !this.objectsPreviouslyInViewArea.includes(o), ); @@ -103,6 +126,7 @@ export class Player extends CommandReceiver { } public destroy() { + this.isActive = false; this.character.destroy(); this.objects.removeObject(this.character); } diff --git a/backend/tsconfig.json b/backend/tsconfig.json deleted file mode 100644 index 9a32d54..0000000 --- a/backend/tsconfig.json +++ /dev/null @@ -1,17 +0,0 @@ -{ - "compilerOptions": { - "outDir": "dist", - "sourceMap": true, - "target": "es5", - "declaration": true, - "declarationMap": true, - "esModuleInterop": true, - "strict": true, - "experimentalDecorators": true, - "downlevelIteration": true, - "moduleResolution": "node", - "module": "commonjs", - "composite": true, - "lib": ["dom", "es2017"] - } -} diff --git a/declared.code-workspace b/declared.code-workspace deleted file mode 100644 index 3288688..0000000 --- a/declared.code-workspace +++ /dev/null @@ -1,21 +0,0 @@ -{ - "folders": [ - { - "name": "Root", - "path": "." - }, - { - "name": "Frontend", - "path": "./frontend" - }, - { - "name": "Backend", - "path": "./backend" - }, - { - "name": "Shared", - "path": "./shared" - } - ], - "settings": {} -} diff --git a/frontend/src/scripts/commands/generators/keyboard-listener.ts b/frontend/src/scripts/commands/generators/keyboard-listener.ts index 0968aaa..acde088 100644 --- a/frontend/src/scripts/commands/generators/keyboard-listener.ts +++ b/frontend/src/scripts/commands/generators/keyboard-listener.ts @@ -10,15 +10,17 @@ export class KeyboardListener extends CommandGenerator { target.addEventListener('keydown', (event: KeyboardEvent) => { const key = this.normalize(event.key); this.keysDown.add(key); + this.generateCommands(); }); target.addEventListener('keyup', (event: KeyboardEvent) => { const key = this.normalize(event.key); this.keysDown.delete(key); + this.generateCommands(); }); } - public generateCommands() { + private generateCommands() { const up = ~~( this.keysDown.has('w') || this.keysDown.has('arrowup') || @@ -31,8 +33,8 @@ export class KeyboardListener extends CommandGenerator { const movement = vec2.fromValues(right - left, up - down); if (vec2.squaredLength(movement) > 0) { vec2.normalize(movement, movement); - this.sendCommandToSubcribers(new MoveActionCommand(movement)); } + this.sendCommandToSubcribers(new MoveActionCommand(movement)); } private normalize(key: string): string { diff --git a/frontend/src/scripts/commands/generators/touch-listener.ts b/frontend/src/scripts/commands/generators/touch-listener.ts index 6aa6db5..ce073bf 100644 --- a/frontend/src/scripts/commands/generators/touch-listener.ts +++ b/frontend/src/scripts/commands/generators/touch-listener.ts @@ -9,9 +9,6 @@ import { export class TouchListener extends CommandGenerator { private previousPosition = vec2.create(); - private currentPosition = vec2.create(); - - private previousDeltas: Array = []; constructor(target: HTMLElement) { super(); @@ -22,7 +19,6 @@ export class TouchListener extends CommandGenerator { const touchCount = event.touches.length; const position = this.positionFromEvent(event); this.previousPosition = position; - this.currentPosition = position; if (touchCount == 1) { this.sendCommandToSubcribers(new PrimaryActionCommand(position)); @@ -37,24 +33,20 @@ export class TouchListener extends CommandGenerator { event.preventDefault(); const position = this.positionFromEvent(event); - this.previousDeltas.push( - vec2.subtract(vec2.create(), position, this.previousPosition), - ); - this.currentPosition = position; - }); - } + const movement = vec2.subtract(vec2.create(), position, this.previousPosition); - public generateCommands() { - const movement = vec2.subtract( - vec2.create(), - this.currentPosition, - this.previousPosition, - ); - this.previousPosition = this.currentPosition; - if (vec2.squaredLength(movement) > 0) { - vec2.normalize(movement, movement); - this.sendCommandToSubcribers(new MoveActionCommand(movement)); - } + if (vec2.squaredLength(movement) > 0) { + vec2.normalize(movement, movement); + this.sendCommandToSubcribers(new MoveActionCommand(movement)); + } + + this.previousPosition = position; + }); + + target.addEventListener('touchend', (event: TouchEvent) => { + event.preventDefault(); + this.sendCommandToSubcribers(new MoveActionCommand(vec2.create())); + }); } private positionFromEvent(event: TouchEvent): vec2 { diff --git a/frontend/src/scripts/game.ts b/frontend/src/scripts/game.ts index e26a759..acfba8c 100644 --- a/frontend/src/scripts/game.ts +++ b/frontend/src/scripts/game.ts @@ -13,12 +13,13 @@ import { import { broadcastCommands, deserialize, + prettyPrint, serialize, settings, - SetViewAreaActionCommand, StepCommand, TransportEvents, } from 'shared'; +import { SetAspectRatioActionCommand } from 'shared/src/main'; import io from 'socket.io-client'; import { KeyboardListener } from './commands/generators/keyboard-listener'; import { MouseListener } from './commands/generators/mouse-listener'; @@ -33,14 +34,14 @@ import { GameObjectContainer } from './objects/game-object-container'; import { BlobShape } from './shapes/blob-shape'; export class Game { - public readonly gameObjects = new GameObjectContainer(); - private readonly canvas: HTMLCanvasElement = document.querySelector('canvas#main'); - private renderer: Renderer; - private socket: SocketIOClient.Socket; + public readonly gameObjects = new GameObjectContainer(this); + private readonly canvas: HTMLCanvasElement = document.querySelector( + 'canvas#main', + ) as HTMLCanvasElement; + private renderer!: Renderer; + private socket!: SocketIOClient.Socket; private deltaTimeCalculator = new DeltaTimeCalculator(); - private overlay: HTMLElement = document.querySelector('#overlay'); - private keyboardListener: KeyboardListener; - private touchListener: TouchListener; + private overlay: HTMLElement = document.querySelector('#overlay') as HTMLDivElement; private async setupCommunication(): Promise { await Configuration.initialize(); @@ -56,17 +57,21 @@ export class Game { this.socket.on(TransportEvents.ServerToPlayer, (serialized: string) => { const command = deserialize(serialized); - //console.log(command); this.gameObjects.sendCommand(command); }); + this.socket.on(TransportEvents.Ping, () => { + this.socket.emit(TransportEvents.Pong); + }); + this.socket.emit(TransportEvents.PlayerJoining, null); - this.keyboardListener = new KeyboardListener(document.body); - this.touchListener = new TouchListener(this.canvas); - broadcastCommands( - [this.keyboardListener, new MouseListener(this.canvas), this.touchListener], + [ + new KeyboardListener(document.body), + new MouseListener(this.canvas), + new TouchListener(this.canvas), + ], [this.gameObjects, new CommandReceiverSocket(this.socket)], ); } @@ -140,36 +145,21 @@ export class Game { return this.renderer.displayToWorldCoordinates(p); } + public aspectRatioChanged(aspectRatio: number) { + this.socket.emit( + TransportEvents.PlayerToServer, + serialize(new SetAspectRatioActionCommand(aspectRatio)), + ); + } + private gameLoop(time: DOMHighResTimeStamp) { const deltaTime = this.deltaTimeCalculator.getNextDeltaTimeInMilliseconds(time); - this.keyboardListener.generateCommands(); - this.touchListener.generateCommands(); - - if (this.gameObjects.camera) { - // todo: Should only send aspect ratio - this.socket.emit( - TransportEvents.PlayerToServer, - serialize(new SetViewAreaActionCommand(this.gameObjects.camera.viewArea)), - ); - } this.gameObjects.sendCommand(new StepCommand(deltaTime)); - /*this.camera.sendCommand(new MoveToCommand(this.character.position)); - this.camera.sendCommand(new RenderCommand(this.renderer));*/ - - /*const shouldBeDrawn = this.physics - .findIntersecting(this.camera.viewArea) - .map((b) => b.owner); - - for (const object of shouldBeDrawn) { - object?.sendCommand(new RenderCommand(this.renderer)); - }*/ - - this.gameObjects.sendCommand(new RenderCommand(this.renderer) as any); - + this.gameObjects.sendCommand(new RenderCommand(this.renderer)); this.renderer.renderDrawables(); - //this.overlay.innerText = prettyPrint(this.renderer.insights); + this.overlay.innerText = prettyPrint(this.renderer.insights); requestAnimationFrame(this.gameLoop.bind(this)); } } diff --git a/frontend/src/scripts/objects/camera.ts b/frontend/src/scripts/objects/camera.ts index fb2c5c8..46a1989 100644 --- a/frontend/src/scripts/objects/camera.ts +++ b/frontend/src/scripts/objects/camera.ts @@ -1,36 +1,29 @@ import { vec2 } from 'gl-matrix'; -import { CommandExecutors, GameObject, Rectangle, settings } from 'shared'; +import { calculateViewArea, CommandExecutors, GameObject } from 'shared'; import { RenderCommand } from '../commands/types/render'; +import { Game } from '../game'; export class Camera extends GameObject { - private static readonly inViewAreaSize = settings.inViewAreaSize; - private _viewArea = new Rectangle(); + public center: vec2 = vec2.create(); + + private aspectRatio?: number; protected commandExecutors: CommandExecutors = { [RenderCommand.type]: this.draw.bind(this), }; - constructor(public center: vec2 = vec2.create()) { + constructor(private game: Game) { super(null); } - public get viewArea(): Rectangle { - return this._viewArea; - } - private draw(c: RenderCommand) { const canvasAspectRatio = c.renderer.canvasSize.x / c.renderer.canvasSize.y; + if (canvasAspectRatio !== this.aspectRatio) { + this.aspectRatio = canvasAspectRatio; + this.game.aspectRatioChanged(canvasAspectRatio); + } - this._viewArea.topLeft = vec2.fromValues( - this.center.x - this._viewArea.size.x / 2, - this.center.y + this._viewArea.size.y / 2, - ); - - this._viewArea.size = vec2.fromValues( - Math.sqrt(Camera.inViewAreaSize * canvasAspectRatio), - Math.sqrt(Camera.inViewAreaSize / canvasAspectRatio), - ); - - c.renderer.setViewArea(this._viewArea.topLeft, this._viewArea.size); + const viewArea = calculateViewArea(this.center, canvasAspectRatio); + c.renderer.setViewArea(viewArea.topLeft, viewArea.size); } } diff --git a/frontend/src/scripts/objects/game-object-container.ts b/frontend/src/scripts/objects/game-object-container.ts index c29866e..053295f 100644 --- a/frontend/src/scripts/objects/game-object-container.ts +++ b/frontend/src/scripts/objects/game-object-container.ts @@ -10,6 +10,7 @@ import { StepCommand, UpdateObjectsCommand, } from 'shared'; +import { Game } from '../game'; import { Camera } from './camera'; import { CharacterView } from './character-view'; @@ -21,7 +22,7 @@ export class GameObjectContainer extends CommandReceiver { protected commandExecutors: CommandExecutors = { [CreatePlayerCommand.type]: (c: CreatePlayerCommand) => { this.player = c.character as CharacterView; - this.camera = new Camera(); + this.camera = new Camera(this.game); this.addObject(this.player); this.addObject(this.camera); }, @@ -49,6 +50,10 @@ export class GameObjectContainer extends CommandReceiver { }, }; + constructor(private game: Game) { + super(); + } + protected defaultCommandExecutor(c: Command) { this.objects.forEach((o) => o.sendCommand(c)); } diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json deleted file mode 100644 index a5d70a5..0000000 --- a/frontend/tsconfig.json +++ /dev/null @@ -1,17 +0,0 @@ -{ - "compilerOptions": { - "outDir": "dist", - "target": "es5", - "sourceMap": true, - "declaration": true, - "declarationMap": true, - "esModuleInterop": true, - "strict": true, - "experimentalDecorators": true, - "downlevelIteration": true, - "moduleResolution": "node", - "module": "es6", - "composite": true, - "lib": ["dom", "es2017"] - } -} diff --git a/shared/src/commands/types/move-action.ts b/shared/src/commands/types/move-action.ts index d3596ae..3e49e4b 100644 --- a/shared/src/commands/types/move-action.ts +++ b/shared/src/commands/types/move-action.ts @@ -4,11 +4,11 @@ import { Command } from '../command'; @serializable export class MoveActionCommand extends Command { - public constructor(public readonly delta: vec2) { + public constructor(public readonly direction: vec2) { super(); } public toArray(): Array { - return [this.delta]; + return [this.direction]; } } diff --git a/shared/src/commands/types/set-aspect-ratio-action.ts b/shared/src/commands/types/set-aspect-ratio-action.ts new file mode 100644 index 0000000..0806165 --- /dev/null +++ b/shared/src/commands/types/set-aspect-ratio-action.ts @@ -0,0 +1,13 @@ +import { serializable } from '../../transport/serialization/serializable'; +import { Command } from '../command'; + +@serializable +export class SetAspectRatioActionCommand extends Command { + public constructor(public readonly aspectRatio: number) { + super(); + } + + public toArray(): Array { + return [this.aspectRatio]; + } +} diff --git a/shared/src/commands/types/set-view-area-action.ts b/shared/src/commands/types/set-view-area-action.ts deleted file mode 100644 index f2baa88..0000000 --- a/shared/src/commands/types/set-view-area-action.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { Rectangle } from '../../helper/rectangle'; -import { serializable } from '../../transport/serialization/serializable'; -import { Command } from '../command'; - -@serializable -export class SetViewAreaActionCommand extends Command { - public constructor(public readonly viewArea: Rectangle) { - super(); - } - - public toArray(): Array { - return [this.viewArea]; - } -} diff --git a/shared/src/helper/calculate-view-area.ts b/shared/src/helper/calculate-view-area.ts new file mode 100644 index 0000000..8148975 --- /dev/null +++ b/shared/src/helper/calculate-view-area.ts @@ -0,0 +1,22 @@ +import { vec2 } from 'gl-matrix'; +import { Rectangle, settings } from '../main'; + +export const calculateViewArea = ( + center: vec2, + aspectRatio: number, + oversizeRatio = 1, +): Rectangle => { + const viewArea = new Rectangle(); + + viewArea.size = vec2.fromValues( + Math.sqrt(settings.inViewAreaSize * oversizeRatio * aspectRatio), + Math.sqrt((settings.inViewAreaSize * oversizeRatio) / aspectRatio), + ); + + viewArea.topLeft = vec2.fromValues( + center.x - viewArea.size.x / 2, + center.y + viewArea.size.y / 2, + ); + + return viewArea; +}; diff --git a/shared/src/helper/circle.ts b/shared/src/helper/circle.ts index 4fe9632..1fb223b 100644 --- a/shared/src/helper/circle.ts +++ b/shared/src/helper/circle.ts @@ -9,6 +9,10 @@ export class Circle { return vec2.distance(this.center, target) - this.radius; } + public distanceBetween(target: Circle): number { + return vec2.distance(target.center, this.center) - this.radius - target.radius; + } + public toArray(): Array { return [this.center, this.radius]; } diff --git a/shared/src/main.ts b/shared/src/main.ts index 7ff5cd3..bf9a7bb 100644 --- a/shared/src/main.ts +++ b/shared/src/main.ts @@ -6,15 +6,18 @@ export * from './commands/types/update-objects'; export * from './commands/types/step'; export * from './commands/types/ternary-action'; export * from './commands/types/move-action'; -export * from './commands/types/set-view-area-action'; +export * from './commands/types/set-aspect-ratio-action'; export * from './commands/types/primary-action'; export * from './commands/types/secondary-action'; export * from './commands/command-receiver'; export * from './commands/command-executors'; export * from './commands/command-generator'; export * from './commands/broadcast-commands'; +export * from './commands/types/set-aspect-ratio-action'; export * from './helper/array'; +export * from './helper/last'; export * from './helper/clamp'; +export * from './helper/calculate-view-area'; export * from './helper/pretty-print'; export * from './helper/circle'; export * from './helper/rectangle'; diff --git a/shared/src/settings.ts b/shared/src/settings.ts index 4e11342..3c9935b 100644 --- a/shared/src/settings.ts +++ b/shared/src/settings.ts @@ -5,13 +5,15 @@ export const settings = { hitDetectionCirclePointCount: 32, hitDetectionMaxOverlap: 0.01, physicsMaxStep: 5, - gravitationalForce: vec2.fromValues(0, -0.0055), - maxVelocityX: 1, - maxAccelerationX: 0.005, - maxAccelerationY: 0.01, - targetPhysicsDeltaTimeInMilliseconds: 10, + gravitationalForce: vec2.fromValues(0, -200), + maxVelocityX: 500, + maxVelocityY: 750, + maxAccelerationX: 16000, + maxAccelerationY: 5500, + targetPhysicsDeltaTimeInMilliseconds: 15, minPhysicsSleepTime: 4, - velocityAttenuation: 0.99, + velocityAttenuation: 0.5, + frictionMinVelocity: 400, inViewAreaSize: 1920 * 1080 * 3, - defaultJumpEnergy: 600, + defaultJumpEnergy: 0.75, }; diff --git a/shared/src/transport/identity.ts b/shared/src/transport/identity.ts index f45be1b..53b0c34 100644 --- a/shared/src/transport/identity.ts +++ b/shared/src/transport/identity.ts @@ -1 +1 @@ -export type Id = number; +export type Id = number | null; diff --git a/shared/src/transport/transport-events.ts b/shared/src/transport/transport-events.ts index 6f10543..b254201 100644 --- a/shared/src/transport/transport-events.ts +++ b/shared/src/transport/transport-events.ts @@ -2,4 +2,6 @@ export enum TransportEvents { PlayerJoining = 'PlayerJoining', PlayerToServer = 'PlayerToServer', ServerToPlayer = 'ServerToPlayer', + Ping = 'Ping', + Pong = 'Pong', } diff --git a/shared/tsconfig.json b/shared/tsconfig.json index aa8b6c4..f85c232 100644 --- a/shared/tsconfig.json +++ b/shared/tsconfig.json @@ -1,10 +1,10 @@ { "compilerOptions": { - "target": "es5", "outDir": "lib", "sourceMap": true, "declaration": true, "declarationMap": true, + "target": "es6", "esModuleInterop": true, "strict": true, "experimentalDecorators": true, diff --git a/tsconfig.json b/tsconfig.json index f85c232..6b26fb4 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,6 +1,5 @@ { "compilerOptions": { - "outDir": "lib", "sourceMap": true, "declaration": true, "declarationMap": true,