cocos2d-X之蒙板,局部高亮可點,CCRenderTexture

蒙板,局部高亮可點的用處大多是在新手引導的時候,引導玩家一步一步的走遊戲的操作流程。

之前寫了一個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


#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)
{
    
}

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章