Transitions
Transitions are effects that we can use with replaceScene() to make it more interesting. They are a bit similar to Node Actions that we have seen before.
Here is a list of the transition related classes and methods:
// Transition Base Classes TransitionScene // Base class for Transition scenes. TransitionProgress // Base class for a progress transition. // Transition Easing Class TransitionEaseScene // This can ease the actions of the scene protocol. // Transition Classes TransitionFade // Fade out the outgoing scene and then fade in the incoming scene. TransitionFadeDown // Fade the tiles of the outgoing scene from the top to the bottom. TransitionFadeBL // Fade the tiles of the outgoing scene from the top-right corner to the bottom-left corner. TransitionFadeTR // Fade the tiles of the outgoing scene from the left-bottom corner the to top-right corner. TransitionFadeUp // Fade the tiles of the outgoing scene from the bottom to the top. TransitionCrossFade // Cross fades two scenes using the RenderTexture object. TransitionMoveInB // Move in from to the bottom the incoming scene. TransitionMoveInL // Move in from to the left the incoming scene. TransitionMoveInR // Move in from to the right the incoming scene. TransitionMoveInT // Move in from to the top the incoming scene. TransitionJumpZoom // Zoom out and jump the outgoing scene, and then jump and zoom in the incoming. TransitionPageTurn // A transition which peels back the bottom right hand corner of a scene to transition to the scene beneath it simulating a page turn. Needs an extra input! TransitionSlideInB // Slide in the incoming scene from the bottom border. TransitionSlideInL // Slide in the incoming scene from the left border. TransitionSlideInR // Slide in the incoming scene from the right border. TransitionSlideInT // Slide in the incoming scene from the top border. TransitionFlipX // Flips the screen horizontally. TransitionFlipY // Flips the screen vertically. TransitionZoomFlipX // Flips the screen horizontally doing a zoom out/in The front face is the outgoing scene and the back face is the incoming scene. TransitionZoomFlipY // Flips the screen vertically doing a little zooming out/in The front face is the outgoing scene and the back face is the incoming scene. TransitionFlipAngular // Flips the screen half horizontally and half vertically. TransitionZoomFlipAngular // Flips the screen half horizontally and half vertically doing a little zooming out/in. TransitionRotoZoom // Rotate and zoom out the outgoing scene, and then rotate and zoom in the incoming. TransitionSplitCols // The odd columns goes upwards while the even columns goes downwards. TransitionSplitRows // The odd rows goes to the left while the even rows goes to the right. TransitionShrinkGrow // Shrink the outgoing scene while grow the incoming scene. TransitionTurnOffTiles // Turn off the tiles of the outgoing scene in random order. TransitionSceneOriented // A Transition that supports orientation like. Needs an extra input! TransitionProgressInOut // Progresses form inside outwards TransitionProgressOutIn // Progresses form outside inwards TransitionProgressRadialCW // Progresses circular clock wise TransitionProgressRadialCCW // Progresses circular counter clock wise TransitionProgressVertical // Progresses vertically from top to bottom TransitionProgressHorizontal // Progresses horizontally from left to right // Other methods setTransitionTime // Set animate transition time between 3d animations getTransitionTime // Get animate transition time between 3d animations onExitTransitionDidStart // Override event TransitionDidStart onEnterTransitionDidFinish // Override event TransitionDidFinish setonEnterTransitionDidFinishCallback // Set the callback of event EnterTransitionDidFinish. getonEnterTransitionDidFinishCallback // Get the callback of event EnterTransitionDidFinish. setonExitTransitionDidStartCallback // Set the callback of event ExitTransitionDidStart. getonExitTransitionDidStartCallback // Get the callback of event ExitTransitionDidStart.
How To Use
To have your replace scene happen with a transition effect, all you have to do is to create an instance of the transition using the target scene and use that as the input scene for the replaceScene() method of the director.
Except two of the transition classes, all of them have a create method with this format:
static Transition* create (float duration, Scene *scene); // A sample create method.
Some of them need an extra input either as an optional or compulsory item:
static TransitionFade* create (float duration, Scene *scene, const Color3B &color); // Optional static TransitionPageTurn* create (float t, Scene *scene, bool backwards); // Compolsory static TransitionSceneOriented* create (float t, Scene *scene, Orientation orientation); // Compolsory
Example:
Take the schedule methods from our classes SceneA and SceneB in the scene creation example (previous post).
You can alter them to use transitions.
SceneA:
void SceneA::nextScene(float delta)
{
auto director = Director::getInstance();
auto scene = SceneB::createScene();
auto transition = TransitionFade::create(1.5, scene); // Create a transition
director->replaceScene(transition); // Use the transition here instead of scene
}
SceneB:
void SceneB::nextScene(float delta)
{
auto director = Director::getInstance();
auto scene = SceneA::createScene();
auto transition = TransitionFade::create(1.5, scene); // Create a transition
director->replaceScene(transition); // Use the transition here instead of scene
}
Now if you run your project, you will have your scenes replaced with the transition.
Be careful that the transition time (1.5 seconds here) must be smaller than the schedule update time (2 seconds here). Otherwise you will have a crash…
I could not make TransitionSceneOriented work! If you are reading this and know how to use it, please leave a comment at the bottom of the page so that I can learn it too. Thanks!
Samples
Here is a table of these transitions in action:
