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 起的这个名字.由于商标问题以及很多产品已经 ...
随机推荐
- 微信小程序template和组件
template主要是展示,主要是在调用的页面中定义.用import方式引入,然后去使用,通常是单独建立一个文件夹 去管理,文件夹有两个文件wxml和wxss,wxml中 可以定义多个template ...
- 获取radio的值及重置radio
获取:$('input[name=age]:checked').val(); 重置:$('input:radio[name=age]').prop('checked',false);
- Shell:子shell概念
Blog:博客园 个人 目录 shell环境 什么是子shell 子shell的分类 shell环境 每个shell进程有一个自己的运行环境,不同的Shell进程有不同的Shell环境.Shell解析 ...
- Android 11 源码下载+编译教程
下载AOSP源码 这里我使用的是外国语大学的镜像执行的下载,Mac系统的话,一定要在区分大小姐的磁盘下执行 repo init -u https://mirrors.bfsu.edu.cn/git/A ...
- 关于Switch Case的优化
switch case虽然是代替if else而出现的,并不好维护,有时候使用switch还不如使用if else. 但没有别的东西能代替switch case了吗?答案当然是否定的,现在就有两种方式 ...
- Consul 多数据中心下的服务注册发现与配置共享
1. Consul简介 Consul是HashiCorp公司推出的开源软件,它提供了一套分布式高可用可横向扩展的解决方案,能为微服务提供服务治理.健康检查.配置共享等能力. Eurake2.x ...
- kali linux没有ip解决办法
故障情况 今天打开kali202001复测环境,发现自启动ssh竟然连不上. 上到kali主机使用命令:ifconfig 查看发现没有ethh0网卡显示,看来是kal获取不到ip地址导致的 继续查看发 ...
- python pip命令的安装与实验安装scrapy
大家在使用python时候,很多时候导入模块都会发现该模块不存在,那么我们就需要下载安装,可是有时候安装会出现各种问题,大家回去请教别人,大部分程序员会回答你:pip install 什么等,可是你p ...
- 卷积神经网络CNN-学习1
卷积神经网络CNN-学习1 十年磨一剑,霜刃未曾试. 简介:卷积神经网络CNN学习. CNN中文视频学习链接:卷积神经网络工作原理视频-中文版 CNN英语原文学习链接:卷积神经网络工作原理视频-英文版 ...
- 算法(Java实现)—— 贪心算法
贪心算法 应用场景-集合覆盖问题 假设在下面需要付费的广播台,以及广播台新型号可以覆盖的地区,如何选择最少的广播台,让所有地区都可以接收到信号 广播台 覆盖地区 k1 北京.上海.天津 k2 广州.北 ...