原創作品,轉載請標明:http://blog.csdn.net/jackystudio/article/details/17160973
新手引導是遊戲中必備的(除了奇葩的MT用一段動畫開始),也是玩家對遊戲的第一印象,重要性不言而喻。一般採用的遮罩的形式來突出引導重點,同時屏蔽其他功能。這裏簡單的介紹一下游戲遮罩的實現,並給出一個示例。
1.CCClipingNode
CCClipingNode是一個可裁剪節點,簡單理解:
(1)首先它是一個節點,繼承於CCNode,所以它可以像普通節點一樣放入CCLayer,CCScene,CCNode中。
(2)作爲節點,它就可以用作容器,承載其他節點和精靈。我把它叫底板。
(3)如果想要對一個節點進行裁剪,那需要給出裁剪的部分,這個裁剪區域,我把它叫模版。
所以CCClipingNode裁剪節點在組成上=底板+模版,而在顯示上=底板-模版。不知道這樣解釋會不會好理解一點。
2.API
CCClipingNode的使用還是比較簡單的,至於顯示底板還是模版,alpha值的設定,這些也不好說清楚,自己多試幾次就知道是什麼意思該怎麼用了。
//不帶模版地創建一個裁剪節點
static CCClippingNode* create();
//使用一個節點作爲模版創建裁剪節點
static CCClippingNode* create(CCNode *pStencil);
//不帶模版地初始化一個裁剪節點
virtual bool init();
//使用一個節點作爲模版初始化裁剪節點
virtual bool init(CCNode *pStencil);
//設置/獲取模版,注意模版需要retain!
CCNode* getStencil() const;
void setStencil(CCNode *pStencil);
//設置alpha值(0~1),這個很重要,裁剪是按像素摳圖的,所以只有大於這個alpha值的模版像素纔會被畫出來
//默認是1,也就是完全裁剪。
GLfloat getAlphaThreshold() const;
void setAlphaThreshold(GLfloat fAlphaThreshold);
//默認是false,用於設置顯示底板還是模版
bool isInverted() const;
void setInverted(bool bInverted);
3.示例
在init中實現:
CCSize visibleSize=CCDirector::sharedDirector()->getVisibleSize();
CCSprite* background = CCSprite::create("HelloWorld.png");//創建背景
background->setPosition(ccp(visibleSize.width/2,visibleSize.height/2));
this->addChild(background,kTagBackground);
clip=CCClippingNode::create();//創建裁剪節點,成員變量
clip->setInverted(true);//設置底板可見
clip->setAlphaThreshold(0.0f);//設置alpha爲0
this->addChild(clip,kTagClipNode);//添加裁剪節點
CCLayerColor* back=CCLayerColor::create(ccc4(0,0,0,200));
clip->addChild(back);//爲裁剪節點添加一個黑色帶透明(看起了是灰色)的底板
//模版如果要在其他地方使用要記得retain!
//第一種:以下模型是drawnode遮罩
//CCDrawNode* front=CCDrawNode::create();
//ccColor4F yellow = {1, 1, 0, 1};
//CCPoint rect[4]={ccp(-30,30),ccp(30,30),ccp(30,-30),ccp(-30,-30)};
//front->drawPolygon(rect, 4, yellow, 0, yellow);
//front->setPosition(ccp(visibleSize.width/2, visibleSize.height/2));
//clip->setStencil(front);
//第二種:以下模型是帶圖像遮罩
CCNode* nodef=CCNode::create();//創建模版
CCSprite* close=CCSprite::create("CloseSelected.png");//這裏使用的是close的那個圖標,所以注意觀察效果圖2
nodef->addChild(close);//在模版上添加精靈
nodef->setPosition(ccp(visibleSize.width/2,visibleSize.height/2));
clip->setStencil(nodef);//設置模版
tip = CCSprite::create("tip.png");//一些引導提示
tip->setScale(0.5f);
tip->setRotation(60);
tip->setPosition(ccp(visibleSize.width/2-70,visibleSize.height/2+50));
this->addChild(tip,kTagTip);
tip->runAction(CCRepeatForever::create(CCSequence::create(CCScaleBy::create(0.25f,0.95f),CCScaleTo::create(0.25f,0.5),NULL)));
this->setTouchEnabled(true);//觸摸有效,落點正確時移除裁剪節點和提示,相關處理請看源碼
4.效果
兩種效果: