cocos2dX 之CCScene的建立原理和切換方式

今天, 我們來看看情境CCScene的建立原理和切換方式, 

首先, 我們來看看一個空的情境是個什麼樣子:

我們先來看看效果:

啥也沒有:

諸位少俠莫急, 且待我一一解釋( 旁白: 你今天又是在發什麼瘋啊)

建立一個繼承於CCLayer的HelloWorld，然後通過HelloWorld這個Layer中提供一個產生CCScene的指標的靜態函數，擷取情境的指標，載入情境

我們先詳細的看看每個函數做了什麼

CCScene* HelloWorld::scene()

建立了一個情境

根據HelloWorld建立了一個層

將層添加到情境裡面

返回情境指標

bool HelloWorld::init()

判斷父類是否初始化成功, 如果不成功, 結束初始化操作

總的來說, CCScene相當於一個容器, 雖然繼承自CCNode, 但是什麼也沒幹, 沒有在它的基礎上新增成員變數和方法, 只是重構了init, 把層添加到情境中

所以我們要在init函數裡面進行各種操作, 然後使用addChild添加到層上面, 我們再讓CCDirector調用runWithScene(), 播放這個情境, 我們添加的精靈這些才能在螢幕上顯示出來

好了, 我們來看看今天最重要一部分, 情境切換

先來看看情境切換有多少特效:

[1]:CCTransitionCrossFade::create(時間,目標情境);

   //慢慢淡化到另一情境

[2]:CCTransitionFade::create(時間,目標情境);

   //本情境變暗消失後另一情境慢慢出現

[3]:CCTransitionFadeBL::create(時間,目標情境);

   //本情境右上方到左下角方塊消失到另一情境

[4]:CCTransitionFadeDown::create(時間,目標情境);

   //本情境從上到下橫條消失到另一情境

[5]:CCTransitionFadeTR::create(時間,目標情境);

   //本情境左下角到右上方方塊消失到另一情境

[6]:CCTransitionFadeUp::create(時間,目標情境);

   //本情境從下到上橫條消失到另一情境

[7]:CCTransitionFlipAngular::create(時間,目標情境,樣式 );

   //本情境翻轉消失到另一情境（斜上方）

   //樣式（可以不寫）：

   //kCCTransitionOrientationLeftOver（左向右翻轉）

   //kCCTransitionOrientationRightOver（右向左翻轉）

[8]:CCTransitionFlipX::create(時間,目標情境,樣式);

   //本情境翻轉消失到另一情境（X軸）

   //樣式（可以不寫）：

   //kCCTransitionOrientationLeftOver（左向右翻轉）

   //kCCTransitionOrientationRightOver（右向左翻轉）

[9]:CCTransitionFlipY::create(時間,目標情境);

   //本情境翻轉消失到另一情境（Y軸）

   //樣式（可以不寫）：

   //kCCTransitionOrientationUpOver（下向上翻轉）

   //kCCTransitionOrientationDownOver（上向下翻轉）

[10]:CCTransitionJumpZoom::create(時間,目標情境);

   //本情境跳動消失後另一情境跳動出現

[11]:CCTransitionMoveInB::create(時間,目標情境);

   //另一情境由整體從下面出現

[12]:CCTransitionMoveInL::create(時間,目標情境);

   //另一情境由整體從左面出現

[13]:CCTransitionMoveInT::create(時間,目標情境);

   //另一情境由整體從上面出現

[14]:CCTransitionMoveInR::create(時間,目標情境);

   //另一情境由整體從右面出現

[15]:CCTransitionPageTurn::create(時間,目標情境,bool);

   //翻頁切換，bool為true是向前翻。

[16]:CCTransitionProgressHorizontal::create(時間,目標情境);

   //本情境從左至右消失同時另一情境出現

[17]:CCTransitionProgressInOut::create(時間,目標情境);

   //本情境從中間到四周消失同時另一情境出現

[18]:CCTransitionProgressOutIn::create(時間,目標情境);

   //本情境從四周到中間消失同時另一情境出現

[19]:CCTransitionProgressRadialCCW::create(時間,目標情境);

   //本情境逆時針消失到另一情境

[20]:CCTransitionProgressRadialCW::create(時間,目標情境);

   //本情境順時針消失到另一情境

[21]:CCTransitionProgressVertical::create(時間,目標情境);

   //本情境從上到下消失同時另一情境出現

[22]:CCTransitionRotoZoom::create(時間,目標情境);

   //本情境旋轉消失後另一情境旋轉出現

[23]:CCTransitionShrinkGrow::create(時間,目標情境);

   //本情境縮小切換到另一情境放大

[24]:CCTransitionSlideInB::create(時間,目標情境);

   //本情境向上滑動到另一情境

[25]:CCTransitionSlideInL::create(時間,目標情境);

   //本情境向右滑動到另一情境

[26]:CCTransitionSlideInR::create(時間,目標情境);

   //本情境向左滑動到另一情境

[27]:CCTransitionSlideInT::create(時間,目標情境);

   //本情境向下滑動到另一情境

[28]:CCTransitionSplitCols::create(時間,目標情境);

   //本情境三矩形上下消失後另一情境三矩形上下出現

[29]:CCTransitionSplitRows::create(時間,目標情境);

   //本情境三矩形左右消失後另一情境三矩形左右出現

[30]:CCTransitionTurnOffTiles::create(時間,目標情境);

   //本情境小方塊消失到另一情境

[31]:CCTransitionZoomFlipAngular::create(時間,目標情境,樣式);

   //本情境翻轉消失到另一情境（斜上方）

   //樣式（可以不寫）：

   //kCCTransitionOrientationLeftOver（左向右翻轉）

   //kCCTransitionOrientationRightOver（右向左翻轉）

[32]:CCTransitionZoomFlipX::create(時間,目標情境,樣式);

   //本情境翻轉消失到另一情境（X軸）

   //樣式（可以不寫）：

   //kCCTransitionOrientationLeftOver（左向右翻轉）

   //kCCTransitionOrientationRightOver（右向左翻轉）

[33]:CCTransitionZoomFlipY::create(時間,目標情境,樣式);

   //本情境翻轉消失到另一情境（Y軸）

   //樣式（可以不寫）：

   //kCCTransitionOrientationUpOver（下向上翻轉）

   //kCCTransitionOrientationDownOver（上向下翻轉）

嗯, 這裡借用孤狼大神整理的, 感謝哈, 嘿嘿, 我人比較懶

好了, 我們先來建立一個新的情境

建立一個名叫scene2的類, 從HelloWorld把代碼複製過來, 注意要把類名這些換過來哦

#ifndef __SCENE2_H__#define __SCENE2_H__#include "cocos2d.h"class scene2 : public cocos2d::CCLayer{public://初始化一個情境, 成功返回TRUE, 失敗返回FALSEvirtual bool init();  //建立一個情境, 返回類的執行個體指標, 說白了就是返回一個情境指標static cocos2d::CCScene* scene();//建立一個層CREATE_FUNC(scene2);};#endif // __SCENE2_H__

#include "scene2.h"USING_NS_CC;CCScene* scene2::scene(){//建立情境對象, 並且返回它CCScene *scene = CCScene::create();//建立一個層scene2 *layer = scene2::create();//將層添加到情境中scene->addChild(layer);return scene;}bool scene2::init(){if ( !CCLayer::init() ){return false;}return true;}

這樣, 一個新的情境就建立完成了

我們在原來的情境上建立一張背景圖片, 一個按鈕, 額, 這個按鈕我就用的是程式裡面的關閉按鈕, 函數內容一改, 嘿嘿, 你懂得( 旁白: 你這是沒救了的節奏)

CCSprite* bg = CCSprite::create( "HelloWorld.png");bg->setPosition( ccp( visibleSize.width / 2, visibleSize.height / 2));addChild( bg);CCMenuItemImage *pCloseItem = CCMenuItemImage::create("CloseNormal.png","CloseSelected.png",this,menu_selector(HelloWorld::menuCloseCallback));pCloseItem->setPosition(ccp(origin.x + visibleSize.width - pCloseItem->getContentSize().width/2 ,origin.y + pCloseItem->getContentSize().height/2));// create menu, it's an autorelease objectCCMenu* pMenu = CCMenu::create(pCloseItem, NULL);pMenu->setPosition(CCPointZero);this->addChild(pMenu, 1);

關鍵的來了, 我們來修改一下關閉按鈕的功能, 直接使用scene2的scene()函數建立了一個情境, 用導演類直接切換到我們新建立的情境

CCScene* myScene = scene2::scene();CCDirector::sharedDirector()->replaceScene( myScene);

當然, 我們得把scene2的標頭檔引進來

#include "scene2.h"

再來修改scene2依樣畫葫蘆, 我們再把scene2實現了:

CCLabelTTF* ttf = CCLabelTTF::create( "SCENE_2", "Arial", 40);ttf->setPosition( ccp( visibleSize.width / 2, visibleSize.height / 2));addChild( ttf);CCMenuItemImage *pCloseItem = CCMenuItemImage::create("CloseNormal.png","CloseSelected.png",this,menu_selector(scene2::menuCloseCallback));pCloseItem->setPosition(ccp(origin.x + visibleSize.width - pCloseItem->getContentSize().width/2 ,origin.y + pCloseItem->getContentSize().height/2));// create menu, it's an autorelease objectCCMenu* pMenu = CCMenu::create(pCloseItem, NULL);pMenu->setPosition(CCPointZero);this->addChild(pMenu, 1);

修改關閉函數, 在這個切換情境的時候, 我們選擇使用了一個滑動切換情境的特效:

void scene2::menuCloseCallback(CCObject* pSender){CCScene* myScene = HelloWorld::scene();CCTransitionScene* tx = CCTransitionMoveInB::create( 2, myScene);CCDirector::sharedDirector()->replaceScene( tx);}

看看效果, 情境一切換到情境二:

直接一下就切換過去了, 沒有任何效果

再看看情境二切換到情境一:

從下面把情境一拉上來的

好了  我們今天就到這裡了, 希望大家把這些特效都看看有什麼效果