位图字体生成器

卡皮巴拉

于 2024-06-03 11:13:33 发布

阅读量503

点赞数 4

文章标签：游戏游戏美术技术美术数字雕刻贴图

本文链接：https://blog.csdn.net/upgrade_bro/article/details/139409261

版权

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="index.css">
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
    <meta http-equiv="X-Content-Security-Policy" content="img-src 'self' data:; default-src 'self'; script-src 'self'">
    <meta http-equiv="Content-Security-Policy" content="img-src 'self' data:; default-src 'self'; script-src 'self'">
    <title>bitmap font maker位图字体生成器</title>
    <script src="./FileSaver.js"></script>

  </head>

  <body>
    <div id="drop_zone" >
        <table>
            <tr>
                <td>
                    导出文件名字: <br>
                    <input id="input_fontName"/>
                    <br>
                    画布宽高:<br>
                    <input type="number" id="input_CanvasWidth"/> ×
                    <input type="number" id="input_CanvasHeight"/>
                </td>
            </tr>
        </table>
        <table>
            <tr> 请将位图字体图片拖拽到红方框内 </tr>
        </table>
        <table>
            <tr colspan="6" >
                <canvas id="canvas_font" ></canvas>
            </tr>
        </table>
        <table>
            <tr>
                <div id="div_font_setting">
                </div>
            </tr>
        </table>
        <br> 预览: <br>
        <input id="input_preview"/><br>
        <canvas id="canvas_preview" ></canvas>
        <br>
        <button id='button_save'>save</button>
        <br>
        <button id='button_clear'>clear</button>
    </div>


    <script src="./renderer.js"></script>
  </body>
</html>

index.css

#drop_zone {
  border: solid 2px red;
  /* border-radius: 10px;
  width: 96%;
  margin: 0 auto;
  flex-wrap: wrap; */
}

canvas {
  border: dashed 1px #585858;
  margin: 0 auto;
}

FileSaver.js

(function (global, factory) {
  if (typeof define === "function" && define.amd) {
    define([], factory);
  } else if (typeof exports !== "undefined") {
    factory();
  } else {
    var mod = {
      exports: {}
    };
    factory();
    global.FileSaver = mod.exports;
  }
})(this, function () {
  "use strict";

  /*
  * FileSaver.js
  * A saveAs() FileSaver implementation.
  *
  * By Eli Grey, http://eligrey.com
  *
  * License : https://github.com/eligrey/FileSaver.js/blob/master/LICENSE.md (MIT)
  * source  : http://purl.eligrey.com/github/FileSaver.js
  */
  // The one and only way of getting global scope in all environments
  // https://stackoverflow.com/q/3277182/1008999
  var _global = typeof window === 'object' && window.window === window ? window : typeof self === 'object' && self.self === self ? self : typeof global === 'object' && global.global === global ? global : void 0;

  function bom(blob, opts) {
    if (typeof opts === 'undefined') opts = {
      autoBom: false
    };else if (typeof opts !== 'object') {
      console.warn('Deprecated: Expected third argument to be a object');
      opts = {
        autoBom: !opts
      };
    } // prepend BOM for UTF-8 XML and text/* types (including HTML)
    // note: your browser will automatically convert UTF-16 U+FEFF to EF BB BF

    if (opts.autoBom && /^\s*(?:text\/\S*|application\/xml|\S*\/\S*\+xml)\s*;.*charset\s*=\s*utf-8/i.test(blob.type)) {
      return new Blob([String.fromCharCode(0xFEFF), blob], {
        type: blob.type
      });
    }

    return blob;
  }

  function download(url, name, opts) {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url);
    xhr.responseType = 'blob';

    xhr.onload = function () {
      saveAs(xhr.response, name, opts);
    };

    xhr.onerror = function () {
      console.error('could not download file');
    };

    xhr.send();
  }

  function corsEnabled(url) {
    var xhr = new XMLHttpRequest(); // use sync to avoid popup blocker

    xhr.open('HEAD', url, false);

    try {
      xhr.send();
    } catch (e) {}

    return xhr.status >= 200 && xhr.status <= 299;
  } // `a.click()` doesn't work for all browsers (#465)


  function click(node) {
    try {
      node.dispatchEvent(new MouseEvent('click'));
    } catch (e) {
      var evt = document.createEvent('MouseEvents');
      evt.initMouseEvent('click', true, true, window, 0, 0, 0, 80, 20, false, false, false, false, 0, null);
      node.dispatchEvent(evt);
    }
  } // Detect WebView inside a native macOS app by ruling out all browsers
  // We just need to check for 'Safari' because all other browsers (besides Firefox) include that too
  // https://www.whatismybrowser.com/guides/the-latest-user-agent/macos


  var isMacOSWebView = /Macintosh/.test(navigator.userAgent) && /AppleWebKit/.test(navigator.userAgent) && !/Safari/.test(navigator.userAgent);
  var saveAs = _global.saveAs || ( // probably in some web worker
  typeof window !== 'object' || window !== _global ? function saveAs() {}
  /* noop */
  // Use download attribute first if possible (#193 Lumia mobile) unless this is a macOS WebView
  : 'download' in HTMLAnchorElement.prototype && !isMacOSWebView ? function saveAs(blob, name, opts) {
    var URL = _global.URL || _global.webkitURL;
    var a = document.createElement('a');
    name = name || blob.name || 'download';
    a.download = name;
    a.rel = 'noopener'; // tabnabbing
    // TODO: detect chrome extensions & packaged apps
    // a.target = '_blank'

    if (typeof blob === 'string') {
      // Support regular links
      a.href = blob;

      if (a.origin !== location.origin) {
        corsEnabled(a.href) ? download(blob, name, opts) : click(a, a.target = '_blank');
      } else {
        click(a);
      }
    } else {
      // Support blobs
      a.href = URL.createObjectURL(blob);
      setTimeout(function () {
        URL.revokeObjectURL(a.href);
      }, 4E4); // 40s

      setTimeout(function () {
        click(a);
      }, 0);
    }
  } // Use msSaveOrOpenBlob as a second approach
  : 'msSaveOrOpenBlob' in navigator ? function saveAs(blob, name, opts) {
    name = name || blob.name || 'download';

    if (typeof blob === 'string') {
      if (corsEnabled(blob)) {
        download(blob, name, opts);
      } else {
        var a = document.createElement('a');
        a.href = blob;
        a.target = '_blank';
        setTimeout(function () {
          click(a);
        });
      }
    } else {
      navigator.msSaveOrOpenBlob(bom(blob, opts), name);
    }
  } // Fallback to using FileReader and a popup
  : function saveAs(blob, name, opts, popup) {
    // Open a popup immediately do go around popup blocker
    // Mostly only available on user interaction and the fileReader is async so...
    popup = popup || open('', '_blank');

    if (popup) {
      popup.document.title = popup.document.body.innerText = 'downloading...';
    }

    if (typeof blob === 'string') return download(blob, name, opts);
    var force = blob.type === 'application/octet-stream';

    var isSafari = /constructor/i.test(_global.HTMLElement) || _global.safari;

    var isChromeIOS = /CriOS\/[\d]+/.test(navigator.userAgent);

    if ((isChromeIOS || force && isSafari || isMacOSWebView) && typeof FileReader !== 'undefined') {
      // Safari doesn't allow downloading of blob URLs
      var reader = new FileReader();

      reader.onloadend = function () {
        var url = reader.result;
        url = isChromeIOS ? url : url.replace(/^data:[^;]*;/, 'data:attachment/file;');
        if (popup) popup.location.href = url;else location = url;
        popup = null; // reverse-tabnabbing #460
      };

      reader.readAsDataURL(blob);
    } else {
      var URL = _global.URL || _global.webkitURL;
      var url = URL.createObjectURL(blob);
      if (popup) popup.location = url;else location.href = url;
      popup = null; // reverse-tabnabbing #460

      setTimeout(function () {
        URL.revokeObjectURL(url);
      }, 4E4); // 40s
    }
  });
  _global.saveAs = saveAs.saveAs = saveAs;

  if (typeof module !== 'undefined') {
    module.exports = saveAs;
  }
});

