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)));

效果如圖所示：