cocos2d-x ClippingNode

转自：http://blog.csdn.net/bill_man/article/details/8498424

　　可以根据一个模板切割图片的节点--CCClippingNode。这个类提供了一种不规则切割图片的方式，在这种方式以前，我们可以使用纹理类自带的setTextureRect函数来切割矩形区域，而新特性中提供的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)));

效果如图所示：