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, 失敗返回FALSE
	virtual 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 object
	CCMenu* 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 object
	CCMenu* 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);
}

看看效果, 場景一切換到場景二:

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

再看看場景二切換到場景一:

從下面把場景一拉上來的

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