【玩轉cocos2d-x之二十九】利用CCClipingNode做遊戲遮罩
阿新 • • 發佈：2019-01-03
新手引導是遊戲中必備的（除了奇葩的MT用一段動畫開始），也是玩家對遊戲的第一印象，重要性不言而喻。一般採用的遮罩的形式來突出引導重點，同時遮蔽其他功能。這裡簡單的介紹一下游戲遮罩的實現，並給出一個示例。
1.CCClipingNode
CCClipingNode是一個可裁剪節點，簡單理解：
（1）首先它是一個節點，繼承於CCNode，所以它可以像普通節點一樣放入CCLayer，CCScene，CCNode中。
（2）作為節點，它就可以用作容器，承載其他節點和精靈。我把它叫底板。
（3）如果想要對一個節點進行裁剪，那需要給出裁剪的部分，這個裁剪區域，我把它叫模版。
所以CCClipingNode裁剪節點在組成上=底板+模版，而在顯示上=底板-模版。不知道這樣解釋會不會好理解一點。
2.API
CCClipingNode的使用還是比較簡單的，至於顯示底板還是模版，alpha值的設定，這些也不好說清楚，自己多試幾次就知道是什麼意思該怎麼用了。
//不帶模版地建立一個裁剪節點 static CCClippingNode* create(); //使用一個節點作為模版建立裁剪節點 static CCClippingNode* create(CCNode *pStencil); //不帶模版地初始化一個裁剪節點 virtual bool init(); //使用一個節點作為模版初始化裁剪節點 virtual bool init(CCNode *pStencil); //設定/獲取模版，注意模版需要retain！ CCNode* getStencil() const; void setStencil(CCNode *pStencil); //設定alpha值（0~1），這個很重要，裁剪是按畫素摳圖的，所以只有大於這個alpha值的模版畫素才會被畫出來 //預設是1，也就是完全裁剪。 GLfloat getAlphaThreshold() const; void setAlphaThreshold(GLfloat fAlphaThreshold); //預設是false，用於設定顯示底板還是模版 bool isInverted() const; void setInverted(bool bInverted);
3.示例
在init中實現：CCSize visibleSize=CCDirector::sharedDirector()->getVisibleSize(); CCSprite* background = CCSprite::create("HelloWorld.png");//建立背景 background->setPosition(ccp(visibleSize.width/2,visibleSize.height/2)); this->addChild(background,kTagBackground); clip=CCClippingNode::create();//建立裁剪節點，成員變數 clip->setInverted(true);//設定底板可見 clip->setAlphaThreshold(0.0f);//設定alpha為0 this->addChild(clip,kTagClipNode);//新增裁剪節點 CCLayerColor* back=CCLayerColor::create(ccc4(0,0,0,200)); clip->addChild(back);//為裁剪節點新增一個黑色帶透明（看起了是灰色）的底板 //模版如果要在其他地方使用要記得retain！ //第一種：以下模型是drawnode遮罩 //CCDrawNode* front=CCDrawNode::create(); //ccColor4F yellow = {1, 1, 0, 1}; //CCPoint rect[4]={ccp(-30,30),ccp(30,30),ccp(30,-30),ccp(-30,-30)}; //front->drawPolygon(rect, 4, yellow, 0, yellow); //front->setPosition(ccp(visibleSize.width/2, visibleSize.height/2)); //clip->setStencil(front); //第二種：以下模型是帶影象遮罩 CCNode* nodef=CCNode::create();//建立模版 CCSprite* close=CCSprite::create("CloseSelected.png");//這裡使用的是close的那個圖示，所以注意觀察效果圖2 nodef->addChild(close);//在模版上新增精靈 nodef->setPosition(ccp(visibleSize.width/2,visibleSize.height/2)); clip->setStencil(nodef);//設定模版 tip = CCSprite::create("tip.png");//一些引導提示 tip->setScale(0.5f); tip->setRotation(60); tip->setPosition(ccp(visibleSize.width/2-70,visibleSize.height/2+50)); this->addChild(tip,kTagTip); tip->runAction(CCRepeatForever::create(CCSequence::create(CCScaleBy::create(0.25f,0.95f),CCScaleTo::create(0.25f,0.5),NULL))); this->setTouchEnabled(true);//觸控有效，落點正確時移除裁剪節點和提示，相關處理請看原始碼
4.效果
兩種效果：
