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：拉伸比例不一定相同）

（PS: 更多原理可参考 http://yannickloriot.com/2011/12/create-buttons-in-cocos2d-by-using-cccontrolbutton/）

（2）实现

CCSpriteBatchNode的资源为整个的纹理，9个CCSprite对应于纹理的9个部分（根据纹理不同，9部分所占比例会有所不同），根据想要的尺寸，将9部分拼装在一起！

（3）优缺点

优点：思路简单清晰；使用CCSpriteBatchNode，只需要一次绘制，效率较高

缺点：内存占用大，需要1个CCSpriteBatchNode和9个CCSprite对象；不支持CCSpriteBatchNode（如果控件很多，我们都需要对每个控件单独绘制一次，会影响效率）

 

  微信的对话框特点在于它有一个可变大小的底图衬托，显得非常舒服，怎么实现的呢？先上图，然后慢慢说：

 

    

2、什么是九宫格构图？

    有个概念叫九宫格构图，说的就是这种会变化背景的情况。大家都知道图片是不可以随便拉抻的，无论是缩小还是放大，都会使图形虚化，影响显示效果。不能拉抻就进行拼接。这就是这种策略的思路。

    首先它现将一个图分成九份：

      

 

    为了能够看清楚，我进行了缩放。大家也看到了，缩放产生的问题。

    拼接是如何进行的呢？当显示应该超过图片原有大小时，四个边的顶点图像不会改变，四个边的中间部分进行拼接，这样就扩展了图片的大小。中间空出来的部分由中间来进行拼接。因此这张基础图不应该有花纹在上面，不然就会拼乱了。

 

3、编码九宫格

    原来缩放可以这么简单的实现。而且令人高兴的是cocos2d-x已经对这种模型进行封装，不需要大家自己来写。下面就动手编码。

 

更改helloWorld中的init。相信大家都知道是哪里：

1. std::string str ="You are lucky as you can choose to love me or not.But for me,I can only choose to love you or more. ";
2. // Create a label and initialize with string "Hello World".
3. CCLabelTTF* pLabel =CCLabelTTF::create(str.c_str(),"Arial",24);
4. CC_BREAK_IF(! pLabel);

1. pLabel->setColor(ccc3(0,0,0));

pLabel->setAnchorPoint(CCPointZero);CCScale9Sprite* sp = CCScale9Sprite::create("green_edit.png");CCSize extenSize = CCSizeMake(pLabel->getContentSize().width+10,pLabel->getContentSize().height+10);sp->setContentSize(extenSize);sp->addChild(pLabel);pLabel->setPosition( ccpAdd(sp->getPosition(),ccp(4,1)));sp->setPosition(ccp(250,100)); // Add the label to HelloWorld layer as a child layer. this->addChild(sp, 1);

  大体说一下。首先创建一个CCLabelTTF。然后取它的大小，作为九宫格的大小。由于不希望文字刚刚好贴在边框显示，我用一个extenSize将九宫格扩大了一圈。最后将Label添加为九宫格的子节点。并为其设定位置。

 

  看起来不错，不过编译运行，出现的界面似乎有些问题：

 

   

 

    是的，没有自动换行。

 

4、文字换行

    文字换行怎么办？有个好消息是CCLabelTTF会为字符串中有\n的地方换行。所以，我就人为的在其中加入\n。可以写个函数做字符串转换。如果有更好的解决方法欢迎留言告诉我。

    编写一个这样的函数：

1. std::stringHelloWorld::convertString( std::string str ,int length)
2. {
3.  
4. unsignedint before =0;
5. vector<std::string> subStrs;
6. do
7. {
8. subStrs.push_back(str.substr(before,length));
9. if(before+length >str.size())
10. {
11. break;
12. }
13. else
14. {
15. before = before+length;
16. }
18. }while(true);
19. std::string resultStr;
20. for(unsignedint i =0;i<subStrs.size();++i)
21. {
22. resultStr.append(subStrs[i]).append("\n");
23. }
24. resultStr.pop_back();
25. resultStr.pop_back();
26. return resultStr;
27. }

   先将字符串按固定长度切成子串，加上\n，并拼起来，最后去掉多余的\n。然后再更改创建Label那行：

1. CCLabelTTF* pLabel =CCLabelTTF::create(convertString(str,32).c_str(),"Arial",24);

    编译运行，就可以了。

5、总结

    通过使用CCScale9Sprite这个类，创建一个可变大小的背景，然后创建固定宽度的Label，并将两者关联。如果想进一步封装的话，可以创建一个类将两者作为一个复合对象，具体可参照之前的文章：    。

 

 

 

CCScale9Sprite* nineGirl = CCScale9Sprite::create("button.png"); 
nineGirl->setContentSize(CCSize(200, 100));  //设置大小
nineGirl->setPosition(ccp(300, 200)); 
 this->addChild(nineGirl);  

 

/* 正常状态下的按钮图片 */ 
 CCScale9Sprite* btnNormal = CCScale9Sprite::create("button.png"); 
 
 /* 点击状态下的按钮图片 */ 
 CCScale9Sprite* btnDown = CCScale9Sprite::create("buttonHighlighted.png"); 
 
 /* 按钮标题 */ 
 CCLabelTTF *title = CCLabelTTF::create("Touch Me!3324234", "Marker Felt", 30); 
 
 /* 按钮的大小会根据标题自动调整 */ 
 CCControlButton* controlBtn = CCControlButton::create(title, btnNormal); 
 
 /* 设置按钮按下时的图片 */ 
controlBtn->setBackgroundSpriteForState(btnDown, CCControlStateSelected); 
controlBtn->setPosition(ccp(200, 200)); 
 this->addChild(controlBtn);