Cocos2dx 3.0 過渡篇（十六）用ClippingNode做遊戲的新手引導

近來越來越忙了。我現在心裡的念頭就是：不要放假，然後拚命敲代碼，爭取清明節前將把這項目做完。這樣我就可以名正言順的請幾天假，然後直奔寧波，做我從2月1號開始就一直想做的事！幸福都是靠自己去爭取的！！！
-----------------
本篇介紹的是用ClippingNode 做遊戲的新手引導，額，或者說是做新手引導的一種可嘗試的方式。
ClippingNode的解釋，我盜用Jacky的話來說就是：
CCClipingNode是一個可裁剪節點，簡單理解：
（1）首先它是一個節點，繼承於CCNode，所以它可以像普通節點一樣放入CCLayer，CCScene，CCNode中。
（2）作為節點，它就可以用作容器，承載其他節點和精靈。我把它叫底板。
（3）如果想要對一個節點進行裁剪，那需要給出裁剪的部分，這個裁剪地區，我把它叫模版。
所以CCClipingNode裁剪節點在組成上=底板+模版，而在顯示上=底板-模版。不知道這樣解釋會不會好理解一點。

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

1、假如遊戲的開始，遊戲介面就只有一個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，方便其他地方擷取到這個itemauto menu = Menu::create(closeItem, NULL);menu->setPosition(Point::ZERO);menu->setTag(99);//這裡同樣設定tag 為99this->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);}

效果：

     

2、然後添加ClippingNode：

auto clip = ClippingNode::create();//設定裁剪節點clip->setInverted(true);//設定底板可見clip->setAlphaThreshold(0.0f);//設定透明度Alpha值為0this->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表徵圖做的精靈，方便對比。

3、這個時候，情境中的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();//首先在情境的最上方再添加一個layerthis->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擷取到menuauto item = (MenuItem*)menu->getChildByTag(99);//通過tag從menu中擷取itemitem->activate();//讓item響應}return true;//返回true表示接收觸摸事件}

恩，這樣就可以了。

過程寫的略顯繁瑣，大家可以根據自己的需要刪減刪減.

尊重原創，轉載請註明來自star特530:http://blog.csdn.net/start530/article/details/20851263