Egret之位圖字體
阿新 • • 發佈：2018-01-31
.com fly item new egret set -o col clas 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"; } }
Egret之位圖字體