cocos2dx 3.0 用ClippingNode作遊戲的新手引導

轉自：http://blog.csdn.net/star530/article/details/20851263

本篇介紹的是用ClippingNode 作遊戲的新手引導，額，或者說是作新手引導的一種可嘗試的方式。
ClippingNode的解釋，我盜用Jacky的話來講就是：
CCClipingNode是一個可裁剪節點，簡單理解：
（1）首先它是一個節點，繼承於CCNode，因此它能夠像普通節點同樣放入CCLayer，CCScene，CCNode中。
（2）做爲節點，它就能夠用做容器，承載其餘節點和精靈。我把它叫底板。
（3）若是想要對一個節點進行裁剪，那須要給出裁剪的部分，這個裁剪區域，我把它叫模版。
因此CCClipingNode裁剪節點在組成上=底板+模版，而在顯示上=底板-模版。不知道這樣解釋會不會好理解一點。

具體的用法，請看大屏幕：

一、假如遊戲的開始，遊戲界面就只有一個button，點擊它能夠顯示出「Welcome to star blog!」，代碼實現以下：

Size visibleSize = Director::getInstance()->getVisibleSize();
Point origin = Director::getInstance()->getVisibleOrigin();

auto closeItem = MenuItemImage::create(
                                       "CloseNormal.png",
                                       "CloseSelected.png",
                                       CC_CALLBACK_1(HelloWorld::menuCloseCallback, this));

closeItem->setPosition(Point(160,400));
closeItem->setTag(99);//這裏設置item的tag，方便其餘地方獲取到這個item

auto menu = Menu::create(closeItem, NULL);
menu->setPosition(Point::ZERO);
menu->setTag(99);//這裏一樣設置tag 爲99
this->addChild(menu, 2);
//它的回調函數是點擊這個button後，會出現一行字：Welcome to star blog!。
void HelloWorld::menuCloseCallback(Object* pSender)
{
    auto _lable = LabelTTF::create("Welcome to star blog!","Arial",25);
    _lable->setPosition(Point(160,300));
    this->addChild(_lable,2);
}

效果如圖所示：

 

二、而後添加ClippingNode：

auto clip = ClippingNode::create();//設置裁剪節點
clip->setInverted(true);//設置底板可見
clip->setAlphaThreshold(0.0f);//設置透明度Alpha值爲0
this->addChild(clip,10);

auto layerColor = LayerColor::create(Color4B(0,0,0,150));
clip->addChild(layerColor,1);//在裁剪節點添加一個灰色的透明層

//建立模板，也就是你要在裁剪節點上挖出來的那個」洞「是什麼形狀的，這裏我用close的圖標來做爲模板
auto nodef = Node::create();//建立模版  
auto close = Sprite::create("CloseSelected.png");//這裏使用的是close的那個圖標 
nodef->addChild(close);//在模版上添加精靈  
nodef->setPosition(Point(160,400));//設置的座標正好是在close button的座標位置上
clip->setStencil(nodef);//設置模版  

clippingNode的用法註釋已經寫得很清楚啦，我就再也不一一解釋。使用clippingNode後，效果如圖所示，我特地添加了一個用close圖標作的精靈，方便對比。

三、這個時候，場景中的close按鈕是高亮的，點擊close按鈕也是能夠響應的，可是假設我界面上有許多按鈕，它們也都是能夠響應，若是我只想讓玩家點擊close按鈕，其餘按鈕不能用，那該怎麼作？（總有那麼些」調皮「的玩家不按常理出牌）。方法很簡單，就是添加一個覆蓋整個屏幕的空白按鈕。

auto blackItem = MenuItem::create();
blackItem->setPosition(visibleSize.width/2,visibleSize.height/2);
blackItem->setContentSize(visibleSize);//設置大小爲整個屏幕的大小

auto blackMenu = Menu::create(blackItem,NULL);
blackMenu->setPosition(Point::ZERO);
blackMenu->setAnchorPoint(Point::ZERO);
this->addChild(blackMenu,100);

這樣點擊按鈕就沒法響應了，由於在按鈕上還覆蓋着一個霸道的空白按鈕。但是...如今連close 按鈕都點擊不了。怎麼就這麼麻煩？還能不能一塊兒快樂的玩耍了？！看來只能出大招了，把觸摸監聽事件扯出來。我在場景的最上方添加一個layer（注意是最上方，若是是在空白按鈕的下面，那麼就觸摸不到layer了），當玩家手指觸摸到屏幕，我經過判斷觸摸的位置判斷是否在close 按鈕上，若是是的話，手動的響應close  按鈕。

auto listen_layer = Layer::create();//首先在場景的最上方再添加一個layer
this->addChild(listen_layer,200);//zOrder設置爲200，反正能在最上方就好

auto listener = EventListenerTouchOneByOne::create();//建立一個觸摸監聽(單點觸摸）
listener->onTouchBegan = CC_CALLBACK_2(HelloWorld::onTouchBegan, this);//指定觸摸的回調函數
_eventDispatcher->addEventListenerWithSceneGraphPriority(listener,listen_layer);//將listener和layer綁定，放入事件委託中

bool HelloWorld::onTouchBegan(Touch* touch, Event  *event)
{
    auto point = Director::getInstance()->convertToGL(touch->getLocationInView());//得到當前觸摸的座標
    auto rect = Rect(160-30,400-30,60,60);//設置框座標和大小處於close 按鈕的位置上

    if(rect.containsPoint(point))//若是觸點處於rect中
    {
        auto menu = (Menu*)this->getChildByTag(99);//經過tag獲取到menu
        auto item = (MenuItem*)menu->getChildByTag(99);//經過tag從menu中獲取item
        item->activate();//讓item響應
    }

    return true;//返回true表示接收觸摸事件
}