和屌丝一起学cocos2dx-33种场景切换

声 明

本教程仅用于初学cocos2dx同学使用，内容由本人（孤狼）学习过程中笔记编写，本教程使用cocos2dx版本为2.1.4。本教程内容可以自由转载，但必须同时附带本声明，或注明出处。

gl.paea.cn版权所有。

       欢迎回到“和屌丝一起学cocos2dx”系列教程，上节我们说到了“24种基本特效”，不知道大家做出来了没有呢？这节课，我们又要开始新的征途了哦，大家准备好了没啊，我们这节要学习33种切换场景。也是很常用的哦，大家可要好好学啊。

【一】：为啥学他

       废话，你说为啥，不说了。

【二】：函数

1.创建

       CCScene * scene2=Scenedemo2::scene();

2.函数

[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（上向下翻转）

【三】：新建场景问题

       如果我说下面你自己用这些函数去做个场景切换特效你会怎么做呢？你是不是会咆哮：“他娘的老子想问的不是怎么切换，而是他娘的怎么创建新场景，你丫的之前木说过啊有木有。”

       好吧，我说过不到你用的时候和你说了也白说。所以，现在告诉你。

       其实创建一个新场景非常简单。复制即可。

       （什么？你让老子复制什么？）

       复制一下自动生成的helloworld.h和helloworld.cpp。因为他们两在一起，就是一个scene，你只要复制一下，然后改个名字就能用了。记得要在文件夹里复制哦，就像这样。

       当然这是偷懒的办法，你也可以直接新建.h和.cpp文件，然后自己写。

       然后我们在vs里把他们加载进来。

       然后这里注意！注意！注意！

       你新建的.h文件的这些地方一定要改掉，不能和其他已有的重复。否则后果自负。

       .cpp文件的也要改哦，么么哒！

       另外说一下生命周期函数

       virtual void onEnter();

       virtual void onEnterTransitionDidFinish();

       virtual void onExit();

       这3个是遇到对应情况时调用的。

       在cpp文件里如果把它们示例了，你可以在开始时放音乐，结束时关闭音乐等等。

       如果他下面的之类需要调用这三个函数，那你就必须写上，否则之类无法继承。

       如果你没有必要的操作，不写也可以。

       调用顺序：

           场景2的init函数

           场景2的onEnter函数

           场景1的onExit函数

           场景2的onEnterTransitionDidFinish函数

       好了，新建一个场景，你会了吗？我们继续吧。

【四】：示例

1.新建项目Scenedemo

2.新建scene Scenedemo2(怎么创建会了吧)

3.载入2张不同的图，用于创建2个场景

Scenedemo.h

1.创建一个回调函数用于切换场景

void changescene(CCObject* pSender);

2.创建3个生命周期函数

virtual void onEnter();

virtual void onEnterTransitionDidFinish();

virtual void onExit();

Scenedemo.cpp

1.包含Scenedemo2.h #include "Scenedemo2.h"

2.初始化函数中创建切换菜单

//-new-//

CCSize mysize=CCDirector::sharedDirector()->getWinSize();

CCSprite* sp = CCSprite::create("HelloWorld1.png");

sp->setPosition(ccp(mysize.width/2, mysize.height/2));

this->addChild(sp, 0);

//创建一个菜单

CCMenuItemFont * fontitem=CCMenuItemFont::create("turn 2",this,menu_selector(Scenedemo::changescene));

fontitem->setPosition(ccp(CCDirector::sharedDirector()->getWinSize().width/2, 20));

CCMenu* turnmenu = CCMenu::create(fontitem, NULL);

turnmenu->setPosition(CCPointZero);

this->addChild(turnmenu, 1);

//-new-//

3.实现changescene回调函数

void Scenedemo::changescene(CCObject* pSender){

//新建一个Scenedemo2的scene

CCScene * scene2=Scenedemo2::scene();

////CCTransitionCrossFade切换方式

//CCTransitionScene * s1=CCTransitionCrossFade::create(2,scene2);

//CCDirector::sharedDirector()->replaceScene(s1);

////CCTransitionFade切换方式

//CCTransitionScene * s2=CCTransitionFade::create(2,scene2);

//CCDirector::sharedDirector()->replaceScene(s2);

////CCTransitionFadeBL切换方式

//CCTransitionScene * s3=CCTransitionFadeBL::create(2,scene2);

//CCDirector::sharedDirector()->replaceScene(s3);

////CCTransitionFadeDown切换方式

//CCTransitionScene * s4=CCTransitionFadeDown::create(2,scene2);

//CCDirector::sharedDirector()->replaceScene(s4);

////CCTransitionFadeTR切换方式

//CCTransitionScene * s5=CCTransitionFadeTR::create(2,scene2);

//CCDirector::sharedDirector()->replaceScene(s5);

////CCTransitionFadeUp切换方式

//CCTransitionScene * s6=CCTransitionFadeUp::create(2,scene2);

//CCDirector::sharedDirector()->replaceScene(s6);

////CCTransitionFlipAngular切换方式

//CCTransitionScene * s7=CCTransitionFlipAngular::create(2,scene2,kCCTransitionOrientationRightOver);

//CCDirector::sharedDirector()->replaceScene(s7);

//CCTransitionFlipX切换方式

CCTransitionScene * s8=CCTransitionFlipX::create(2,scene2);

CCDirector::sharedDirector()->replaceScene(s8);

////CCTransitionFlipY切换方式

//CCTransitionScene * s9=CCTransitionFlipY::create(2,scene2);

//CCDirector::sharedDirector()->replaceScene(s9);

////CCTransitionJumpZoom切换方式

//CCTransitionScene * s10=CCTransitionJumpZoom::create(2,scene2);

//CCDirector::sharedDirector()->replaceScene(s10);

////CCTransitionMoveInB切换方式

//CCTransitionScene * s11=CCTransitionMoveInB::create(2,scene2);

//CCDirector::sharedDirector()->replaceScene(s11);

////CCTransitionMoveInL切换方式

//CCTransitionScene * s12=CCTransitionMoveInL::create(2,scene2);

//CCDirector::sharedDirector()->replaceScene(s12);

////CCTransitionMoveInT切换方式

//CCTransitionScene * s13=CCTransitionMoveInT::create(2,scene2);

//CCDirector::sharedDirector()->replaceScene(s13);

////CCTransitionMoveInR切换方式

//CCTransitionScene * s14=CCTransitionMoveInR::create(2,scene2);

//CCDirector::sharedDirector()->replaceScene(s14);

////CCTransitionPageTurn切换方式

//CCTransitionScene * s15=CCTransitionPageTurn::create(2,scene2,false);

//CCDirector::sharedDirector()->replaceScene(s15);

////CCTransitionProgressHorizontal切换方式

//CCTransitionScene * s16=CCTransitionProgressHorizontal::create(2,scene2);

//CCDirector::sharedDirector()->replaceScene(s16);

////CCTransitionProgressInOut切换方式

//CCTransitionScene * s17=CCTransitionProgressInOut::create(2,scene2);

//CCDirector::sharedDirector()->replaceScene(s17);

////CCTransitionProgressOutIn切换方式

//CCTransitionScene * s18=CCTransitionProgressOutIn::create(2,scene2);

//CCDirector::sharedDirector()->replaceScene(s18);

////CCTransitionProgressRadialCCW切换方式

//CCTransitionScene * s19=CCTransitionProgressRadialCCW::create(2,scene2);

//CCDirector::sharedDirector()->replaceScene(s19);

////CCTransitionProgressRadialCW切换方式

//CCTransitionScene * s20=CCTransitionProgressRadialCW::create(2,scene2);

//CCDirector::sharedDirector()->replaceScene(s20);

////CCTransitionProgressVertical切换方式

//CCTransitionScene * s21=CCTransitionProgressVertical::create(2,scene2);

//CCDirector::sharedDirector()->replaceScene(s21);

////CCTransitionRotoZoom切换方式

//CCTransitionScene * s22=CCTransitionRotoZoom::create(2,scene2);

//CCDirector::sharedDirector()->replaceScene(s22);

////CCTransitionShrinkGrow切换方式

//CCTransitionScene * s23=CCTransitionShrinkGrow::create(2,scene2);

//CCDirector::sharedDirector()->replaceScene(s23);

////CCTransitionSlideInB切换方式

//CCTransitionScene * s24=CCTransitionSlideInB::create(2,scene2);

//CCDirector::sharedDirector()->replaceScene(s24);

////CCTransitionSlideInL切换方式

//CCTransitionScene * s25=CCTransitionSlideInL::create(2,scene2);

//CCDirector::sharedDirector()->replaceScene(s25);

////CCTransitionSlideInR切换方式

//CCTransitionScene * s26=CCTransitionSlideInR::create(2,scene2);

//CCDirector::sharedDirector()->replaceScene(s26);

////CCTransitionSlideInT切换方式

//CCTransitionScene * s27=CCTransitionSlideInT::create(2,scene2);

//CCDirector::sharedDirector()->replaceScene(s27);

////CCTransitionSplitCols切换方式

//CCTransitionScene * s28=CCTransitionSplitCols::create(2,scene2);

//CCDirector::sharedDirector()->replaceScene(s28);

////CCTransitionSplitRows切换方式

//CCTransitionScene * s29=CCTransitionSplitRows::create(2,scene2);

//CCDirector::sharedDirector()->replaceScene(s29);

////CCTransitionTurnOffTiles切换方式

//CCTransitionScene * s30=CCTransitionTurnOffTiles::create(2,scene2);

//CCDirector::sharedDirector()->replaceScene(s30);

////CCTransitionZoomFlipAngular切换方式

//CCTransitionScene * s31=CCTransitionZoomFlipAngular::create(2,scene2);

//CCDirector::sharedDirector()->replaceScene(s31);

////CCTransitionZoomFlipX切换方式

//CCTransitionScene * s32=CCTransitionZoomFlipX::create(2,scene2);

//CCDirector::sharedDirector()->replaceScene(s32);

////CCTransitionZoomFlipY切换方式

//CCTransitionScene * s33=CCTransitionZoomFlipY::create(2,scene2);

//CCDirector::sharedDirector()->replaceScene(s33);

}

Scenedemo2.h

1.创建一个回调函数用于切换场景

void changescene(CCObject* pSender);

2.创建3个生命周期函数

virtual void onEnter();

virtual void onEnterTransitionDidFinish();

virtual void onExit();

和Scenedemo1.h一样

Scenedemo2.cpp

1.包含Scenedemo.h  #include "Scenedemo.h"

2.初始化函数中创建切换菜单

CCSize mysize=CCDirector::sharedDirector()->getWinSize();

CCSprite* sp = CCSprite::create("HelloWorld2.png");

sp->setPosition(ccp(mysize.width/2, mysize.height/2));

//设置不同颜色区分

sp->setColor(ccc3(100,100,100));

this->addChild(sp, 0);

//创建一个菜单

CCMenuItemFont * fontitem=CCMenuItemFont::create("turn back",this,menu_selector(Scenedemo2::changescene));

fontitem->setPosition(ccp(CCDirector::sharedDirector()->getWinSize().width/2, 20));

CCMenu* turnmenu = CCMenu::create(fontitem, NULL);

turnmenu->setPosition(CCPointZero);

this->addChild(turnmenu, 1);

3.实现changescene回调函数

void Scenedemo2::changescene(CCObject * obj){

//新建一个Scenedemo的scene

CCScene * scene1=Scenedemo::scene();

CCTransitionScene * ss=CCTransitionJumpZoom::create(2,scene1);

CCDirector::sharedDirector()->replaceScene(ss);

}

   好了，最后我们来欣赏一下效果吧

本节DEMO下载