CCClippingNode

本文链接1：http://www.zaojiahua.com/ccclipping.html 本文1由( 小塔 )原创，转载请保留文章出处！

bool HelloWorld::init()

2

{

3	if ( !CCLayer::init() )

4

{

5	return false;

6

}

7

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

9

10

//背景图片

11	CCSprite * background = CCSprite::create("HelloWorld.png");

12	background->setPosition(ccp(visibleSize.width/2,visibleSize.height/2));

13	this->addChild(background,0);

14

15	//创建一个裁剪节点用来实现遮罩的效果

16	CCClippingNode * clippingNode = CCClippingNode::create();

17	this->addChild(clippingNode,1);

18	//向裁剪节点中加入内容，这里加入的是一个透明的层

19	CCLayerColor * layer = CCLayerColor::create(ccc4(0,0,0,200));

20	clippingNode->addChild(layer);

21	//继续向裁剪节点中加入内容，这里加入的是一个精灵

22	CCSprite * sprite = CCSprite::create("1.png");

23	sprite->setPosition(ccp(visibleSize.width/4,visibleSize.height/2));

24	clippingNode->addChild(sprite);

25	//向裁剪节点中加入精灵，精灵的位置和裁剪的位置相同，所以最后让裁剪掉了

26	CCSprite * sprite2 = CCSprite::create("icon.png");

27	sprite2->setPosition(ccp(visibleSize.width/2,visibleSize.height/2));

28	clippingNode->addChild(sprite2);

29

30	//创建模板，裁剪节点将按照这个模板来裁剪区域

31	CCSprite * stencil = CCSprite::create("icon.png");

32	stencil->setPosition(ccp(visibleSize.width/2,visibleSize.height/2));

33	clippingNode->setStencil(stencil);

34	//这个是用来设置显示裁剪区域还是非裁剪区域的

35	clippingNode->setInverted(true);

36	//我们之前放了一张裁剪的模板，按照这个模板裁剪的时候同时按照这个alpha的值裁剪，这个值的范围是0-1

37	//设为0就把透明的区域裁剪掉了

38	//clippingNode->setAlphaThreshold(0);

39

40	return true;

41

}

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

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

本文链接2：http://www.gulumiao.com/blog/2013/11/%E5%85%B3%E4%BA%8Ecocos2dx%E9%81%AE%E7%BD%A9ccclippingnode/

//不用图片直接创建遮罩矩形多边形区域

 CCSprite *sprite = CCSprite::create("HelloWorld.png");

 CCClippingNode *clipper = CCClippingNode::create();

 clipper->setContentSize(this->getContentSize() );

 clipper->setAnchorPoint(ccp(0, 0));

 clipper->setPosition(400,400);

 this->addChild(clipper);

 CCDrawNode *stencil = CCDrawNode::create();

 CCPoint rectangle[4];//裁减的点

 rectangle[0] = ccp(0, 0);   //左下

 rectangle[1] = ccp(50, 0);//右下

 rectangle[2] = ccp(50, 200);//左上

  rectangle[3] = ccp(200, 200); //右上

    

  ccColor4F white = {100, 100, 100, 255};

  stencil->drawPolygon(rectangle, 4, white, 1, white);

  clipper->setStencil(stencil);

  clipper->addChild(sprite);