From 44e9bbe7a53cd17457d103451497d630af60c6c2 Mon Sep 17 00:00:00 2001 From: Cosmo Myzrail Gorynych Date: Tue, 25 Aug 2020 16:24:19 +1200 Subject: [PATCH] :bug: Fix overflow issues and wrong initial values for bitmap font generator Closes #220 --- .../fonts/bitmapFontGenerator/index.js | 28 +++++++++++---- .../fonts/bitmapFontGenerator/util.js | 35 ++++++++++--------- src/node_requires/resources/fonts/index.js | 6 ++-- src/riotTags/main-menu.tag | 2 +- 4 files changed, 43 insertions(+), 28 deletions(-) diff --git a/src/node_requires/resources/fonts/bitmapFontGenerator/index.js b/src/node_requires/resources/fonts/bitmapFontGenerator/index.js index 8a4ff4a67..f48e339ba 100644 --- a/src/node_requires/resources/fonts/bitmapFontGenerator/index.js +++ b/src/node_requires/resources/fonts/bitmapFontGenerator/index.js @@ -5,8 +5,8 @@ const opentype = require('opentype.js'); const draw = function draw(ctx, glyphList, descend, options) { var dict = {}; - var drawX = 0; - var drawY = 0; + var drawX = 1; + var drawY = 1; var drawHeight = options.baseline + descend; var mg; @@ -25,8 +25,8 @@ const draw = function draw(ctx, glyphList, descend, options) { drawWidth = g.width; } if (drawX + drawWidth > ctx.canvas.width) { - drawX = 0; - drawY += drawHeight + options.margin; + drawX = 1; + drawY += drawHeight + options.margin * 2; } var path = g.glyph.getPath(drawX + (drawWidth / 2) - (g.width / 2), drawY + options.baseline, options.height); path.fill = options.fill; @@ -43,7 +43,7 @@ const draw = function draw(ctx, glyphList, descend, options) { }; }); } - drawX += drawWidth + options.margin; + drawX += drawWidth + options.margin * 2; } }); @@ -52,6 +52,7 @@ const draw = function draw(ctx, glyphList, descend, options) { }; }; +// eslint-disable-next-line max-lines-per-function const generateBitmapFont = async function generateBitmapFont(fontSrc, outputPath, options, callback) { const fs = require('fs-extra'); const buffer = await fs.readFile(fontSrc); @@ -66,6 +67,7 @@ const generateBitmapFont = async function generateBitmapFont(fontSrc, outputPath var lostChars = []; var glyphList = []; + Array.from(options.list).forEach((char) => { const [glyph] = font.stringToGlyphs(char); glyph.font = font; @@ -107,9 +109,20 @@ const generateBitmapFont = async function generateBitmapFont(fontSrc, outputPath // Calculate the required canvas size var canvasSize; if (options.width === void 0) { - canvasSize = util.calculateCanvasSizeProp(options.list, glyphList, adjustedHeight, options.baseline + descend); + canvasSize = util.calculateCanvasSizeProp( + options.list, + glyphList, + adjustedHeight, + options.baseline + descend, + options.margin || 1 + ); } else { - canvasSize = util.calculateCanvasSize(options.list, options.width, adjustedHeight); + canvasSize = util.calculateCanvasSize( + options.list, + options.width, + adjustedHeight, + options.margin || 1 + ); } // Check if the created canvas size is valid @@ -141,6 +154,7 @@ const generateBitmapFont = async function generateBitmapFont(fontSrc, outputPath 'Try Using other font or characters.'); } await util.outputBitmapFont(outputPath, canvas, callback); + return { map: drawResult.map, missingGlyph: drawResult.missingGlyph, diff --git a/src/node_requires/resources/fonts/bitmapFontGenerator/util.js b/src/node_requires/resources/fonts/bitmapFontGenerator/util.js index ebbd03c92..7ce3dc8b8 100644 --- a/src/node_requires/resources/fonts/bitmapFontGenerator/util.js +++ b/src/node_requires/resources/fonts/bitmapFontGenerator/util.js @@ -1,7 +1,7 @@ /* eslint-disable max-len */ const fs = require('fs').promises; -const calculateCanvasSize = function calculateCanvasSize(text, charWidth, charHeight) { +const calculateCanvasSize = function calculateCanvasSize(text, charWidth, charHeight, margin) { if (charWidth <= 0 || charHeight <= 0) { return { width: -1, height: -1 @@ -12,13 +12,13 @@ const calculateCanvasSize = function calculateCanvasSize(text, charWidth, charHe var canvasSquareSideSize = 1; // Find the length of the side of a square that can contain characters - while ((canvasSquareSideSize / charWidth) * (canvasSquareSideSize / charHeight) < textSize) { + while ((canvasSquareSideSize / (charWidth + margin * 2)) * (canvasSquareSideSize / (charHeight + margin * 2)) < textSize) { canvasSquareSideSize *= 2; } var canvasWidth = canvasSquareSideSize; // CanvasSquareSideSize cannot be used because it may not be square - var tmpCanvasHeight = Math.ceil(textSize / Math.floor(canvasWidth / charWidth)) * charHeight; + var tmpCanvasHeight = Math.ceil(textSize / Math.floor(canvasWidth / (charWidth + margin * 2))) * (charHeight + margin * 2); var canvasHeight = 1; while (canvasHeight < tmpCanvasHeight) { canvasHeight *= 2; @@ -29,34 +29,35 @@ const calculateCanvasSize = function calculateCanvasSize(text, charWidth, charHe }; }; -const canGoIn = function canGoIn(canvasSize, glyphList, charHeight) { - var drawX = 0; - var drawY = 0; +const canGoIn = function canGoIn(canvasSize, glyphList, charHeight, margin) { + var drawX = 1; + var drawY = 1; glyphList.forEach(glyph => { - if (drawX + glyph.width > canvasSize.width) { - drawX = 0; - drawY += charHeight; + if (drawX + glyph.width + margin * 2 > canvasSize.width) { + drawX = 1; + drawY += charHeight + margin * 2; } - drawX += glyph.width; + drawX += glyph.width + margin * 2; }); - return drawY + charHeight < canvasSize.height; + return drawY + charHeight + margin * 2 < canvasSize.height; }; const calculateCanvasSizeProp = function calculateCanvasSizeProp( text, glyphList, height, - charHeight + charHeight, + margin ) { var widthAverage = 0; var widthMax = 0; glyphList.forEach(glyph => { - if (glyph.width > widthMax) { - widthMax = glyph.width; + if (glyph.width + margin * 2 > widthMax) { + widthMax = glyph.width + margin * 2; } - widthAverage += glyph.width; + widthAverage += glyph.width + margin * 2; }); widthAverage /= glyphList.length; @@ -66,9 +67,9 @@ const calculateCanvasSizeProp = function calculateCanvasSizeProp( }; } // Use the average value to calculate the approximate size - var canvasSize = calculateCanvasSize(text, widthAverage, height); + var canvasSize = calculateCanvasSize(text, widthAverage, height, margin); // Increase the vertical width until the text can be entered - while (!canGoIn(canvasSize, glyphList, charHeight)) { + while (!canGoIn(canvasSize, glyphList, charHeight, margin)) { canvasSize.height *= 2; } return canvasSize; diff --git a/src/node_requires/resources/fonts/index.js b/src/node_requires/resources/fonts/index.js index a44153e63..e2bdc0495 100644 --- a/src/node_requires/resources/fonts/index.js +++ b/src/node_requires/resources/fonts/index.js @@ -76,9 +76,9 @@ const importTtfToFont = async function importTtfToFont(src) { italic: false, origname: `f${uid}.ttf`, lastmod: Number(new Date()), - pixelFont: false, - pixelFontSize: 16, - pixelFontLineHeight: 18, + bitmapFont: false, + bitmapFontSize: 16, + bitmapFontLineHeight: 18, charsets: ['allInFont'], customCharset: '', uid diff --git a/src/riotTags/main-menu.tag b/src/riotTags/main-menu.tag index 1e04e4337..3a6bd81d4 100644 --- a/src/riotTags/main-menu.tag +++ b/src/riotTags/main-menu.tag @@ -246,7 +246,7 @@ main-menu.flexcol const runCtExport = require('./data/node_requires/exporter'); const exportFile = path.join( buildFolder, - `${currentProject.settings.authoring.title || 'ct.js game'}.zip` + `${global.currentProject.settings.authoring.title || 'ct.js game'}.zip` ); const inDir = await getExportDir(); await fs.remove(exportFile);