您的位置:首页 > Web前端 > Node.js

使用ClippingNode对精灵进行遮罩处理

2015-06-18 12:25 591 查看
  在制作一个消除游戏时,有这样一个情况:方块从顶部往下面掉落,在进入布局前,是不能显示的,不然影响视觉体验。那么,既然此方块已经被加入到渲染树了,那么怎么能让其在一部分中不显示,而在另一部分中显示呢?

  这就要用到遮罩处理了。在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的子节点并不会被完整渲染,只有位于裁剪模板内的内容,才会被渲染。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: