项目中有用到艺术字,美术通过 bmfont64 将字体导给我了,结果发现在应用上 空格不显示 如图:

今天去深究了一下这个问题,发现是底层没封装好,然后自己改了一下
下面是改过的 BitmapFont 类 在laya.core.js 里面

class BitmapFont {
constructor() {
this._fontCharDic = {};
this._fontWidthMap = {};
this._maxWidth = 0;
this._spaceWidth = 10;
this.fontSize = 12;
this.autoScaleSize = false;
this.letterSpacing = 0;
}
loadFont(path, complete) {
this._path = path;
this._complete = complete;
if (!path || path.indexOf(".fnt") === -1) {
console.error('Bitmap font configuration information must be a ".fnt" file');
return;
}
ILaya.loader.load([{ url: path, type: ILaya.Loader.XML }, { url: path.replace(".fnt", ".png"), type: ILaya.Loader.IMAGE }], Handler.create(this, this._onLoaded));
}
_onLoaded() {
this.parseFont(ILaya.Loader.getRes(this._path), ILaya.Loader.getRes(this._path.replace(".fnt", ".png")));
this._complete && this._complete.run();
}
parseFont(xml, texture) {
if (xml == null || texture == null)
return;
this._texture = texture;
var tScale = 1;
var tInfo = xml.getElementsByTagName("info");
if (!tInfo[0].getAttributeNode) {
return this.parseFont2(xml, texture);
}
this.fontSize = parseInt(tInfo[0].getAttributeNode("size").nodeValue);
var tPadding = tInfo[0].getAttributeNode("padding").nodeValue;
var tPaddingArray = tPadding.split(",");
this._padding = [parseInt(tPaddingArray[0]), parseInt(tPaddingArray[1]), parseInt(tPaddingArray[2]), parseInt(tPaddingArray[3])];
var chars = xml.getElementsByTagName("char");
var i = 0;
for (i = 0; i < chars.length; i++) {
var tAttribute = chars[i];
var tId = parseInt(tAttribute.getAttributeNode("id").nodeValue);
var xOffset = parseInt(tAttribute.getAttributeNode("xoffset").nodeValue) / tScale;
var yOffset = parseInt(tAttribute.getAttributeNode("yoffset").nodeValue) / tScale;
var xAdvance = parseInt(tAttribute.getAttributeNode("xadvance").nodeValue) / tScale;
var region = new Rectangle();
region.x = parseInt(tAttribute.getAttributeNode("x").nodeValue);
region.y = parseInt(tAttribute.getAttributeNode("y").nodeValue);
region.width = parseInt(tAttribute.getAttributeNode("width").nodeValue);
region.height = parseInt(tAttribute.getAttributeNode("height").nodeValue);
var tTexture = Texture.create(texture, region.x, region.y, region.width, region.height, xOffset, yOffset);
this._maxWidth = Math.max(this._maxWidth, xAdvance + this.letterSpacing);
this._fontCharDic[tId] = tTexture;
this._fontWidthMap[tId] = xAdvance;
}
}
parseFont2(xml, texture) {
if (xml == null || texture == null)
return;
this._texture = texture;
var tScale = 1;
var tInfo = xml.getElementsByTagName("info");
this.fontSize = parseInt(tInfo[0].attributes["size"].nodeValue);
var tPadding = tInfo[0].attributes["padding"].nodeValue;
var tPaddingArray = tPadding.split(",");
this._padding = [parseInt(tPaddingArray[0]), parseInt(tPaddingArray[1]), parseInt(tPaddingArray[2]), parseInt(tPaddingArray[3])];
var chars = xml.getElementsByTagName("char");
var i = 0;
for (i = 0; i < chars.length; i++) {
var tAttribute = chars[i].attributes;
var tId = parseInt(tAttribute["id"].nodeValue);
var xOffset = parseInt(tAttribute["xoffset"].nodeValue) / tScale;
var yOffset = parseInt(tAttribute["yoffset"].nodeValue) / tScale;
var xAdvance = parseInt(tAttribute["xadvance"].nodeValue) / tScale;
var region = new Rectangle();
region.x = parseInt(tAttribute["x"].nodeValue);
region.y = parseInt(tAttribute["y"].nodeValue);
region.width = parseInt(tAttribute["width"].nodeValue);
region.height = parseInt(tAttribute["height"].nodeValue);
var tTexture = Texture.create(texture, region.x, region.y, region.width, region.height, xOffset, yOffset);
this._maxWidth = Math.max(this._maxWidth, xAdvance + this.letterSpacing);
this._fontCharDic[tId] = tTexture;
this._fontWidthMap[tId] = xAdvance;
}
}
getCharTexture(char) {
return this._fontCharDic[char.charCodeAt(0)];
}
destroy() {
if (this._texture) {
for (var p in this._fontCharDic) {
var tTexture = this._fontCharDic[p];
if (tTexture)
tTexture.destroy();
}
this._texture.destroy();
this._fontCharDic = null;
this._fontWidthMap = null;
this._texture = null;
this._complete = null;
this._padding = null;
}
}
setSpaceWidth(spaceWidth) {
this._spaceWidth = spaceWidth;
}
getCharWidth(char) {
var code = char.charCodeAt(0);
if (this._fontWidthMap[code])
return this._fontWidthMap[code] + this.letterSpacing;
if (char === " ")
return this._spaceWidth + this.letterSpacing;
return 0;
}
getTextWidth(text) {
var tWidth = 0;
for (var i = 0, n = text.length; i < n; i++) {
tWidth += this.getCharWidth(text.charAt(i));
}
return tWidth;
}
getMaxWidth() {
return this._maxWidth;
}
getMaxHeight() {
return this.fontSize;
}
_drawText(text, sprite, drawX, drawY, align, width) {
var tWidth = this.getTextWidth(text);
var tTexture;
var dx = 0;
align === "center" && (dx = (width - tWidth) / 2);
align === "right" && (dx = (width - tWidth));
var tx = 0;
for (var i = 0, n = text.length; i < n; i++) {
tTexture = this.getCharTexture(text.charAt(i));
if (tTexture) {
sprite.graphics.drawImage(tTexture, drawX + tx + dx, drawY);
tx += this.getCharWidth(text.charAt(i));
}
//添加
else{
tx += this.getCharWidth(text.charAt(i));
}
}
}
}

效果如图:

												

Laya 踩坑日记-BitmapFont 不显示空格的更多相关文章

  1. Laya 踩坑日记-BitmapFont 字体模糊

    基于bitmap 制作的字体,放到项目中,因为最终使用的是位图字体(所有的字全是一张图片),所以一旦出现压缩./放大等情况的时候, 字体就开始模糊了,暂时没有他好的办法解决

  2. Laya 踩坑日记-人物模型穿模,模型显示不正常

    最近做游戏,人物要跑到很远的位置,z轴距离大概有20000个单位,然后就发现一个bug,到远处人物模型穿了,而且没办法改,这就尴尬了 Z轴对应值    0    100000 100000 当距离零点 ...

  3. Laya 踩坑日记 ---A* 导航寻路

    要做寻路,然后看了看laya 官方的例子,感觉看的一脸懵逼,早了半天的api 也没找到在哪有寻路的,最后一看代码,原来是用的github上的A星方案  https://github.com/bgrin ...

  4. AI相关 TensorFlow -卷积神经网络 踩坑日记之一

    上次写完粗浅的BP算法 介绍 本来应该继续把 卷积神经网络算法写一下的 但是最近一直在踩 TensorFlow的坑.所以就先跳过算法介绍直接来应用场景,原谅我吧. TensorFlow 介绍 TF是g ...

  5. 人工智能(AI)库TensorFlow 踩坑日记之一

    上次写完粗浅的BP算法 介绍 本来应该继续把 卷积神经网络算法写一下的 但是最近一直在踩 TensorFlow的坑.所以就先跳过算法介绍直接来应用场景,原谅我吧. TensorFlow 介绍 TF是g ...

  6. hexo博客谷歌百度收录踩坑日记

    title: hexo博客谷歌百度收录踩坑日记 toc: false date: 2018-04-17 00:09:38 百度收录文件验证 无论怎么把渲染关掉或者render_skip都说我的格式错误 ...

  7. Hexo搭建静态博客踩坑日记(二)

    前言 Hexo搭建静态博客踩坑日记(一), 我们说到利用Hexo快速搭建静态博客. 这节我们就来说一下主题的问题与主题的基本修改操作. 起步 chrome github hexo git node.j ...

  8. Hexo搭建静态博客踩坑日记(一)

    前言 博客折腾一次就好, 找一个适合自己的博客平台, 专注于内容进行提升. 方式一: 自己买服务器, 域名, 写前端, 后端(前后分离最折腾, 不分离还好一点)... 方式二: 利用Hexo, Hug ...

  9. JavaScript 新手的踩坑日记

    引语 在1995年5月,Eich 大神在10天内就写出了第一个脚本语言的版本,JavaScript 的第一个代号是 Mocha,Marc Andreesen 起的这个名字.由于商标问题以及很多产品已经 ...

