Cocos2dx - 遮罩的實作方式

遮罩的實作方式有很多種， 最常見的是下面兩種:

1. 透過 OPENGLES 底層將圖讀入， 畫出遮罩範圍的圖 Texture 後， 再將該 Texture 設定回 Sprite

參見官網 ： 如何使用COCOS2D-X3.0来给SPRITE添加遮罩 對於這樣的方式畫出遮罩， 主要的缺點在於會佔據不少的記憶體資源， 因為每次每次應用遮罩時， 多會額外創建一張 Texture進記憶體， 除此外， Render的代價也不小， 如果是大量的使用的話， 會影響性能， 用起來會卡。 程式碼如下：

Sprite* HelloWorld::maskedSpriteWithSprite(Sprite* textureSprite, Sprite* maskSprite)
{
    RenderTexture * rt = RenderTexture::create( maskSprite->getContentSize().width, maskSprite->getContentSize().height );
    maskSprite->setPosition(maskSprite->getContentSize().width/2, maskSprite->getContentSize().height/2);
    textureSprite->setPosition(textureSprite->getContentSize().width/2,
                           textureSprite->getContentSize().height/2);
    maskSprite->setBlendFunc( BlendFunc{GL_ONE, GL_ZERO} );
    textureSprite->setBlendFunc( BlendFunc{GL_DST_ALPHA, GL_ZERO} );
    rt->begin();
    maskSprite->visit();
    textureSprite->visit();
    rt->end();
    Sprite *retval = Sprite::createWithTexture(rt->getSprite()->getTexture());
    retval->setFlippedY(true);
    return retval;
}

2. 透過 ClippingNode 畫出所需要的圖

參見官網 ： CLIPPINGNODE的使用 基本內容就不多復述了， ClippingNode 可以選擇要畫出 Stencil （模板） 內的圖， 或者是模板以外的圖， 所以可以弄出很多很特別的效果， 甚至是可以設定繪製底圖的 alpha 值， 讓畫面根據透明度繪圖。 以例子1的圖來說 (底圖) (stencil圖) 可以視為Mask遮罩 （效果圖） 小結： 如果對於 OPENGLES 底層的指令不熟， 就選擇使用 ClippingNode來做到相同的效果吧， 當然， 如果熟的話， 就可以自製許多特效而不需要受限於 ClippingNode 跟遮罩的功能了。

---

最後， 我們有個關於 Cocos2d-x 的Facebook社團， 如果有任何疑難問題， 歡迎到社團發問。 Cocos2dx Taiwan 開發者社團