Guides
Guides
Start typing to search…

Scene Transitions

This page will cover all the transitions provided by Cocos for switching between scenes using transitions.

Scene transitions can be used to make switching between scenes more dynamic. Without transitions scenes switch instantly. Scene transitions take 2 parameters, the time the transition should take and the scene to transition to.

Note: transitions can only be used on pushing and replacing scenes not popping.

Cross Fade Transition - Cross fades two scenes using the RenderTexture Object.

Scene *scene = NewScene::createScene( );

Director::getInstance( )->replaceScene( TransitionCrossFade::create( 3.0, scene ) );
var scene = new NewScene( );

cc.director.runScene( new cc.TransitionCrossFade( 1.0, scene ) );
Transition Preview

Fade Transition - Fade out the outgoing scene and then fade in the incoming scene.

Scene *scene = NewScene::createScene( );

Director::getInstance( )->replaceScene( TransitionFade::create( 1.0, scene ) );
var scene = new NewScene( );

cc.director.runScene( new cc.TransitionFade( 1.0, scene ) );
Transition Preview

Fade transition can also take an optional third parameter to change the colour the scenes fade to and from in Cocos2d-x C++.

Director::getInstance( )->replaceScene( TransitionFade::create( 1.0, scene, Color3B::BLACK ) );

Director::getInstance( )->replaceScene( TransitionFade::create( 1.0, scene, Color3B::BLUE ) );

Director::getInstance( )->replaceScene( TransitionFade::create( 1.0, scene, Color3B::GRAY ) );

Director::getInstance( )->replaceScene( TransitionFade::create( 1.0, scene, Color3B::GREEN ) );

Director::getInstance( )->replaceScene( TransitionFade::create( 1.0, scene, Color3B::MAGENTA ) );

Director::getInstance( )->replaceScene( TransitionFade::create( 1.0, scene, Color3B::ORANGE ) );

Director::getInstance( )->replaceScene( TransitionFade::create( 1.0, scene, Color3B::RED ) );

Director::getInstance( )->replaceScene( TransitionFade::create( 1.0, scene, Color3B::WHITE ) );

Director::getInstance( )->replaceScene( TransitionFade::create( 1.0, scene, Color3B::YELLOW ) );

// Red, Green and Blue values range between 0 and 255
Director::getInstance( )->replaceScene( TransitionFade::create( 1.0, scene, Color3B( Red, Green, Blue ) ) );

Bottom Left Fade Transition - Fade the tiles of the outgoing scene from the top-right corner to the bottom-left corner.

Scene *scene = NewScene::createScene( );

Director::getInstance( )->replaceScene( TransitionFadeBL::create( 1.0, scene ) );
var scene = new NewScene( );

cc.director.runScene( new cc.TransitionFadeBL( 1.0, scene ) );
Transition Preview

Fade Down Transition - Fade the tiles of the outgoing scene from the top to the bottom.

Scene *scene = NewScene::createScene( );

Director::getInstance( )->replaceScene( TransitionFadeDown::create( 1.0, scene ) );
var scene = new NewScene( );

cc.director.runScene( new cc.TransitionFadeDown( 1.0, scene ) );
Transition Preview

Top Right Fade Transition - Fade the tiles of the outgoing scene from the left-bottom corner the to top-right corner.

Scene *scene = NewScene::createScene( );

Director::getInstance( )->replaceScene( TransitionFadeTR::create( 1.0, scene ) );
var scene = new NewScene( );

cc.director.runScene( new cc.TransitionFadeTR( 1.0, scene ) );
Transition Preview

Fade Up Transition - Fade the tiles of the outgoing scene from the bottom to the top.

Scene *scene = NewScene::createScene( );

Director::getInstance( )->replaceScene( TransitionFadeUp::create( 1.0, scene ) );
var scene = new NewScene( );

cc.director.runScene( new cc.TransitionFadeUp( 1.0, scene ) );
Transition Preview

Flip Angular Transition - Flips the screen half horizontally and half vertically. The front face is the outgoing scene and the back face is the incoming scene.

Scene *scene = NewScene::createScene( );

Director::getInstance( )->replaceScene( TransitionFlipAngular::create( 1.0, scene ) );
var scene = new NewScene( );

cc.director.runScene( new cc.TransitionFlipAngular( 1.0, scene, cc.TRANSITION_ORIENTATION_UP_OVER ) );
Transition Preview

Flip angular transition can also take an optional third parameter to change the orientation in Cocos2d-x C++ but in Cocos2d-JS it is required.