renderer.js


let imageList = []
let canvasWidth = 256
let canvasHeight = 256
let fontSize = 32
let fontName = 'test'
let previewStr = ''

const input_fontName = document.getElementById('input_fontName');
input_fontName.value = fontName
input_fontName.addEventListener('input', () => {
    fontName = input_fontName.value
});

const input_CanvasWidth = document.getElementById('input_CanvasWidth');
input_CanvasWidth.value = canvasWidth
input_CanvasWidth.addEventListener('input', () => {
    canvasWidth = input_CanvasWidth.value
    updateCanvas()
});

const input_CanvasHeight = document.getElementById('input_CanvasHeight');
input_CanvasHeight.value = canvasHeight
input_CanvasHeight.addEventListener('input', () => {
    canvasHeight = input_CanvasHeight.value
    updateCanvas()
});

const input_preview = document.getElementById('input_preview');
input_preview.addEventListener('input', () => {
    previewStr = input_preview.value
    updateCanvasPreview()
});

const div_font_setting = document.getElementById('div_font_setting');

const drop_zone = document.getElementById('drop_zone')
drop_zone.ondragover = (e) => {
    e.preventDefault()
    e.stopPropagation()
}
drop_zone.ondrop = (e) => {
    e.preventDefault()
    e.stopPropagation()
    let dt = e.dataTransfer;
    let files = dt.files;

    for (let i = 0; i < files.length; i++) {
        let file = files[i];
        let imageType = /^image\//;

        if (!imageType.test(file.type)) {
            continue;
        }

        let img = document.createElement("img");
        let reader = new FileReader();
        reader.onload = (function (aImg) {
            return function (e) {
                aImg.src = e.target.result;
                aImg.onload = () => {
                    let fileName = file.name.split('.')[0];
                    let data = {
                        img: aImg,
                        char: fileName.substr(fileName.length - 1, 1),
                        width: aImg.width,
                        height: aImg.height,
                        x: 0,
                        y: 0,
                        xoffset: 0,
                        yoffset: 0,
                        xadvance: aImg.width,
                    }

                    div_font_setting.appendChild(aImg);
                    let input_char = document.createElement('input')
                    input_char.size = 1
                    input_char.value = data.char
                    input_char.addEventListener('input', () => {
                        data.char = input_char.value
                        updateCanvasPreview()
                    });
                    div_font_setting.appendChild(input_char)

                    let info = document.createElement("span");
                    info.innerHTML = "xadvance:";
                    div_font_setting.appendChild(info)
                    let input_xadvance = document.createElement('input')
                    input_xadvance.size = 1
                    input_xadvance.value = data.xadvance
                    input_xadvance.type = 'number'
                    input_xadvance.addEventListener('input', () => {
                        data.xadvance = Number(input_xadvance.value)
                        updateCanvasPreview()
                    });
                    div_font_setting.appendChild(input_xadvance)

                    info = document.createElement("span");
                    info.innerHTML = "xoffset:";
                    div_font_setting.appendChild(info)
                    let input_xoffset = document.createElement('input')
                    input_xoffset.size = 1
                    input_xoffset.value = data.xoffset
                    input_xoffset.type = 'number'
                    input_xoffset.addEventListener('input', () => {
                        data.xoffset = Number(input_xoffset.value)
                        updateCanvasPreview()
                    });
                    div_font_setting.appendChild(input_xoffset)

                    info = document.createElement("span");
                    info.innerHTML = "yoffset:";
                    div_font_setting.appendChild(info)
                    let input_yoffset = document.createElement('input')
                    input_yoffset.size = 1
                    input_yoffset.value = data.yoffset
                    input_yoffset.type = 'number'
                    input_yoffset.addEventListener('input', () => {
                        data.yoffset = Number(input_yoffset.value)
                        updateCanvasPreview()
                    });
                    div_font_setting.appendChild(input_yoffset)

                    let br = document.createElement('br')
                    div_font_setting.appendChild(br)

                    imageList.push(data);
                    updateCanvas();
                };
            };
        })(img);
        reader.readAsDataURL(file);
    }
}

