【Cocos2d-html5游戏引擎学习笔记(7)】CCLayer创建及场景跳转

前些时间太忙了，终于可以再继续把自己学习经历分享一下。

游戏在制作的过程中，一定不仅仅是一个场景，总得来说应该有主菜单界面，游戏界面，如果游戏功能丰富，可能还会有帮助界面，设置界面等等，可能你会想到游戏胜利界面失败界面，这些该放在哪里？其实真正在游戏开发的过程，以我的经验，这些界面最好就放在游戏界面里，这样不会导致跳转界面过程中造成资源加载卡顿用户体验不好。好了，还是先来介绍场景的创建吧。

场景的创建很简单，一般参考HelloWorld里面的创建就可以了。

var GameLayer = cc.Layer.extend({    init: function () {        var bRet = false;        if (this._super()) {             //你需要显示的场景内容，如背景             bRet = true;        }        return bRet;    },});var GameScene = cc.Scene.extend({    onEnter: function () {        this._super();        var layer = new GameLayer();        this.addChild(layer);        layer.init();    }});

首先进入会进入GameScene，在GameScene里面创建一个CClayer，即GameLayer，在GameLayer里面显示我们的游戏内容。CCScene只是层的容器，就是一个简单的类，除了作为层的容器，场景的另一个作用就是流程的控制，利用replaceScene进行不同场景的自由切换。

当自定义创建一个场景之后，准确的说就是创建一个js文件，需要在cocos2d.js文件里面的 appFiles进行注册，不然场景跳转会报错。

如果需要在第一个场景进入我们自己创建的，需要在main.js里面的最后一行修改即可，这是游戏开始的地方，如：var myApp = new cocos2dApp(GameScene);

这里需要放入场景变量，而不是层变量。

如果在场景里面需要跳转到另一个场景，则可以调用导演类中跳转界面的方法即可。

var scene = new HelpScene();cc.Director.getInstance().replaceScene(scene);

cocos2d-html5给我们提供了和cocos2d一样的场景跳转特效，只是少了几个特殊的，在使用的时候，只需要在replaceScene()里面添加需要的效果即可。

以下是系统提供的特效方法，至于是什么效果大家试试就知道了，参数 t 是跳转过程的时间，s 是跳转的场景

cc.TransitionJumpZoom.create(t, s);

cc.TransitionFade.create(t, s);

cc.TransitionFade.create(t, s, cc.c3b(255, 255, 255));

cc.TransitionFlipX.create(t, s, cc.TRANSITION_ORIENTATION_LEFT_OVER);

cc.TransitionFlipX.create(t, s, cc.TRANSITION_ORIENTATION_RIGHT_OVER);

cc.TransitionFlipY.create(t, s, cc.TRANSITION_ORIENTATION_UP_OVER);

cc.TransitionFlipY.create(t, s, cc.TRANSITION_ORIENTATION_DOWN_OVER);

cc.TransitionFlipAngular.create(t, s, cc.TRANSITION_ORIENTATION_LEFT_OVER);

cc.TransitionFlipAngular.create(t, s, cc.TRANSITION_ORIENTATION_RIGHT_OVER);

cc.TransitionZoomFlipX.create(t, s, cc.TRANSITION_ORIENTATION_LEFT_OVER);

cc.TransitionZoomFlipX.create(t, s, cc.TRANSITION_ORIENTATION_RIGHT_OVER);

cc.TransitionZoomFlipY.create(t, s, cc.TRANSITION_ORIENTATION_UP_OVER);

cc.TransitionZoomFlipY.create(t, s, cc.TRANSITION_ORIENTATION_DOWN_OVER);

cc.TransitionZoomFlipAngular.create(t, s, cc.TRANSITION_ORIENTATION_LEFT_OVER);

cc.TransitionZoomFlipAngular.create(t, s, cc.TRANSITION_ORIENTATION_RIGHT_OVER);

cc.TransitionShrinkGrow.create(t, s);

cc.TransitionRotoZoom.create(t, s);

cc.TransitionMoveInL.create(t, s);

cc.TransitionMoveInR.create(t, s);

cc.TransitionMoveInT.create(t, s);

cc.TransitionMoveInB.create(t, s);

cc.TransitionSlideInL.create(t, s);

cc.TransitionSlideInR.create(t, s);

cc.TransitionSlideInT.create(t, s);

cc.TransitionSlideInB.create(t, s);

cc.TransitionCrossFade.create(t, s);

cc.TransitionProgressRadialCCW.create(t, s);

cc.TransitionProgressRadialCW.create(t, s);

cc.TransitionPageTurn.create(t, s, false);

cc.TransitionPageTurn.create(t, s, true);

cc.TransitionFadeTR.create(t, s);

cc.TransitionFadeBL.create(t, s);

cc.TransitionFadeUp.create(t, s);

cc.TransitionFadeDown.create(t, s);

cc.TransitionTurnOffTiles.create(t, s);

cc.TransitionSplitRows.create(t, s);

cc.TransitionSplitCols.create(t, s);