2.1中的一個新特性--可以根據一個模板切割圖片的節點--CCClippingNode。這個類提供了一種不規則切割圖片的方式，在這種方式以前，我們可以使用紋理類自帶的setTextureRect函數來切割矩形區域，這種方式就像是J2me的setClip方法一樣整塊的切割圖片，比如我們要實現一個血條的時候，就可以使用這種方式進行切割，切掉我們不想顯示的部分，而新特性中提供的CCClippingNode最大的不同之處就是裁減將不僅僅侷限於矩形，可以根據任何形狀進行裁減，而你要做的只是給一個“裁減模板”，這就好比是我們用剪刀剪形狀，需要一個模具類的東西，然後我們拿着模具和要被裁減的紙順着模具的邊緣用剪刀剪就可以剪出一個模具的樣子一樣，首先來看這個類的常用函數（需要說明的是，這裏介紹的函數只是這個類獨有的，這個類繼承自CCNode節點類，因此節點類有的函數也就不做介紹了）：
CCClipingNode API：
注：
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)));
效果如圖所示：
我覺得這個功能很有意思，打算寫個遊戲實例，過一段時間會發在博客上。
文章轉自http://blog.csdn.net/bill_man/article/details/8498424
