CCClippingNode遮罩解析

CCClippingNode在做新手引导的时候经常用到，所以要想做个新手引导就得先学学这个，当然它的功能不会仅限于此，明白了原理以后你可以自由发挥啊。在网上看到不少的文章，但是说的不够明白，我今天好好给大家说说吧，这里只说下原理，下次利用这个做个新手引导出来。

需要明确的一点就是CCClippingNode本质上是一个节点，什么是节点，节点就是可以存放东西，它也可以放到其他的节点上。大家在新手引导中看到的画面，大多数是一些背景层什么的，这个CCClippingNode也是放到了场景中的，只不过zOrder是靠前的。我么需要完成的这些个效果都是在这个层中实现的，不要被搞乱了。首先我们在这个node层中添加一些我们的元素，当然根据你自己的情况了，基本上都是一些精灵，那个看起来透明的遮罩层就是添加到这个node中的节点。接着，最重要的一点是这个node有一个模板节点，什么是模板节点呢，就是一个模子，我们要按照这个模子来裁剪我们的这个层，道理就像我们用剪刀按照一个模子来减一块布一样，我们最后可以设置我们是要留下这个模子裁剪出来的区域还是要留下这个模子剩下来的区域，CCClippingNode有专门的函数来设置这个模子。下面看看代码中怎么实现吧，具体的函数调用也加了注释，很好懂的。

bool HelloWorld::init()
{
    if ( !CCLayer::init() )
    {
        return false;
    }

    CCSize visibleSize = CCDirector::sharedDirector()->getVisibleSize();

	//背景图片
	CCSprite * background = CCSprite::create("HelloWorld.png");
	background->setPosition(ccp(visibleSize.width/2,visibleSize.height/2));
	this->addChild(background,0);

	//创建一个裁剪节点用来实现遮罩的效果
	CCClippingNode * clippingNode = CCClippingNode::create();
	this->addChild(clippingNode,1);
	//向裁剪节点中加入内容，这里加入的是一个透明的层
	CCLayerColor * layer = CCLayerColor::create(ccc4(0,0,0,200));
	clippingNode->addChild(layer);
	//继续向裁剪节点中加入内容，这里加入的是一个精灵
	CCSprite * sprite = CCSprite::create("1.png");
	sprite->setPosition(ccp(visibleSize.width/4,visibleSize.height/2));
	clippingNode->addChild(sprite);
	//向裁剪节点中加入精灵，精灵的位置和裁剪的位置相同，所以最后让裁剪掉了
	CCSprite * sprite2 = CCSprite::create("icon.png");
	sprite2->setPosition(ccp(visibleSize.width/2,visibleSize.height/2));
	clippingNode->addChild(sprite2);

	//创建模板，裁剪节点将按照这个模板来裁剪区域
	CCSprite * stencil = CCSprite::create("icon.png");
	stencil->setPosition(ccp(visibleSize.width/2,visibleSize.height/2));
	clippingNode->setStencil(stencil);
	//这个是用来设置显示裁剪区域还是非裁剪区域的
	clippingNode->setInverted(true);
	//我们之前放了一张裁剪的模板，按照这个模板裁剪的时候同时按照这个alpha的值裁剪，这个值的范围是0-1
	//设为0就把透明的区域裁剪掉了
	//clippingNode->setAlphaThreshold(0);

    return true;
}

你看到的上边的俩种图片就是通过setInverted这个函数来设置的，它可以设置你最终看到的是裁剪掉的区域还是模板的区域，我想原理你应该明白了吧。下面我们再来看一下init函数中最后注释掉的那行代码，意思注释已经写了，打开这句话我们看到的效果如下。

有了上面的基础我们应该想想怎么去做这个新手引导了，个人认为这个CCClippingNode节点上只应该添加一个CCLayreColor，设置一下它的透明度，看起来就有了遮罩的效果了，而其他的元素都是在其他的层中的，然后我们为CCClippingNode设置一个模板，同时设置setAlphaThreshold这句话，将透明度为0的都裁剪掉，这样就留下了精灵的形状，然后做一下触摸操作的处理，应该是这样吧。下面这幅图就是这样做的。是不是有了新手引导的效果了！

本文链接：http://www.zaojiahua.com/ccclipping.html