[]分享个用美术资源做位图文本的方法。。。

开发中，使用的位图字体一般都是美术给的图片资源，在laya中，好像不能直接用，用laya给的方式做的位图文本，效果总感觉不太满意，就寻思着自己写个，功能简单些，基本能够满足开发中的需求，有需要的，可以自己去丰富一些，这里只是个参考。合图工具呢，还是用的白鹭的，可以根据自己需求调整，这个是json的格式：

// 程序入口

class GameMain{

    constructor()

    {

        Laya.init(600,400);

        var that = this;

        Laya.loader.load([{"url":"res/playerKpiFont.json","type":Laya.Loader.JSON},

        {"url":"res/playerKpiFont.png","type":Laya.Loader.IMAGE}],new Laya.Handler(that,function(){

                var jsonData = Laya.loader.getRes("res/playerKpiFont.json");

                var imageData = Laya.loader.getRes("res/playerKpiFont.png");



                // 左中右创建的3个实例

                var bp = new BPFont(jsonData,imageData,600,"left");

                var bp1 = new BPFont(jsonData,imageData,600,"center");

                var bp2 = new BPFont(jsonData,imageData,600,"right");

                bp.padding = bp1.padding = bp2.padding = -7;

                Laya.stage.addChild(bp);

                Laya.stage.addChild(bp1);

                Laya.stage.addChild(bp2);

                var t = 1000;

                Laya.timer.loop(1000,that,function(){

                    bp.text = t + "";

                    bp1.text = t + "";

                    bp2.text = t + "";

                    t++;

                })

            }



        ));

    }

}

new GameMain();

运行效果基本上还行，

/*

* 位图字体;

*/

class BPFont extends Laya.Sprite{

    // 文本内容

    private _text: string;

    // json数据

    private _jsonData: any;

    // 图片数据

    private _imageData: Laya.Texture;

    // 文本字间距

    private _padding: number = 0;

    // 所有元素；

    private charSprites: Laya.Sprite;

    // 位置类型

    private _posType: string;

    //  左 右 中

    public static LEFT: string = "left";

    public static RIGHT: string = "right";

    public static CENTER: string = "center";

    constructor(jsonData: any,textureData: Laya.Texture,width: number,posType:string = "left"){

        super();

        this.width = width;

        this._posType = posType;

        this._jsonData = jsonData;

        this._imageData = textureData;

    }



    public set padding(v: number){

        this._padding = v;

        this.setCharsPos();

    }

    public get padding(): number{

        return this._padding;

    }

    

    public set text(v :string){

        this._text = v;

        this.createBitmapFont(v);

    }

    public get text(): string{

        return this._text;

    }

    

    // 创建位图字体

    private createBitmapFont(v: string){

        if(!v || v == ""){

            return;

        }

        // 移除上次绘制的内容

        for(var k=0;k<this.numChildren;k++){

            Laya.Pool.recover("sprite",this._childs[k]);

        }

        this.removeChildren();

        var charTotal: number = v.length;

        var charSps: any = ;

        for(var i=0;i<charTotal;i++){

            var targetChar = v.substr(i,1);

            var charData: any = this._jsonData.frames[targetChar];

            if(!charData){

                console.warn("没有找到对应的字符：" + targetChar);

                continue;

            }

            var charSp = this.drawTexture(charData);

            charSps.push(charSp); 

        }

        this.charSprites = charSps;

        this.setCharsPos();

    }

    // 从图集上面抠图

    private drawTexture(charData){

        var charSp: Laya.Sprite = new Laya.Sprite();

        charSp = Laya.Pool.getItemByClass("sprite",Laya.Sprite);

        charSp.graphics.fillTexture(this._imageData,charData.x,charData.y,charData.w,charData.h,"no-repeat",new Laya.Point(-charData.x,-charData.y));

        charSp.size(charData.w,charData.h)

        charSp.scrollRect = new Laya.Rectangle(charData.x,charData.y,charData.w,charData.h);

        this.addChild(charSp);

        return charSp;

    }

    // 设置位置

    private setCharsPos(){

        switch (this._posType){

            case BPFont.LEFT:

                this.setCharsPosOnLeft();

            break;

            case BPFont.RIGHT:

                this.setCharsPosOnRight();

            break;

            case BPFont.CENTER:

                this.setCharsPosOnCenter();

            break;

        }

    }



    // 左对齐

    private setCharsPosOnLeft(){

        if(!this.text || this.text == ""){

            return;

        }

        var sps = this.charSprites;

        var length = sps.length;

        for(var i=0;i<length;i++){

            sps[i].x = 0;

        }

        for(var i=1;i<length;i++){

            sps[i].x += sps[i-1].x + sps[i-1].width + this.padding;  

        }

    }

    // 右对齐

    private setCharsPosOnRight(){

        if(!this.text || this.text == ""){

            return;

        }

        var sps = this.charSprites;

        var length = sps.length;

        var width = this.width;

        for(var i=0;i<length;i++){

            sps[i].x = width;

        }

        for(var i=length-1;i>=0;i--){

            width -= sps[i].width + this.padding;

            sps[i].x = width;

        }

    }

    // 居中

    private setCharsPosOnCenter(){

        if(!this.text || this.text == ""){

            return;

        }

        var sps = this.charSprites;

        var length = sps.length;

        var width = this.width;

        var allCharsWidth = 0;

        for(var i=0;i<length;i++){

            allCharsWidth += sps[i].width;

        }

        var x = (width - allCharsWidth) / 2;

        sps[0].x = x;

        for(var i=1;i<length;i++){

            sps[i].x=0;

            sps[i].x += sps[i-1].x + sps[i-1].width + this.padding;  

        }

    }



}[/i][/i][/i][/i][/i][/i][/i][/i]