使用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的子节点并不会被完整渲染，只有位于裁剪模板内的内容，才会被渲染。

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

标签：

原文地址：http://www.cnblogs.com/demon90s/p/4585535.html