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

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

  1. class BitmapFont {
  2. constructor() {
  3. this._fontCharDic = {};
  4. this._fontWidthMap = {};
  5. this._maxWidth = 0;
  6. this._spaceWidth = 10;
  7. this.fontSize = 12;
  8. this.autoScaleSize = false;
  9. this.letterSpacing = 0;
  10. }
  11. loadFont(path, complete) {
  12. this._path = path;
  13. this._complete = complete;
  14. if (!path || path.indexOf(".fnt") === -1) {
  15. console.error('Bitmap font configuration information must be a ".fnt" file');
  16. return;
  17. }
  18. ILaya.loader.load([{ url: path, type: ILaya.Loader.XML }, { url: path.replace(".fnt", ".png"), type: ILaya.Loader.IMAGE }], Handler.create(this, this._onLoaded));
  19. }
  20. _onLoaded() {
  21. this.parseFont(ILaya.Loader.getRes(this._path), ILaya.Loader.getRes(this._path.replace(".fnt", ".png")));
  22. this._complete && this._complete.run();
  23. }
  24. parseFont(xml, texture) {
  25. if (xml == null || texture == null)
  26. return;
  27. this._texture = texture;
  28. var tScale = 1;
  29. var tInfo = xml.getElementsByTagName("info");
  30. if (!tInfo[0].getAttributeNode) {
  31. return this.parseFont2(xml, texture);
  32. }
  33. this.fontSize = parseInt(tInfo[0].getAttributeNode("size").nodeValue);
  34. var tPadding = tInfo[0].getAttributeNode("padding").nodeValue;
  35. var tPaddingArray = tPadding.split(",");
  36. this._padding = [parseInt(tPaddingArray[0]), parseInt(tPaddingArray[1]), parseInt(tPaddingArray[2]), parseInt(tPaddingArray[3])];
  37. var chars = xml.getElementsByTagName("char");
  38. var i = 0;
  39. for (i = 0; i < chars.length; i++) {
  40. var tAttribute = chars[i];
  41. var tId = parseInt(tAttribute.getAttributeNode("id").nodeValue);
  42. var xOffset = parseInt(tAttribute.getAttributeNode("xoffset").nodeValue) / tScale;
  43. var yOffset = parseInt(tAttribute.getAttributeNode("yoffset").nodeValue) / tScale;
  44. var xAdvance = parseInt(tAttribute.getAttributeNode("xadvance").nodeValue) / tScale;
  45. var region = new Rectangle();
  46. region.x = parseInt(tAttribute.getAttributeNode("x").nodeValue);
  47. region.y = parseInt(tAttribute.getAttributeNode("y").nodeValue);
  48. region.width = parseInt(tAttribute.getAttributeNode("width").nodeValue);
  49. region.height = parseInt(tAttribute.getAttributeNode("height").nodeValue);
  50. var tTexture = Texture.create(texture, region.x, region.y, region.width, region.height, xOffset, yOffset);
  51. this._maxWidth = Math.max(this._maxWidth, xAdvance + this.letterSpacing);
  52. this._fontCharDic[tId] = tTexture;
  53. this._fontWidthMap[tId] = xAdvance;
  54. }
  55. }
  56. parseFont2(xml, texture) {
  57. if (xml == null || texture == null)
  58. return;
  59. this._texture = texture;
  60. var tScale = 1;
  61. var tInfo = xml.getElementsByTagName("info");
  62. this.fontSize = parseInt(tInfo[0].attributes["size"].nodeValue);
  63. var tPadding = tInfo[0].attributes["padding"].nodeValue;
  64. var tPaddingArray = tPadding.split(",");
  65. this._padding = [parseInt(tPaddingArray[0]), parseInt(tPaddingArray[1]), parseInt(tPaddingArray[2]), parseInt(tPaddingArray[3])];
  66. var chars = xml.getElementsByTagName("char");
  67. var i = 0;
  68. for (i = 0; i < chars.length; i++) {
  69. var tAttribute = chars[i].attributes;
  70. var tId = parseInt(tAttribute["id"].nodeValue);
  71. var xOffset = parseInt(tAttribute["xoffset"].nodeValue) / tScale;
  72. var yOffset = parseInt(tAttribute["yoffset"].nodeValue) / tScale;
  73. var xAdvance = parseInt(tAttribute["xadvance"].nodeValue) / tScale;
  74. var region = new Rectangle();
  75. region.x = parseInt(tAttribute["x"].nodeValue);
  76. region.y = parseInt(tAttribute["y"].nodeValue);
  77. region.width = parseInt(tAttribute["width"].nodeValue);
  78. region.height = parseInt(tAttribute["height"].nodeValue);
  79. var tTexture = Texture.create(texture, region.x, region.y, region.width, region.height, xOffset, yOffset);
  80. this._maxWidth = Math.max(this._maxWidth, xAdvance + this.letterSpacing);
  81. this._fontCharDic[tId] = tTexture;
  82. this._fontWidthMap[tId] = xAdvance;
  83. }
  84. }
  85. getCharTexture(char) {
  86. return this._fontCharDic[char.charCodeAt(0)];
  87. }
  88. destroy() {
  89. if (this._texture) {
  90. for (var p in this._fontCharDic) {
  91. var tTexture = this._fontCharDic[p];
  92. if (tTexture)
  93. tTexture.destroy();
  94. }
  95. this._texture.destroy();
  96. this._fontCharDic = null;
  97. this._fontWidthMap = null;
  98. this._texture = null;
  99. this._complete = null;
  100. this._padding = null;
  101. }
  102. }
  103. setSpaceWidth(spaceWidth) {
  104. this._spaceWidth = spaceWidth;
  105. }
  106. getCharWidth(char) {
  107. var code = char.charCodeAt(0);
  108. if (this._fontWidthMap[code])
  109. return this._fontWidthMap[code] + this.letterSpacing;
  110. if (char === " ")
  111. return this._spaceWidth + this.letterSpacing;
  112. return 0;
  113. }
  114. getTextWidth(text) {
  115. var tWidth = 0;
  116. for (var i = 0, n = text.length; i < n; i++) {
  117. tWidth += this.getCharWidth(text.charAt(i));
  118. }
  119. return tWidth;
  120. }
  121. getMaxWidth() {
  122. return this._maxWidth;
  123. }
  124. getMaxHeight() {
  125. return this.fontSize;
  126. }
  127. _drawText(text, sprite, drawX, drawY, align, width) {
  128. var tWidth = this.getTextWidth(text);
  129. var tTexture;
  130. var dx = 0;
  131. align === "center" && (dx = (width - tWidth) / 2);
  132. align === "right" && (dx = (width - tWidth));
  133. var tx = 0;
  134. for (var i = 0, n = text.length; i < n; i++) {
  135. tTexture = this.getCharTexture(text.charAt(i));
  136. if (tTexture) {
  137. sprite.graphics.drawImage(tTexture, drawX + tx + dx, drawY);
  138. tx += this.getCharWidth(text.charAt(i));
  139. }
  140. //添加
  141. else{
  142. tx += this.getCharWidth(text.charAt(i));
  143. }
  144. }
  145. }
  146. }

  1. 效果如图:

  1.  

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. CSP-S2020 浙江 游记

    2020.10.9 今天是 \(2020\) 年 \(10\) 月 \(9\) 日,距离初赛还有两天(算两天吗,完整的应该只有一天多了). 原本对于比赛还是没什么感觉的,每天做做题,水水文章,感觉时间 ...

  2. CF1000F One Occurrence

    本题解用于记录一下一个优秀的东西--懒标记. 题解 可以很轻易的想到莫队的做法,但是题目让你输出的是满足条件的一个数,而不是满足条件的数的个数,似乎很难去 \(O(1)\) 转移.这个时候我们的懒标记 ...

  3. Salesforce 系列(一):云服务和 Salesforce 理念简介

    本系列文章系笔者在 Salesforce 开发过程中的些许总结与心得,旨在记录自己的成长,以及为对 Salesforce 感兴趣的小伙伴提供一些帮助,如有疏漏,还望多多包涵 ~ 云服务 云服务,也称云 ...

  4. HTTP/2做错了什么?刚刚辉煌2年就要被弃用了!?

    GitHub 19k Star 的Java工程师成神之路,不来了解一下吗! GitHub 19k Star 的Java工程师成神之路,真的不来了解一下吗! GitHub 19k Star 的Java工 ...

  5. Jmeter +Maven+jenkins+eclipse 接口自动化测试

    背景: 首先用jmeter录制或者书写性能测试的脚本,用maven添加相关依赖,把性能测试的代码提交到github,在jenkins配置git下载性能测试的代码,配置运行脚本和测试报告,配置运行失败自 ...

  6. beautiful soup 遇到class标签的值中含有空格的处理

    用Python写一个爬虫,用BeautifulSoup解析html.其中一个地方需要抓取下面两类标签:<dd class="ab " >blabla1</dd&g ...

  7. Tomcat9没有service.bat

    下载个Windows版本的才有service.bat,默认是不带的. 附上tomcat9的下载地址: https://archive.apache.org/dist/tomcat/tomcat-9/v ...

  8. Python 带你高效创作短视频,视频创作秀到飞起!!!

    近两年,抖音.快手将短视频推到风口浪尖上,要生产出高质量的视频,离不开视频剪辑这一环节:在全民剪片浪潮中,大众使用最多的剪辑软件如:Pr.FCPX.剪印.Vue 等. 视频剪辑过程中,Python 一 ...

  9. 安装篇六:安装PHP(7.2.29版本)

    准备环境,下载依赖软件 # No1:在前面安装好的基础上,关闭iptables.selinux # No2:安装依赖包 yum install zlib-devel bzip2-devel -y &l ...

  10. springboot+mybatis+bootstrap开发员工oa后台管理系统项目源码

    java项目源码详情描述:S020<springboot+mybatis+bootstrap开发员工oa后台管理系统项目源码>jboa项目有请假以及报销单的申请和审核session共享加登 ...