From 23c43fde6f3c6c6858e118d3a4452f92e7d4a1a4 Mon Sep 17 00:00:00 2001 From: Arne van Iterson Date: Fri, 24 Apr 2020 22:52:45 +0200 Subject: [PATCH] Limited the amount of data being sent --- src/entities/Tank.js | 82 +++++++++++++++++++++++--------------------- src/index.js | 5 ++- src/screens/game.js | 42 +++++++++++++---------- 3 files changed, 70 insertions(+), 59 deletions(-) diff --git a/src/entities/Tank.js b/src/entities/Tank.js index b54efbd..1ad2584 100644 --- a/src/entities/Tank.js +++ b/src/entities/Tank.js @@ -3,10 +3,11 @@ var asdf = require("asdf-games"); const { Container, TileSpriteXML, math } = asdf; class Tank extends TileSpriteXML { - constructor(keys, mouse, texture, xml, colour) { + constructor(keys, mouse, texture, xml, colour, remote = false) { super(texture, xml, xml.findIndex("name", `tankBody_${colour.toLowerCase()}.png`)); this.keys = keys; this.mouse = mouse; + this.remote = remote; this.children = []; // Define body @@ -17,7 +18,6 @@ class Tank extends TileSpriteXML { }; this.rotation = 0; - // TODO: Do not allow movement when this.locked = true this.locked = false; // Define barrel @@ -33,47 +33,49 @@ class Tank extends TileSpriteXML { update(dt, t) { super.update(dt,t); - // Make this.barrel follow the mouse - var dx = (this.pos.x + this.barrel.pos.x) - this.mouse.pos.x; - var dy = (this.pos.y + this.barrel.pos.y) - this.mouse.pos.y; - var tan = dy / dx; - var atan = Math.atan(tan); - if (dy > 0 && dx > 0) { - atan += Math.PI; - } - else if (dy < 0 && dx > 0) { - atan -= Math.PI; - } - this.barrel.rotation = atan + (0.5 * Math.PI) - this.rotation; + if (!this.remote && this.locked == false) { + // Make this.barrel follow the mouse + var dx = (this.pos.x + this.barrel.pos.x) - this.mouse.pos.x; + var dy = (this.pos.y + this.barrel.pos.y) - this.mouse.pos.y; + var tan = dy / dx; + var atan = Math.atan(tan); + if (dy > 0 && dx > 0) { + atan += Math.PI; + } + else if (dy < 0 && dx > 0) { + atan -= Math.PI; + } + this.barrel.rotation = atan + (0.5 * Math.PI) - this.rotation; - // Set rotation back to zero if higher than 2 * Pi (same angle) - // TODO: Fix rotation, the barrel glitches a bit on 0 and 180 degreessa - if (this.rotation >= (2 * Math.PI) || this.rotation <= -(2 * Math.PI)) { - this.rotation = 0; - } - if (this.rotation < 0) { - this.rotation = (2 * Math.PI) - this.rotation; - } + // Set rotation back to zero if higher than 2 * Pi (same angle) + // TODO: Fix rotation, the barrel glitches a bit on 0 and 180 degreessa + if (this.rotation >= (2 * Math.PI) || this.rotation <= -(2 * Math.PI)) { + this.rotation = 0; + } + if (this.rotation < 0) { + this.rotation = (2 * Math.PI) - this.rotation; + } - // TODO: If the angle is 90 or 270 degrees, allow the tank to move in that direction if 'a' or 's' is pressed - // Rotate clockwise - if (this.keys.x == 1) { - this.rotation += dt * 2; - } - // Rotate anti-clockwise - if (this.keys.x == -1) { - this.rotation -= dt * 2; - } + // TODO: If the angle is 90 or 270 degrees, allow the tank to move in that direction if 'a' or 's' is pressed + // Rotate clockwise + if (this.keys.x == 1) { + this.rotation += dt * 2; + } + // Rotate anti-clockwise + if (this.keys.x == -1) { + this.rotation -= dt * 2; + } - // TODO: Make it easier to see what end of the tank is forward - // Move - if (this.keys.y == 1) { - this.pos.x += this.speed.move * Math.cos(this.rotation + 0.5 * Math.PI); - this.pos.y += this.speed.move * Math.sin(this.rotation + 0.5 * Math.PI); - } - if (this.keys.y == -1) { - this.pos.x -= this.speed.move * Math.cos(this.rotation + 0.5 * Math.PI); - this.pos.y -= this.speed.move * Math.sin(this.rotation + 0.5 * Math.PI); + // TODO: Make it easier to see what end of the tank is forward + // Move + if (this.keys.y == 1) { + this.pos.x += this.speed.move * Math.cos(this.rotation + 0.5 * Math.PI); + this.pos.y += this.speed.move * Math.sin(this.rotation + 0.5 * Math.PI); + } + if (this.keys.y == -1) { + this.pos.x -= this.speed.move * Math.cos(this.rotation + 0.5 * Math.PI); + this.pos.y -= this.speed.move * Math.sin(this.rotation + 0.5 * Math.PI); + } } } } diff --git a/src/index.js b/src/index.js index af91eaf..7e03c64 100644 --- a/src/index.js +++ b/src/index.js @@ -1,3 +1,4 @@ +// eslint-disable-next-line no-unused-vars const { ipcRenderer } = require("electron"); var asdf = require("asdf-games"); @@ -16,7 +17,9 @@ const const window = { w: 740, h: 480 }; var game = new Game(window.w, window.h, true); -ipcRenderer.send("resize", window); + +// TODO: Enable resize on release +// ipcRenderer.send("resize", window); const controls = { keys: new KeyControls(), diff --git a/src/screens/game.js b/src/screens/game.js index b8f7ff7..12ee08d 100644 --- a/src/screens/game.js +++ b/src/screens/game.js @@ -38,8 +38,7 @@ class GameScreen extends Container { this.socket.on("identify", () => { this.socket.emit("identification", { name: "Arn", - gamemode: 2, - controls: JSON.stringify(this.controls) + gamemode: 2 }); console.log(`Connected to server as ${this.socket.id}`); }); @@ -52,33 +51,37 @@ class GameScreen extends Container { // Define local player this.player = new Tank(this.controls.keys, this.controls.mouse, texture, xml, colours[Object.keys(this.players).length]); this.player.uuid = this.socket.id; - console.log(this.player); this.add(this.player); // Store current state of controls for comparing - this.controlsBuffer = JSON.stringify(this.controls); + this.dataBuffer = JSON.stringify({ + pos: this.player.pos, + rotation: { + body: this.player.rotation, + barrel: this.player.children[0].rotation + } + }); // Handle player logins this.socket.on("roomUpdate", (data) => { // Add any player that is not the local player and is not already added for (const id in data) { if (id != this.socket.id && !(this.players[id])) { - this.players[id] = new Tank(new KeyControls(false), new MouseControls(false), texture, xml, colours[Object.keys(this.players).length]); + this.players[id] = new Tank(new KeyControls(false), new MouseControls(false), texture, xml, colours[Object.keys(this.players).length], true); this.add(this.players[id]); } } - console.log(this.players); // TODO: Remove players who left }); // Handle player updates this.socket.on("update", (data) => { - // TODO: Fix barrel rotation + // TODO: Fix crashing related caused by this function const player = this.players[data.uuid]; + player.pos = data.player.pos; player.rotation = data.player.rotation.body; player.barrel.rotation = data.player.rotation.barrel; - player.pos = data.player.pos; }); // TODO: Lock player untill game starts @@ -91,17 +94,20 @@ class GameScreen extends Container { update(dt, t) { super.update(dt, t); - // TODO: Only send when controls are updated and minify data sent - if (JSON.stringify(this.controls) != this.controlsBuffer) { + + // Only send when controls are updated and minify data sent + var data = { + pos: this.player.pos, + rotation: { + body: this.player.rotation, + barrel: this.player.children[0].rotation + } + }; + if (JSON.stringify(data) != this.dataBuffer) { console.log("Sending updates"); - this.socket.emit("update", { - rotation: { - body: this.player.rotation, - barrel: this.player.barrel.rotation - }, - pos: this.player.pos - }); - } + this.socket.emit("update", data); + this.dataBuffer = JSON.stringify(data); + } } }