本文链接1:http://www.zaojiahua.com/ccclipping.html 本文1由( 小塔 )原创,转载请保留文章出处!
3 | if ( !CCLayer::init() ) |
8 | CCSize visibleSize = CCDirector::sharedDirector()->getVisibleSize(); |
11 | CCSprite * background = CCSprite::create( "HelloWorld.png" ); |
12 | background->setPosition(ccp(visibleSize.width/2,visibleSize.height/2)); |
13 | this ->addChild(background,0); |
16 | CCClippingNode * clippingNode = CCClippingNode::create(); |
17 | this ->addChild(clippingNode,1); |
19 | CCLayerColor * layer = CCLayerColor::create(ccc4(0,0,0,200)); |
20 | clippingNode->addChild(layer); |
22 | CCSprite * sprite = CCSprite::create( "1.png" ); |
23 | sprite->setPosition(ccp(visibleSize.width/4,visibleSize.height/2)); |
24 | clippingNode->addChild(sprite); |
26 | CCSprite * sprite2 = CCSprite::create( "icon.png" ); |
27 | sprite2->setPosition(ccp(visibleSize.width/2,visibleSize.height/2)); |
28 | clippingNode->addChild(sprite2); |
31 | CCSprite * stencil = CCSprite::create( "icon.png" ); |
32 | stencil->setPosition(ccp(visibleSize.width/2,visibleSize.height/2)); |
33 | clippingNode->setStencil(stencil); |
35 | clippingNode->setInverted( true ); |
![CCClippingNode遮罩解析 CCClippingNode遮罩解析](http://www.zaojiahua.com/wp-content/uploads/2014/04/2014-04-01_213055-300x212.png)
你看到的上边的俩种图片就是通过setInverted这个函数来设置的,它可以设置你最终看到的是裁剪掉的区域还是模板的区域,我想原理你应该明白了吧。下面我们再来看一下init函数中最后注释掉的那行代码,意思注释已经写了,打开这句话我们看到的效果如下。
有了上面的基础我们应该想想怎么去做这个新手引导了,个人认为这个CCClippingNode节点上只应该添加一个CCLayreColor,设置一下它的透明度,看起来就有了遮罩的效果了,而其他的元素都是在其他的层中的,然后我们为CCClippingNode设置一个模板,同时设置setAlphaThreshold这句话,将透明度为0的都裁剪掉,这样就留下了精灵的形状,然后做一下触摸操作的处理,应该是这样吧。下面这幅图就是这样做的。是不是有了新手引导的效果了!
![CCClippingNode遮罩解析 CCClippingNode遮罩解析](http://www.zaojiahua.com/wp-content/uploads/2014/04/2014-04-01_222341-300x213.png)
本文链接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);