Director::getInstance( )->replaceScene( TransitionFlipAngular::create( 1.0, scene, TransitionScene::Orientation::DOWN_OVER ) );

Director::getInstance( )->replaceScene( TransitionFlipAngular::create( 1.0, scene, TransitionScene::Orientation::LEFT_OVER ) );

Director::getInstance( )->replaceScene( TransitionFlipAngular::create( 1.0, scene, TransitionScene::Orientation::UP_OVER ) );

Director::getInstance( )->replaceScene( TransitionFlipAngular::create( 1.0, scene, TransitionScene::Orientation::RIGHT_OVER ) );
cc.director.runScene( new cc.TransitionFlipAngular( 1.0, scene, cc.TRANSITION_ORIENTATION_DOWN_OVER ) );

cc.director.runScene( new cc.TransitionFlipAngular( 1.0, scene, cc.TRANSITION_ORIENTATION_LEFT_OVER ) );

cc.director.runScene( new cc.TransitionFlipAngular( 1.0, scene, cc.TRANSITION_ORIENTATION_UP_OVER ) );

cc.director.runScene( new cc.TransitionFlipAngular( 1.0, scene, cc.TRANSITION_ORIENTATION_RIGHT_OVER ) );

Flip X Transition - Flips the screen horizontally. The front face is the outgoing scene and the back face is the incoming scene.

Scene *scene = NewScene::createScene( );

Director::getInstance( )->replaceScene( TransitionFlipX::create( 1.0, scene ) );
var scene = new NewScene( );

cc.director.runScene( new cc.TransitionFlipX( 1.0, scene, cc.TRANSITION_ORIENTATION_UP_OVER ) );
Transition Preview

Flip x transition can also take an optional third parameter to change the orientation in Cocos2d-x C++ but in Cocos2d-JS it is required.

Director::getInstance( )->replaceScene( TransitionFlipX::create( 1.0, scene, TransitionScene::Orientation::DOWN_OVER ) );

Director::getInstance( )->replaceScene( TransitionFlipX::create( 1.0, scene, TransitionScene::Orientation::LEFT_OVER ) );

Director::getInstance( )->replaceScene( TransitionFlipX::create( 1.0, scene, TransitionScene::Orientation::UP_OVER ) );

Director::getInstance( )->replaceScene( TransitionFlipX::create( 1.0, scene, TransitionScene::Orientation::RIGHT_OVER ) );
cc.director.runScene( new cc.TransitionFlipX( 1.0, scene, cc.TRANSITION_ORIENTATION_DOWN_OVER ) );

cc.director.runScene( new cc.TransitionFlipX( 1.0, scene, cc.TRANSITION_ORIENTATION_LEFT_OVER ) );

cc.director.runScene( new cc.TransitionFlipX( 1.0, scene, cc.TRANSITION_ORIENTATION_UP_OVER ) );

cc.director.runScene( new cc.TransitionFlipX( 1.0, scene, cc.TRANSITION_ORIENTATION_RIGHT_OVER ) );

Flip Y Transition - Flips the screen vertically. The front face is the outgoing scene and the back face is the incoming scene.

Scene *scene = NewScene::createScene( );

Director::getInstance( )->replaceScene( TransitionFlipY::create( 1.0, scene ) );
var scene = new NewScene( );

cc.director.runScene( new cc.TransitionFlipY( 1.0, scene, cc.TRANSITION_ORIENTATION_UP_OVER ) );
Transition Preview

Flip y transition can also take an optional third parameter to change the orientation in Cocos2d-x C++ but in Cocos2d-JS it is required.

Director::getInstance( )->replaceScene( TransitionFlipY::create( 1.0, scene, TransitionScene::Orientation::DOWN_OVER ) );

Director::getInstance( )->replaceScene( TransitionFlipY::create( 1.0, scene, TransitionScene::Orientation::LEFT_OVER ) );

Director::getInstance( )->replaceScene( TransitionFlipY::create( 1.0, scene, TransitionScene::Orientation::UP_OVER ) );

Director::getInstance( )->replaceScene( TransitionFlipY::create( 1.0, scene, TransitionScene::Orientation::RIGHT_OVER ) );
cc.director.runScene( new cc.TransitionFlipY( 1.0, scene, cc.TRANSITION_ORIENTATION_DOWN_OVER ) );

cc.director.runScene( new cc.TransitionFlipY( 1.0, scene, cc.TRANSITION_ORIENTATION_LEFT_OVER ) );

cc.director.runScene( new cc.TransitionFlipY( 1.0, scene, cc.TRANSITION_ORIENTATION_UP_OVER ) );

