feat: scaling

client/index.js

@@ -5,6 +5,7 @@ import {Container, Renderer} from '@avocado/graphics';
 import {World} from '@avocado/physics/matter/world';
 import {StateSynchronizer} from '@avocado/state';
 
+const renderer = new Renderer([640, 360]);
 const stage = new Container();
 
 const entityList = new EntityList();
@@ -53,7 +54,6 @@ let actionState = actionRegistry.state();
 // Create the socket connection.
 const socket = createClient(window.location.href);
 // Create the graphics canvas.
-const renderer = new Renderer([1280, 720]);
 const appNode = document.querySelector('.app');
 appNode.appendChild(renderer.element);
 // Input messages.

resource/idle.animation.json

@@ -1,7 +1,7 @@
 {
 	"frameRate": 0.1,
 	"frameCount": 8,
-  "frameSize": [128, 128],
+  "frameSize": [32, 32],
 	"directionCount": 4,
   "imageUri": "/idle.png"
 }

resource/moving.animation.json

@@ -1,7 +1,7 @@
 {
 	"frameRate": 0.1,
 	"frameCount": 8,
-  "frameSize": [128, 128],
+  "frameSize": [32, 32],
 	"directionCount": 4,
   "imageUri": "/moving.png"
 }

server/game.js

@@ -23,8 +23,8 @@ const stateSynchronizer = new StateSynchronizer({
   entityList,
 });
 for (let i = 0; i < 40; ++i) {
-  const x = Math.floor(Math.random() * 800) + 200;
+  const x = Math.floor(Math.random() * 200) + 50;
-  const y = Math.floor(Math.random() * 300) + 200;
+  const y = Math.floor(Math.random() * 75) + 50;
   const flowerBarrel = createFlowerBarrelEntity([x, y]);
   entityList.addEntity(flowerBarrel);
 }
@@ -66,11 +66,11 @@ function createEntityForConnection(socket) {
         params: {
           animations: {
             idle: {
-              offset: [0, -48],
+              offset: [0, -12],
               uri: '/idle.animation.json',
             },
             moving: {
-              offset: [0, -48],
+              offset: [0, -12],
               uri: '/moving.animation.json',
             },
           }
@@ -87,7 +87,7 @@ function createEntityForConnection(socket) {
       informed: {},
       mobile: {
         state: {
-          speed: 400,
+          speed: 100,
         },
       },
       physical: {
@@ -95,7 +95,7 @@ function createEntityForConnection(socket) {
           shape: {
             type: 'rectangle',
             position: [0, 0],
-            size: [32, 32],
+            size: [8, 8],
           }
         }
       },
@@ -128,8 +128,8 @@ function createFlowerBarrelEntity(position) {
         params: {
           images: {
             initial: {
-              offset: [0, -32],
+              offset: [0, -8],
-              size: [128, 128], // Derive?
+              size: [32, 32], // Derive?
               uri: '/flower-barrel.png',
             },
           }
@@ -142,7 +142,7 @@ function createFlowerBarrelEntity(position) {
           shape: {
             type: 'rectangle',
             position: [0, 0],
-            size: [80, 40],
+            size: [20, 10],
           }
         }
       },
@@ -169,7 +169,7 @@ function createMainLoop(avocadoServer) {
     }
     // All informed entities get their own slice.
     for (const entity of informables) {
-      const CAMERA_LOCATION = [640, 360];
+      const CAMERA_LOCATION = [320, 180];
       const reduced = entity.reduceStateDiff(diff, CAMERA_LOCATION);
       entity.inform(reduced);
     }

traits/informed.js

@@ -11,7 +11,7 @@ class InformedBase extends Trait {
 
   static defaultState() {
     return {
-      informSize: [1280, 720],
+      informSize: [640, 360],
     };
   }