Cocos2d中文原理分析.doc

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所在目录下的testsResourcesfonts目录，找到bitmapFontChinese.png(文字贴图文件)和bitmapFontChinese.fnt(文字图片说明信息文件) 先打开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:不使用UnicodestretchH=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=0char id=26696 x=33 y=0 width=35 height=36 xoffset=-1 yoffset=-1 xadvance=36 page=0 chnl=0char id=26071 x=68 y=0 width=35 height=36 xoffset=-1 yoffset=-1 xadvance=36 page=0 chnl=0再后面是描述两个字在进行组合绘制时字距调整的相关信息，这里没有要进行间距调整的字组合所以为设-1。对于字组合间距调整可以看此示例图：/uploadfile/2012/0903/20120903112659845.jpgkernings count=-1这个数字代表参与字组合间距调整的字的数量。如果kernings count大于零，后面会有类似这样的描述：kerning first=102 second=41 amount=2也就是f与)进行组合显示f)时，)向右移2像素防止粘在一起。通过上面这些信息，引擎可以通过编码找到相应的文字并取出对应的纹理块。/Cocos2d-x中LabelBMFontChinese 下面我们来分析一下Cocos2d-x的tests工程中的LabelTest中的最后一个Label，它的类名为CCLabelBMFont.转到其类定义文件CCLabelBMFont.hclass CC_DLL CCLabelBMFont : public CCSpriteBatchNode, public CCLabelProtocol, public CCRGBAProtocol可以看到其直接派生于三个类，分别是 CCSpriteBatchNode :精灵批次管理类，用于将使用一张图的多个精灵在设置一次纹理的批次里进行绘制，提高渲染的效率。 CCLabelProtocol :文字字 CCRGBAProtocol:颜色调节接口类 由简入深，我们先来看一下CCRGBAProtocol，打开CCProtocols.hcppclass CC_DLL CCRGBAProtocolpublic: /设置颜色 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，明显的，它也是纯虚类，做为存储字符串的接口使用:cppclass CC_DLL CCLabelProtocolpublic: / 设置文字标签显示的字符串 virtual void setString(const char *label) = 0; / 返回文字标签显示的字符串 virtual const char* getString(void) = 0; 最后来分析CCSpriteBatchNode类。它由CCNodet 和 CCTextureProtocal两个类派生而来，CCNode是基础结点类，用于将引擎中所有具有逻辑顺序和父子关系的类组织起来，基于CCNode派生的类均可以互相挂接。CCNode不是本章要详细介绍的内容，就不再详细分析了，看一下CCTextureProtocol，这是一个纹理使用接口类:cppclass CC_DLL CCTextureProtocol : public CCBlendProtocolpublic: / 返回所使用的2D纹理 virtual CCTexture2D* getTexture(void) = 0; / 设置使用的2D纹理，并为纹理的使用计数器加1操作 virtual void setTexture(CCTexture2D *texture) = 0; 很简单，只有两个函数对纹理进行设置和获取，它派生于CCBlendProtocal,这是一个Alpha混合系数设置接口类，用于在开启Alpha混合状态后对Alpha混合的系数进行设置。再来看一下CCBlendProtocal,这是一个混合状态设置接口类:cppclass CC_DLL CCBlendProtocolpublic: / 为纹理设置使用的混合状态 virtual void setBlendFunc(ccBlendFunc blendFunc) = 0; / 返回为纹理设置的混合状态 virtual ccBlendFunc getBlendFunc(void) = 0; 返回到类CCSpriteBatchNode的定义。我们再来分析CCSpriteBatchNode。之前说了CCSpriteBatchNode是精灵批次管理类，用于将使用一张图的多个精灵在设置一次纹理的批次里进行绘制，提高渲染的效率。既然多个精灵使用一张图，则需要将多个小图块合并在一张图上，这样只要设置使用大图做为纹理，将使用各小图块做为纹理贴图的精灵设置好顶点与UV等数据，就可以绘制出这些精灵了。Cocos2d-x提供了一个类CCTextureAtlas对使用图块的这些精灵所使用的顶点缓冲区进行管理。为了更好的理解CCSpriteBatchNode,我们看一下它的定义和实现：cpp#ifndef _CCTEXTURE_ATLAS_H_#define _CCTEXTURE_ATLAS_H_/用到的头文件#include #include ccTypes.h#include CCObject.h#include ccConfig.h/使用Cocos2d命名空间namespace cocos2d class CCTexture2D;/CCTextureAtlas由CCObject派生而来class CC_DLL CCTextureAtlas : public CCObjectprotected: /使用此大图中的图块的精灵对应的三角形索引数组的指针 GLushort *m_pIndices;#if CC_USES_VBO /如果使用Vertex Buffer Object(VBO:使用显存而非内存存储顶点缓冲数据，大大提高效率)，建立VBO句柄数组，第一个元素存顶点数组的句柄，第二个元素存索引数组句柄 GLuint m_pBuffersVBO2; /标记是否更新需要更新的图块信息。当你新加入了图块或者修改了图块，需要设置为true。 bool m_bDirty;#endif / CC_USES_VBO/ CC_PROPERTY_READONLY宏为类定义变量及增加相应的get函数。 /当前使用图块的数量 CC_PROPERTY_READONLY(unsigned int, m_uTotalQuads, TotalQuads) /存储图块信息的数组容量 CC_PROPERTY_READONLY(unsigned int, m_uCapacity, Capacity) /设置所使用的大图纹理 CC_PROPERTY(CCTexture2D *, m_pTexture, Texture) /使用此大图的图块的所有精灵的顶点缓冲信息数组 CC_PROPERTY(ccV3F_C4B_T2F_Quad *, m_pQuads, Quads)public: /构造 CCTextureAtlas(); /析构 virtual CCTextureAtlas(); /描述 char * description(); /静态函数：从文件中创建纹理，并初始化图块容量 static CCTextureAtlas * textureAtlasWithFile(const char* file , unsigned int capacity); /同上，只是非静态函数。作者提示不能重复调用，否则会造成内存泄漏。 bool initWithFile(const char* file, unsigned int capacity); /静态函数：从贴图中创建纹理，并初始化图块容量 static CCTextureAtlas * textureAtlasWithTexture(CCTexture2D *texture, unsigned int capacity); /同上，只是非静态函数。作者提示不能重复调用，否则会造成内存泄漏。 bool initWithTexture(CCTexture2D *texture, unsigned int capacity); /通过索引值找到对应的图块顶点缓冲数据并用新数据修改它，由CCSprite实例对象在变换顶点信息时调用。 void updateQuad(ccV3F_C4B_T2F_Quad* quad, unsigned int index); /通过索引值找到对应的图块顶点缓冲数据，并在其之前插入一个新的图块。 void insertQuad(ccV3F_C4B_T2F_Quad* quad, unsigned int index); /通过索引值找到对应的图块顶点缓冲数据，并把它插入另一个图块之前。 void insertQuadFromIndex(unsigned int fromIndex, unsigned int newIndex); /移除指定位置的图块顶点缓冲数据. void removeQuadAtIndex(unsigned int index); /清空所有的图块顶点缓冲数据。 void removeAllQuads(); /重新设置图块顶点缓冲数组的容量 bool resizeCapacity(unsigned int n); /绘制指定的图块顶点缓冲 void drawNumberOfQuads(unsigned int n); /绘制从指定的图块起后面的N个图块 void drawNumberOfQuads(unsigned int n, unsigned int start); /绘制所有的图块顶点缓冲 void drawQuads();private: /初始化索引缓冲数据 void initIndices();/namespace cocos2d#endif /_CCTEXTURE_ATLAS_H_再看CPP:cpp#include CCTextureAtlas.h#include CCTextureCache.h#include ccMacros.h/ 纹理头文件#include CCTexture2D.h#include /使用Cocos2d命名空间namespace cocos2d /构造,初始化成员变量CCTextureAtlas:CCTextureAtlas() :m_pIndices(NULL)#if CC_USES_VBO , m_bDirty(false)#endif ,m_pTexture(NULL) ,m_pQuads(NULL)/析构，释放所用的内存CCTextureAtlas:CCTextureAtlas()/ CCLOGINFO(cocos2d: deallocing CCTextureAtlas.); CC_SAFE_FREE(m_pQuads) CC_SAFE_FREE(m_pIndices)#if CC_USES_VBO /释放缓冲区对象 glDeleteBuffers(2, m_pBuffersVBO);#endif / CC_USES_VBO CC_SAFE_RELEASE(m_pTexture);/实现通过宏CC_PROPERTY_READONLY声明的函数/取得当前使用的图块的数量unsigned int CCTextureAtlas:getTotalQuads() return m_uTotalQuads;/取得图块集的容量unsigned int CCTextureAtlas:getCapacity() return m_uCapacity;/取得大纹理CCTexture2D* CCTextureAtlas:getTexture() return m_pTexture;/设置大纹理void CCTextureAtlas:setTexture(CCTexture2D * var) CC_SAFE_RETAIN(var); CC_SAFE_RELEASE(m_pTexture); m_pTexture = var;/取得使用此大图的图块的所有精灵的顶点缓冲信息数组ccV3F_C4B_T2F_Quad* CCTextureAtlas:getQuads() return m_pQuads;/设置使用此大图的图块的所有精灵的顶点缓冲信息数组void CCTextureAtlas:setQuads(ccV3F_C4B_T2F_Quad *var) m_pQuads = var;/静态函数：从文件中创建纹理，并初始化图块容量CCTextureAtlas * CCTextureAtlas:textureAtlasWithFile(const char* file, unsigned int capacity) /使用new来实例化一个CCTextureAtlas对象 CCTextureAtlas * pTextureAtlas = new CCTextureAtlas(); /调用成员函数进行初始化 if(pTextureAtlas & pTextureAtlas-initWithFile(file, capacity) pTextureAtlas-autorelease(); return pTextureAtlas; /如果失败，释放后返回NULL CC_SAFE_DELETE(pTextureAtlas); return NULL;/静态函数：从贴图中创建纹理，并初始化图块容量CCTextureAtlas * CCTextureAtlas:textureAtlasWithTexture(CCTexture2D *texture, unsigned int capacity) /使用new来实例化一个CCTextureAtlas对象 CCTextureAtlas * pTextureAtlas = new CCTextureAtlas(); /调用成员函数进行初始化 if (pTextureAtlas & pTextureAtlas-initWithTexture(texture, capacity) pTextureAtlas-autorelease(); return pTextureAtlas; /如果失败，释放后返回NULL CC_SAFE_DELETE(pTextureAtlas); return NULL;/非静态函数，从文件中创建纹理，并初始化图块容量bool CCTextureAtlas:initWithFile(const char * file, unsigned int capacity) / 由纹理管理器加载一个图片文件，返回生成的纹理 CCTexture2D *texture = CCTextureCache:sharedTextureCache()-addImage(file); /判断生成纹理是否有效 if (texture) /如果成功，使用纹理进行初始化 return initWithTexture(texture, capacity); else /不成功打印错误日志并返回NULL CCLOG(cocos2d: Could not open file: %s, file); delete this; return NULL; /非静态函数，设置纹理，并初始化图块容量bool CCTextureAtlas:initWithTexture(CCTexture2D *texture, unsigned int capacity) /纹理有效性判断，防止重复调用 CCAssert(texture != NULL, texture should not be null); /设置图块容量 m_uCapacity = capacity; m_uTotalQuads = 0; / 设置纹理 this-m_pTexture = texture; CC_SAFE_RETAIN(m_pTexture); / 判断是否重复调用 CCAssert(m_pQuads = NULL & m_pIndices = NULL, ); /申请容量大小的的顶点缓冲信息数组 m_pQuads = (ccV3F_C4B_T2F_Quad*)calloc( sizeof(ccV3F_C4B_T2F_Quad) * m_uCapacity, 1 ); /申请容量大小的索引缓冲数组 m_pIndices = (GLushort *)calloc( sizeof(GLushort) * m_uCapacity * 6, 1 ); /如果失败，做相应处理 if( ! ( m_pQuads & m_pIndices) & m_uCapacity 0) /CCLOG(cocos2d: CCTextureAtlas: not enough memory); CC_SAFE_FREE(m_pQuads) CC_SAFE_FREE(m_pIndices) CC_SAFE_RELEASE_NULL(m_pTexture); return false; /初始化缓冲区对象#if CC_USES_VBO glGenBuffers(2, &m_pBuffersVBO0); m_bDirty = true;#endif / CC_USES_VBO/初始化索引缓冲 this-initIndices(); return true;/取得描述char * CCTextureAtlas:description() char *ret = new char100; sprintf(ret, , m_uTotalQuads); return ret;/初始化索引缓冲void CCTextureAtlas:initIndices() /如果容量为0直接返回 if (m_uCapacity = 0) return; /按照顶点的顺序和使用的三角形渲染排列方式为索引缓冲填充数据。 for( unsigned int i=0; i = 0 & index m_uCapacity, updateQuadWithTexture: Invalid index); /如果index大于现有的数量则更新数量 m_uTotalQuads = max( index+1, m_uTotalQuads); /修改对应的数据值 m_pQuadsindex = *quad; /需要更新#if CC_USES_VBO m_bDirty = true;#endif/通过索引值找到对应图块的顶点缓冲，并在其位置之前插入一个新的图块。void CCTextureAtlas:insertQuad(ccV3F_C4B_T2F_Quad *quad, unsigned int index) /有效性判断 CCAssert( index m_uCapacity, insertQuadWithTexture: Invalid index); /数量增加 m_uTotalQuads+; CCAssert( m_uTotalQuads 0) / texture coordinates memmove( &m_pQuadsindex+1,&m_pQuadsindex, sizeof(m_pQuads0) * remaining ); m_pQuadsindex = *quad; /设置需要更新m_pBuffersVBO中的VBO数组数据。#if CC_USES_VBO m_bDirty = true;#endif/通过索引值找到对应图块的顶点缓冲，并把它插入另一个图块之前。void CCTextureAtlas:insertQuadFromIndex(unsigned int oldIndex, unsigned int newIndex) /有效性判断 CCAssert( newIndex = 0 & newIndex = 0 & oldIndex 0 ? (oldIndex - newIndex) : (newIndex - oldIndex); unsigned int dst = oldIndex; unsigned int src = oldIndex + 1; if( oldIndex newIndex) dst = newIndex+1; src = newIndex; / 开始进行移动 ccV3F_C4B_T2F_Quad quadsBackup = m_pQuadsoldIndex; memmove( &m_pQuadsdst,&m_pQuadssrc, sizeof(m_pQuads0) * howMany ); /更新新索引位置的数据 m_pQuadsnewIndex = quadsBackup; /设置需要更新m_pBuffersVBO中的VBO数组数据。#if CC_USES_VBO m_bDirty = true;#endif/移除指定位置的图块顶点缓冲void CCTextureAtlas:removeQuadAtIndex(unsigned int index) /有效性判断 CCAssert( index initIndices(); /设置需要更新m_pBuffersVBO中的VBO数组数据。上面已经设了，这里重复可以不要。#if CC_USES_VBO m_bDirty = true;#endif return true;/绘制所有的图块顶点缓冲数据void CCTextureAtlas:drawQuads() this-drawNumberOfQuads(m_uTotalQuads, 0);/绘制指定的图块顶点缓冲数据void CCTextureAtlas:drawNumberOfQuads(unsigned int n) this-drawNumberOfQuads(n, 0);/绘制从指定的图块顶点缓冲数据起后面的N个图块顶点缓冲数据void CCTextureAtlas:drawNumberOfQuads(unsigned