摘自:http://blog.csdn.net/wzq9706/article/details/8188256

首先要介绍一下,图字是怎么来的?其实这个很早很早了,记得80后在95年开始玩DOS下的仙剑奇侠传的时候,那些令人难忘的中文对话吧!DOS下做游戏,使用的是C语言,不要说写字了,很多复杂的操作甚至涉及驱动。那时候绘图就是利用将图片中的像素取出来后绘制在屏幕上,所以处理游戏中的中文,就只有把这些文字的像素预先写到BMP或二进制文件中,然后读取出来再设置屏幕像素以实现。后来进入DDRAW的时代,可以使用WINDOWS系统中的字库来写字了。把DDRAW的后台表面进行LOCK,取出其DC,然后用GDI将文字写到其DC上,这种做法后面也延续了很久,但GDI进行TextOut的效率非常慢,你要是想像梦幻西游一样满屏写了,那得卡死,解决方案是什么?还是图字。专业的游戏开发者会将所用到的字都预处理生成到一张图片中,通过一个编码与纹理UV对应文件来进行纹理UV的获取后做为顶点的UV值然后进行绘制,有也的在每一帧中实时的将需要的字使用DDRAW写字的方法绘制到相应的纹理上然后使用文字编码与纹理UV对应信息来进行绘制,这样效率就提高很多了。目前比较流行的做法是使用一张png图片来存储用到的文字。一个.fnt文件来存储文字图片说明信息。Cocos2d-x和LibGdx中都集成了相关的图字处理类。在世界范围内,也有很多游戏使用了这个方案。

我们以Cocos2d-x的tests工程中的LabelTest中的最后一个Label显示“中国”为例来分析一下。

打开Cocos2d-x所在目录下的tests\Resources\fonts目录,找到bitmapFontChinese.png(文字贴图文件)和bitmapFontChinese.fnt(文字图片说明信息文件) www.2cto.com

先打开png,我们可以看到它是512x512大小,上面由12行,14列个文字组成。包括有一些汉字,常用字符,数字和字母。它的每个字都是由青色到蓝色的向下渐变。

再用UEdit或记事本打开bitmapFontChinese.fnt,可以看到它的构成,我在这里讲一下。

第一行是对字体的介绍。

info face="华康海报体W12(P)" size=32 bold=0italic=0 charset="" unicode=0stretchH=100smooth=1 aa=1 padding=0,0,0,0 spacing=1,1

解释:

face="华康海报体W12(P)":字体为”华康海报体W12(P)”,

size=32:大小为32像素

bold=0 :不加粗

italic=0:不使用斜体

charset="": charset是编码字符集,这里没有填写值即使用默认,

unicode=0:不使用Unicode

stretchH=100:纵向缩放百分比

smooth=1 :开启平滑

aa=1:开启抗锯齿

padding=0,0,0,0:内边距,文字与边框的空隙。

spacing=1,1 :外边距,就是相临边缘的距离。

第二行是对应所有字贴图的公共信息

common lineHeight=37 base=28 scaleW=512 scaleH=512pages=1 packed=0

解释:

lineHeight=37:行高,如果遇到换行符时,绘制字的位置坐标的Y值在换行后增加的像素值。

base=28 :字的基本大小

scaleW=512 :图片大小

scaleH=512:图片大小

pages=1 :此种字体共用到几张图。

packed=0:图片不压缩

第三行是对应当前字贴图的信息

//第一页,文件名称是”bitmapFontChinese.png”

page id=0 file="bitmapFontChinese.png"

第四行是当前贴图中所容纳的文字数量

chars count=204

第五行起把当前贴图中所用到的所有文字的编码以及对应在图片上的矩形位置,偏移等列出来

第一个字符编码为32,也就是空格,位置为0,0,宽高为0,0, 绘制到屏幕的相应位置时,像素偏移(0,28),绘制完后相应位置的x往后移15像素再画下一个字符,字的图块在第1页上

char id=32  x=0     y=0     width=0    height=0     xoffset=0     yoffset=28    xadvance=15     page=0 chnl=0

第一个字符编码为汉字”象”,也就是空格,位置为0,0,宽为33,高为36, 绘制到屏幕的相应位置时,像素偏移(0,-1),绘制完后相应位置的x往后移36像素再画下一个字,字的图块在第1页上

char id=35937  x=0     y=0     width=33    height=36     xoffset=0     yoffset=-1    xadvance=36     page=0 chnl=0

char id=26696  x=33     y=0     width=35     height=36     xoffset=-1     yoffset=-1    xadvance=36     page=0 chnl=0

char id=26071  x=68     y=0     width=35     height=36     xoffset=-1    yoffset=-1    xadvance=36     page=0 chnl=0

再后面是描述两个字在进行组合绘制时字距调整的相关信息,这里没有要进行间距调整的字组合所以为设-1。对于字组合间距调整可以看此示例图:http://www.2cto.com/uploadfile/2012/0903/20120903112659845.jpg