const canvas_font = document.getElementById('canvas_font')
const canvas_font_ctx = canvas_font.getContext('2d')
function updateCanvas() {
    canvas_font.width = canvasWidth
    canvas_font.height = canvasHeight
    canvas_font_ctx.clearRect(0, 0, canvasWidth, canvasHeight)
    let height = 0;
    let space = 2;
    let x = space;
    let y = space;
    imageList.forEach(img => {
        if (img.height > height) height = img.height;
    });
    height = Math.ceil(height);
    fontSize = height;
    imageList.forEach(img2 => {
        let img = img2.img
        if (x + img2.width + space > canvasWidth) {
            x = space;
            y += height + space;
        }
        canvas_font_ctx.drawImage(img, x, y);
        img2.x = x;
        img2.y = y;
        x += img2.width + space;
    });
}


const button_save = document.getElementById('button_save')
button_save.addEventListener('click', event => {
    canvas_font.toBlob(function (blob) {
        saveAs(blob, fontName + ".png");
    });
    let str = `info size=${fontSize} unicode=1 stretchH=100 smooth=1 aa=1 padding=0,0,0,0 spacing=1,1 outline=0 common lineHeight=${fontSize} base=23 scaleW=${canvasWidth} scaleH=${canvasHeight} pages=1 packed=0 page id=0 file="${fontName}.png" chars count=${imageList.length}\n`;
    imageList.forEach(img => {
        str += `char id=${img.char.charCodeAt(0)} x=${img.x} y=${img.y} width=${img.width} height=${img.height} xoffset=${img.xoffset} yoffset=${img.yoffset} xadvance=${img.xadvance} \n`;
    })
    // console.log(str)
    let blob = new Blob([str], { type: "text/plain;charset=utf-8" });
    saveAs(blob, fontName + ".fnt");
});


function clear(){
    div_font_setting.innerHTML = ''
    imageList = []
    updateCanvas()
    previewStr = ''
    updateCanvasPreview()
}

const button_clear = document.getElementById('button_clear')
button_clear.addEventListener('click', event => {
    clear()
});


const canvas_preview = document.getElementById('canvas_preview')
const canvas_preview_ctx = canvas_preview.getContext('2d')
function updateCanvasPreview() {
    let _string = previewStr
    let textLen = _string.length;
    let map = {}
    let xadvance = 0
    let height = 0
    imageList.forEach(img => {
        map[img.char.charCodeAt(0)] = img
        if (img.height > height) height = img.height;
        if (img.xadvance > xadvance) xadvance = img.xadvance;
    });
    let width = xadvance * textLen
    canvas_preview.width = width
    canvas_preview.height = height
    canvas_preview_ctx.clearRect(0, 0, width, height)
    let startX = 0
    let y = 0
    // console.log('updateCanvasPreview', _string)
    for (let index = 0; index < textLen; index++) {
        let character = _string.charCodeAt(index);
        let img = map[character]
        if (img) {
            // console.log('drawImage', index, character, img, startX)
            canvas_preview_ctx.drawImage(img.img, startX + img.xoffset, y + img.yoffset);
            startX += img.xadvance
        }
    }
}

clear()