Cocos2d-x 3.x ClippingNode裁剪节点

ClippingNode是Node的一个子类。 它使用一个模板来裁剪绘制内容。 模板是一个其他节点,不会被绘制。 使用模板的alpha部分来进行裁剪(通过调整alphaThreshold)。

简介

如图：

实现思路:

1.采用遮罩的形式突出引导重点，同时屏蔽其它功能。

2.在遮罩添加解说UI及相应动画

如图：

注：光亮区域即是可触碰区域。

具体实现：

ClipingNode

为了实现遮罩功能，我们选择一个模板切割图片的节点– ClippingNode. 它继承自Node，所以它可以像普通节点一样放入Layer，Scene，Node中。

• 作为节点，它就可以用作容器，承载其他节点和精灵。称之为底板（裁剪对象）。
• 如果想要对一个节点进行裁剪，那需要给出裁剪的部分，这个裁剪区域，称之为模版（裁剪区域），默认只显示位于模板区域的底板图像。
• 属性：
  
  • 透明度阈值：只有当透明度大于透明度阈值的内容才会被绘制。 应该是一个在0和1之间的浮点数。
  • 模板反转：如果设置为真的话模板反转，内容被绘制的部分是对应模板不可见的部分。默认为假。如下图所示，默认只显示“椭圆模板”下面的部分，如果设置反转为true，则显示底板中除了模板区域的部分。

所以ClipingNode裁剪节点在组成上=底板+模版（缺一不可），而在显示上=底板+模版.

如图：

常用API

• 创建裁剪节点

ClippingNode* create();
ClippingNode* create(Node *pStencil); //创建时设置其模板

• 设置裁剪所用的模板

void setStencil(Node *stencil);

• 设置透明度阈值

void setAlphaThreshold(GLfloat alphaThreshold);

• 设置是否反转

void setInverted(bool inverted);

• 添加底板(裁剪对象)

void addChild(Node *);

• 默认属性

: _stencil(nullptr)
, _alphaThreshold(0.0f) //透明度阈值默认为0
, _inverted(false) // 默认使用原来模板裁剪，不反转
...

实例

    Size visibleSize = Director::getInstance()->getVisibleSize();
    Vec2 origin = Director::getInstance()->getVisibleOrigin();

    /* 背景 */
    LayerColor * bgColor = LayerColor::create(Color4B(100,100,100,255));
    this->addChild(bgColor,-1);

    /* 模板遮罩 */
    Sprite * stencil = Sprite::create("game_title.png");
    Size stencilSize = stencil->getContentSize();

    /* 使用遮罩创建裁剪节点 */
    ClippingNode * clipNode = ClippingNode::create(stencil);
    clipNode->setPosition(visibleSize / 2);
    this->addChild(clipNode);
    // 默认只显示遮罩部分 对应的 底板

    /* 添加底板 */
    clipNode->addChild(stencil,2);

    /* 添加第二块底板*/
    Sprite * spark = Sprite::create("spark.png");
    clipNode->addChild(spark, 3);

    /* 底板spark移动 */
    MoveTo * mt1 = MoveTo::create(2.f, Vec2(stencilSize.width,0));
    MoveTo * mt2 = MoveTo::create(2.f, Vec2(-stencilSize.width, 0));
    Sequence * ac = Sequence::create(mt1, mt2, mt1,nullptr);

    spark->runAction(RepeatForever::create(ac));

参考：http://www.cocos.com/doc/tutorial/show?id=842