Cocos2d-x3.1中ClippingNode的使用实例

1、ClippingNode说明

ClippingNode是利用模板遮罩来完成对Node区域裁剪的技术，如何理解ClippingNode的遮罩？看下图的例子吧。

所谓模板，就是一个形状，透过该形状可看到底板上的图层，如果底板上没有任何内容，则直接看到Layer上的内容，而底板上

的东西又不会妨碍Layer上的东西，即模板在底板之外的空间对于Layer来说是透明的。假如有个精灵在模板之外的底板上运动，我们

是看不到它的。除非它进入模板的区域，我们才能看到它。

2、ClippingNode源码

#include "2d/CCNode.h"//用到节点头文件和OPENGL深度缓冲定义头文件
#include "CCGL.h"
#include "renderer/CCGroupCommand.h"//用到GroupCommand和CustomCommand渲染
#include "renderer/CCCustomCommand.h"

NS_CC_BEGIN

/** ClippingNode is a subclass of Node.
 It draws its content (childs) clipped using a stencil.
 The stencil is an other Node that will not be drawn.
 The clipping is done using the alpha part of the stencil (adjusted with an alphaThreshold).
 */
class CC_DLL ClippingNode : public Node
{
public:
    /** Creates and initializes a clipping node without a stencil.
     */
    static ClippingNode* create();//静态创建对象
    
    /** Creates and initializes a clipping node with an other node as its stencil.
     The stencil node will be retained.
     */
    static ClippingNode* create(Node *stencil);//用模板创建裁剪节点

    /** The Node to use as a stencil to do the clipping.
     The stencil node will be retained.
     This default to nil.
     */
    Node* getStencil() const;//获取节点模板
    void setStencil(Node *stencil);//设置节点模板
    
    /** The alpha threshold.
     The content is drawn only where the stencil have pixel with alpha greater than the alphaThreshold.
     Should be a float between 0 and 1.
     This default to 1 (so alpha test is disabled).
     *///ALPHA测试参考值，用于进行ALPHA测试比较，一般比较算法为小于此值的像素会直接被舍弃，这样就实现了图像的镂空
    GLfloat getAlphaThreshold() const;//获取ALPHT的测试参考值
    void setAlphaThreshold(GLfloat alphaThreshold);//设置ALPHA的测试参考值
    
    /** Inverted. If this is set to true,
     the stencil is inverted, so the content is drawn where the stencil is NOT drawn.
     This default to false.
     */
    bool isInverted() const;//获取遮罩运算是否取反设置
    void setInverted(bool inverted);//设置遮罩运算取反

    // Overrides//继承的函数
    /**
     * @js NA
     * @lua NA
     */
    virtual void onEnter() override;
    /**
     * @js NA
     * @lua NA
     */
    virtual void onEnterTransitionDidFinish() override;
    /**
     * @js NA
     * @lua NA
     */
    virtual void onExitTransitionDidStart() override;
    /**
     * @js NA
     * @lua NA
     */
    virtual void onExit() override;
    virtual void visit(Renderer *renderer, const Mat4 &parentTransform, bool parentTransformUpdated) override;
    
CC_CONSTRUCTOR_ACCESS:
    ClippingNode();
    
    /**
     * @js NA
     * @lua NA
     */
    virtual ~ClippingNode();

    /** Initializes a clipping node without a stencil.
     */
    virtual bool init();
    
    /** Initializes a clipping node with an other node as its stencil.
     The stencil node will be retained, and its parent will be set to this clipping node.
     */
    virtual bool init(Node *stencil);

protected:
    /**draw fullscreen quad to clear stencil bits
    */
    void drawFullScreenQuadClearStencil();

    Node* _stencil;
    GLfloat _alphaThreshold;
    bool    _inverted;

    //renderData and callback
    void onBeforeVisit();
    void onAfterDrawStencil();
    void onAfterVisit();

    GLboolean _currentStencilEnabled;
    GLuint _currentStencilWriteMask;
    GLenum _currentStencilFunc;
    GLint _currentStencilRef;
    GLuint _currentStencilValueMask;
    GLenum _currentStencilFail;
    GLenum _currentStencilPassDepthFail;
    GLenum _currentStencilPassDepthPass;
    GLboolean _currentDepthWriteMask;

    GLboolean _currentAlphaTestEnabled;
    GLenum _currentAlphaTestFunc;
    GLclampf _currentAlphaTestRef;

    GLint _mask_layer_le;
    
    GroupCommand _groupCommand;
    CustomCommand _beforeVisitCmd;
    CustomCommand _afterDrawStencilCmd;
    CustomCommand _afterVisitCmd;

private:
    CC_DISALLOW_COPY_AND_ASSIGN(ClippingNode);
};

NS_CC_END

3、使用实例

<pre name="code" class="cpp">class NewClippingNode : public Layer
{
public:
    CREATE_FUNC(NewClippingNode);
    virtual bool init();
};

bool NewClippingNode::init()

{

    auto s =Director::getInstance()->getWinSize();

   bool bRet = false;

   do{

       CC_BREAK_IF(!Layer::init());

        

       auto clipper = ClippingNode::create();

        clipper->setTag(kTagClipperNode);

        clipper->setContentSize(Size(200,200));//设置剪裁区域大小

        clipper->ignoreAnchorPointForPosition(false);

        clipper->setAnchorPoint(Vec2(0.5,0.5));//设置锚点

        clipper->setPosition(Vec2(s.width/2, s.height/2));

       this->addChild(clipper);

        

        clipper->setAlphaThreshold(0.05f);//设置透明度的阈值ALPHA值

        //设置剪裁模板

       auto stencil = Sprite::create("grossini.png");

        stencil->setScale(2);

        stencil->setPosition(Vec2(s.width/2, s.height/2));

        clipper->setStencil(stencil);//设置剪裁模板

    //TODO Fix draw node as clip node

//    auto stencil = NewDrawNode::create();

//    Vec2 rectangle[4];

//    rectangle[0] = Vec2(0, 0);

//    rectangle[1] = Vec2(clipper->getContentSize().width, 0);

//    rectangle[2] = Vec2(clipper->getContentSize().width, clipper->getContentSize().height);

//    rectangle[3] = Vec2(0, clipper->getContentSize().height);

//

//    Color4F white(1, 1, 1, 1);

//    stencil->drawPolygon(rectangle, 4, white, 1, white);

//    clipper->setStencil(stencil);

        //设置剪裁节点内容

       auto content = Sprite::create("background2.png");

        content->setTag(kTagContentNode);

        content->ignoreAnchorPointForPosition(false);

        content->setAnchorPoint(Vec2(0.5,0.5));

        content->setPosition(Vec2(s.width/2,200));

        clipper->addChild(content);

        

        bRet =true;

    }while(0);

   return bRet;

}