11 | Cocos2D-JS | How to do scene transition

[Gurigraphics]

11 | How to do scene transition

Example scene transition on click or touch

    if (cc.rectContainsPoint(targetRectangle, location)) { 
    	cc.director.runScene( new Game.scenes[2].extend() );
    }

Example scene transition with effect

    if (cc.rectContainsPoint(targetRectangle, location)) { 
    	var transitionTime = 2; 
    	var nextScene = new Game.scenes[2].extend(); 
    	var transitionScene = new cc.TransitionProgressInOut(transitionTime, nextScene);
    }

Transition Progress Classes

var transitionScene = new cc.TransitionProgressInOut(transitionTime, nextScene); 
var transitionScene = new cc.TransitionProgressOutIn(transitionTime, nextScene); 
var transitionScene = new cc.TransitionProgressRadialCCW(transitionTime, nextScene); 
var transitionScene = new cc.TransitionProgressRadialCW(transitionTime, nextScene); 
var transitionScene = new cc.TransitionProgressVertical(transitionTime, nextScene); 
var transitionScene = new cc.TransitionProgressHorizontal(transitionTime, nextScene);

Others transitions classes

TransitionProgress
TransitionCrossFade
TransitionFade
TransitionFadeTR
TransitionJumpZoom
TransitionMoveInL
TransitionPageTurn
TransitionRotoZoom
TransitionSceneOriented
TransitionShrinkGrow
TransitionSlideInL
TransitionTurnOffTiles
TransitionSplitCols

Documentation C++
http://www.cocos2d-x.org/reference/native-cpp/V3.0alpha1/da/d00/group__transition.html