【玩转cocos2d-x之二十九】利用CCClipingNode做游戏遮罩

前端之家收集整理的这篇文章主要介绍了【玩转cocos2d-x之二十九】利用CCClipingNode做游戏遮罩前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

原创作品,转载请标明http://www.jb51.cc/article/p-hglfzebw-ep.html


新手引导是游戏中必备的(除了奇葩的MT用一段动画开始),也是玩家对游戏的第一印象,重要性不言而喻。一般采用的遮罩的形式来突出引导重点,同时屏蔽其他功能。这里简单的介绍一下游戏遮罩的实现,并给出一个示例。


1.CCClipingNode

CCClipingNode是一个可裁剪节点,简单理解:

(1)首先它是一个节点,继承于CCNode,所以它可以像普通节点一样放入CCLayer,CCScene,CCNode中。

(2)作为节点,它就可以用作容器,承载其他节点和精灵。我把它叫底板。

(3)如果想要对一个节点进行裁剪,那需要给出裁剪的部分,这个裁剪区域,我把它叫模版。

所以CCClipingNode裁剪节点在组成上=底板+模版,而在显示上=底板-模版。不知道这样解释会不会好理解一点。



2.API

CCClipingNode的使用还是比较简单的,至于显示底板还是模版,alpha值的设定,这些也不好说清楚,自己多试几次就知道是什么意思该怎么用了。

  1. //不带模版地创建一个裁剪节点
  2. staticCCClippingNode*create();
  3. //使用一个节点作为模版创建裁剪节点
  4. staticCCClippingNode*create(CCNode*pStencil);
  5. //不带模版地初始化一个裁剪节点
  6. virtualboolinit();
  7. //使用一个节点作为模版初始化裁剪节点
  8. boolinit(CCNode*pStencil);
  9. //设置/获取模版,注意模版需要retain!
  10. CCNode*getStencil()const;
  11. voidsetStencil(CCNode*pStencil);
  12. //设置alpha值(0~1),这个很重要,裁剪是按像素抠图的,所以只有大于这个alpha值的模版像素才会被画出来
  13. //默认是1,也就是完全裁剪。
  14. GLfloatgetAlphaThreshold()const;
  15. voidsetAlphaThreshold(GLfloatfAlphaThreshold);
  16. //默认是false,用于设置显示底板还是模版
  17. boolisInverted()voidsetInverted(boolbInverted);

3.示例

在init中实现:

    CCSizevisibleSize=CCDirector::sharedDirector()->getVisibleSize();
  1. CCSprite*background=CCSprite::create("HelloWorld.png");//创建背景
  2. background->setPosition(ccp(visibleSize.width/2,visibleSize.height/2));
  3. this->addChild(background,kTagBackground);
  4. clip=CCClippingNode::create();//创建裁剪节点,成员变量
  5. clip->setInverted(true);//设置底板可见
  6. clip->setAlphaThreshold(0.0f);//设置alpha为0
  7. this->addChild(clip,kTagClipNode);//添加裁剪节点
  8. CCLayerColor*back=CCLayerColor::create(ccc4(0,200));
  9. clip->addChild(back);//为裁剪节点添加一个黑色带透明(看起了是灰色)的底板
  10. //模版如果要在其他地方使用要记得retain!
  11. //第一种:以下模型是drawnode遮罩
  12. //CCDrawNode*front=CCDrawNode::create();
  13. //ccColor4Fyellow={1,1,1};
  14. //CCPointrect[4]={ccp(-30,30),ccp(30,-30),ccp(-30,-30)};
  15. //front->drawPolygon(rect,4,yellow,yellow);
  16. //front->setPosition(ccp(visibleSize.width/2,visibleSize.height/2));
  17. //clip->setStencil(front);
  18. //第二种:以下模型是带图像遮罩
  19. CCNode*nodef=CCNode::create();//创建模版
  20. CCSprite*close=CCSprite::create("CloseSelected.png");//这里使用的是close的那个图标,所以注意观察效果图2
  21. nodef->addChild(close);//在模版上添加精灵
  22. nodef->setPosition(ccp(visibleSize.width/2,visibleSize.height/2));
  23. clip->setStencil(nodef);//设置模版
  24. tip=CCSprite::create("tip.png");//一些引导提示
  25. tip->setScale(0.5f);
  26. tip->setRotation(60);
  27. tip->setPosition(ccp(visibleSize.width/2-70,visibleSize.height/2+50));
  28. this->addChild(tip,kTagTip);
  29. tip->runAction(CCRepeatForever::create(CCSequence::create(CCScaleBy::create(0.25f,0.95f),CCScaleTo::create(0.25f,0.5),NULL)));
  30. this->setTouchEnabled(//触摸有效,落点正确时移除裁剪节点和提示,相关处理请看源码

4.效果

两种效果




5.源码

http://download.csdn.net/detail/jackyvincefu/6667189

猜你在找的Cocos2d-x相关文章