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腳本就可以了。