Laya 踩坑日记-BitmapFont 不显示空格
项目中有用到艺术字,美术通过 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 不显示空格的更多相关文章
- Laya 踩坑日记-BitmapFont 字体模糊
基于bitmap 制作的字体,放到项目中,因为最终使用的是位图字体(所有的字全是一张图片),所以一旦出现压缩./放大等情况的时候, 字体就开始模糊了,暂时没有他好的办法解决
- Laya 踩坑日记-人物模型穿模,模型显示不正常
最近做游戏,人物要跑到很远的位置,z轴距离大概有20000个单位,然后就发现一个bug,到远处人物模型穿了,而且没办法改,这就尴尬了 Z轴对应值 0 100000 100000 当距离零点 ...
- Laya 踩坑日记 ---A* 导航寻路
要做寻路,然后看了看laya 官方的例子,感觉看的一脸懵逼,早了半天的api 也没找到在哪有寻路的,最后一看代码,原来是用的github上的A星方案 https://github.com/bgrin ...
- AI相关 TensorFlow -卷积神经网络 踩坑日记之一
上次写完粗浅的BP算法 介绍 本来应该继续把 卷积神经网络算法写一下的 但是最近一直在踩 TensorFlow的坑.所以就先跳过算法介绍直接来应用场景,原谅我吧. TensorFlow 介绍 TF是g ...
- 人工智能(AI)库TensorFlow 踩坑日记之一
上次写完粗浅的BP算法 介绍 本来应该继续把 卷积神经网络算法写一下的 但是最近一直在踩 TensorFlow的坑.所以就先跳过算法介绍直接来应用场景,原谅我吧. TensorFlow 介绍 TF是g ...
- hexo博客谷歌百度收录踩坑日记
title: hexo博客谷歌百度收录踩坑日记 toc: false date: 2018-04-17 00:09:38 百度收录文件验证 无论怎么把渲染关掉或者render_skip都说我的格式错误 ...
- Hexo搭建静态博客踩坑日记(二)
前言 Hexo搭建静态博客踩坑日记(一), 我们说到利用Hexo快速搭建静态博客. 这节我们就来说一下主题的问题与主题的基本修改操作. 起步 chrome github hexo git node.j ...
- Hexo搭建静态博客踩坑日记(一)
前言 博客折腾一次就好, 找一个适合自己的博客平台, 专注于内容进行提升. 方式一: 自己买服务器, 域名, 写前端, 后端(前后分离最折腾, 不分离还好一点)... 方式二: 利用Hexo, Hug ...
- JavaScript 新手的踩坑日记
引语 在1995年5月,Eich 大神在10天内就写出了第一个脚本语言的版本,JavaScript 的第一个代号是 Mocha,Marc Andreesen 起的这个名字.由于商标问题以及很多产品已经 ...
随机推荐
- Alpha冲刺阶段Day4
[Alpha冲刺阶段]Scrum Meeting Daily4 1.会议简述 会议开展时间 2020/5/25 7:30-7:50 PM 会议基本内容摘要 讨论了各自任务完成情况以及明日计划 参与 ...
- jsonp使用post方法
来源https://www.jb51.net/article/68980.htm
- 算法——模拟LRU机制
运用你所掌握的数据结构,设计和实现一个 LRU (最近最少使用) 缓存机制 . 实现 LRUCache 类: LRUCache(int capacity) 以正整数作为容量 capacity 初始化 ...
- 侧边栏js样式代码
<!-- menu html --> <div class="container"> <div class="menu-wrap optis ...
- 百度网站统计和CNZZ网站统计对比
一,前言 百度统计和cnzz统计是目前市面上比较流行的两种web统计工具,接下来将对两个统计工具做初步的体验测评 百度网站统计相关介绍:全球最大的中文网站流量分析平台,帮助企业收集网站访问数据,提供流 ...
- Eureka系列(七) 服务下线Server端具体实现
服务下线的大致流程图 下面这张图很简单地描述了Server端服务下线的大致流程: 服务下线Server端实现源码分析 Eureka服务实现是通过Server端InstanceResource ...
- qs的工具方法讲解
简单来说,qs 是一个增加了一些安全性的查询字符串解析和序列化字符串的库. 今天在学习同事的代码, 在学习过程中遇到了这样一句代码 研究了很久,只了解了个大概,后面慢慢的用熟练只会,想着做个总结,温习 ...
- 不一样的资产安全 3D 可视化平台
前言 数字经济时代,应用好数据是企业数字化转型的关键,基于前沿科学技术进行数据的有效管控,更是对数字增值服务的新趋势.近年来,整个安全行业对资产管理的重视程度正在提高.据IDC发布的相关数据显示, ...
- 很多人不知道的Python 炫技操作:条件语句的写法
有的人说 Python 是一门 入门容易,但是精通难的语言,这一点我非常赞同. Python 语言里有许多(而且是越来越多)的高级特性,是 Python 发烧友们非常喜欢的.在这些人的眼里,能够写出那 ...
- exp(cos(t)) - 2*cos(4.*t) + (sin(t./12)).^5;图形
clc; clear all; close all; t = linspace(0,24*pi,1000); r = exp(cos(t)) - 2*cos(4.*t) + (sin(t./12)). ...