Egret之位图字体

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";
    }
}

原文地址：http://blog.51cto.com/aonaufly/2067382

时间： 2024-10-11 14:33:44

Egret之位图字体的相关文章

Egret自定义位图文字

因为egret的位图文字是texturemerger做的,需要多张单图片导入tm,然后会导出生成两个文件,制作过程比较麻烦. 看了决战沙城的自定义位图文字后,现在也做了一个.支持使用整图和单张图片. 测试用整图 测试用单张图 具体代码 /** * 位图文字 * @author ck 2019.11.10 */ class BitmapFont extends eui.Component{ /**位图缓存 */ private static bmCaches:Array<egret.Bitmap>

使用Glyph Designer创建位图字体

 使用Glyph Designer创建位图字体 转http://book.2cto.com/201210/6610.html <iOS 5 cocos2d游戏开发实战(第2版)>将引导您开发富有吸引力的2D游戏.书中展示了如何使用cocos2d这款强大的游戏引擎来开发iPhone和iPad游戏,此外还介绍了游戏中的瓦片地图.虚拟摇杆.Game Center等.本书...  立即去当当网订购 本书第1版问世后,www.71squared.com发布了一款可以替代Hiero的工具:GlyphDes

NGUI-制作位图字体以及图文混排

制作字体过程 首先得下载一个位图制作工具Bitmap font generator,可以点击这里下载 1.新建txt文件,输入字体里面包含的文字 2.保存为utf-8格式:点击文件另存为,选择编码格式为UTF-8 3.打开下载的bitmap font软件,选择options->font settings,设置字体等选项 4.选择Edit->select chars from file,然后选择我们刚刚建好的文件 5.选择options->save bitmapfont as .然后就会生

详解利用ShoeBox制作位图字体

http://childhood.logdown.com/posts/190580/-details-using-shoebox-produce-bitmap-fonts?utm_source=tuicool 1 ShoeBox 简介 ShoeBox官网 ShoeBox是一个基于AdobeAIR实现的免费跨平台的工具.这个工具使用拖放.剪切板的工作流程方式,能够很方便的处理游戏图片.创建位图字体等. 支持引擎 2 功能概括介绍 ShoeBox虽小,五脏俱全.作者做这个工具足见是用了心,如果各位想

【独立开发者er Cocos2d-x实战 008】BMFont生成位图字体工具和Cocos2dx使用加载fnt文件

1.首先我们需要下载并且安装BMFont工具,下载地址如下:http://download.csdn.net/detail/chenqiai0/8899353(里面还有详细的使用文档,如果使用中有什么不明白请留言). 2.安装后,打开BMFont,界面如下,右边的列表是字体库 3.创建一个txt文件,然后输入你用到的文字(注意:保存的时候要用utf-8,否则软件无法识别) 4.接下来的操作请大家下载上述资源,然后按照pdf中讲解的步骤操作,肯定可以实现fnt文件的导出. 注意:需要我们注意的是在

简单介绍了解白鹭引擎Egret

(一)关于白鹭引擎Egret Egret引擎是一个开源免费的游戏框架,用于构建二维游戏.演示程序和其他图形界面交互应用等.Egret使用TypeScript脚本语言开发.当游戏完成最终的打包后,可以将程序转换为HTML5游戏.实现跨平台特性. Egret不仅仅是一个基于HTML5技术的游戏引擎,我们的产品线中除了Egret引擎还提供了很多辅助游戏开发的工具.准确的来说,Egret是一套游戏开发的解决方案.你可以使用Egret引擎来帮助你开发HTML5游戏,并运行在手机和PC端的浏览器中,同时也你

TTF字体基本知识及其在QT中的应用

字体类型 以Windows为例,有4种字体技术: Raster:光栅型,就是用位图来绘制字形(glyph),每个字都以位图形式保存 Vector:矢量型,就是用一系列直线的结束点来表示字形 TrueType:使用一系列直线.曲线和一些提示(hint)命令来绘制字形 Microsoft OpenType:与TrueType一致 因为TrueType等字体的hint能够调节只想的长度和曲线的形状,所以,它能够在不同大小的字体中表现良好.而Raster字体则是跟设备具体分辨率相关,而Vector字体则

Ubuntu 字体设置：使用Windows 字体

基础知识 Sans-serif=无衬线体=黑体:并不是具体一款字体,而是一类字体,选择它其实等于选择这类字体中优先级最高的那款字体. Serif=衬线体=白体:同上 Monospace=等宽字体,意思是字符宽度相同:同上 点阵字体=位图字体 无衬线体更适合电脑屏幕阅读,衬线体适合打印.——因为衬线可以使得人视线平齐于一行.也就是说不会读破行. 中文显示时有不同的方式,一方面因为中文本身拥有的横和同高度就可以导致这种平齐.行距对中文更重要. 1. 安装字体 sudo apt-get install

最佳编程字体：M+

英文原文:The Best Font for Programming: M+ 程序员的最佳等宽字体是 M+. 一个偶然机会遇到了这个字体,在命运多舛的  kod 编辑器体验了.这个字体非比寻常,我坚持这个选择已有三年多时间了. // 编注:kod 一个面向在 OS X 平台开发的编辑器. 我看过很多讲编程字体的文章(<10 个不错的编程等宽字体>.<5 个最佳编程字体>),但这个可爱的字体却没有上榜. 在 Retina 屏幕下,笔画纤细,宽度纤瘦看起来很不错,M+ 字体超凡的纤细,