WIP: #2 add buffer to each sprite(not tested yet)

src/lib/image.ts

@@ -9,6 +9,7 @@ export class Image {
   width = 0
   height = 0
   range = 1
+  buffer_length = 3
   rendered_image: Buffer | null = null
   sdf = false
 
@@ -52,6 +53,23 @@ export class Image {
       // because the image is already at the specified size, we can use it directly.
       this.rendered_image = await intermediate_image.toBuffer()
     }
+    // add buffer
+    this.rendered_image = await sharp({
+        create: {
+          width: this.buffer_width(),
+          height: this.buffer_height(),
+          channels: 4,
+          background: { r: 0, g: 0, b: 0, alpha: 0 },
+        },
+      })
+      .composite([{
+        input: this.rendered_image!,
+        top: this.buffer_length,
+        left: this.buffer_length,
+      }])
+      .png()
+      .toBuffer()
+
     if (sdf) {
       const radius = 8
       const img = this.rendered_image
@@ -67,15 +85,15 @@ export class Image {
       })
       const inner_df = alphas.map((alpha) => {
         if (alpha === 255) return Number.MAX_VALUE
-        return Math.max(0, 0.5 - ((255 - alpha) / 255))**2
+        return Math.max(0, (alpha / 255) - 0.5)**2
       })
-      for (let col = 0; col < this.real_width(); col++) {
-        dt(outer_df, col, this.real_width(), this.real_height())
-        dt(inner_df, col, this.real_width(), this.real_height())
+      for (let col = 0; col < this.buffer_width(); col++) {
+        dt(outer_df, col, this.buffer_width(), this.buffer_height())
+        dt(inner_df, col, this.buffer_width(), this.buffer_height())
       }
-      for (let row = 0; row < this.real_height(); row++) {
-        dt(outer_df, row * this.real_width(), 1, this.real_width())
-        dt(inner_df, row * this.real_width(), 1, this.real_width())
+      for (let row = 0; row < this.buffer_height(); row++) {
+        dt(outer_df, row * this.buffer_width(), 1, this.buffer_width())
+        dt(inner_df, row * this.buffer_width(), 1, this.buffer_width())
       }
       const result = outer_df.map((outerDfValue, index) => {
         const innerDfValue = inner_df[index]
@@ -87,8 +105,8 @@ export class Image {
       const buffer = Buffer.from(normalizedData)
       this.rendered_image = await sharp(buffer, {
         raw: {
-          width: this.real_width(),
-          height: this.real_height(),
+          width: this.buffer_width(),
+          height: this.buffer_height(),
           channels: 1
         }
       }).png().toBuffer()
@@ -104,10 +122,18 @@ export class Image {
     return Math.round((this.height / this.file_ratio) * this.ratio)
   }
 
+  buffer_width() {
+    return this.real_width() + this.buffer_length * 2
+  }
+
+  buffer_height() {
+    return this.real_height() + this.buffer_length * 2
+  }
+
   to_obj(): SpriteImage {
     return {
-      height: this.real_height(),
-      width: this.real_width(),
+      height: this.buffer_height(),
+      width: this.buffer_width(),
       x: this.x,
       y: this.y,
       pixelRatio: this.ratio,

src/lib/matrix.ts

@@ -16,8 +16,8 @@ export class Matrix {
       this.images.map((image) => {
         return {
           image,
-          width: image.real_width(),
-          height: image.real_height(),
+          width: image.buffer_width(),
+          height: image.buffer_height(),
         }
       }),
     )

tests/fixtures/test1.json

@@ -1,26 +1 @@
-{
-  "airport": {
-    "height": 15,
-    "width": 15,
-    "x": 0,
-    "y": 43,
-    "pixelRatio": 1,
-    "sdf": false
-  },
-  "my_bbq": {
-    "height": 32,
-    "width": 32,
-    "x": 43,
-    "y": 0,
-    "pixelRatio": 1,
-    "sdf": false
-  },
-  "airport_xl": {
-    "height": 43,
-    "width": 43,
-    "x": 0,
-    "y": 0,
-    "pixelRatio": 1,
-    "sdf": false
-  }
-}
+{"airport":{"height":21,"width":21,"x":0,"y":49,"pixelRatio":1,"sdf":false},"my_bbq":{"height":38,"width":38,"x":49,"y":0,"pixelRatio":1,"sdf":false},"airport_xl":{"height":49,"width":49,"x":0,"y":0,"pixelRatio":1,"sdf":false}}

tests/fixtures/test2.json

@@ -1,24 +1,24 @@
 {
   "airport": {
-    "height": 30,
-    "width": 30,
+    "height": 36,
+    "width": 36,
     "x": 0,
-    "y": 86,
+    "y": 92,
     "pixelRatio": 2,
     "sdf": false
   },
   "airport_xl": {
-    "height": 86,
-    "width": 86,
+    "height": 92,
+    "width": 92,
     "x": 0,
     "y": 0,
     "pixelRatio": 2,
     "sdf": false
   },
   "my_bbq": {
-    "height": 64,
-    "width": 64,
-    "x": 86,
+    "height": 70,
+    "width": 70,
+    "x": 92,
     "y": 0,
     "pixelRatio": 2,
     "sdf": false

tests/fixtures/test3.json

@@ -1,23 +1,23 @@
 {
   "airport": {
-    "height": 15,
-    "width": 15,
+    "height": 21,
+    "width": 21,
     "x": 0,
-    "y": 43,
+    "y": 49,
     "pixelRatio": 1,
     "sdf": false
   },
   "my_bbq": {
-    "height": 32,
-    "width": 32,
-    "x": 43,
+    "height": 38,
+    "width": 38,
+    "x": 49,
     "y": 0,
     "pixelRatio": 1,
     "sdf": false
   },
   "airport_xl": {
-    "height": 43,
-    "width": 43,
+    "height": 49,
+    "width": 49,
     "x": 0,
     "y": 0,
     "pixelRatio": 1,

tests/fixtures/test3@2x.json

@@ -1,24 +1,24 @@
 {
   "airport": {
-    "height": 30,
-    "width": 30,
+    "height": 36,
+    "width": 36,
     "x": 0,
-    "y": 86,
+    "y": 92,
     "pixelRatio": 2,
     "sdf": false
   },
   "airport_xl": {
-    "height": 86,
-    "width": 86,
+    "height": 92,
+    "width": 92,
     "x": 0,
     "y": 0,
     "pixelRatio": 2,
     "sdf": false
   },
   "my_bbq": {
-    "height": 64,
-    "width": 64,
-    "x": 86,
+    "height": 70,
+    "width": 70,
+    "x": 92,
     "y": 0,
     "pixelRatio": 2,
     "sdf": false

tests/fixtures/test4.json

@@ -1,39 +1,39 @@
 {
   "airport": {
-    "height": 15,
-    "width": 15,
+    "height": 21,
+    "width": 21,
     "x": 0,
-    "y": 43,
+    "y": 49,
     "pixelRatio": 1,
     "sdf": false
   },
   "arrow": {
-    "height": 15,
-    "width": 15,
-    "x": 15,
-    "y": 43,
+    "height": 21,
+    "width": 21,
+    "x": 21,
+    "y": 49,
     "pixelRatio": 1,
     "sdf": false
   },
   "circle": {
-    "height": 15,
-    "width": 15,
-    "x": 30,
-    "y": 43,
+    "height": 21,
+    "width": 21,
+    "x": 42,
+    "y": 49,
     "pixelRatio": 1,
     "sdf": false
   },
   "my_bbq": {
-    "height": 32,
-    "width": 32,
-    "x": 43,
+    "height": 38,
+    "width": 38,
+    "x": 49,
     "y": 0,
     "pixelRatio": 1,
     "sdf": false
   },
   "airport_xl": {
-    "height": 43,
-    "width": 43,
+    "height": 49,
+    "width": 49,
     "x": 0,
     "y": 0,
     "pixelRatio": 1,

tests/lib/image.test.ts

@@ -7,28 +7,28 @@ describe('test lib/image.ts', (): void => {
   it('works', async () => {
     const image = new Image(path.join(iconsDir, 'airport.svg'), 1, 'airport')
     await image.parse()
-    expect(image.real_height()).toStrictEqual(15)
-    expect(image.real_width()).toStrictEqual(15)
+    expect(image.buffer_height()).toStrictEqual(21)
+    expect(image.buffer_width()).toStrictEqual(21)
   })
 
   it('works with sdf', async () => {
     const image = new Image(path.join(iconsDir, 'airport.svg'), 1, 'airport')
     await image.parse(true)
-    expect(image.real_height()).toStrictEqual(15)
-    expect(image.real_width()).toStrictEqual(15)
+    expect(image.buffer_height()).toStrictEqual(21)
+    expect(image.buffer_width()).toStrictEqual(21)
   })
 
   it('works with ratio', async () => {
     const image = new Image(path.join(iconsDir, 'airport.svg'), 2, 'airport')
     await image.parse()
-    expect(image.real_height()).toStrictEqual(30)
-    expect(image.real_width()).toStrictEqual(30)
+    expect(image.buffer_height()).toStrictEqual(36)
+    expect(image.buffer_width()).toStrictEqual(36)
   })
 
   it('works with ratio and sdf', async () => {
     const image = new Image(path.join(iconsDir, 'airport.svg'), 2, 'airport')
     await image.parse(true)
-    expect(image.real_height()).toStrictEqual(30)
-    expect(image.real_width()).toStrictEqual(30)
+    expect(image.buffer_height()).toStrictEqual(36)
+    expect(image.buffer_width()).toStrictEqual(36)
   })
 })

tests/lib/matrix.test.ts

@@ -23,8 +23,8 @@ describe('test lib/matrix.ts', (): void => {
     const matrix = new Matrix(images1)
     matrix.calc()
 
-    expect(matrix.max_x).toStrictEqual(15)
-    expect(matrix.max_y).toStrictEqual(15)
+    expect(matrix.max_x).toStrictEqual(21)
+    expect(matrix.max_y).toStrictEqual(21)
   })
 
   test('matrix calculation works with 2 images', async () => {
@@ -40,7 +40,7 @@ describe('test lib/matrix.ts', (): void => {
     const matrix = new Matrix(images1)
     matrix.calc()
 
-    expect(matrix.max_x).toStrictEqual(30)
-    expect(matrix.max_y).toStrictEqual(15)
+    expect(matrix.max_x).toStrictEqual(42)
+    expect(matrix.max_y).toStrictEqual(21)
   })
 })