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(如果控件很多,我们都需要对每个控件单独绘制一次,会影响效率)
cocos2d-x 2.0.1里面 有一个类似于安卓9图的工具,CCScale9Sprite,tests里面没有它的介绍,在网上找了一下,没有发现有例子。于是自己是用了下,写了个例子。
- CCRect rect = CCRectMake(0,0,16,16); //图片的大小
- CCRect rectInsets = CCRectMake(1,1,1,1); //left,right,width,height
- CCSize winRect = CCSizeMake(size.width/2,size.height/2); //设置要拉伸后的的大小
- CCScale9Sprite *m_pNextBG = CCScale9Sprite::create("UI/NEXT ENEMY.png",rect,rectInsets);
- m_pNextBG->setContentSize(winRect); //这个是关键
- m_pNextBG->setPosition(ccp(size.width/2,size.height/2));
- this->addChild(m_pNextBG,5);