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