cocos2d 教程：CCScale9Sprite的另一种实现.docVIP

cocos2d-x中CCScale9Sprite的另一种实现cocos2d 2.0之后加入了一种九宫格的实现，主要作用是用来拉伸图片，这样的好处在于保留图片四个角不变形的同时，对图片中间部分进行拉伸，来满足一些控件的自适应（PS: 比如包括按钮，对话框，最直观的形象就是ios里的短信气泡了），这就要求图片资源的中间部分是纯色或者是简单的渐变了！ 1.cocos2d中九宫格CCScale9Sprite的实现 （1）原理 cocos2d的实现非常巧妙，是通过1个CCSpriteBatchNode和9个CCSprite来实现的，原理很简单，通过将原纹理资源切割成9部分（PS: 这也是叫九宫格的原因），根据想要的尺寸，完成以下的三个步骤： a. 保持4个角部分不变形 b. 单向拉伸4条边（即在4个角两两之间的边，比如上边，只做横向拉伸） c. 双向拉伸中间部分（即九宫格的中间部分，横向，纵向同时拉伸，PS：拉伸比例不一定相同） （2）实现 CCSpriteBatchNode的资源为整个的纹理，9个CCSprite对应于纹理的9个部分（根据纹理不同，9部分所占比例会有所不同），根据想要的尺寸，将9部分拼装在一起！ （3）优缺点 优点：思路简单清晰；使用CCSpriteBatchNode，只需要一次绘制，效率较高 缺点：内存占用大，需要1个CCSpriteBatchNode和9个CCSprite对象；不支持CCSpriteBatchNode（如果控件很多，我们都需要对每个控件单独绘制一次，会影响效率） 2.cocos2d-x中CCSprite的绘制 在介绍我的九宫格实现之前，先简单介绍一下CCSprite的绘制原理 （1）顶点数据 每一个CCSprite都保持了一个关于顶点数据的结构体 // vertex coords, texture coords and color info ccV3F_C4B_T2F_Quad m_sQuad; 这个Quad字眼的意思是一个矩形，参照ccV3F_C4B_T2F_Quad的定义，可以得知，是包含4个顶点数据的结构体（根据注释可知4个顶点分别为：左上，左下，右上，右下）//! 4 ccVertex3FTex2FColor4B typedef struct _ccV3F_C4B_T2F_Quad { //! top left ccV3F_C4B_T2F tl; //! bottom left ccV3F_C4B_T2F bl; //! top right ccV3F_C4B_T2F tr; //! bottom right ccV3F_C4B_T2F br; } ccV3F_C4B_T2F_Quad; 而ccV3F_C4B_T2F又是一个关于顶点信息的结构体，包括坐标（x, y, z），颜色（r, g, b, a），纹理坐标（x, y）（PS：2D游戏中，坐标的z都为0，这里的z并不是Z-Order，Z-Order是指渲染的先后属性，z是代表3D的z轴坐标） //! a Point with a vertex point, a tex coord point and a color 4B typedef struct _ccV3F_C4B_T2F { //! vertices (3F) ccVertex3F vertices; // 12 bytes // char __padding__[4]; //! colors (4B) ccColor4B colors; // 4 bytes // char __padding2__[4]; // tex coords (2F) ccTex2F texCoords; // 8 byts } ccV3F_C4B_T2F; （2）绘制 在初始化精灵之后，就将纹理的四个顶点信息保存在m_sQuad中了，接下来要做的，就是根据m_sQuad的信息来绘制 由于OpenGL是状态机的设计，所以要先将顶点信息保存，再根据顶点的关系进行绘制，主要的绘制代码如下： #define kQuadSize sizeof(m_sQuad.bl) int size = sizeof(m_sQuad.bl); if (m_pobTexture) { glBindTexture(GL_TEXTURE_2D, m_pobTexture-getName()); } else { g