【Cocos2d-x 3.2】裁剪节点（ClippingNode）总结
发布时间：2020-12-14 19:07:23 所属栏目：百科 来源：网络整理
导读：有时候我们需要显示一张图片的部分区域，比如 文字遮罩 、 图片遮罩 。。。 本节要讲的 ClippingNode 的功能效果大致就是上面所看到的遮罩效果。 【致谢】 http://cn.cocos2d-x.org/article/index?type=cocos2d-xurl=/doc/cocos-docs-master/manual/framewor
7
8
9
10
11
12
13
14
15
|
//
/**
* 用来做裁剪的模板（stencil）节点（Node）
* 模板（stencil）对象，默认为空（nullptr）
**/
Node*stencil=Node::create();
//模板stencil节点Node
stencil->addChild(spriteBall1);
//添加小球1
stencil->addChild(spriteBall2);
//添加小球2
stencil->addChild(spriteBall3);
//添加小球3
stencil->addChild(spriteBall4);
//添加小球4
stencil->addChild(spriteBall5);
//添加小球5
clippingNode->setStencil(stencil);
//设置模板Stencil
3.3、设置底板（Content） |
//创建ClippingNode后，使用addChild()添加的节点，即为底板内容
clippingNode->addChild(content);
//设置底板
3.4、倒置显示（Inverted） |
//默认为false
//表示显示被裁剪下来的底板内容
clippingNode->setInverted(
false
);
3.5、alpha阈值（alphaThreshold）
|
ClippingNode*holesClipper;
//裁剪节点
Node*holesStencil;
//模板节点
Node*holes;
//底板节点
//触摸回调
void
onTouchesBegan(
const
std::vector<Touch*>&touches,Event*unused_event);
//添加小洞
pokeHoleAtPoint(Vec2point);
1.3、在HelloWorld.cpp中的init()中创建裁剪节点ClippingNode |
//[1].背景图片(Layer层中)
Sprite*bg=Sprite::create(
"HelloWorld.png"
);
bg->setPosition(visibleSize/2);
this
->addChild(bg);
//[2].创建裁剪节点:holesClipper
holesClipper=ClippingNode::create();
holesClipper->setPosition(visibleSize/2);
->addChild(holesClipper);
//属性设置
holesClipper->setInverted(
true
);
//倒置显示，未被裁剪下来的剩余部分
holesClipper->setAlphaThreshold(0.5f);
//设置alpha透明度闸值
holesClipper->runAction(RepeatForever::create(RotateBy::create(1,45)));
//旋转动作
//[3].创建模板:holesStencil
holesStencil=Node::create();
holesClipper->setStencil(holesStencil);
//设置模板节点
//添加一个模板遮罩ball
holesStencil->addChild(Sprite::create(
"ball.png"
),-1);
//[4].创建底板:holes
holes=Node::create();
holesClipper->addChild(holes);
//设置底板
//添加另一个底板内容blocks
Sprite*content=Sprite::create(
"blocks.png"
);
holesClipper->addChild(content,-1,
"content"
);
//[5].触摸事件
auto
listener=EventListenerTouchAllAtOnce::create();
listener->onTouchesBegan=CC_CALLBACK_2(HelloWorld::onTouchesBegan,
);
_eventDispatcher->addEventListenerWithSceneGraphPriority(listener,monospace!important; font-size:1em!important; min-height:inherit!important; background:none!important">);
1.4、设置触摸事件回调。当触摸点在底板区域内部，则“打洞” |
//
HelloWorld::onTouchesBegan(
//[1].获取触点,转换为相对holesClipper节点的相对坐标
Vec2point=touches[0]->getLocation();
point=holesClipper->convertToNodeSpace(point);
//[2].获取底板区域矩形Rect
Sprite*content=(Sprite*)holesClipper->getChildByName(
);
SizecontentSize=content->getContentSize();
Rectrect=Rect(-contentSize.width/2,-contentSize.height/2,contentSize.width,contentSize.height);
//[3].触摸点在底板内部,进行"打洞"
if
(rect.containsPoint(point))
{
pokeHoleAtPoint(point);
}
}
1.5、实现“打洞”操作函数 |
HelloWorld::pokeHoleAtPoint(Vec2point)
{
CCLOG(
"AddaHole!!!"
);
//[1].添加底板内容:一个洞的痕迹
hole=Sprite::create(
"hole_effect.png"
);
hole->setPosition(point);
holes->addChild(hole);
//[2].添加模板内容:一个小洞
holeStencil=Sprite::create(
"hole_stencil.png"
);
holeStencil->setPosition(point);
holesStencil->addChild(holeStencil);
//[3].动作效果:放大缩小
holesClipper->runAction(Sequence::create(ScaleTo::create(0.05f,1.05f),ScaleTo::create(0.05f,1.0f),NULL));
1.6、分析与总结 |
//[1].背景图片
->addChild(bg,-1);
//[2].创建主题文字:gameTitle
Sprite*gameTitle=Sprite::create(
"game_title.png"
);
//获取尺寸大小
SizeclipSize=gameTitle->getContentSize();
//[3].创建底板的发光图片:spark
Sprite*spark=Sprite::create(
"spark.png"
);
spark->setPosition(-clipSize.width,0);
//[4].创建裁剪节点:clippingNode
ClippingNode*clippingNode=ClippingNode::create();
clippingNode->setPosition(visibleSize/2);
->addChild(clippingNode);
clippingNode->setAlphaThreshold(0.05f);
//设置alpha闸值
clippingNode->setContentSize(clipSize);
//设置尺寸大小
clippingNode->setStencil(gameTitle);
//设置模板stencil
clippingNode->addChild(gameTitle,1);
//先添加标题,会完全显示出来,因为跟模板一样大小
clippingNode->addChild(spark,2);
//会被裁减
//[5].左右移动spark
MoveTo*moveAction=MoveTo::create(2.0f,Vec2(clipSize.width,0));
MoveTo*moveBackAction=MoveTo::create(2.0f,Vec2(-clipSize.width,0));
spark->runAction(RepeatForever::create(Sequence::create(moveAction,moveBackAction,NULL)));
2.3、分析与总结
|