Laya位图字体的坑

我这里使用的是As

生成字体的方法可以参考官方文档，我这里说下遇到的几个坑

1、只能根据已有某些字体生成，不能用美术自己设计的文字，并且生成后的字体不能更改颜色，想要改颜色的话只能在BMfont中设置

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

2、导入LayaIDE中，发布后会生成图片对应的图集和fnt，但事实上预加载图集的时候会找对应名称.PNG的图片，所以可以在IDE中设置图片为不打包，然后手动将图片复制到h5下fnt所在文件目录。

3、文档最后一句说“在程序代码里实例化使用了位图字体的页面之前，需要先创建并注册页面内使用到的位图字体”

private var numberFont:BitmapFont;
        
private function preLoad():void 
{
    numberFont = new BitmapFont();
    numberFont.loadFont("bitmapFont/number.fnt", Handler.create(this, fontLoaded));
}
        
private function fontLoaded():void 
{
    Text.registerBitmapFont("number", numberFont);
}

这里如果有多个字体，就要创建多个BitmapFont。

4、如果游戏要发布到微信，在LayaIDE中运行是没问题的，但是到微信中会报“gameThirdScriptError”的错误。是解析XML的问题，需要下载文件导入工程，然后在修改微信中的game.js

 

require("weapp-adapter.js");
window.Parser = require("./dom_parser.js");
require("./code.js");

 5、如果需要向子域传数据，也就是MiniAdpter.init（true）第一个参数传true的时候，会把位图字体的XML文件当成JSON给传到子域，然后解析报错，目前还没找到解决办法，各种坑。。。。

 

最后，一个终极的解决办法，不用自带的位图字体，自己封装一个，啥问题都不是问题了，爽歪歪。。。

LayaIDE中右键新建脚本：

我这里命名为BMFont，会自动生成一个BMFont.prop文件，加入需要的几条数据

<prop name="text" tips="文字" type="string"/>
<prop name="txtWidth" tips="文字宽度" type="number"/>
<prop name="txtHeight" tips="文字高度" type="number"/>
<prop name="txtSkin" tips="公共资源" type="string"/>
<prop name="space" tips="间隔" type="number"/>
<prop name="txtAlignment" tips="对齐方式" type="option" option="left,center,right"/>

然后新建一个Tools.BMFont.as文件，代码如下：

package Tools 
{
    import laya.ui.Box;
    import laya.ui.Image;
    
    /**
     * ...
     * @author NewTest
     */
    public class BMFont extends Box 
    {
        
        public function BMFont() 
        {

        }
        
        
        
        private var _text:String;
        
        public function get text():String 
        {
            return _text;
        }
        
        public function set text(value:String):void 
        {
            if (_text != value) 
            {
                _text = value;
                var arr:Array = checkChildren(value.length);
                
                if (_text.length > 0) 
                {
                    space = space ? space : 0;
                    txtWidth = txtWidth ? txtWidth : (arr[0] as Image).source.width;
                    txtHeight = txtHeight ? txtHeight : (arr[0] as Image).source.height;
                    setPos(_text, arr);
                }
                
            }            
        }
        
        public var txtWidth:Number;        
        public var txtHeight:Number;    
        public var txtSkin:String;
        private var _space:Number;
        public var txtAlignment:String;
        
        public function get space():Number
        {
            return _space;
        }
        public function set space(value:Number):void 
        {
            _space = value;
            setPos(text, checkChildren(text.length));
        }

        
        //检查要显示的图片.
        private function checkChildren(count:int):Array 
        {
            var arr:Array = [];            
            
            for (var i:int = 0; i < this._childs.length; i++) 
            {
                var chi:Image = this._childs[i];
                if (i < count) 
                {                    
                    chi.visible = true;
                    arr.push(chi);
                }
                else 
                {
                    chi.visible = false;
                }
            }
            if (arr.length < count) 
            {
                for (var j:int = arr.length; j < count; j++) 
                {
                    var chi:Image = new Image();
                    this.addChild(chi);
                    arr.push(chi);
                }
            }
            return arr;
        }
        
        //设置图片位置.
        private function setPos(str:String, arr:Array):void 
        {
            var startX:Number = 9999;
            for (var i:int = 0; i < arr.length; i++) 
            {
                var img:Image = arr[i] as Image;
                img.skin = txtSkin + str[i] + ".png";
                
                img.width = txtWidth;
                img.height = txtHeight;
                if (txtAlignment == "left") 
                {
                    img.pivotX = 0;    
                    var totalWidth:Number
                    img.x = i * img.width + space * i;
                    
                }
                else if (txtAlignment == "right") 
                {
                    img.pivotX = img.width;
                    var x:Number = arr.length - i - 1;
                    img.x = -x * img.width - space * x + this.width;
                }
                else 
                {
                    img.pivotX = 0;
                    if (startX == 9999) 
                    {
                        startX = this.width * 0.5 - (arr.length * txtWidth + (arr.length - 1) * space) * 0.5;
                    }
                    img.x = startX + i * img.width + space * i;
                }
            }
        }
        
    }

}

使用时，只需要新建一个Box，然后拖上BMFont脚本就可以了。