使用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);

  显示效果:

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

  可以看到:

  1.裁剪模板是不会显示的,这里的红框是另外绘制的,用以表示裁剪模板的范围。

  2.ClippingNode的子节点并不会被完整渲染,只有位于裁剪模板内的内容,才会被渲染。

你可能感兴趣的:(node)