POC 2

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

@@ -154,7 +154,24 @@ 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
+    // Process the input sprite
+    const processedInput = await sharp(buffer)
+      .ensureAlpha()
+      .resize({
+        kernel: sharp.kernel.nearest,
+        fit: 'contain',
+        position: 'center'
+      })
+      .png({
+        compressionLevel: 9,
+        adaptiveFiltering: false,
+        palette: true,
+        quality: 100,
+        colors: 256
+      })
+      .toBuffer()
+
+    // Create the final composition
     return sharp({
       create: {
         width: frameWidth,
@@ -164,23 +181,17 @@ export default class SpriteUpdateEvent {
       }
     })
       .composite([{
-        input: await sharp(buffer)
-          .resize({
-            kernel: sharp.kernel.nearest
-          })
-          .png({
-            compressionLevel: 9,
-            adaptiveFiltering: false,
-            palette: true
-          })
-          .toBuffer(),
+        input: processedInput,
         left: offset,
-        top: 0
+        top: 0,
+        blend: 'over'
       }])
       .png({
         compressionLevel: 9,
         adaptiveFiltering: false,
-        palette: true
+        palette: true,
+        quality: 100,
+        colors: 256
       })
       .toBuffer()
   }
@@ -316,7 +327,10 @@ export default class SpriteUpdateEvent {
       .png({
         compressionLevel: 9,
         adaptiveFiltering: false,
-        palette: true
+        palette: true,
+        quality: 100,
+        colors: 256,
+        dither: 0
       })
       .toBuffer()
 
@@ -324,12 +338,16 @@ export default class SpriteUpdateEvent {
       .composite(frames.map((frame, index) => ({
         input: frame.buffer,
         left: index * ISOMETRIC_CONFIG.tileWidth,
-        top: 0
+        top: 0,
+        blend: 'over'
       })))
       .png({
         compressionLevel: 9,
         adaptiveFiltering: false,
-        palette: true
+        palette: true,
+        quality: 100,
+        colors: 256,
+        dither: 0
       })
       .toBuffer()
   }