精华 微信小游戏 中 位图字体加载的两种方式 ( xml / JSON)
发布于 6 年前 作者 wsssheep 4302 次浏览 来自 分享

因为微信小游戏环境不支持xml解析, 缺少window.DOMParser 所以会导致 位图字体解析失败。 首先前往GitHub下载一个DOMParser https://github.com/jindw/xmldom 我们需要用到的4个文件,把它们放在DOMParser文件夹中: DOMParser ┖dom.js ┖dom-parser.js ┖entities.js ┖sax.js

然后把 DOMParser丢到 libs 文件夹中, 接着在main.js 文件里这样 引入 window.DOMParser = require('libs/DOMParser/dom-parser.js').DOMParser; (ES6 视情况自己引入) TIM截图20180602183121.png

然后和之前的json 一样 似乎直接通过地址引入 也会报错(未解决),所以换种读取的方法: 首先把数据放入一个** xml_font.js** 的文件,结构如下: module.exports = `你的xml数据` ; //注意使用ES6的 双撇号来包含内容,就没有换行和引号的问题了 TIM截图20180602183201.png 然后引入这个文件的数据,挂在window.GameData上,然后通过 game.load.bitmapFont(‘font’, ‘images/font/font.png’, null, GameData.xml_font); 加载位图字体。 TIM截图20180602183220.png TIM截图20180602183309.png 最后,已经可以成功显示了,实机测试也没问题。 测试成功.png

/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

新的替代方案2,比起方案1的代价低一些… 使用大城小胖 的 weapp-adapter,可以解决读取json/xml的问题 https://github.com/finscn/weapp-adapter

使用 http://kvazars.com/littera/ 网站的工具生成一个位图字体,然后选择导出XML格式, game.load.bitmapFont(‘font’, ‘images/font/font.png’,‘images/font/font.xml’); 直接读XML地址,在模拟器测试通过,但是实机测试失败…先不探究原因,phaser也可以读JSON格式的位图字, 所以使用转换工具将XML转换成JSON再读取。 game.load.bitmapFont(‘font’, ‘images/font/font.png’,‘images/font/font.json’); 例:

{ “font”: { “info”: { "-face": “font”, "-size": “72”, "-bold": “0”, "-italic": “0”, "-stretchH": “100”, "-smooth": “1”, "-aa": “1”, "-padding": “2,2,2,2”, "-spacing": “0,0”, "-outline": “0” } …

读json实机测试可以成功。 注意:生成格式的 “-face”: “font” 中 face 前的 - 符号,自动生成的格式带的符号不同,比如有的网站是 “@size”: “72”, phaser里的是 用 “_face”: “font” 下划线来连接,注意手动全局替换。

2 回复

感谢分享,十分棒的实践

感谢分享。

补充一下方法二: 我也是用大城小胖的weapp-adapter但仍然无法正确读取xml文件。显示为xx.getElementsByTagName is not a function 原因是xmlhttp request得到的是HTMLElement,第三方loader无法辨识,所以仍然需要dom parser来进行转换

我的解决方法是引入方法一里的dom parser,然后把下面这一段加入到大城小胖的weapp-adapter->HTMLElement.js //因为我用的loader用到了getElementsByTagName所以我就简单粗暴地加了转换了一下 getElementsByTagName(tagName) { var XMLParser = new DOMParser.DOMParser(); var doc = XMLParser.parseFromString(this.innerHTML); return doc.getElementsByTagName(tagName); }

回到顶部