cc.director.runScene( new cc.TransitionFlipY( 1.0, scene, cc.TRANSITION_ORIENTATION_RIGHT_OVER ) );

Jump Zoom Transition - Zoom out and jump the outgoing scene, and then jump and zoom in the incoming.

Scene *scene = NewScene::createScene( );
    
Director::getInstance( )->replaceScene( TransitionJumpZoom::create( 1.0, scene ) );
var scene = new NewScene( );

cc.director.runScene( new cc.TransitionJumpZoom( 1.0, scene ) );
Transition Preview

Move In Bottom Transition - Move in from to the bottom the incoming scene.

Scene *scene = NewScene::createScene( );

Director::getInstance( )->replaceScene( TransitionMoveInB::create( 1.0, scene ) );
var scene = new NewScene( );

cc.director.runScene( new cc.TransitionMoveInB(1.0, scene ) );
Transition Preview

Move In Left Transition - Move in from to the left the incoming scene.

Scene *scene = NewScene::createScene( );

Director::getInstance( )->replaceScene( TransitionMoveInL::create( 1.0, scene ) );
var scene = new NewScene( );

cc.director.runScene( new cc.TransitionMoveInL(1.0, scene ) );
Transition Preview

Move In Right Transition - Move in from to the right the incoming scene.

Scene *scene = NewScene::createScene( );

Director::getInstance( )->replaceScene( TransitionMoveInR::create( 1.0, scene ) );
var scene = new NewScene( );

cc.director.runScene( new cc.TransitionMoveInR(1.0, scene ) );
Transition Preview

Move In Top Transition - Move in from to the top the incoming scene.

Scene *scene = NewScene::createScene( );

Director::getInstance( )->replaceScene( TransitionMoveInT::create( 1.0, scene ) );
var scene = new NewScene( );

cc.director.runScene( new cc.TransitionMoveInT(1.0, scene ) );
Transition Preview

Page Turn Transition - A transition which peels back the bottom right hand corner of a scene to transition to the scene beneath it simulating a page turn.

Scene *scene = NewScene::createScene( );

Director::getInstance( )->replaceScene( TransitionPageTurn::create( 1.0, scene, true ) );
var scene = new NewScene( );

cc.director.runScene( new cc.TransitionPageTurn( 1.0, scene, true ) );
Transition Preview

Page turn transition can also take an optional third parameter to specify if the transition is backwards in Cocos2d-x C++ but in Cocos2d-JS it is required.

Horizontal Progress Transition - A clock-wise radial transition to the next scene.

Scene *scene = NewScene::createScene( );

Director::getInstance( )->replaceScene( TransitionProgressHorizontal::create( 1.0, scene ) );
var scene = new NewScene( );

cc.director.runScene( new cc.TransitionProgressHorizontal( 1.0, scene ) );
Transition Preview

Progress In Out Transition

Scene *scene = NewScene::createScene( );

Director::getInstance( )->replaceScene( TransitionProgressInOut::create( 1.0, scene ) );
var scene = new NewScene( );
	
cc.director.runScene( new cc.TransitionProgressInOut( 1.0, scene ) );
Transition Preview

Progress Out In Transition

Scene *scene = NewScene::createScene( );

Director::getInstance( )->replaceScene( TransitionProgressOutIn::create( 1.0, scene ) );
var scene = new NewScene( );

cc.director.runScene( new cc.TransitionProgressOutIn( 1.0, scene ) );
Transition Preview

Radial Counter Clock-Wise Transition - A counter clock-wise radial transition to the next scene.

Scene *scene = NewScene::createScene( );

Director::getInstance( )->replaceScene( TransitionProgressRadialCCW::create( 1.0, scene ) );
var scene = new NewScene( );

cc.director.runScene( new cc.TransitionProgressRadialCCW( 1.0, scene ) );
Transition Preview

Radial Clock-Wise Transition - A clock-wise radial transition to the next scene.

Scene *scene = NewScene::createScene( );

Director::getInstance( )->replaceScene( TransitionProgressRadialCW::create( 1.0, scene ) );
var scene = new NewScene( );

cc.director.runScene( new cc.TransitionProgressRadialCW( 1.0, scene ) );
Transition Preview

Vertical Progress Transition - A clock-wise radial transition to the next scene.

Scene *scene = NewScene::createScene( );
    
Director::getInstance( )->replaceScene( TransitionProgressVertical::create( 1.0, scene ) );
var scene = new NewScene( );

