转自:http://www.2cto.com/kf/201207/144656.html
蒙板,局部高亮可点的用处大多是在新手引导的时候,引导玩家一步一步的走游戏的操作流程。
之前写了一个cocos2d-iphone的版本,因为设置成圆角的,比较美观,如果不用圆角,可以直接把Sprite改成layercolor,这个版本的缺点是每步都需要美术出一个资源(如果每步的点击区域大小不一样的话),现在这个版本是直接设置大小即可。
这个版本的设计思路是,用layercolor,先把高亮的区域设置好了,然后在layercolor的四个角加上一个小圆角的sprite,这样就不用每步都需要美术出资源了。可以随意的设置高亮区域的大小。本来想直接不用sprite,直接找个方法设置layercolor的圆角的,没找到合适的方法,如果大家有比较合适的更简便的方法,欢迎拍砖。
原理是:渲染的时候,使用异步混合渲染。ccBlendFunc
不多说,直接上代码
为了获取点击事件,所以继承了 CCTargetedTouchDelegate,把touch的权限设置为最高。
//.h #ifndef Good_PlayGuide_h #define Good_PlayGuide_h #include "cocos2d.h" using namespace cocos2d; class PlayerGuide:public CCSprite , public CCTargetedTouchDelegate { public: PlayerGuide(); virtual ~PlayerGuide(); virtual bool init(); virtual void onEnter(); virtual void onExit(); virtual bool ccTouchBegan(CCTouch *touch, CCEvent *event); virtual void ccTouchMoved(CCTouch *touch, CCEvent *event); virtual void ccTouchEnded(CCTouch *touch, CCEvent *event); void onSetSpriteAndPosition(float width,float height,CCPoint point); CCLayerColor *m_layer; // color layer float m_layerWidth; //layer width float m_layerHeight; // layer height CCRenderTexture *m_pTarget; // render texture }; #endif
// cpp #include <iostream> #include "PlayerGuide.h" PlayerGuide::PlayerGuide() { m_layerWidth = 0.0f; m_layerHeight = 0.0f; } PlayerGuide::~PlayerGuide() { } bool PlayerGuide::init() { if (!CCSprite::init()) { return false; } return true; } void PlayerGuide::onEnter() { //since v2.0 // CCDirector::sharedDirector()->getTouchDispatcher()->addTargetedDelegate(this, -201, true); //当进入这个对象时,设置touch事件的响应权限,menu的响应级别是-128,我们要获取比这个要高的权限,(设置的数值越低,权限越高) CCTouchDispatcher::sharedDispatcher()->addTargetedDelegate(this, -201, true); CCSprite::onEnter(); } void PlayerGuide::onExit() { //since v2.0 // CCDirector::sharedDirector()->getTouchDispatcher()->removeDelegate(this); //退出时,把touch响应的事件 移除 CCTouchDispatcher::sharedDispatcher()->removeDelegate(this); CCSprite::onExit(); } #pragma mark --------------------------setSpriteAndPosition---------------------------- /******************************************************************************* *@param width 设置高亮区域的宽度,height 高亮区域的高度,point 设置layer的position * * *******************************************************************************/ void PlayerGuide::onSetSpriteAndPosition(float width,float height, CCPoint point) { if (width != 0 && height != 0) { m_layerWidth = width; m_layerHeight = height; m_layer = CCLayerColor::layerWithColorWidthHeight(ccc4(0x00, 0x00, 0x00, 0xff), width, height); m_layer->retain(); ccBlendFunc ccb = {GL_ZERO,GL_ONE_MINUS_SRC_ALPHA}; m_layer->setBlendFunc(ccb); m_layer->setPosition(point); CCSprite *topright = CCSprite::spriteWithFile("yourfile");//自己设置圆角的小图,如果不需要圆角,可以直接把sprite去掉 topright->getTexture()->setAliasTexParameters(); ccBlendFunc cbf = {GL_ONE,GL_ONE_MINUS_DST_ALPHA}; topright->setBlendFunc(cbf); topright->setPosition(ccp(m_layer->getContentSize().width - topright->getContentSize().width/2,m_layer->getContentSize().height - topright->getContentSize().height/2)); topright->setOpacity(255*0.5); m_layer->addChild(topright,1); CCSprite *topleft = CCSprite::spriteWithFile(IMG_PATH(IMAGE_PLAYERGUIDE_ROUNDED)); topleft->getTexture()->setAliasTexParameters(); ccBlendFunc cbf1 = {GL_ONE,GL_ONE_MINUS_DST_ALPHA}; topleft->setBlendFunc(cbf1); topleft->setPosition(ccp(topleft->getContentSize().width/2,m_layer->getContentSize().height - topleft->getContentSize().height/2)); topleft->setOpacity(255*0.5); topleft->setFlipX(true); m_layer->addChild(topleft,1); CCSprite *buttomleft = CCSprite::spriteWithFile(IMG_PATH(IMAGE_PLAYERGUIDE_ROUNDED)); buttomleft->getTexture()->setAliasTexParameters(); ccBlendFunc cbf2 = {GL_ONE,GL_ONE_MINUS_DST_ALPHA}; buttomleft->setBlendFunc(cbf2); buttomleft->setPosition(ccp(buttomleft->getContentSize().width/2,buttomleft->getContentSize().height/2)); buttomleft->setOpacity(255*0.5); buttomleft->setFlipX(true); buttomleft->setFlipY(true); m_layer->addChild(buttomleft,1); CCSprite *buttomright = CCSprite::spriteWithFile(IMG_PATH(IMAGE_PLAYERGUIDE_ROUNDED)); buttomright->getTexture()->setAliasTexParameters(); ccBlendFunc cbf3 = {GL_ONE,GL_ONE_MINUS_DST_ALPHA}; buttomright->setBlendFunc(cbf3); buttomright->setPosition(ccp(m_layer->getContentSize().width - buttomleft->getContentSize().width/2,buttomright->getContentSize().height/2)); buttomright->setOpacity(255*0.5); buttomright->setFlipY(true); m_layer->addChild(buttomright,1); } CCSize s = CCDirector::sharedDirector()->getWinSize(); m_pTarget = CCRenderTexture::renderTextureWithWidthAndHeight(s.width, s.height); ccBlendFunc ccb1 = {GL_SRC_ALPHA,GL_ONE_MINUS_SRC_ALPHA}; m_pTarget->getSprite()->setBlendFunc(ccb1); m_pTarget->clear(0.0f, 0.0f, 0.0f, 0.5f); m_pTarget->setPosition(ccp(s.width/2,s.height/2)); this->addChild(m_pTarget); m_pTarget->begin(); if (width != 0 && height != 0) { m_layer->visit(); } m_pTarget->end(); } bool PlayerGuide::ccTouchBegan(cocos2d::CCTouch *touch, cocos2d::CCEvent *event) { CCPoint touchpoint = touch->locationInView(touch->view()); touchpoint = CCDirector::sharedDirector()->convertToGL(touchpoint); if (m_layerWidth != 0 && m_layerHeight != 0) { //如果点击高亮区域,则响应下层的区域 CCRect rect = m_layer->boundingBox(); if (CCRect::CCRectContainsPoint(rect, touchpoint)) { return false; } return true; } void PlayerGuide::ccTouchMoved(cocos2d::CCTouch *touch, cocos2d::CCEvent *event) { } void PlayerGuide::ccTouchEnded(cocos2d::CCTouch *touch, cocos2d::CCEvent *event) { }