当前位置:编程学习 > wap >>

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

 首先要介绍一下,图字是怎么来的?其实这个很早很早了,记得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.zzzyk.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。对于字组合间距调整可以看此示例图:/2012/0903/20120903112659845.jpg

 

kernings count=-1

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

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

kerning first=102  second=41 amount=2

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

 

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

//Cocos2d-x中LabelBMFontChinese

 

    下面我们来分析一下Cocos2d-x的tests工程中的LabelTest中的最后一个Label,它的类名为CCLabelBMFont.转到其类定义文件CCLabelBMFont.h
 
class CC_DLL CCLabelBMFont : public CCSpriteBatchNode, public CCLabelProtocol, public CCRGBAProtocol 

 

可以看到其直接派生于三个类,分别是

    CCSpriteBatchNode :精灵批次管理类,用于将使用一张图的多个精灵在设置一次纹理的批次里进行绘制,提高渲染的效率。

    CCLabelProtocol :文字字串类

      
    CCRGBAProtocol:颜色调节接口类

    

    由简入深,我们先来看一下CCRGBAProtocol,打开CCProtocols.h

[cpp] 
class CC_DLL CCRGBAProtocol 

public: 
    //设置颜色 
    virtual void setColor(const ccColor3B& color) = 0; 
 
    //取得颜色 
    virtual const ccColor3B& getColor(void) = 0; 
 
    //返回透明度 
    virtual GLubyte getOpacity(void) = 0; 
 
    //设置透明度 
    virtual void setOpacity(GLubyte opacity) = 0; 
 
    //设置是否使用Alpha值设置RGB,如果 
    virtual void setIsOpacityModifyRGB(bool bValue) = 0; 
 
    //取得是否使用Alpha值设置RGB 
    virtual bool getIsOpacityModifyRGB(void) = 0; 
}; 

      可以看到CCRGBAProtocol类是个纯虚类,只是定义了一些设置获取颜色信息的接口函数。

      继续看CCLabelProtocal,明显的,它也是纯虚类,做为存储字符串的接口使用:


[cpp] 
class CC_DLL CCLabelProtocol 

public: 
    // 设置文字标签显示的字符串 
    virtual void setString(const char *label) = 0; 
 
    // 返回文字标签显示的字符串 
    virtual const char* getString(void) = 0; 
}; 

    最后来分析CCSpriteBatchNode类。它由CCNodet 和 CCTextureProtocal两个类派生而来,CCNode是基础结点类,用于将引擎中所有具有逻辑顺序和父子关系的类组织起来,基于CCNode派生的类均可以互相挂接。CCNode不是本章要详细介绍的内容,就不再详细分析了,看一下CCTextureProtocol,这是一个纹理使用接口类:

[cpp] 
class CC_DLL CCTextureProtocol : public CCBlendProtocol 

public: 
    // 返回所使用的2D纹理 
    virtual CCTextu

补充:移动开发 , 其他 ,
CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,