1 , 关于位图字体的制作

2 , egret官方提供的资源

看看cartoon-font.fnt的内容

{"file":"cartoon-font.png","frames":{"A":{"x":1,"y":54,"w":21,"h":24,"offX":2,"offY":11,"sourceW":23,"sourceH":35},"B":{"x":195,"y":29,"w":22,"h":26,"offX":2,"offY":10,"sourceW":24,"sourceH":36},"C":{"x":31,"y":33,"w":20,"h":26,"offX":2,"offY":10,"sourceW":22,"sourceH":36},"D":{"x":171,"y":1,"w":24,"h":26,"offX":2,"offY":10,"sourceW":26,"sourceH":36},"E":{"x":108,"y":55,"w":19,"h":24,"offX":2,"offY":11,"sourceW":21,"sourceH":35},"F":{"x":167,"y":80,"w":18,"h":24,"offX":2,"offY":11,"sourceW":20,"sourceH":35},"G":{"x":197,"y":1,"w":23,"h":26,"offX":2,"offY":10,"sourceW":25,"sourceH":36},"H":{"x":143,"y":1,"w":26,"h":24,"offX":2,"offY":11,"sourceW":28,"sourceH":35},"I":{"x":235,"y":141,"w":13,"h":24,"offX":2,"offY":11,"sourceW":15,"sourceH":35},"J":{"x":205,"y":107,"w":15,"h":25,"offX":2,"offY":11,"sourceW":17,"sourceH":36},"K":{"x":117,"y":1,"w":24,"h":26,"offX":2,"offY":10,"sourceW":26,"sourceH":36},"L":{"x":147,"y":55,"w":18,"h":24,"offX":2,"offY":11,"sourceW":20,"sourceH":35},"M":{"x":1,"y":27,"w":28,"h":25,"offX":2,"offY":11,"sourceW":30,"sourceH":36},"N":{"x":193,"y":57,"w":22,"h":24,"offX":2,"offY":11,"sourceW":24,"sourceH":35},"O":{"x":91,"y":1,"w":24,"h":26,"offX":2,"offY":10,"sourceW":26,"sourceH":36},"P":{"x":219,"y":54,"w":22,"h":25,"offX":2,"offY":10,"sourceW":24,"sourceH":35},"Q":{"x":37,"y":1,"w":24,"h":30,"offX":2,"offY":10,"sourceW":26,"sourceH":40},"R":{"x":143,"y":27,"w":23,"h":26,"offX":2,"offY":10,"sourceW":25,"sourceH":36},"S":{"x":128,"y":107,"w":16,"h":26,"offX":3,"offY":10,"sourceW":19,"sourceH":36},"T":{"x":86,"y":29,"w":21,"h":24,"offX":2,"offY":11,"sourceW":23,"sourceH":35},"U":{"x":222,"y":27,"w":23,"h":25,"offX":2,"offY":11,"sourceW":25,"sourceH":36},"V":{"x":217,"y":81,"w":22,"h":24,"offX":2,"offY":11,"sourceW":24,"sourceH":35},"W":{"x":1,"y":1,"w":34,"h":24,"offX":2,"offY":11,"sourceW":36,"sourceH":35},"X":{"x":222,"y":1,"w":24,"h":24,"offX":2,"offY":11,"sourceW":26,"sourceH":35},"Y":{"x":168,"y":54,"w":23,"h":24,"offX":2,"offY":11,"sourceW":25,"sourceH":35},"Z":{"x":109,"y":29,"w":21,"h":24,"offX":2,"offY":11,"sourceW":23,"sourceH":35},"0":{"x":86,"y":55,"w":20,"h":25,"offX":2,"offY":10,"sourceW":22,"sourceH":35},"1":{"x":235,"y":114,"w":13,"h":25,"offX":2,"offY":10,"sourceW":15,"sourceH":35},"2":{"x":146,"y":140,"w":16,"h":24,"offX":2,"offY":11,"sourceW":18,"sourceH":35},"3":{"x":146,"y":113,"w":16,"h":25,"offX":3,"offY":10,"sourceW":19,"sourceH":35},"4":{"x":1,"y":80,"w":19,"h":24,"offX":2,"offY":11,"sourceW":21,"sourceH":35},"5":{"x":164,"y":132,"w":17,"h":24,"offX":2,"offY":11,"sourceW":19,"sourceH":35},"6":{"x":108,"y":81,"w":18,"h":25,"offX":2,"offY":10,"sourceW":20,"sourceH":35},"7":{"x":164,"y":106,"w":17,"h":24,"offX":3,"offY":11,"sourceW":20,"sourceH":35},"8":{"x":24,"y":61,"w":19,"h":25,"offX":2,"offY":10,"sourceW":21,"sourceH":35},"9":{"x":53,"y":56,"w":19,"h":26,"offX":2,"offY":10,"sourceW":21,"sourceH":36},"a":{"x":1,"y":54,"w":21,"h":24,"offX":2,"offY":11,"sourceW":23,"sourceH":35},"b":{"x":195,"y":29,"w":22,"h":26,"offX":2,"offY":10,"sourceW":24,"sourceH":36},"c":{"x":31,"y":33,"w":20,"h":26,"offX":2,"offY":10,"sourceW":22,"sourceH":36},"d":{"x":171,"y":1,"w":24,"h":26,"offX":2,"offY":10,"sourceW":26,"sourceH":36},"e":{"x":108,"y":55,"w":19,"h":24,"offX":2,"offY":11,"sourceW":21,"sourceH":35},"f":{"x":167,"y":80,"w":18,"h":24,"offX":2,"offY":11,"sourceW":20,"sourceH":35},"g":{"x":197,"y":1,"w":23,"h":26,"offX":2,"offY":10,"sourceW":25,"sourceH":36},"h":{"x":143,"y":1,"w":26,"h":24,"offX":2,"offY":11,"sourceW":28,"sourceH":35},"i":{"x":235,"y":141,"w":13,"h":24,"offX":2,"offY":11,"sourceW":15,"sourceH":35},"j":{"x":205,"y":107,"w":15,"h":25,"offX":2,"offY":11,"sourceW":17,"sourceH":36},"k":{"x":117,"y":1,"w":24,"h":26,"offX":2,"offY":10,"sourceW":26,"sourceH":36},"l":{"x":147,"y":55,"w":18,"h":24,"offX":2,"offY":11,"sourceW":20,"sourceH":35},"m":{"x":1,"y":27,"w":28,"h":25,"offX":2,"offY":11,"sourceW":30,"sourceH":36},"n":{"x":193,"y":57,"w":22,"h":24,"offX":2,"offY":11,"sourceW":24,"sourceH":35},"o":{"x":91,"y":1,"w":24,"h":26,"offX":2,"offY":10,"sourceW":26,"sourceH":36},"p":{"x":219,"y":54,"w":22,"h":25,"offX":2,"offY":10,"sourceW":24,"sourceH":35},"q":{"x":37,"y":1,"w":24,"h":30,"offX":2,"offY":10,"sourceW":26,"sourceH":40},"r":{"x":143,"y":27,"w":23,"h":26,"offX":2,"offY":10,"sourceW":25,"sourceH":36},"s":{"x":128,"y":107,"w":16,"h":26,"offX":3,"offY":10,"sourceW":19,"sourceH":36},"t":{"x":86,"y":29,"w":21,"h":24,"offX":2,"offY":11,"sourceW":23,"sourceH":35},"u":{"x":222,"y":27,"w":23,"h":25,"offX":2,"offY":11,"sourceW":25,"sourceH":36},"v":{"x":217,"y":81,"w":22,"h":24,"offX":2,"offY":11,"sourceW":24,"sourceH":35},"w":{"x":1,"y":1,"w":34,"h":24,"offX":2,"offY":11,"sourceW":36,"sourceH":35},"x":{"x":222,"y":1,"w":24,"h":24,"offX":2,"offY":11,"sourceW":26,"sourceH":35},"y":{"x":168,"y":54,"w":23,"h":24,"offX":2,"offY":11,"sourceW":25,"sourceH":35},"z":{"x":109,"y":29,"w":21,"h":24,"offX":2,"offY":11,"sourceW":23,"sourceH":35},",":{"x":247,"y":34,"w":8,"h":11,"offX":3,"offY":29,"sourceW":11,"sourceH":40},".":{"x":213,"y":157,"w":9,"h":6,"offX":3,"offY":30,"sourceW":12,"sourceH":36},"~":{"x":213,"y":151,"w":18,"h":4,"offX":4,"offY":21,"sourceW":22,"sourceH":25},"\"":{"x":183,"y":155,"w":10,"h":11,"offX":4,"offY":11,"sourceW":14,"sourceH":22},"!":{"x":243,"y":54,"w":11,"h":25,"offX":4,"offY":11,"sourceW":15,"sourceH":36},"|":{"x":248,"y":1,"w":7,"h":31,"offX":3,"offY":8,"sourceW":10,"sourceH":39},"\\":{"x":147,"y":83,"w":15,"h":28,"offX":2,"offY":9,"sourceW":17,"sourceH":37},";":{"x":132,"y":29,"w":9,"h":21,"offX":4,"offY":19,"sourceW":13,"sourceH":40},":":{"x":205,"y":83,"w":9,"h":17,"offX":4,"offY":19,"sourceW":13,"sourceH":36},"<":{"x":200,"y":134,"w":12,"h":12,"offX":3,"offY":17,"sourceW":15,"sourceH":29},">":{"x":183,"y":141,"w":12,"h":12,"offX":3,"offY":17,"sourceW":15,"sourceH":29},"?":{"x":187,"y":83,"w":16,"h":26,"offX":3,"offY":10,"sourceW":19,"sourceH":36},"+":{"x":183,"y":127,"w":15,"h":12,"offX":4,"offY":18,"sourceW":19,"sourceH":30},"_":{"x":164,"y":158,"w":17,"h":3,"offX":2,"offY":37,"sourceW":19,"sourceH":40},"=":{"x":197,"y":148,"w":14,"h":9,"offX":4,"offY":19,"sourceW":18,"sourceH":28},"-":{"x":164,"y":163,"w":11,"h":5,"offX":4,"offY":25,"sourceW":15,"sourceH":30},")":{"x":222,"y":107,"w":11,"h":31,"offX":4,"offY":7,"sourceW":15,"sourceH":38},"#":{"x":128,"y":85,"w":17,"h":20,"offX":3,"offY":13,"sourceW":20,"sourceH":33},"$":{"x":129,"y":55,"w":16,"h":28,"offX":2,"offY":9,"sourceW":18,"sourceH":37},"%":{"x":63,"y":1,"w":26,"h":26,"offX":2,"offY":10,"sourceW":28,"sourceH":36},"^":{"x":214,"y":140,"w":15,"h":9,"offX":5,"offY":18,"sourceW":20,"sourceH":27},"&":{"x":63,"y":29,"w":21,"h":25,"offX":2,"offY":11,"sourceW":23,"sourceH":36},"*":{"x":183,"y":111,"w":14,"h":14,"offX":3,"offY":11,"sourceW":17,"sourceH":25},"(":{"x":241,"y":81,"w":12,"h":31,"offX":3,"offY":7,"sourceW":15,"sourceH":38},"@":{"x":168,"y":29,"w":25,"h":23,"offX":2,"offY":12,"sourceW":27,"sourceH":35},"'":{"x":53,"y":33,"w":5,"h":11,"offX":4,"offY":11,"sourceW":9,"sourceH":22}}}