kernings count=-1

这个数字代表参与字组合间距调整的字的数量。

如果kernings count大于零,后面会有类似这样的描述:

kerning first=102  second=41 amount=2

也就是’f’与’)’进行组合显示’f)’时,’)’向右移2像素防止粘在一起。

通过上面这些信息,引擎可以通过编码找到相应的文字并取出对应的纹理块。

fnt 图字原理的更多相关文章

  1. Cocos2d-x中图字原理之深入分析

    http://cache.baiducontent.com/c?m=9d78d513d9921cfe05ac94281a16a632451294247c89df4f3992d15f9217465c02 ...

  2. 正态QQ图的原理

    code{white-space: pre;} pre:not([class]) { background-color: white; }if (window.hljs && docu ...

  3. Dive into TensorFlow系列(1)-静态图运行原理

    接触过TensorFlow v1的朋友都知道,训练一个TF模型有三个步骤:定义输入和模型结构,创建tf.Session实例sess,执行sess.run()启动训练.不管是因为历史遗留代码或是团队保守 ...

  4. ArcGIS Server建立缓存(切图)原理解析[图解] (转载)

    GoogleMap ,VirtualEarth ,YahooMap 等,目前所有的WebGIS都使用了缓存机制 以提高地图访问速度.原理都是将地图设定为多个比例尺,对于每个比例尺提前将地图分成若干小图 ...

  5. JQuery实现轮播图及其原理

    源码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" name="vi ...

  6. [No000007]搜索引擎以图搜图的原理

    之前,Google把"相似图片搜索"正式放上了首页. 你可以用一张图片,搜索互联网上所有与它相似的图片.点击搜索框中照相机的图标. 一个对话框会出现. 你输入网片的网址,或者直接上 ...

  7. js代码跑马灯效果-----轮播图字效果!

    文字元素: <p id="yc-msg">你有本事来打我呀!</p> js执行代码: function ycMsg() { // 获取 标签 var pOb ...

  8. matlab将rgb图转为灰度图的原理代码

    MyYuanLaiPic = imread('e:/image/matlab/Cluo.jpg');%读取RGB格式的图像 MyFirstGrayPic = rgb2gray(MyYuanLaiPic ...

  9. 最简单的jQuery轮播图(原理解析)

    html: <div class="middle_right"> <div id="lunbobox"> <div id=&quo ...

随机推荐

  1. (C#)Windows Shell 外壳编程系列1 - 基础,浏览一个文件夹

    1 - 基础,浏览一个文件夹 我们知道,在win32中是以外壳名字空间的形式来组织文件系统的,在外壳名字空间里的每一个对象(注)都实现了一个IShellFolder的接口,通过这个接口我们可以直接查询 ...

  2. Linux命令-网络命令:last

    last 统计linux系统所有用户的登录时间(多次登录信息)

  3. 使用typescript开发js代码提升代码维护性

    function test() { var gs = new Greeter('ss'); alert( gs.greet()); } window.onload = test; class Gree ...

  4. centos7(vmware install) 安装EMQ注意事项 ---控制台远程访问

    若想远端访问控制台,需打开对于端口 TCP 服务端口占用 EMQ 2.0 消息服务器默认占用的 TCP 端口包括: 1883 MQTT 协议端口 8883 MQTT/SSL 端口 8083 MQTT/ ...

  5. discuz 安装 文件不可写

    discuz安装过程中,系统会自动检查环境及文件目录权限,当出现目录不可写: 这个时候只需要用ftp修改文件夹权限就可以了

  6. 【HDOJ 5379】 Mahjong tree

    [HDOJ 5379] Mahjong tree 往一颗树上标号 要求同一父亲节点的节点们标号连续 同一子树的节点们标号连续 问一共同拥有几种标法 画了一画 发现标号有二叉树的感觉 初始标号1~n 根 ...

  7. Cookie的新增,设置与清除

    addCookieBtn.addEventListener('click',function () { document.cookie='imooc=www.imooc.com;expires=201 ...

  8. iOS 小数点精度问题处理

    实际开发中有时候经常会需要去处理小数点精度问题,如果是整数保留整数,如果有小数则保留不为0的的小数,最大2位小数 eg: 2.013 ---> 2.01 2.0 ---> 2 2.10 - ...

  9. RxBinding -- 官网说明

    RxBinding -- 官网说明 新建 模板 小书匠 作用 组件 平台绑定 support-v4 绑定 appcompact-v7 绑定 design 库绑定 recyclerview-v7 绑定 ...

  10. dubbo入门使用

    主要参考dubbo官网demo 此处采用zookeeper注册中心进行服务协调管理 真个项目结构如下所示: dcommon : 主要用于定义服务接口, 为dconsumer,dprovider所依赖 ...