• 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);

    }




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



  • 相关阅读:
    uni-app调用原生的文件系统管理器(可选取附件上传)
    uni-app图片压缩转base64位 利用递归来实现多张图片压缩
    解释器模式
    外观模型
    装饰模式
    组合模式
    原型模式
    简单工厂模式
    抽象工厂模式
    工厂方法模式
  • 原文地址:https://www.cnblogs.com/Anzhongliu/p/6091979.html
Copyright © 2020-2023  润新知