cc.director.runScene( new cc.TransitionProgressVertical( 1.0, scene ) );
Transition Preview

Rotate and Zoom Transition - Rotate and zoom out the outgoing scene, and then rotate and zoom in the incoming scene.

Scene *scene = NewScene::createScene( );

Director::getInstance( )->replaceScene( TransitionRotoZoom::create( 1.0, scene ) );
var scene = new NewScene( );

cc.director.runScene( new cc.TransitionRotoZoom( 1.0, scene ) );
Transition Preview

Shrink and Grow Transition - Shrink the outgoing scene while growing the incoming scene.

Scene *scene = NewScene::createScene( );

Director::getInstance( )->replaceScene( TransitionShrinkGrow::create( 1.0, scene ) );
var scene = new NewScene( );

cc.director.runScene( new cc.TransitionShrinkGrow( 1.0, scene ) );
Transition Preview

Slide In From Bottom Transition - Slide in the incoming scene from the bottom border.

Scene *scene = NewScene::createScene( );

Director::getInstance( )->replaceScene( TransitionSlideInB::create( 1.0, scene ) );
var scene = new NewScene( );

cc.director.runScene( new cc.TransitionSlideInB( 1.0, scene ) );
Transition Preview

Slide In From Left Transition - Slide in the incoming scene from the left border.

Scene *scene = NewScene::createScene( );

Director::getInstance( )->replaceScene( TransitionSlideInL::create( 1.0, scene ) );
var scene = new NewScene( );

cc.director.runScene( new cc.TransitionSlideInL( 1.0, scene ) );
Transition Preview

Slide In From Right Transition - Slide in the incoming scene from the right border.

Scene *scene = NewScene::createScene( );

Director::getInstance( )->replaceScene( TransitionSlideInR::create( 1.0, scene ) );
var scene = new NewScene( );

cc.director.runScene( new cc.TransitionSlideInR( 1.0, scene ) );
Transition Preview

Slide In From Top Transition - Slide in the incoming scene from the top border.

Scene *scene = NewScene::createScene( );

Director::getInstance( )->replaceScene( TransitionSlideInT::create( 1.0, scene ) );
var scene = new NewScene( );

cc.director.runScene( new cc.TransitionSlideInT( 1.0, scene ) );
Transition Preview

Split Column Transition - The odd columns goes upwards while the even columns goes downwards.

Scene *scene = NewScene::createScene( );

Director::getInstance( )->replaceScene( TransitionSplitCols::create( 1.0, scene ) );
var scene = new NewScene( );

cc.director.runScene( new cc.TransitionSplitCols( 1.0, scene ) );
Transition Preview

Split Row Transition - The odd rows goes to the left while the even rows goes to the right.

Scene *scene = NewScene::createScene( );

Director::getInstance( )->replaceScene( TransitionSplitRows::create( 1.0, scene ) );
var scene = new NewScene( );

cc.director.runScene( new cc.TransitionSplitRows( 1.0, scene ) );
Transition Preview

Turn Off The Tiles Transition - Turn of the tiles of the outgoing scene in random order.

Scene *scene = NewScene::createScene( );

Director::getInstance( )->replaceScene( TransitionTurnOffTiles::create( 1.0, scene ) );
var scene = new NewScene( );

cc.director.runScene( new cc.TransitionTurnOffTiles( 1.0, scene ) );
Transition Preview

Zoom Flip Angular Transition - Flips the screen half horizontally and half vertically doing a little zooming out/in. The front face is the outgoing scene and the back face is the incoming scene.

Scene *scene = NewScene::createScene( );

Director::getInstance( )->replaceScene( TransitionZoomFlipAngular::create( 1.0, scene ) );
var scene = new NewScene( );

cc.director.runScene( new cc.TransitionZoomFlipAngular( 1.0, scene, cc.TRANSITION_ORIENTATION_DOWN_OVER ) );
Transition Preview

Zoom flip angular transition can also take an optional third parameter to change the orientation in Cocos2d-x C++ but in Cocos2d-JS it is required.

Director::getInstance( )->replaceScene( TransitionZoomFlipAngular::create( 1.0, scene, TransitionScene::Orientation::DOWN_OVER ) );

Director::getInstance( )->replaceScene( TransitionZoomFlipAngular::create( 1.0, scene, TransitionScene::Orientation::LEFT_OVER ) );

Director::getInstance( )->replaceScene( TransitionZoomFlipAngular::create( 1.0, scene, TransitionScene::Orientation::RIGHT_OVER ) );

