add json sprsheet output

Author: hlorenzi

cli.js

@@ -214,6 +214,8 @@ for (const glyphId of argGlyphList.glyphIds)
 	}
 }
 
+const lineMetrics = font.getHorizontalLineMetrics()
+
 // Render glyphs.
 for (const glyph of resolvedGlyphList)
 {
@@ -314,6 +316,8 @@ for (const glyph of resolvedGlyphList)
 			height: geometry.yMax - geometry.yMin,
 			xOrigin: 0,
 			yOrigin: 0,
+			metricsY1: lineMetrics.lineTop,
+			metricsY2: lineMetrics.lineBottom,
 			xAdvance: geometry.advance,
 			emToPixels: null,
 		}
@@ -340,12 +344,41 @@ for (const glyph of resolvedGlyphList)
 		if (argDataMode != "json")
 			json.contours = geometry.contours
 
-		if (argDataMode != "xml-sprsheet")
-		{			
-			const jsonStr = JSON.stringify(json, null, 4)
-			fs.writeFileSync(outputDataFilename + ".json", jsonStr)
+		if (argDataMode === "json-sprsheet")
+		{
+			const filenameWithoutFolder = path.basename(outputDataFilename + ".png")
+			const json =
+`{
+	sprites:
+	[
+		{
+			id: "${mainUnicodeCodepoint.toString(16)}",
+			src: "${filenameWithoutFolder}",
+			x: 0,
+			y: 0,
+			w: ${metrics.width},
+			h: ${metrics.height},
+			trim_x: 0,
+			trim_y: 0,
+			trim_w: 0,
+			trim_h: 0,
+			properties:
+			[
+				unicode: ${mainUnicodeCodepoint},
+				xPivot: ${Math.floor(metrics.xOrigin)},
+				yPivot: ${Math.floor(metrics.yOrigin)},
+				advance: ${Math.floor(metrics.xAdvance)},
+				ascender: ${Math.floor(lineMetrics.lineTop * metrics.emToPixels)},
+				descender: ${Math.floor(lineMetrics.lineBottom * metrics.emToPixels)},
+				lineGap: ${Math.floor(lineMetrics.lineGap * metrics.emToPixels)}
+			]
 		}
-		else
+	]
+}`
+
+			fs.writeFileSync(outputDataFilename + ".json", json)
+		}
+		else if (argDataMode === "xml-sprsheet")
 		{
 			const filenameWithoutFolder = path.basename(outputDataFilename + ".png")
 			const xml =
@@ -358,5 +391,10 @@ for (const glyph of resolvedGlyphList)
 
 			fs.writeFileSync(outputDataFilename + ".sprsheet", xml)
 		}
+		else
+		{			
+			const jsonStr = JSON.stringify(json, null, 4)
+			fs.writeFileSync(outputDataFilename + ".json", jsonStr)
+		}
 	}
 }

index.html

@@ -73,7 +73,7 @@
 				<br>
 				Sub-font: <select id="selectFontIndex" disabled><option>No font loaded</option></select>
 				<label for="checkboxDrawMetrics"><input id="checkboxDrawMetrics" type="checkbox" checked></input> Draw Glyph Metrics</label>
-				<label for="checkboxSortUnicode"><input id="checkboxSortUnicode" type="checkbox"></input> Sort by Unicode</label>
+				<label for="checkboxSortUnicode"><input id="checkboxSortUnicode" type="checkbox" checked></input> Sort by Unicode</label>
 				<label for="checkboxCustomRender"><input id="checkboxCustomRender" type="checkbox"></input> DEBUG: Custom Rasterizer</label>
 				<br>
 				<span style="font-size:0.75em;">(Double-click a glyph to print geometry data to the Console and inspect its Unicode codepoint.)</span>