Implemented Max-Rects packing

.gitignore

@@ -2,4 +2,7 @@
 node_modules/
 npm-debug.log
 test/*.json
+test/*.fnt
 test/*.png
+.vscode/
+.eslintrc*

index.js

@@ -1,7 +1,7 @@
 const opentype = require('opentype.js');
 const exec = require('child_process').exec;
 const mapLimit = require('map-limit');
-const MultiBinPacker = require('multi-bin-packer');
+const MaxRectsPacker = require('maxrects-packer');
 const Canvas = require('canvas');
 const path = require('path');
 
@@ -44,6 +44,7 @@ function generateBMFont (fontPath, opt, callback) {
   const texturePadding = opt.texturePadding || 2;
   const distanceRange = opt.distanceRange || 3;
   const fieldType = opt.fieldType || 'msdf';
+  const roundDecimal = opt.roundDecimal; // if no roudDecimal option, left null as-is
   if (fieldType !== 'msdf' && fieldType !== 'sdf' && fieldType !== 'psdf') {
     throw new TypeError('fieldType must be one of msdf, sdf, or psdf');
   }
@@ -54,7 +55,7 @@ function generateBMFont (fontPath, opt, callback) {
   }
   const canvas = new Canvas(textureWidth, textureHeight);
   const context = canvas.getContext('2d');
-  const packer = new MultiBinPacker(textureWidth, textureHeight, texturePadding);
+  const packer = new MaxRectsPacker(textureWidth, textureHeight, texturePadding);
   const chars = [];
   mapLimit(charset, 15, (char, cb) => {
     generateImage({
@@ -63,7 +64,8 @@ function generateBMFont (fontPath, opt, callback) {
       char,
       fontSize,
       fieldType,
-      distanceRange
+      distanceRange,
+      roundDecimal
     }, (err, res) => {
       if (err) return cb(err);
       cb(null, res);
@@ -72,9 +74,12 @@ function generateBMFont (fontPath, opt, callback) {
     if (err) callback(err);
     packer.addArray(results);
     const textures = packer.bins.map((bin, index) => {
-      context.fillStyle = '#ffffff';
-      context.fillRect(0, 0, canvas.width, canvas.height);
-      // context.clearRect(0, 0, canvas.width, canvas.height);
+      if(fieldType === "msdf") {
+        context.fillStyle = '#000000';
+        context.fillRect(0, 0, canvas.width, canvas.height);
+      } else {
+        context.clearRect(0, 0, canvas.width, canvas.height);
+      }
       bin.rects.forEach(rect => {
         if (rect.data.imageData) {
           context.putImageData(rect.data.imageData, rect.x, rect.y);
@@ -133,12 +138,13 @@ function generateBMFont (fontPath, opt, callback) {
       },
       kernings: kernings
     };
+    if(roundDecimal !== null) roundAllValue(fontData, roundDecimal);
     callback(null, textures, fontData);
   });
 }
 
 function generateImage (opt, callback) {
-  const {binaryPath, font, char, fontSize, fieldType, distanceRange} = opt;
+  const {binaryPath, font, char, fontSize, fieldType, distanceRange, roundDecimal} = opt;
   const glyph = font.charToGlyph(char);
   const commands = glyph.getPath(0, 0, fontSize).commands;
   let contours = [];
@@ -182,7 +188,7 @@ function generateImage (opt, callback) {
           bBox.right = command.x;
           bBox.top = command.y;
           firstCommand = false;
-        } else {
+        } else  {
           bBox.left = Math.min(bBox.left, command.x);
           bBox.bottom = Math.min(bBox.bottom, command.y);
           bBox.right = Math.max(bBox.right, command.x);
@@ -201,8 +207,13 @@ function generateImage (opt, callback) {
   const pad = distanceRange;
   let width = Math.round(bBox.right - bBox.left) + pad + pad;
   let height = Math.round(bBox.top - bBox.bottom) + pad + pad;
+  let xOffset = -bBox.left + pad;
   let yOffset = -bBox.bottom + pad;
-  let command = `${binaryPath} ${fieldType} -format text -stdout -size ${width} ${height} -translate ${pad} ${yOffset} -pxrange ${distanceRange} -defineshape "${shapeDesc}"`;
+  if (roundDecimal != null) {
+    xOffset = roundNumber(xOffset, roundDecimal);
+    yOffset = roundNumber(yOffset, roundDecimal);
+  }
+  let command = `${binaryPath} ${fieldType} -format text -stdout -size ${width} ${height} -translate ${xOffset} ${yOffset} -pxrange ${distanceRange} -defineshape "${shapeDesc}"`;
 
   exec(command, (err, stdout, stderr) => {
     if (err) return callback(err);
@@ -221,7 +232,7 @@ function generateImage (opt, callback) {
       }
     } else {
       for (let i = 0; i < rawImageData.length; i += channelCount) {
-        pixels.push(rawImageData[i], rawImageData[i], rawImageData[i], 255); // make monochrome w/ alpha
+        pixels.push(rawImageData[i], rawImageData[i], rawImageData[i], rawImageData[i]); // make monochrome w/ alpha
       }
     }
     let imageData;
@@ -241,8 +252,8 @@ function generateImage (opt, callback) {
           id: char.charCodeAt(0),
           width: width,
           height: height,
-          xoffset: 0,
-          yoffset: bBox.bottom + pad + baseline,
+          xoffset: bBox.left - pad,
+          yoffset: bBox.bottom - pad + baseline,
           xadvance: glyph.advanceWidth * scale,
           chnl: 15
         }
@@ -253,3 +264,30 @@ function generateImage (opt, callback) {
     callback(null, container);
   });
 }
+
+function roundAllValue (obj, decimal = 0) {
+  Object.keys(obj).forEach(key => {
+    if (typeof(obj[key]) === "object" && obj[key] !== null) {
+      roundAllValue (obj[key], decimal);
+    } else if(isNumeric(obj[key])) {
+      obj[key] = roundNumber(obj[key], decimal);
+    }
+  });
+}
+
+function isNumeric (n) {
+  return !isNaN(parseFloat(n)) && isFinite(n);
+}
+
+function roundNumber(num, scale) {
+  if(!("" + num).includes("e")) {
+    return +(Math.round(num + "e+" + scale)  + "e-" + scale);
+  } else {
+    const arr = ("" + num).split("e");
+    let sig = ""
+    if(+arr[1] + scale > 0) {
+      sig = "+";
+    }
+    return +(Math.round(+arr[0] + "e" + sig + (+arr[1] + scale)) + "e-" + scale);
+  }
+}