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 起的这个名字.由于商标问题以及很多产品已经 ...
随机推荐
- 什么时候使用transition?什么时候使用animation?
不同点: 1. 触发条件不同.transition通常和hover等事件配合使用,由事件触发.animation则和gif动态图差不多,立即播放. 2. 循环. animation可以设定循环次数. ...
- MySQL日期和时间函数汇总
本文基于MySQL8.0 本文介绍MySQL关于日期和时间操作的函数. 日期和时间函数 函数 描述 ADDDATE() 给日期值添加时间值 ADDTIME() 添加time CONVERT_TZ() ...
- 【自用】Notice
读题 不要把 \(\sum a \oplus b\) 看成异或和. 注意读完整,有可能对原有符号有新的约定,不要想当然. 注意模数的 0 数清楚. 卡常&时间 打题之前一般先搞个自己的缺省源. ...
- 【题解】GRE Words(UVA1502)
稍微有点难度--不过没有孔姥爷毒瘤( 题意 给定一个单词表,每个单词有权值,取出一部分(不改变顺序)使得这部分的每一个字符串都是后一个的子串,问得到的最大权值. 思路 设 f[i] 表示选了第 i 个 ...
- 题解-ARC058D Iroha Loves Strings
题面 ARC058D Iroha Loves Strings 给定 \(n\) 个字符串,从中选出若干个按给出顺序连接起来,总长等于 \(m\),求字典序最小的,保证有解. 数据范围:\(1\le n ...
- 【题解】「UVA11626」Convex Hull
凸包模板题. 之前写过拿 Graham 算法求凸包的,为了不重复/多学点知识,那这次拿 Andrew 算法求凸包吧qaq *此文章所有图片均为作者手画. Andrew 算法 假设我们有这些点: 首先把 ...
- 【WHash】更有空间感的感知哈希
转载请注明出处 背景 在重复图识别领域,对于识别肉眼相同图片,感知哈希效果是很鲁棒的.上一篇文章 [PHash]更懂人眼的感知哈希 介绍的PHash识别效果很好,但是它有一个缺点,只关注低频信息,并没 ...
- Eclipse设置自动提示
Eclipse设置自动提示可通过以下方式实现, 1.运行Eclipse开发工具,在开发工具最顶端菜单栏,点击"windows"->"preferences" ...
- django 取出数据库的时间与当前时间相加减
1 转换时区utc比北京时间慢八个小时 from datetime import tzinfo, timedelta, datetime ZERO = timedelta(0) class UTC(t ...
- 《Stereo R-CNN based 3D Object Detection for Autonomous Driving》论文解读
论文链接:https://arxiv.org/pdf/1902.09738v2.pdf 这两个月忙着做实验 博客都有些荒废了,写篇用于3D检测的论文解读吧,有理解错误的地方,烦请有心人指正). 博客原 ...