proof of concept

src/socketEvents/gameMaster/assetManager/sprite/update.ts

@@ -154,6 +154,7 @@ export default class SpriteUpdateEvent {
     const idealCenter = Math.floor(frameWidth / 2)
     const offset = Math.round(idealCenter - analysis.massCenter)
 
+    // Create a new blank canvas with the target dimensions
     return sharp({
       create: {
         width: frameWidth,
@@ -162,8 +163,25 @@ export default class SpriteUpdateEvent {
         background: { r: 0, g: 0, b: 0, alpha: 0 }
       }
     })
-      .composite([{ input: buffer, left: offset, top: 0 }])
-      .png()
+      .composite([{
+        input: await sharp(buffer)
+          .resize({
+            kernel: sharp.kernel.nearest
+          })
+          .png({
+            compressionLevel: 9,
+            adaptiveFiltering: false,
+            palette: true
+          })
+          .toBuffer(),
+        left: offset,
+        top: 0
+      }])
+      .png({
+        compressionLevel: 9,
+        adaptiveFiltering: false,
+        palette: true
+      })
       .toBuffer()
   }
 
@@ -294,7 +312,13 @@ export default class SpriteUpdateEvent {
         channels: 4,
         background: { r: 0, g: 0, b: 0, alpha: 0 }
       }
-    }).png().toBuffer()
+    })
+      .png({
+        compressionLevel: 9,
+        adaptiveFiltering: false,
+        palette: true
+      })
+      .toBuffer()
 
     return sharp(background)
       .composite(frames.map((frame, index) => ({
@@ -302,7 +326,11 @@ export default class SpriteUpdateEvent {
         left: index * ISOMETRIC_CONFIG.tileWidth,
         top: 0
       })))
-      .png()
+      .png({
+        compressionLevel: 9,
+        adaptiveFiltering: false,
+        palette: true
+      })
       .toBuffer()
   }