随机推荐

  1. CSS全览_选择符+特指+单位+字体

    CSS全览_选择符+特指+单位+字体 目录 CSS全览_选择符+特指+单位+字体 1. CSS样式 2. 选择符 3. 特指度和层叠 4. 值和单位 5. 字体 作者: https://www.cnb ...

  2. 最新快手抖音短视频源码web+APP架设教程+完整数据

    最新更新快手抖音短视频源码web+APP架设教程+完整数据完美运行 视频直播源码,好东西,反正有人要就是了. 下载地址:https://pan.baidu.com/wap/init?surl=POU5 ...

  3. SpringBoot + SpringSecurity + Quartz + Layui实现系统权限控制和定时任务

    1. 简介   Spring Security是一个功能强大且易于扩展的安全框架,主要用于为Java程序提供用户认证(Authentication)和用户授权(Authorization)功能.    ...

  4. 字节跳动内部微服务架构-Docker实战学习笔记分享 真香

    前言 基于 Spring Cloud 的微服务设计和开发,已经越来越多地得到了更多企业的推广和应用,而 Spring Cloud 社区也在不断的迅速发展壮大之中,近几年时间,Spring Cloud ...

  5. windows宿主机访问ubuntu虚拟机中的docker服务

    查看docker容器地址和虚拟机地址 windows主机中添加路由 #route -p add 172.17.0.0 mask 255.255.0.0 虚拟机地址 route -p add 172.1 ...

  6. CentOS6下的ElasticSearch运行步骤

    如何运行ElasticSearch: 1.首先安装jdk1.8版本或以上. 2.下载elasticsearch的压缩包.(我下载的是elasticsearch-6.3.2.tar.gz) 3.使用命令 ...

  7. Redis5.0 主从模式和高可用 搭建和测试报告

    Redis 单机模式很简单,相关测试水文看这里 Redis5 压力测试结果反馈报告 必须的,今天接着写水文,写一写现在redis 支持的三种集群,主从模式,哨兵模式,Cluster模式,今天先搞主从模 ...

  8. javascript笔记day01

    JavaScript基础语法 HTML :标记语言 JavaScript :编程语言 序言 JavaScript发展历史(JS) 1. 1994年,网景公司(Netscape)发布了Navigator ...

  9. Windows安装VsCode 和Nodejs Vue

    一.安装VSCode 1.在官网下载并安装VSCode https://code.visualstudio.com/Download 注意:解压到非系统盘(节约系统盘空间,也方便后面使用) 文件夹最好 ...

  10. MES系统介绍

    为什么要引入MES系统? 随着ERP在企业应用的深入,ERP系统逐渐显示出其局限性.当ERP下达的工单到生产现场后,产品制造是以产线 "工单"或"批次"(Bat ...