1229 cocos2d-x 圖檔 遮罩 使用ClippingRectangleNode

範例
auto clipperNode = ClippingRectangleNode::create();
//設定遮罩位置
auto nodePoint2 = sprHead->convertToNodeSpace(Vec2(LBLobby_LvevlPho.x, G_WinSize.height - LBLobby_LvevlPho.y));
//不用setAnchorPoint 因為node 沒有 AnchorPoint 概念
 clipperNode->setPosition(nodePoint2);  
 sprHead->addChild(clipperNode, 4);  //加入主程式中


    saveNode(LBITEMUP_CLI_LvBlue, clipperNode); //將她額外記錄在Vector 日後直接取出不用TAG
//載入底板
    auto spriteBlue = Sprite::createWithSpriteFrameName(LBLobby_LvevlPho.name);
//依樣設定好位置 這裡不用Vec2::Zero 因為一直會貼錯 所以改為用convertToNodeSpace 計算位置
    nodePoint2 = clipperNode->convertToNodeSpace(Vec2(LBLobby_LvevlPho.x, G_WinSize.height - LBLobby_LvevlPho.y));
    spriteBlue->setAnchorPoint(Vec2::ANCHOR_TOP_LEFT);
    spriteBlue->setPosition(nodePoint2);
    clipperNode->addChild(spriteBlue);

//設定要顯示的部分
    auto NewRect = spriteBlue->getBoundingBox();
    clipperNode->setClippingRegion(Rect(NewRect.origin.x, NewRect.origin.y, NewRect.size.width*0.5, NewRect.size.height));

日後修改方式

//LV BAR 比列0~100%

void PageCommand::ReleaseUI_LvBar(float scale)

{

    auto clipping = dynamic_cast<ClippingRectangleNode*>(getNode(LBITEMUP_CLI_LvBlue));  

    auto sprite = dynamic_cast<Sprite*>(getNode(LBLobby_LvevlPho));

    auto rect = sprite->getBoundingBox().size;

    auto site = clipping->getClippingRegion().origin;

    //float scale = 0.01f*parter;

    clipping->setClippingRegion(Rect(site.x, site.y, rect.width*scale, rect.height));

}

相關參考資料

http://blog.csdn.net/u010010184/article/details/42803971

在Cocos2d-x 的3.3 版本中，添加了一個新類 ClippingRectangleNode，此類與ClippingNode，均有裁剪作用。兩個類做裁剪時有不同的適用背景。區別如下：

	ClippingRectangleNode	ClippingNode
裁剪區域	只能為矩形	任意圖形
效率	高	低，使用較多時，容易導致低端機掉幀
適用場景	出現數量較多，且對裁剪圖形要求不高時	出現數量少，對裁剪區域要求較高時。（例如遊戲新手引導）
靈活性	使用簡單，靈活性低	較為靈活

在使用過程中，發現一個ClippingRectangleNode的bug，該bug導致ClippingRectangleNode或是其上層節點有進行縮放時，會使ClippingRectangleNode的裁剪區域變得異常。

相關代碼如下：

[cpp] view plain copy

1. void ClippingRectangleNode::onBeforeVisitScissor()  
2. {  
3.     if (_clippingEnabled) {  
4.         glEnable(GL_SCISSOR_TEST);  
5.           
6.         float scaleX = _scaleX;  
7.         float scaleY = _scaleY;  
8.         Node *parent = this->getParent();  
9.         while (parent) {  
10.             scaleX *= parent->getScaleX();  
11.             scaleY *= parent->getScaleY();  
12.             parent = parent->getParent();  
13.         }  
14.           
15.         const Point pos = convertToWorldSpace(Point(_clippingRegion.origin.x, _clippingRegion.origin.y));<span style="white-space:pre">   </span>// 將裁剪區域的原點轉為世界坐標系  
16.         GLView* glView = Director::getInstance()->getOpenGLView();  
17.         glView->setScissorInPoints(pos.x * scaleX,  
18.                                    pos.y * scaleY,  
19.                                    _clippingRegion.size.width * scaleX,  
20.                                    _clippingRegion.size.height * scaleY);  
21.   
22.     }  
23. }  

開發人員在將裁剪區域的原點正確的轉為世界坐標系之後， 又乘了scaleX 和 scaleY， 這就導致裁剪區域的原點變得不正常了。 （converToWorldSpace在轉換pos時用的變化矩陣已將scale值計算過一次）

修改方法即將

[cpp] view plain copy

1. glView->setScissorInPoints(pos.x * scaleX,  
2.                            pos.y * scaleY,  
3.                            _clippingRegion.size.width * scaleX,  
4.                            _clippingRegion.size.height * scaleY);  

改為

[cpp] view plain copy

1. glView->setScissorInPoints(pos.x,  
2.                            pos.y,  
3.                            _clippingRegion.size.width * scaleX,  
4.                            _clippingRegion.size.height * scaleY);  

裁剪區域就正常了。