实际上是Json文件 , 文本对应的是Json的Key

3 , 资源加载

4 , 核心代码

module demo{ /** * 测试位图字体 * @author Husz */ export class BitMapTextView extends egret.DisplayObjectContainer{ private _bitmapText : egret.BitmapText = null; private _bitmapFont : egret.BitmapFont = null; public constructor(){ super(); this._bitmapText = new egret.BitmapText(); this._bitmapFont = RES.getRes("cartoon-font_fnt"); this._bitmapText.font = this._bitmapFont; this._bitmapText.x = this._bitmapText.y = 150; this.addChild( this._bitmapText ); } /** * 显示文本 */ public showText( $str : string ) : void{ this._bitmapText.text = $str; } }}

调用:

let $demo : BitMapTextView = new BitMapTextView(); this.addChild($demo); $demo.showText("I am Aonaufly!");

结果:

官方:

/** * 以下示例演示了使用 BitmapText 显示特殊字体。 */class BitmapFontExample extends egret.DisplayObjectContainer { public constructor() { super(); RES.getResByUrl("resource/assets/font.fnt", this.onLoadComplete, this, RES.ResourceItem.TYPE_FONT); } private onLoadComplete(font:egret.BitmapFont):void { var bitmapText:egret.BitmapText = new egret.BitmapText(); bitmapText.font = font; this.addChild(bitmapText); bitmapText.text = "Hello Egret"; }}