cocos2d-x 2.1新特性之CCClippingNode

cocos2d-x 2.1新特性之CCClippingNode       

 

从本篇起介绍一些cocos2d-x的新功能，包括CocosBuilder动画等功能，还包括从2.1版本添加的一些新特性，本篇文章就介绍一下2.1中我非常喜欢的一个新特性--可以根据一个模板切割图片的节点--CCClippingNode。这个类提供了一种不规则切割图片的方式，在这种方式以前，我们可以使用纹理类自带的setTextureRect函数来切割矩形区域，这种方式就像是J2me的setClip方法一样整块的切割图片，比如我们要实现一个血条的时候，就可以使用这种方式进行切割，切掉我们不想显示的部分，而新特性中提供的CCClippingNode最大的不同之处就是裁减将不仅仅局限于矩形，可以根据任何形状进行裁减，而你要做的只是给一个“裁减模板”，这就好比是我们用剪刀剪形状，需要一个模具类的东西，然后我们拿着模具和要被裁减的纸顺着模具的边缘用剪刀剪就可以剪出一个模具的样子一样，首先来看这个类的常用函数（需要说明的是，这里介绍的函数只是这个类独有的，这个类继承自CCNode节点类，因此节点类有的函数也就不做介绍了）：

getStencil：返回一个节点对象，这个对象就是之前提到的“裁减模板”。

setStencil：设置“裁减模板”。

getAlphaThreshold:：这种裁减是可以改变裁减的透明度的，修改这个透明度就是通过设置这个阈值。

setAlphaThreshold：获得这个透明度阈值。

isInverted：之前说过的剪刀剪形状的例子，剪完形状以后，是显示被剪掉的部分，还是显示剩余的部分呢，默认isInverted值是false，是显示被剪掉的部分，设置为true则是显示剩余的部分。这个函数获得这个值。

setInverted：设置isInverted值。

使用这个效果，一般的过程是这样的：

//创建“裁减模板”

CCNode*stencil =this->stencil();

stencil->setTag(kTagStencilNode);

stencil->setPosition(ccp(50,50) );

//创建裁减节点类

CCClippingNode*clipper =this->clipper();

clipper->setTag(kTagClipperNode);

clipper->setAnchorPoint(ccp(0.5,0.5));

clipper->setPosition(ccp(s.width / 2 -50,s.height/ 2 - 50) );

//为设置裁减节点类设置“裁减模板”

clipper->setStencil(stencil);

this->addChild(clipper);

//设置裁减节点类所放的内容

CCNode*content =this->content();

content->setPosition(ccp(50,50) );

clipper->addChild(content);

通过这个新特性可以实现出很多有意思的效果，首先来学习一下cocos2D-x中的testApp的使用实例首先是一个类似ScrollView的滚动效果，在这之前，介绍cocos2D-x的另一个新特性—CCDrawNode，这个类不是一个新的功能，而是对原来功能的封装，在这之前，如果我们需要绘制矩形，圆形，点等形状，需要重新写一个类继承自节点或布景层，然后重写draw函数，现在使用CCDrawNode，可以直接使用这个类来绘制相应图形，相关函数如下所示：

drawDot：绘制点，参数给出坐标位置。

drawSegment：绘制片断，给出起始点，结束点，半径等参数。

drawPolygon：绘制矩形，可以分别给出填充颜色和边框颜色，还可以设置边框宽度。

实现类似ScrollView的滚动效果的代码如下：

//创建裁减节点类

CCClippingNode *clipper=CCClippingNode::create();

clipper->setTag(kTagClipperNode);

clipper->setContentSize(CCSizeMake(200, 200) );

clipper->setAnchorPoint(ccp(0.5, 0.5) );

clipper->setPosition(ccp(this->getContentSize().width / 2,this->getContentSize().height/ 2) );

clipper->runAction(CCRepeatForever::create(CCRotateBy::create(1, 45)));

this->addChild(clipper);

//创建“裁减模板”

CCDrawNode*stencil =CCDrawNode::create();

CCPointrectangle[4];

rectangle[0]= ccp(0, 0);

rectangle[1]= ccp(clipper->getContentSize().width,0);

rectangle[2]= ccp(clipper->getContentSize().width,clipper->getContentSize().height);

rectangle[3]= ccp(0, clipper->getContentSize().height);

//绘制一个矩形

ccColor4Fwhite = {1, 1, 1, 1};

stencil->drawPolygon(rectangle,4,white, 1,white);

//为设置裁减节点类设置“裁减模板”

clipper->setStencil(stencil);

//设置裁减节点类所放的内容

CCSprite*content =CCSprite::create(s_back2);

content->setTag(kTagContentNode);

content->setAnchorPoint(ccp(0.5, 0.5) );

content->setPosition(ccp(clipper->getContentSize().width / 2,clipper->getContentSize().height/ 2) );

clipper->addChild(content);

之后使用触摸控制的三个函数设置content的位置就可以了，效果如图所示：

如果说关于ScrollView是一个已经有解决方案的办法了，那么下面这个效果将更加体现这个新效果的作用，实现一个子弹打孔的效果：

void HoleDemo::setup()

{

//子弹击穿的图片，很多地方都用到的ABCD图

CCSprite*target =CCSprite::create(s_pPathBlock);

target->setAnchorPoint(CCPointZero);

target->setScale(3);

//创建CCClippingNode，这个CCClippingNode并不是负责切割弹孔的，负责切割出“ABCD图”的

m_pOuterClipper= CCClippingNode::create();

m_pOuterClipper->retain();

CCAffineTransformtranform =CCAffineTransformMakeIdentity();

tranform= CCAffineTransformScale(tranform, target->getScale(), target->getScale());

m_pOuterClipper->setContentSize(CCSizeApplyAffineTransform(target->getContentSize(),tranform));

m_pOuterClipper->setAnchorPoint(ccp(0.5,0.5) );

m_pOuterClipper->setPosition(ccpMult(ccpFromSize(this->getContentSize()), 0.5f) );

m_pOuterClipper->runAction(CCRepeatForever::create(CCRotateBy::create(1, 45)));

m_pOuterClipper->setStencil(target);

//负责弹孔切割的CCClippingNode

CCClippingNode *holesClipper=CCClippingNode::create();

//显示切割后剩余部分

holesClipper->setInverted(true);

//设置alpha阈值

holesClipper->setAlphaThreshold( 0.05f );

holesClipper->addChild(target);

//弹孔层，所有弹孔都在这个节点中

m_pHoles= CCNode::create();

m_pHoles->retain();

holesClipper->addChild(m_pHoles);

//负责切割弹孔的“裁减模板”

m_pHolesStencil= CCNode::create();

m_pHolesStencil->retain();

holesClipper->setStencil(m_pHolesStencil);

m_pOuterClipper->addChild(holesClipper);

this->addChild(m_pOuterClipper);

this->setTouchEnabled(true);

}

点击某一点后，该点出现击穿效果：

//大小旋转随机

float scale= CCRANDOM_0_1() * 0.2 + 0.9;

floatrotation =CCRANDOM_0_1()* 360;

//弹孔上的效果图片，只是作为装饰

CCSprite*hole =CCSprite::create("Images/hole_effect.png");

hole->setPosition(point);

hole->setRotation(rotation);

hole->setScale(scale);

m_pHoles->addChild(hole);

//真正的弹孔切割

CCSprite*holeStencil =CCSprite::create("Images/hole_stencil.png");

holeStencil->setPosition(point);

holeStencil->setRotation(rotation);

holeStencil->setScale(scale);

m_pHolesStencil->addChild(holeStencil);

//被“击打”的“abcd图”缩放一下，效果更真实

m_pOuterClipper->runAction(CCSequence::createWithTwoActions(CCScaleBy::create(0.05f,0.95f),CCScaleTo::create(0.125f,1)));

效果如图所示：

我觉得这个功能很有意思，打算写个游戏实例，过一段时间会发在博客上。