feat: animation control

app/ecs-components/direction.js

@@ -0,0 +1,3 @@
+export default {
+  direction: {type: 'uint8'},
+};

app/ecs-systems/control-direction.js

@@ -0,0 +1,27 @@
+import {System} from '@/ecs/index.js';
+
+export default class ControlDirection extends System {
+
+  tick() {
+    const {diff} = this.ecs;
+    for (const id in diff) {
+      const {Controlled} = diff[id];
+      if (Controlled) {
+        const {Controlled: {up, right, down, left}, Direction} = this.ecs.get(id);
+        if (up > 0) {
+          Direction.direction = 0;
+        }
+        if (down > 0) {
+          Direction.direction = 2;
+        }
+        if (left > 0) {
+          Direction.direction = 3;
+        }
+        if (right > 0) {
+          Direction.direction = 1;
+        }
+      }
+    }
+  }
+
+}

app/ecs-systems/sprite-direction.js

@@ -0,0 +1,39 @@
+import {System} from '@/ecs/index.js';
+
+export default class SpriteDirection extends System {
+
+  static queries() {
+    return {
+      default: ['Sprite'],
+    };
+  }
+
+  tick() {
+    for (const [Sprite, entityId] of this.select('default')) {
+      const entity = this.ecs.get(entityId);
+      const parts = [];
+      if (entity.Controlled) {
+        const {up, right, down, left} = entity.Controlled;
+        if (up > 0 || right > 0 || down > 0 || left > 0) {
+          parts.push('moving');
+        }
+        else {
+          parts.push('idle');
+        }
+      }
+      if (entity.Direction) {
+        const name = {
+          0: 'up',
+          1: 'right',
+          2: 'down',
+          3: 'left',
+        };
+        parts.push(name[entity.Direction.direction]);
+      }
+      if (parts.length > 0) {
+        Sprite.animation = parts.join(':');
+      }
+    }
+  }
+
+}

app/engine/engine.js

@@ -9,6 +9,8 @@ import CalculateAabbs from '@/ecs-systems/calculate-aabbs.js';
 import FollowCamera from '@/ecs-systems/follow-camera.js';
 import UpdateSpatialHash from '@/ecs-systems/update-spatial-hash.js';
 import RunAnimations from '@/ecs-systems/run-animations.js';
+import ControlDirection from '@/ecs-systems/control-direction.js';
+import SpriteDirection from '@/ecs-systems/sprite-direction.js';
 import Ecs from '@/engine/ecs.js';
 import {decode, encode} from '@/packets/index.js';
 
@@ -16,16 +18,17 @@ const players = {
   0: {
     Camera: {},
     Controlled: {up: 0, right: 0, down: 0, left: 0},
+    Direction: {direction: 2},
     Momentum: {},
     Position: {x: 368, y: 368},
     VisibleAabb: {},
     World: {world: 1},
     Sprite: {
-      animation: 'down',
+      animation: 'moving:down',
       frame: 0,
       frames: 8,
       source: '/assets/dude.json',
-      speed: 0.1,
+      speed: 0.115,
     },
   },
 };
@@ -34,6 +37,8 @@ export default class Engine {
 
   static Ecs = Ecs;
 
+  incoming = [];
+
   constructor(Server) {
     const ecs = new this.constructor.Ecs();
     const layerSize = {x: Math.ceil(RESOLUTION.x / 4), y: Math.ceil(RESOLUTION.y / 4)};
@@ -57,6 +62,8 @@ export default class Engine {
     ecs.addSystem(FollowCamera);
     ecs.addSystem(CalculateAabbs);
     ecs.addSystem(UpdateSpatialHash);
+    ecs.addSystem(ControlDirection);
+    ecs.addSystem(SpriteDirection);
     ecs.addSystem(RunAnimations);
     this.ecses = {
       1: ecs,
@@ -79,17 +86,8 @@ export default class Engine {
     });
   }
 
-  accept(connection, {payload, type}) {
+  accept(connection, packet) {
-    switch (type) {
+    this.incoming.push([this.connectedPlayers.get(connection).entity, packet]);
-      case 'Action': {
-        const {entity} = this.connectedPlayers.get(connection);
-        if (payload.type in MOVE_MAP) {
-          entity.Controlled[MOVE_MAP[payload.type]] = payload.value;
-        }
-        break;
-      }
-      default:
-    }
   }
 
   async connectPlayer(connection) {
@@ -135,6 +133,20 @@ export default class Engine {
   tick(elapsed) {
     for (const i in this.ecses) {
       this.ecses[i].setClean();
+    }
+    for (const [{Controlled}, {payload, type}] of this.incoming) {
+      switch (type) {
+        case 'Action': {
+          if (payload.type in MOVE_MAP) {
+            Controlled[MOVE_MAP[payload.type]] = payload.value;
+          }
+          break;
+        }
+        default:
+      }
+    }
+    this.incoming = [];
+    for (const i in this.ecses) {
       this.ecses[i].tick(elapsed);
     }
   }