Director::getInstance( )->replaceScene( TransitionZoomFlipAngular::create( 1.0, scene, TransitionScene::Orientation::UP_OVER ) );
cc.director.runScene( new cc.TransitionZoomFlipAngular( 1.0, scene, cc.TRANSITION_ORIENTATION_DOWN_OVER ) );

cc.director.runScene( new cc.TransitionZoomFlipAngular( 1.0, scene, cc.TRANSITION_ORIENTATION_LEFT_OVER ) );

cc.director.runScene( new cc.TransitionZoomFlipAngular( 1.0, scene, cc.TRANSITION_ORIENTATION_RIGHT_OVER ) );

cc.director.runScene( new cc.TransitionZoomFlipAngular( 1.0, scene, cc.TRANSITION_ORIENTATION_UP_OVER ) );

Zoom Flip X Transition - Flips the screen horizontally doing a zooming out/in. The front face is the outgoing scene and the back face is the incoming scene.

Scene *scene = NewScene::createScene( );

Director::getInstance( )->replaceScene( TransitionZoomFlipX::create( 1.0, scene ) );
var scene = new NewScene( );

cc.director.runScene( new cc.TransitionZoomFlipX( 1.0, scene, cc.TRANSITION_ORIENTATION_DOWN_OVER ) );
Transition Preview

Zoom flip x transition can also take an optional third parameter to change the orientation in Cocos2d-x C++ but in Cocos2d-JS it is required.

Director::getInstance( )->replaceScene( TransitionZoomFlipX::create( 1.0, scene, TransitionScene::Orientation::DOWN_OVER ) );

Director::getInstance( )->replaceScene( TransitionZoomFlipX::create( 1.0, scene, TransitionScene::Orientation::LEFT_OVER ) );

Director::getInstance( )->replaceScene( TransitionZoomFlipX::create( 1.0, scene, TransitionScene::Orientation::RIGHT_OVER ) );

Director::getInstance( )->replaceScene( TransitionZoomFlipX::create( 1.0, scene, TransitionScene::Orientation::UP_OVER ) );
cc.director.runScene( new cc.TransitionZoomFlipX( 1.0, scene, cc.TRANSITION_ORIENTATION_DOWN_OVER ) );

cc.director.runScene( new cc.TransitionZoomFlipX( 1.0, scene, cc.TRANSITION_ORIENTATION_LEFT_OVER ) );

cc.director.runScene( new cc.TransitionZoomFlipX( 1.0, scene, cc.TRANSITION_ORIENTATION_RIGHT_OVER ) );

cc.director.runScene( new cc.TransitionZoomFlipX( 1.0, scene, cc.TRANSITION_ORIENTATION_UP_OVER ) );

Zoom Flip Y Transition - Flips the screen vertically doing a zooming out/in. The front face is the outgoing scene and the back face is the incoming scene.

Scene *scene = NewScene::createScene( );

Director::getInstance( )->replaceScene( TransitionZoomFlipY::create( 1.0, scene ) );
var scene = new NewScene( );

cc.director.runScene( new cc.TransitionZoomFlipY( 1.0, scene, cc.TRANSITION_ORIENTATION_DOWN_OVER ) );
Transition Preview

Zoom flip y transition can also take an optional third parameter to change the orientation in Cocos2d-x C++ but in Cocos2d-JS it is required.

Director::getInstance( )->replaceScene( TransitionZoomFlipY::create( 1.0, scene, TransitionScene::Orientation::DOWN_OVER ) );

Director::getInstance( )->replaceScene( TransitionZoomFlipY::create( 1.0, scene, TransitionScene::Orientation::LEFT_OVER ) );

Director::getInstance( )->replaceScene( TransitionZoomFlipY::create( 1.0, scene, TransitionScene::Orientation::RIGHT_OVER ) );

Director::getInstance( )->replaceScene( TransitionZoomFlipY::create( 1.0, scene, TransitionScene::Orientation::UP_OVER ) );
cc.director.runScene( new cc.TransitionZoomFlipY( 1.0, scene, cc.TRANSITION_ORIENTATION_DOWN_OVER ) );

cc.director.runScene( new cc.TransitionZoomFlipY( 1.0, scene, cc.TRANSITION_ORIENTATION_LEFT_OVER ) );

cc.director.runScene( new cc.TransitionZoomFlipY( 1.0, scene, cc.TRANSITION_ORIENTATION_RIGHT_OVER ) );

cc.director.runScene( new cc.TransitionZoomFlipY( 1.0, scene, cc.TRANSITION_ORIENTATION_UP_OVER ) );

Updated about 2 months ago