fnt 图字原理
摘自: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 图字原理的更多相关文章
- Cocos2d-x中图字原理之深入分析
http://cache.baiducontent.com/c?m=9d78d513d9921cfe05ac94281a16a632451294247c89df4f3992d15f9217465c02 ...
- 正态QQ图的原理
code{white-space: pre;} pre:not([class]) { background-color: white; }if (window.hljs && docu ...
- Dive into TensorFlow系列(1)-静态图运行原理
接触过TensorFlow v1的朋友都知道,训练一个TF模型有三个步骤:定义输入和模型结构,创建tf.Session实例sess,执行sess.run()启动训练.不管是因为历史遗留代码或是团队保守 ...
- ArcGIS Server建立缓存(切图)原理解析[图解] (转载)
GoogleMap ,VirtualEarth ,YahooMap 等,目前所有的WebGIS都使用了缓存机制 以提高地图访问速度.原理都是将地图设定为多个比例尺,对于每个比例尺提前将地图分成若干小图 ...
- JQuery实现轮播图及其原理
源码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" name="vi ...
- [No000007]搜索引擎以图搜图的原理
之前,Google把"相似图片搜索"正式放上了首页. 你可以用一张图片,搜索互联网上所有与它相似的图片.点击搜索框中照相机的图标. 一个对话框会出现. 你输入网片的网址,或者直接上 ...
- js代码跑马灯效果-----轮播图字效果!
文字元素: <p id="yc-msg">你有本事来打我呀!</p> js执行代码: function ycMsg() { // 获取 标签 var pOb ...
- matlab将rgb图转为灰度图的原理代码
MyYuanLaiPic = imread('e:/image/matlab/Cluo.jpg');%读取RGB格式的图像 MyFirstGrayPic = rgb2gray(MyYuanLaiPic ...
- 最简单的jQuery轮播图(原理解析)
html: <div class="middle_right"> <div id="lunbobox"> <div id=&quo ...
随机推荐
- import { Subject } from 'rxjs/Subject';
shared-service.ts import { Observable } from 'rxjs/Observable'; import { Injectable } from '@angular ...
- bitnami-redmineserver迁移
1. 背景 在Redmineserver迁移过程中.假设前后两个Redmine的版本号一样,事情就简单,假设版本号不一样,就有可能面临两个版本号数据库不兼容.那就比較麻烦了.本文旨在介绍数据库不兼容时 ...
- 点滴积累【JS】---JS小功能(button选择颜色)
效果: 代码: <head runat="server"> <title></title> <style type="text/ ...
- Atitit.木马病毒的操作注册表原理 系统服务管理器 atiSysService
Atitit.木马病毒的操作注册表原理 系统服务管理器 atiSysService 1. atiSysService1 2. atiSysService 原理1 3. Java code1 4. 参 ...
- PHPCMS模块开发相关文件
名称 类型说明 Guestbook 模块后台控制器 index 模块前台控制器 Install 安装文件夹 ├templates ├config.inc.php ├extention.inc.php ...
- LFCS 系列第八讲:管理用户和用户组、文件权限和属性以及启用账户 sudo 访问权限
由于 Linux 是一个多用户的操作系统(允许多个用户通过不同主机或者终端访问一个独立系统),因此你需要知道如何才能有效地管理用户:如何添加.编辑.禁用和删除用户账户,并赋予他们足以完成自身任务的必要 ...
- web.py 安装
安装 安装web.py, 请先下载: http://webpy.org/static/web.py-0.37.tar.gz 或者获取最新的开发版: https://github.com/webpy/w ...
- hdu6006 Engineer Assignment 状态dp 定义dp[i][s]表示前i个工程状态为s可以执行的最大工程数。s表示前i个工人选走了s状态的工程师。
/** 题目:hdu6006 Engineer Assignment 链接:http://acm.hdu.edu.cn/showproblem.php?pid=6006 题意:已知n个工程,每个需要某 ...
- RMAN Restore, Recovery
Complete recovery: rman target / nocatalog startup mount; restore database; recover database; alter ...
- nodejs 聊天室简单实现
前言 博客园的样式真心不会用啊,看着大大们的博客各种好看,心里无奈啊,只能慢慢摸索了. 最近的项目nodejs+wcf+app,app直接从wcf服务获取数据,nodejs作为单独的服务器为app提供 ...