使用ClippingNode对精灵进行遮罩处理
在制作一个消除游戏时,有这样一个情况:方块从顶部往下面掉落,在进入布局前,是不能显示的,不然影响视觉体验。那么,既然此方块已经被加入到渲染树了,那么怎么能让其在一部分中不显示,而在另一部分中显示呢?
这就要用到遮罩处理了。在cocos2d-x中,提供了一个裁剪节点ClippingNode,可以实现一个裁剪效果,那么被裁剪掉的部分,就是等于被遮罩了。可能其效果更多,我未深刻研究,只是拿它用来处理上面的问题。官方对此类的介绍在:
http://www.cocos2d-x.org/docs/manual/framework/native/v3/ClippingNode/zh
下面记录使用ClippingNode完成遮罩功能的方法。
1.新建一个ClippingNode,其继承自Node;
2.为ClippingNode设置裁剪模板,裁剪模板也是一个Node,但并不会显示,其默认位置是ClippingNode的坐标原点;
3.为ClippingNode添加子节点。
ClippingNode的子节点只有在裁剪模板的范围内才会被显示,否则是被裁剪的,也就是被遮罩住了。可以这样理解,有一块大黑布,把ClippingNode里面的内容全部都遮住了,这时候,给大黑布开了一个有形状的孔,只要位于这个孔内部的内容,都会显示出来。这个孔就是模板。
具体代码如下:
//窗口大小 auto winSize = Director::getInstance()->getWinSize(); //创建一个裁剪节点 auto clipper = ClippingNode::create(); clipper->setPosition(winSize.width / 2, winSize.height / 2); addChild(clipper); //设置一个裁剪模板,此模板不会被绘制,只是用来遮罩的 auto stencil = Sprite::create("HelloWorld.png"); clipper->setStencil(stencil); //添加一个裁剪节点,不在裁剪模板范围内的将不显示 auto test_sprite = Sprite::create("powered.png"); test_sprite->setPosition(100, 100); clipper->addChild(test_sprite);
显示效果:
可以看到:
1.裁剪模板是不会显示的,这里的红框是另外绘制的,用以表示裁剪模板的范围。
2.ClippingNode的子节点并不会被完整渲染,只有位于裁剪模板内的内容,才会被渲染。