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 起的这个名字.由于商标问题以及很多产品已经 ...
随机推荐
- 半夜删你代码队 Day1冲刺
一.团队信息 1.团队项目:Midnight聊天室 2.团队名称:半夜删你代码队 3.队员信息: 职务 项目经理 主开发团队 测试人员 姓名 陈惠霖 周楚池 侯晓龙 余金龙 胡兆禧 林涛 二.Alph ...
- antDesign获取表单组件的值
子组件中: getFormValue是在点击确定按钮获取表单值得事件函数,一旦执行就会执行里边的validate()回调函数 返回的数据中有error和value两种,如果存在error那就是其中某 ...
- CPU的功能和基本组成结构
目录 CPU的功能 运算器和控制器的功能 CPU的基本结构 运算器的基本结构 控制器的基本结构 整体 本节回顾 CPU的功能 指令控制:完成取指令.分析指令和执行指令的操作,即程序的顺序控制 操作控制 ...
- ssh-copy-id三步实现SSH免密登录
背景 在日常工作中,不希望每次登录都输入密码,这里主要介绍一种简单的配置Linux主机间免密登录的方式 先了解两个核心命令: ssh-keygen :产生公钥和私钥对 ssh-copy-id:将北极的 ...
- 持久层之 MyBatis: 第三篇 :缓存 And 高级查询
MyBatis入门到精通3 缓存机制 Mybatis一级缓存测试 Mybatis二级缓存测试 高级查询 表关系说明 一对一查询 一对多查询 多对多查询 缓存机制 正如大多数持久层框架一样,MyBati ...
- JDK8新特性详解(一)
虽然JDK8已经出来了N久,其新特性也在日益改变着我们的编码习惯和风格.虽然有些新特性用起来很顺手,但是总是傻傻分不清到底是哪个版本的.趁今天有时间,我们就来总结一下,JDK8有哪些能提升我们开发效率 ...
- 实验题目:python面向对象程序设计
1.定义并实现一个矩形类Rectangle,其私有实例成员为矩形的左下角与右上角两个点的坐标,能设置左下角和右上角两个点的位置,能根据左下角与右上角两个点的坐标计算矩形的长.宽.周长和面积,另外根据需 ...
- javascript之原型、原型链
一.原型: 1. 任何函数都有prototype属性(对象才有属性,函数也是对象): 2. 函数的prototype属性的值是个对象,这个对象就是原型(对象): 3. 作用:通过构造函数创建出来的对象 ...
- matlab练习程序(正态分布贝叶斯分类)
clear all;close all;clc; randn('seed',0);mu1=[0 0];S1=[0.3 0;0 0.35];cls1_data=mvnrnd(mu1,S1,1000);p ...
- 简单谈谈contextlib的使用
简单谈谈contextlib的使用 写在前面 做这件事的原因: 在看书的时候,我发现了有大佬们用contextlib管理上下文,真的很牛皮,但是百度了以下,每个大佬都写了很多很全很深刻,讲道理五花八门 ...