Cocos2d-x 九宫格 CCScale9Sprite


文章转载自:http://www.cnblogs.com/sevenyuan/p/3195688.html


在cocos2d-x引擎中,CCScale9Sprite这个文件的位置为:

Cocos2d-x 九宫格 CCScale9Sprite_第1张图片


一、九宫格的实现

(1)原理

实现非常巧妙,是通过1个CCSpriteBatchNode和9个CCSprite来实现的,原理很简单,通过将原纹理资源切割成9部分(PS: 这也是叫九宫格的原因),根据想要的尺寸,完成以下的三个步骤:

a. 保持4个角部分不变形

b. 单向拉伸4条边(即在4个角两两之间的边,比如上边,只做横向拉伸)

c. 双向拉伸中间部分(即九宫格的中间部分,横向,纵向同时拉伸,PS:拉伸比例不一定相同)

Cocos2d-x 九宫格 CCScale9Sprite_第2张图片

(2)实现

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

(3)优缺点

优点:思路简单清晰;使用CCSpriteBatchNode,只需要一次绘制,效率较高

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


二、九宫格的使用

前段时间看CCEditBox的时候,发现里面有个利用9宫格图缩放图片的,也就是缩放带圆角的图片。

这个比较有用处,很多游戏中有很多不同尺寸的圆角图片作为背景。有了CCScale9Sprite之后,只需要提供一个非常小尺寸的圆角图片就可以自由缩放其他尺寸的圆角图。是个不错的东西。

 

使用方法:

1、导入头文件及命名空间

#include “cocos-ext.h”
USING_NS_CC_EXT;

2、初始化代码:

CCScale9Sprite* labBg1 = CCScale9Sprite::create(“wd_bg_text.png”);
labBg1->setAnchorPoint(ccp(.5,.5));
labBg1->setPreferredSize(CCSizeMake(255, 20));
labBg1->setPosition(ccp(size.width/2, size.height/2));
addChild(labBg1);

说明:

setPreferredSize 就是设置需要生成的尺寸大小。

看效果:

Cocos2d-x 九宫格 CCScale9Sprite_第3张图片




你可能感兴趣的:(九宫格,cocos2d-x,CCScale9Sprite)