{"_id":"54679d8498b6840800268987","category":{"_id":"5463e333447e0a100024a08b","project":"5463e333447e0a100024a087","pages":["5463e334447e0a100024a08d","54646a285871e90800f50174","54667e7af2b6390800dfd82a","54679c8c98b6840800268982","54679d8498b6840800268987","546a2ed0394c861a00c3a413","546b6a4862515a14007ebbba","547b1c2e7eec0f080099e1dd","55d33d90b9ef4435006dec70","56570c764d1c720d001f51bb"],"version":"5463e333447e0a100024a08a","__v":10,"sync":{"url":"","isSync":false},"reference":false,"createdAt":"2014-11-12T22:46:11.951Z","from_sync":false,"order":1,"slug":"documentation","title":"Documentation"},"is_link":false,"project":"5463e333447e0a100024a087","user":"54639d06447e0a1000249f7f","__v":194,"version":{"_id":"5463e333447e0a100024a08a","project":"5463e333447e0a100024a087","__v":6,"createdAt":"2014-11-12T22:46:11.486Z","releaseDate":"2014-11-12T22:46:11.486Z","categories":["5463e333447e0a100024a08b","54645c365871e90800f50151","547b1c5a4366a708001b3b50","547b1cdf4366a708001b3b5a","54e3bef8464a9c3700f7ca67","54ec651d7ab3172d00c01ab7"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"1.0.0","version":"1.0"},"updates":[],"next":{"pages":[],"description":""},"createdAt":"2014-11-15T18:37:56.048Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"basic_auth":false,"results":{"codes":[]},"try":true,"auth":"never","params":[],"url":""},"isReference":false,"order":4,"body":"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.\n\nNote: *transitions can only be used on pushing and replacing scenes not popping.*\n\n##**Cross Fade Transition** - Cross fades two scenes using the RenderTexture Object. \n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"Scene *scene = NewScene::createScene( );\\n\\nDirector::getInstance( )->replaceScene( TransitionCrossFade::create( 3.0, scene ) );\",\n      \"language\": \"cplusplus\",\n      \"name\": \"Cocos2d-x C++\"\n    },\n    {\n      \"code\": \"var scene = new NewScene( );\\n\\ncc.director.runScene( new cc.TransitionCrossFade( 1.0, scene ) );\",\n      \"language\": \"javascript\",\n      \"name\": \"Cocos2d-JS\"\n    }\n  ]\n}\n[/block]\n\n[block:html]\n{\n  \"html\": \"<center><strong>Transition Preview</strong></center>\\n\\n<center>\\n\\t<video controls=\\\"\\\" preload=\\\"none\\\" name=\\\"media\\\" width=\\\"300\\\" poster=\\\"http://thumbs.gfycat.com/OldWarpedAlpinegoat-thumb100.jpg\\\">\\n\\t<source src=\\\"http://zippy.gfycat.com/OldWarpedAlpinegoat.webm\\\" type=\\\"video/webm\\\" />\\n\\t<source src=\\\"http://zippy.gfycat.com/OldWarpedAlpinegoat.ogv\\\" type=\\\"video/ogg\\\" />\\n\\t<source src=\\\"http://zippy.gfycat.com/OldWarpedAlpinegoat.mp4\\\" type=\\\"video/mp4\\\" />\\n\\t<p>Your web browser doesn't support this video preview, please download a new browser such as <a href=\\\"http://www.google.co.uk/intl/en_uk/chrome/browser/\\\">Google Chrome</a>.</p>\\n\\t</video>\\n</center>\"\n}\n[/block]\n##**Fade Transition** - Fade out the outgoing scene and then fade in the incoming scene. \n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"Scene *scene = NewScene::createScene( );\\n\\nDirector::getInstance( )->replaceScene( TransitionFade::create( 1.0, scene ) );\",\n      \"language\": \"cplusplus\",\n      \"name\": \"Cocos2d-x C++\"\n    },\n    {\n      \"code\": \"var scene = new NewScene( );\\n\\ncc.director.runScene( new cc.TransitionFade( 1.0, scene ) );\",\n      \"language\": \"javascript\",\n      \"name\": \"Cocos2d-JS\"\n    }\n  ]\n}\n[/block]\n\n[block:html]\n{\n  \"html\": \"<center><strong>Transition Preview</strong></center>\\n\\n<center>\\n\\t<video controls=\\\"\\\" preload=\\\"none\\\" name=\\\"media\\\" width=\\\"300\\\" poster=\\\"http://thumbs.gfycat.com/EducatedSeriousKitten-thumb100.jpg\\\">\\n\\t<source src=\\\"http://zippy.gfycat.com/EducatedSeriousKitten.webm\\\" type=\\\"video/webm\\\" />\\n\\t<source src=\\\"http://zippy.gfycat.com/EducatedSeriousKitten.ogv\\\" type=\\\"video/ogg\\\" />\\n\\t<source src=\\\"http://zippy.gfycat.com/EducatedSeriousKitten.mp4\\\" type=\\\"video/mp4\\\" />\\n\\t<p>Your web browser doesn't support this video preview, please download a new browser such as <a href=\\\"http://www.google.co.uk/intl/en_uk/chrome/browser/\\\">Google Chrome</a>.</p>\\n\\t</video>\\n</center>\"\n}\n[/block]\nFade transition can also take an optional third parameter to change the colour the scenes fade to and from in Cocos2d-x C++.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"Director::getInstance( )->replaceScene( TransitionFade::create( 1.0, scene, Color3B::BLACK ) );\\n\\nDirector::getInstance( )->replaceScene( TransitionFade::create( 1.0, scene, Color3B::BLUE ) );\\n\\nDirector::getInstance( )->replaceScene( TransitionFade::create( 1.0, scene, Color3B::GRAY ) );\\n\\nDirector::getInstance( )->replaceScene( TransitionFade::create( 1.0, scene, Color3B::GREEN ) );\\n\\nDirector::getInstance( )->replaceScene( TransitionFade::create( 1.0, scene, Color3B::MAGENTA ) );\\n\\nDirector::getInstance( )->replaceScene( TransitionFade::create( 1.0, scene, Color3B::ORANGE ) );\\n\\nDirector::getInstance( )->replaceScene( TransitionFade::create( 1.0, scene, Color3B::RED ) );\\n\\nDirector::getInstance( )->replaceScene( TransitionFade::create( 1.0, scene, Color3B::WHITE ) );\\n\\nDirector::getInstance( )->replaceScene( TransitionFade::create( 1.0, scene, Color3B::YELLOW ) );\\n\\n// Red, Green and Blue values range between 0 and 255\\nDirector::getInstance( )->replaceScene( TransitionFade::create( 1.0, scene, Color3B( Red, Green, Blue ) ) );\",\n      \"language\": \"cplusplus\",\n      \"name\": \"Cocos2d-x C++\"\n    }\n  ]\n}\n[/block]\n\n##**Bottom Left Fade Transition** - Fade the tiles of the outgoing scene from the top-right corner to the bottom-left corner. \n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"Scene *scene = NewScene::createScene( );\\n\\nDirector::getInstance( )->replaceScene( TransitionFadeBL::create( 1.0, scene ) );\",\n      \"language\": \"cplusplus\",\n      \"name\": \"Cocos2d-x C++\"\n    },\n    {\n      \"code\": \"var scene = new NewScene( );\\n\\ncc.director.runScene( new cc.TransitionFadeBL( 1.0, scene ) );\",\n      \"language\": \"javascript\",\n      \"name\": \"Cocos2d-JS\"\n    }\n  ]\n}\n[/block]\n\n[block:html]\n{\n  \"html\": \"<center><strong>Transition Preview</strong></center>\\n\\n<center>\\n\\t<video controls=\\\"\\\" preload=\\\"none\\\" name=\\\"media\\\" width=\\\"300\\\" poster=\\\"http://thumbs.gfycat.com/EvergreenBlushingAmericanbadger-thumb100.jpg\\\">\\n\\t<source src=\\\"http://zippy.gfycat.com/EvergreenBlushingAmericanbadger.webm\\\" type=\\\"video/webm\\\" />\\n\\t<source src=\\\"http://zippy.gfycat.com/EvergreenBlushingAmericanbadger.ogv\\\" type=\\\"video/ogg\\\" />\\n\\t<source src=\\\"http://zippy.gfycat.com/EvergreenBlushingAmericanbadger.mp4\\\" type=\\\"video/mp4\\\" />\\n\\t<p>Your web browser doesn't support this video preview, please download a new browser such as <a href=\\\"http://www.google.co.uk/intl/en_uk/chrome/browser/\\\">Google Chrome</a>.</p>\\n\\t</video>\\n</center>\"\n}\n[/block]\n##**Fade Down Transition** - Fade the tiles of the outgoing scene from the top to the bottom. \n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"Scene *scene = NewScene::createScene( );\\n\\nDirector::getInstance( )->replaceScene( TransitionFadeDown::create( 1.0, scene ) );\",\n      \"language\": \"cplusplus\",\n      \"name\": \"Cocos2d-x C++\"\n    },\n    {\n      \"code\": \"var scene = new NewScene( );\\n\\ncc.director.runScene( new cc.TransitionFadeDown( 1.0, scene ) );\",\n      \"language\": \"javascript\",\n      \"name\": \"Cocos2d-JS\"\n    }\n  ]\n}\n[/block]\n\n[block:html]\n{\n  \"html\": \"<center><strong>Transition Preview</strong></center>\\n\\n<center>\\n\\t<video controls=\\\"\\\" preload=\\\"none\\\" name=\\\"media\\\" width=\\\"300\\\" poster=\\\"http://thumbs.gfycat.com/DaringBrokenEmeraldtreeskink-thumb100.jpg\\\">\\n\\t<source src=\\\"http://zippy.gfycat.com/DaringBrokenEmeraldtreeskink.webm\\\" type=\\\"video/webm\\\" />\\n\\t<source src=\\\"http://zippy.gfycat.com/DaringBrokenEmeraldtreeskink.ogv\\\" type=\\\"video/ogg\\\" />\\n\\t<source src=\\\"http://zippy.gfycat.com/DaringBrokenEmeraldtreeskink.mp4\\\" type=\\\"video/mp4\\\" />\\n\\t<p>Your web browser doesn't support this video preview, please download a new browser such as <a href=\\\"http://www.google.co.uk/intl/en_uk/chrome/browser/\\\">Google Chrome</a>.</p>\\n\\t</video>\\n</center>\"\n}\n[/block]\n##**Top Right Fade Transition** - Fade the tiles of the outgoing scene from the left-bottom corner the to top-right corner. \n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"Scene *scene = NewScene::createScene( );\\n\\nDirector::getInstance( )->replaceScene( TransitionFadeTR::create( 1.0, scene ) );\",\n      \"language\": \"cplusplus\",\n      \"name\": \"Cocos2d-x C++\"\n    },\n    {\n      \"code\": \"var scene = new NewScene( );\\n\\ncc.director.runScene( new cc.TransitionFadeTR( 1.0, scene ) );\",\n      \"language\": \"javascript\",\n      \"name\": \"Cocos2d-JS\"\n    }\n  ]\n}\n[/block]\n\n[block:html]\n{\n  \"html\": \"<center><strong>Transition Preview</strong></center>\\n\\n<center>\\n\\t<video controls=\\\"\\\" preload=\\\"none\\\" name=\\\"media\\\" width=\\\"300\\\" poster=\\\"http://thumbs.gfycat.com/DetailedSpitefulCusimanse-thumb100.jpg\\\">\\n\\t<source src=\\\"http://zippy.gfycat.com/DetailedSpitefulCusimanse.webm\\\" type=\\\"video/webm\\\" />\\n\\t<source src=\\\"http://zippy.gfycat.com/DetailedSpitefulCusimanse.ogv\\\" type=\\\"video/ogg\\\" />\\n\\t<source src=\\\"http://zippy.gfycat.com/DetailedSpitefulCusimanse.mp4\\\" type=\\\"video/mp4\\\" />\\n\\t<p>Your web browser doesn't support this video preview, please download a new browser such as <a href=\\\"http://www.google.co.uk/intl/en_uk/chrome/browser/\\\">Google Chrome</a>.</p>\\n\\t</video>\\n</center>\"\n}\n[/block]\n##**Fade Up Transition** - Fade the tiles of the outgoing scene from the bottom to the top. \n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"Scene *scene = NewScene::createScene( );\\n\\nDirector::getInstance( )->replaceScene( TransitionFadeUp::create( 1.0, scene ) );\",\n      \"language\": \"cplusplus\",\n      \"name\": \"Cocos2d-x C++\"\n    },\n    {\n      \"code\": \"var scene = new NewScene( );\\n\\ncc.director.runScene( new cc.TransitionFadeUp( 1.0, scene ) );\",\n      \"language\": \"javascript\",\n      \"name\": \"Cocos2d-JS\"\n    }\n  ]\n}\n[/block]\n\n[block:html]\n{\n  \"html\": \"<center><strong>Transition Preview</strong></center>\\n\\n<center>\\n\\t<video controls=\\\"\\\" preload=\\\"none\\\" name=\\\"media\\\" width=\\\"300\\\" poster=\\\"http://thumbs.gfycat.com/FarJointAmericancicada-thumb100.jpg\\\">\\n\\t<source src=\\\"http://zippy.gfycat.com/FarJointAmericancicada.webm\\\" type=\\\"video/webm\\\" />\\n\\t<source src=\\\"http://zippy.gfycat.com/FarJointAmericancicada.ogv\\\" type=\\\"video/ogg\\\" />\\n\\t<source src=\\\"http://zippy.gfycat.com/FarJointAmericancicada.mp4\\\" type=\\\"video/mp4\\\" />\\n\\t<p>Your web browser doesn't support this video preview, please download a new browser such as <a href=\\\"http://www.google.co.uk/intl/en_uk/chrome/browser/\\\">Google Chrome</a>.</p>\\n\\t</video>\\n</center>\"\n}\n[/block]\n##**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.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"Scene *scene = NewScene::createScene( );\\n\\nDirector::getInstance( )->replaceScene( TransitionFlipAngular::create( 1.0, scene ) );\",\n      \"language\": \"cplusplus\",\n      \"name\": \"Cocos2d-x C++\"\n    },\n    {\n      \"code\": \"var scene = new NewScene( );\\n\\ncc.director.runScene( new cc.TransitionFlipAngular( 1.0, scene, cc.TRANSITION_ORIENTATION_UP_OVER ) );\",\n      \"language\": \"javascript\",\n      \"name\": \"Cocos2d-JS\"\n    }\n  ]\n}\n[/block]\n\n[block:html]\n{\n  \"html\": \"<center><strong>Transition Preview</strong></center>\\n\\n<center>\\n\\t<video controls=\\\"\\\" preload=\\\"none\\\" name=\\\"media\\\" width=\\\"300\\\" poster=\\\"http://thumbs.gfycat.com/EagerExemplaryGermanshorthairedpointer-thumb100.jpg\\\">\\n\\t<source src=\\\"http://zippy.gfycat.com/EagerExemplaryGermanshorthairedpointer.webm\\\" type=\\\"video/webm\\\" />\\n\\t<source src=\\\"http://zippy.gfycat.com/EagerExemplaryGermanshorthairedpointer.ogv\\\" type=\\\"video/ogg\\\" />\\n\\t<source src=\\\"http://zippy.gfycat.com/EagerExemplaryGermanshorthairedpointer.mp4\\\" type=\\\"video/mp4\\\" />\\n\\t<p>Your web browser doesn't support this video preview, please download a new browser such as <a href=\\\"http://www.google.co.uk/intl/en_uk/chrome/browser/\\\">Google Chrome</a>.</p>\\n\\t</video>\\n</center>\"\n}\n[/block]\nFlip angular transition can also take an optional third parameter to change the orientation in Cocos2d-x C++ but in Cocos2d-JS it is required. \n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"Director::getInstance( )->replaceScene( TransitionFlipAngular::create( 1.0, scene, TransitionScene::Orientation::DOWN_OVER ) );\\n\\nDirector::getInstance( )->replaceScene( TransitionFlipAngular::create( 1.0, scene, TransitionScene::Orientation::LEFT_OVER ) );\\n\\nDirector::getInstance( )->replaceScene( TransitionFlipAngular::create( 1.0, scene, TransitionScene::Orientation::UP_OVER ) );\\n\\nDirector::getInstance( )->replaceScene( TransitionFlipAngular::create( 1.0, scene, TransitionScene::Orientation::RIGHT_OVER ) );\",\n      \"language\": \"cplusplus\",\n      \"name\": \"Cocos2d-x C++\"\n    },\n    {\n      \"code\": \"cc.director.runScene( new cc.TransitionFlipAngular( 1.0, scene, cc.TRANSITION_ORIENTATION_DOWN_OVER ) );\\n\\ncc.director.runScene( new cc.TransitionFlipAngular( 1.0, scene, cc.TRANSITION_ORIENTATION_LEFT_OVER ) );\\n\\ncc.director.runScene( new cc.TransitionFlipAngular( 1.0, scene, cc.TRANSITION_ORIENTATION_UP_OVER ) );\\n\\ncc.director.runScene( new cc.TransitionFlipAngular( 1.0, scene, cc.TRANSITION_ORIENTATION_RIGHT_OVER ) );\",\n      \"language\": \"javascript\",\n      \"name\": \"Cocos2d-JS\"\n    }\n  ]\n}\n[/block]\n##**Flip X Transition** - Flips the screen horizontally. The front face is the outgoing scene and the back face is the incoming scene.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"Scene *scene = NewScene::createScene( );\\n\\nDirector::getInstance( )->replaceScene( TransitionFlipX::create( 1.0, scene ) );\",\n      \"language\": \"cplusplus\",\n      \"name\": \"Cocos2d-x C++\"\n    },\n    {\n      \"code\": \"var scene = new NewScene( );\\n\\ncc.director.runScene( new cc.TransitionFlipX( 1.0, scene, cc.TRANSITION_ORIENTATION_UP_OVER ) );\",\n      \"language\": \"javascript\",\n      \"name\": \"Cocos2d-JS\"\n    }\n  ]\n}\n[/block]\n\n[block:html]\n{\n  \"html\": \"<center><strong>Transition Preview</strong></center>\\n\\n<center>\\n\\t<video controls=\\\"\\\" preload=\\\"none\\\" name=\\\"media\\\" width=\\\"300\\\" poster=\\\"http://thumbs.gfycat.com/WatchfulPalatableHapuka-thumb100.jpg\\\">\\n\\t<source src=\\\"http://zippy.gfycat.com/WatchfulPalatableHapuka.webm\\\" type=\\\"video/webm\\\" />\\n\\t<source src=\\\"http://zippy.gfycat.com/WatchfulPalatableHapuka.ogv\\\" type=\\\"video/ogg\\\" />\\n\\t<source src=\\\"http://zippy.gfycat.com/WatchfulPalatableHapuka.mp4\\\" type=\\\"video/mp4\\\" />\\n\\t<p>Your web browser doesn't support this video preview, please download a new browser such as <a href=\\\"http://www.google.co.uk/intl/en_uk/chrome/browser/\\\">Google Chrome</a>.</p>\\n\\t</video>\\n</center>\"\n}\n[/block]\nFlip x transition can also take an optional third parameter to change the orientation in Cocos2d-x C++ but in Cocos2d-JS it is required. \n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"Director::getInstance( )->replaceScene( TransitionFlipX::create( 1.0, scene, TransitionScene::Orientation::DOWN_OVER ) );\\n\\nDirector::getInstance( )->replaceScene( TransitionFlipX::create( 1.0, scene, TransitionScene::Orientation::LEFT_OVER ) );\\n\\nDirector::getInstance( )->replaceScene( TransitionFlipX::create( 1.0, scene, TransitionScene::Orientation::UP_OVER ) );\\n\\nDirector::getInstance( )->replaceScene( TransitionFlipX::create( 1.0, scene, TransitionScene::Orientation::RIGHT_OVER ) );\",\n      \"language\": \"cplusplus\",\n      \"name\": \"Cocos2d-x C++\"\n    },\n    {\n      \"code\": \"cc.director.runScene( new cc.TransitionFlipX( 1.0, scene, cc.TRANSITION_ORIENTATION_DOWN_OVER ) );\\n\\ncc.director.runScene( new cc.TransitionFlipX( 1.0, scene, cc.TRANSITION_ORIENTATION_LEFT_OVER ) );\\n\\ncc.director.runScene( new cc.TransitionFlipX( 1.0, scene, cc.TRANSITION_ORIENTATION_UP_OVER ) );\\n\\ncc.director.runScene( new cc.TransitionFlipX( 1.0, scene, cc.TRANSITION_ORIENTATION_RIGHT_OVER ) );\",\n      \"language\": \"javascript\",\n      \"name\": \"Cocos2d-JS\"\n    }\n  ]\n}\n[/block]\n##**Flip Y Transition** - Flips the screen vertically. The front face is the outgoing scene and the back face is the incoming scene.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"Scene *scene = NewScene::createScene( );\\n\\nDirector::getInstance( )->replaceScene( TransitionFlipY::create( 1.0, scene ) );\",\n      \"language\": \"cplusplus\",\n      \"name\": \"Cocos2d-x C++\"\n    },\n    {\n      \"code\": \"var scene = new NewScene( );\\n\\ncc.director.runScene( new cc.TransitionFlipY( 1.0, scene, cc.TRANSITION_ORIENTATION_UP_OVER ) );\",\n      \"language\": \"javascript\",\n      \"name\": \"Cocos2d-JS\"\n    }\n  ]\n}\n[/block]\n\n[block:html]\n{\n  \"html\": \"<center><strong>Transition Preview</strong></center>\\n\\n<center>\\n\\t<video controls=\\\"\\\" preload=\\\"none\\\" name=\\\"media\\\" width=\\\"300\\\" poster=\\\"http://thumbs.gfycat.com/UltimateRingedAntbear-thumb100.jpg\\\">\\n\\t<source src=\\\"http://zippy.gfycat.com/UltimateRingedAntbear.webm\\\" type=\\\"video/webm\\\" />\\n\\t<source src=\\\"http://zippy.gfycat.com/UltimateRingedAntbear.ogv\\\" type=\\\"video/ogg\\\" />\\n\\t<source src=\\\"http://zippy.gfycat.com/UltimateRingedAntbear.mp4\\\" type=\\\"video/mp4\\\" />\\n\\t<p>Your web browser doesn't support this video preview, please download a new browser such as <a href=\\\"http://www.google.co.uk/intl/en_uk/chrome/browser/\\\">Google Chrome</a>.</p>\\n\\t</video>\\n</center>\"\n}\n[/block]\nFlip y transition can also take an optional third parameter to change the orientation in Cocos2d-x C++ but in Cocos2d-JS it is required. \n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"Director::getInstance( )->replaceScene( TransitionFlipY::create( 1.0, scene, TransitionScene::Orientation::DOWN_OVER ) );\\n\\nDirector::getInstance( )->replaceScene( TransitionFlipY::create( 1.0, scene, TransitionScene::Orientation::LEFT_OVER ) );\\n\\nDirector::getInstance( )->replaceScene( TransitionFlipY::create( 1.0, scene, TransitionScene::Orientation::UP_OVER ) );\\n\\nDirector::getInstance( )->replaceScene( TransitionFlipY::create( 1.0, scene, TransitionScene::Orientation::RIGHT_OVER ) );\",\n      \"language\": \"cplusplus\",\n      \"name\": \"Cocos2d-x C++\"\n    },\n    {\n      \"code\": \"cc.director.runScene( new cc.TransitionFlipY( 1.0, scene, cc.TRANSITION_ORIENTATION_DOWN_OVER ) );\\n\\ncc.director.runScene( new cc.TransitionFlipY( 1.0, scene, cc.TRANSITION_ORIENTATION_LEFT_OVER ) );\\n\\ncc.director.runScene( new cc.TransitionFlipY( 1.0, scene, cc.TRANSITION_ORIENTATION_UP_OVER ) );\\n\\ncc.director.runScene( new cc.TransitionFlipY( 1.0, scene, cc.TRANSITION_ORIENTATION_RIGHT_OVER ) );\",\n      \"language\": \"javascript\",\n      \"name\": \"Cocos2d-JS\"\n    }\n  ]\n}\n[/block]\n##**Jump Zoom Transition** - Zoom out and jump the outgoing scene, and then jump and zoom in the incoming.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"Scene *scene = NewScene::createScene( );\\n    \\nDirector::getInstance( )->replaceScene( TransitionJumpZoom::create( 1.0, scene ) );\",\n      \"language\": \"cplusplus\",\n      \"name\": \"Cocos2d-x C++\"\n    },\n    {\n      \"code\": \"var scene = new NewScene( );\\n\\ncc.director.runScene( new cc.TransitionJumpZoom( 1.0, scene ) );\",\n      \"language\": \"javascript\",\n      \"name\": \"Cocos2d-JS\"\n    }\n  ]\n}\n[/block]\n\n[block:html]\n{\n  \"html\": \"<center><strong>Transition Preview</strong></center>\\n\\n<center>\\n\\t<video controls=\\\"\\\" preload=\\\"none\\\" name=\\\"media\\\" width=\\\"300\\\" poster=\\\"http://thumbs.gfycat.com/WellmadeReadyAnemone-thumb100.jpg\\\">\\n\\t<source src=\\\"http://zippy.gfycat.com/WellmadeReadyAnemone.webm\\\" type=\\\"video/webm\\\" />\\n\\t<source src=\\\"http://zippy.gfycat.com/WellmadeReadyAnemone.ogv\\\" type=\\\"video/ogg\\\" />\\n\\t<source src=\\\"http://zippy.gfycat.com/WellmadeReadyAnemone.mp4\\\" type=\\\"video/mp4\\\" />\\n\\t<p>Your web browser doesn't support this video preview, please download a new browser such as <a href=\\\"http://www.google.co.uk/intl/en_uk/chrome/browser/\\\">Google Chrome</a>.</p>\\n\\t</video>\\n</center>\"\n}\n[/block]\n##**Move In Bottom Transition** - Move in from to the bottom the incoming scene.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"Scene *scene = NewScene::createScene( );\\n\\nDirector::getInstance( )->replaceScene( TransitionMoveInB::create( 1.0, scene ) );\",\n      \"language\": \"cplusplus\",\n      \"name\": \"Cocos2d-x C++\"\n    },\n    {\n      \"code\": \"var scene = new NewScene( );\\n\\ncc.director.runScene( new cc.TransitionMoveInB(1.0, scene ) );\",\n      \"language\": \"javascript\",\n      \"name\": \"Cocos2d-JS\"\n    }\n  ]\n}\n[/block]\n\n[block:html]\n{\n  \"html\": \"<center><strong>Transition Preview</strong></center>\\n\\n<center>\\n\\t<video controls=\\\"\\\" preload=\\\"none\\\" name=\\\"media\\\" width=\\\"300\\\" poster=\\\"http://thumbs.gfycat.com/BlackThornyCatbird-thumb100.jpg\\\">\\n\\t<source src=\\\"http://zippy.gfycat.com/BlackThornyCatbird.webm\\\" type=\\\"video/webm\\\" />\\n\\t<source src=\\\"http://zippy.gfycat.com/BlackThornyCatbird.ogv\\\" type=\\\"video/ogg\\\" />\\n\\t<source src=\\\"http://zippy.gfycat.com/BlackThornyCatbird.mp4\\\" type=\\\"video/mp4\\\" />\\n\\t<p>Your web browser doesn't support this video preview, please download a new browser such as <a href=\\\"http://www.google.co.uk/intl/en_uk/chrome/browser/\\\">Google Chrome</a>.</p>\\n\\t</video>\\n</center>\"\n}\n[/block]\n##**Move In Left Transition** - Move in from to the left the incoming scene.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"Scene *scene = NewScene::createScene( );\\n\\nDirector::getInstance( )->replaceScene( TransitionMoveInL::create( 1.0, scene ) );\",\n      \"language\": \"cplusplus\",\n      \"name\": \"Cocos2d-x C++\"\n    },\n    {\n      \"code\": \"var scene = new NewScene( );\\n\\ncc.director.runScene( new cc.TransitionMoveInL(1.0, scene ) );\",\n      \"language\": \"javascript\",\n      \"name\": \"Cocos2d-JS\"\n    }\n  ]\n}\n[/block]\n\n[block:html]\n{\n  \"html\": \"<center><strong>Transition Preview</strong></center>\\n\\n<center>\\n\\t<video controls=\\\"\\\" preload=\\\"none\\\" name=\\\"media\\\" width=\\\"300\\\" poster=\\\"http://thumbs.gfycat.com/ReliableSpeedyJabiru-thumb100.jpg\\\">\\n\\t<source src=\\\"http://zippy.gfycat.com/ReliableSpeedyJabiru.webm\\\" type=\\\"video/webm\\\" />\\n\\t<source src=\\\"http://zippy.gfycat.com/ReliableSpeedyJabiru.ogv\\\" type=\\\"video/ogg\\\" />\\n\\t<source src=\\\"http://zippy.gfycat.com/ReliableSpeedyJabiru.mp4\\\" type=\\\"video/mp4\\\" />\\n\\t<p>Your web browser doesn't support this video preview, please download a new browser such as <a href=\\\"http://www.google.co.uk/intl/en_uk/chrome/browser/\\\">Google Chrome</a>.</p>\\n\\t</video>\\n</center>\"\n}\n[/block]\n##**Move In Right Transition** - Move in from to the right the incoming scene.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"Scene *scene = NewScene::createScene( );\\n\\nDirector::getInstance( )->replaceScene( TransitionMoveInR::create( 1.0, scene ) );\",\n      \"language\": \"cplusplus\",\n      \"name\": \"Cocos2d-x C++\"\n    },\n    {\n      \"code\": \"var scene = new NewScene( );\\n\\ncc.director.runScene( new cc.TransitionMoveInR(1.0, scene ) );\",\n      \"language\": \"javascript\",\n      \"name\": \"Cocos2d-JS\"\n    }\n  ]\n}\n[/block]\n\n[block:html]\n{\n  \"html\": \"<center><strong>Transition Preview</strong></center>\\n\\n<center>\\n\\t<video controls=\\\"\\\" preload=\\\"none\\\" name=\\\"media\\\" width=\\\"300\\\" poster=\\\"http://thumbs.gfycat.com/DeliciousEachBeardeddragon-thumb100.jpg\\\">\\n\\t<source src=\\\"http://zippy.gfycat.com/DeliciousEachBeardeddragon.webm\\\" type=\\\"video/webm\\\" />\\n\\t<source src=\\\"http://zippy.gfycat.com/DeliciousEachBeardeddragon.ogv\\\" type=\\\"video/ogg\\\" />\\n\\t<source src=\\\"http://zippy.gfycat.com/DeliciousEachBeardeddragon.mp4\\\" type=\\\"video/mp4\\\" />\\n\\t<p>Your web browser doesn't support this video preview, please download a new browser such as <a href=\\\"http://www.google.co.uk/intl/en_uk/chrome/browser/\\\">Google Chrome</a>.</p>\\n\\t</video>\\n</center>\"\n}\n[/block]\n##**Move In Top Transition** - Move in from to the top the incoming scene.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"Scene *scene = NewScene::createScene( );\\n\\nDirector::getInstance( )->replaceScene( TransitionMoveInT::create( 1.0, scene ) );\",\n      \"language\": \"cplusplus\",\n      \"name\": \"Cocos2d-x C++\"\n    },\n    {\n      \"code\": \"var scene = new NewScene( );\\n\\ncc.director.runScene( new cc.TransitionMoveInT(1.0, scene ) );\",\n      \"language\": \"javascript\",\n      \"name\": \"Cocos2d-JS\"\n    }\n  ]\n}\n[/block]\n\n[block:html]\n{\n  \"html\": \"<center><strong>Transition Preview</strong></center>\\n\\n<center>\\n\\t<video controls=\\\"\\\" preload=\\\"none\\\" name=\\\"media\\\" width=\\\"300\\\" poster=\\\"http://thumbs.gfycat.com/DecisiveFatHedgehog-thumb100.jpg\\\">\\n\\t<source src=\\\"http://zippy.gfycat.com/DecisiveFatHedgehog.webm\\\" type=\\\"video/webm\\\" />\\n\\t<source src=\\\"http://zippy.gfycat.com/DecisiveFatHedgehog.ogv\\\" type=\\\"video/ogg\\\" />\\n\\t<source src=\\\"http://zippy.gfycat.com/DecisiveFatHedgehog.mp4\\\" type=\\\"video/mp4\\\" />\\n\\t<p>Your web browser doesn't support this video preview, please download a new browser such as <a href=\\\"http://www.google.co.uk/intl/en_uk/chrome/browser/\\\">Google Chrome</a>.</p>\\n\\t</video>\\n</center>\"\n}\n[/block]\n##**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.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"Scene *scene = NewScene::createScene( );\\n\\nDirector::getInstance( )->replaceScene( TransitionPageTurn::create( 1.0, scene, true ) );\",\n      \"language\": \"cplusplus\",\n      \"name\": \"Cocos2d-x C++\"\n    },\n    {\n      \"code\": \"var scene = new NewScene( );\\n\\ncc.director.runScene( new cc.TransitionPageTurn( 1.0, scene, true ) );\",\n      \"language\": \"javascript\",\n      \"name\": \"Cocos2d-JS\"\n    }\n  ]\n}\n[/block]\n\n[block:html]\n{\n  \"html\": \"<center><strong>Transition Preview</strong></center>\\n\\n<center>\\n\\t<video controls=\\\"\\\" preload=\\\"none\\\" name=\\\"media\\\" width=\\\"300\\\" poster=\\\"http://thumbs.gfycat.com/OldfashionedVibrantAcouchi-thumb100.jpg\\\">\\n\\t<source src=\\\"http://zippy.gfycat.com/OldfashionedVibrantAcouchi.webm\\\" type=\\\"video/webm\\\" />\\n\\t<source src=\\\"http://zippy.gfycat.com/OldfashionedVibrantAcouchi.ogv\\\" type=\\\"video/ogg\\\" />\\n\\t<source src=\\\"http://zippy.gfycat.com/OldfashionedVibrantAcouchi.mp4\\\" type=\\\"video/mp4\\\" />\\n\\t<p>Your web browser doesn't support this video preview, please download a new browser such as <a href=\\\"http://www.google.co.uk/intl/en_uk/chrome/browser/\\\">Google Chrome</a>.</p>\\n\\t</video>\\n</center>\"\n}\n[/block]\nPage 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. \n\n##**Horizontal Progress Transition** - A clock-wise radial transition to the next scene.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"Scene *scene = NewScene::createScene( );\\n\\nDirector::getInstance( )->replaceScene( TransitionProgressHorizontal::create( 1.0, scene ) );\",\n      \"language\": \"cplusplus\",\n      \"name\": \"Cocos2d-x C++\"\n    },\n    {\n      \"code\": \"var scene = new NewScene( );\\n\\ncc.director.runScene( new cc.TransitionProgressHorizontal( 1.0, scene ) );\",\n      \"language\": \"javascript\",\n      \"name\": \"Cocos2d-JS\"\n    }\n  ]\n}\n[/block]\n\n[block:html]\n{\n  \"html\": \"<center><strong>Transition Preview</strong></center>\\n\\n<center>\\n\\t<video controls=\\\"\\\" preload=\\\"none\\\" name=\\\"media\\\" width=\\\"300\\\" poster=\\\"http://thumbs.gfycat.com/AllThirdAmericanbadger-thumb100.jpg\\\">\\n\\t<source src=\\\"http://zippy.gfycat.com/AllThirdAmericanbadger.webm\\\" type=\\\"video/webm\\\" />\\n\\t<source src=\\\"http://zippy.gfycat.com/AllThirdAmericanbadger.ogv\\\" type=\\\"video/ogg\\\" />\\n\\t<source src=\\\"http://zippy.gfycat.com/AllThirdAmericanbadger.mp4\\\" type=\\\"video/mp4\\\" />\\n\\t<p>Your web browser doesn't support this video preview, please download a new browser such as <a href=\\\"http://www.google.co.uk/intl/en_uk/chrome/browser/\\\">Google Chrome</a>.</p>\\n\\t</video>\\n</center>\"\n}\n[/block]\n##**Progress In Out Transition**\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"Scene *scene = NewScene::createScene( );\\n\\nDirector::getInstance( )->replaceScene( TransitionProgressInOut::create( 1.0, scene ) );\",\n      \"language\": \"cplusplus\",\n      \"name\": \"Cocos2d-x C++\"\n    },\n    {\n      \"code\": \"var scene = new NewScene( );\\n\\t\\ncc.director.runScene( new cc.TransitionProgressInOut( 1.0, scene ) );\",\n      \"language\": \"javascript\",\n      \"name\": \"Cocos2d-JS\"\n    }\n  ]\n}\n[/block]\n\n[block:html]\n{\n  \"html\": \"<center><strong>Transition Preview</strong></center>\\n\\n<center>\\n\\t<video controls=\\\"\\\" preload=\\\"none\\\" name=\\\"media\\\" width=\\\"300\\\" poster=\\\"http://thumbs.gfycat.com/AstonishingNastyHadrosaurus-thumb100.jpg\\\">\\n\\t<source src=\\\"http://zippy.gfycat.com/AstonishingNastyHadrosaurus.webm\\\" type=\\\"video/webm\\\" />\\n\\t<source src=\\\"http://zippy.gfycat.com/AstonishingNastyHadrosaurus.ogv\\\" type=\\\"video/ogg\\\" />\\n\\t<source src=\\\"http://zippy.gfycat.com/AstonishingNastyHadrosaurus.mp4\\\" type=\\\"video/mp4\\\" />\\n\\t<p>Your web browser doesn't support this video preview, please download a new browser such as <a href=\\\"http://www.google.co.uk/intl/en_uk/chrome/browser/\\\">Google Chrome</a>.</p>\\n\\t</video>\\n</center>\"\n}\n[/block]\n##**Progress Out In Transition**\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"Scene *scene = NewScene::createScene( );\\n\\nDirector::getInstance( )->replaceScene( TransitionProgressOutIn::create( 1.0, scene ) );\",\n      \"language\": \"cplusplus\",\n      \"name\": \"Cocos2d-x C++\"\n    },\n    {\n      \"code\": \"var scene = new NewScene( );\\n\\ncc.director.runScene( new cc.TransitionProgressOutIn( 1.0, scene ) );\",\n      \"language\": \"javascript\",\n      \"name\": \"Cocos2d-JS\"\n    }\n  ]\n}\n[/block]\n\n[block:html]\n{\n  \"html\": \"<center><strong>Transition Preview</strong></center>\\n\\n<center>\\n\\t<video controls=\\\"\\\" preload=\\\"none\\\" name=\\\"media\\\" width=\\\"300\\\" poster=\\\"http://thumbs.gfycat.com/SevereEnchantedFirecrest-thumb100.jpg\\\">\\n\\t<source src=\\\"http://zippy.gfycat.com/SevereEnchantedFirecrest.webm\\\" type=\\\"video/webm\\\" />\\n\\t<source src=\\\"http://zippy.gfycat.com/SevereEnchantedFirecrest.ogv\\\" type=\\\"video/ogg\\\" />\\n\\t<source src=\\\"http://zippy.gfycat.com/SevereEnchantedFirecrest.mp4\\\" type=\\\"video/mp4\\\" />\\n\\t<p>Your web browser doesn't support this video preview, please download a new browser such as <a href=\\\"http://www.google.co.uk/intl/en_uk/chrome/browser/\\\">Google Chrome</a>.</p>\\n\\t</video>\\n</center>\"\n}\n[/block]\n##**Radial Counter Clock-Wise Transition** - A counter clock-wise radial transition to the next scene.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"Scene *scene = NewScene::createScene( );\\n\\nDirector::getInstance( )->replaceScene( TransitionProgressRadialCCW::create( 1.0, scene ) );\",\n      \"language\": \"cplusplus\",\n      \"name\": \"Cocos2d-x C++\"\n    },\n    {\n      \"code\": \"var scene = new NewScene( );\\n\\ncc.director.runScene( new cc.TransitionProgressRadialCCW( 1.0, scene ) );\",\n      \"language\": \"javascript\",\n      \"name\": \"Cocos2d-JS\"\n    }\n  ]\n}\n[/block]\n\n[block:html]\n{\n  \"html\": \"<center><strong>Transition Preview</strong></center>\\n\\n<center>\\n\\t<video controls=\\\"\\\" preload=\\\"none\\\" name=\\\"media\\\" width=\\\"300\\\" poster=\\\"http://thumbs.gfycat.com/ForsakenGregariousIndianskimmer-thumb100.jpg\\\">\\n\\t<source src=\\\"http://zippy.gfycat.com/ForsakenGregariousIndianskimmer.webm\\\" type=\\\"video/webm\\\" />\\n\\t<source src=\\\"http://zippy.gfycat.com/ForsakenGregariousIndianskimmer.ogv\\\" type=\\\"video/ogg\\\" />\\n\\t<source src=\\\"http://zippy.gfycat.com/ForsakenGregariousIndianskimmer.mp4\\\" type=\\\"video/mp4\\\" />\\n\\t<p>Your web browser doesn't support this video preview, please download a new browser such as <a href=\\\"http://www.google.co.uk/intl/en_uk/chrome/browser/\\\">Google Chrome</a>.</p>\\n\\t</video>\\n</center>\"\n}\n[/block]\n##**Radial Clock-Wise Transition** - A clock-wise radial transition to the next scene.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"Scene *scene = NewScene::createScene( );\\n\\nDirector::getInstance( )->replaceScene( TransitionProgressRadialCW::create( 1.0, scene ) );\",\n      \"language\": \"cplusplus\",\n      \"name\": \"Cocos2d-x C++\"\n    },\n    {\n      \"code\": \"var scene = new NewScene( );\\n\\ncc.director.runScene( new cc.TransitionProgressRadialCW( 1.0, scene ) );\",\n      \"language\": \"javascript\",\n      \"name\": \"Cocos2d-JS\"\n    }\n  ]\n}\n[/block]\n\n[block:html]\n{\n  \"html\": \"<center><strong>Transition Preview</strong></center>\\n\\n<center>\\n\\t<video controls=\\\"\\\" preload=\\\"none\\\" name=\\\"media\\\" width=\\\"300\\\" poster=\\\"http://thumbs.gfycat.com/MaturePoisedApisdorsatalaboriosa-thumb100.jpg\\\">\\n\\t<source src=\\\"http://zippy.gfycat.com/MaturePoisedApisdorsatalaboriosa.webm\\\" type=\\\"video/webm\\\" />\\n\\t<source src=\\\"http://zippy.gfycat.com/MaturePoisedApisdorsatalaboriosa.ogv\\\" type=\\\"video/ogg\\\" />\\n\\t<source src=\\\"http://zippy.gfycat.com/MaturePoisedApisdorsatalaboriosa.mp4\\\" type=\\\"video/mp4\\\" />\\n\\t<p>Your web browser doesn't support this video preview, please download a new browser such as <a href=\\\"http://www.google.co.uk/intl/en_uk/chrome/browser/\\\">Google Chrome</a>.</p>\\n\\t</video>\\n</center>\"\n}\n[/block]\n##**Vertical Progress Transition** - A clock-wise radial transition to the next scene.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"Scene *scene = NewScene::createScene( );\\n    \\nDirector::getInstance( )->replaceScene( TransitionProgressVertical::create( 1.0, scene ) );\",\n      \"language\": \"cplusplus\",\n      \"name\": \"Cocos2d-x C++\"\n    },\n    {\n      \"code\": \"var scene = new NewScene( );\\n\\ncc.director.runScene( new cc.TransitionProgressVertical( 1.0, scene ) );\",\n      \"language\": \"javascript\",\n      \"name\": \"Cocos2d-JS\"\n    }\n  ]\n}\n[/block]\n\n[block:html]\n{\n  \"html\": \"<center><strong>Transition Preview</strong></center>\\n\\n<center>\\n\\t<video controls=\\\"\\\" preload=\\\"none\\\" name=\\\"media\\\" width=\\\"300\\\" poster=\\\"http://thumbs.gfycat.com/WeakNaturalApatosaur-thumb100.jpg\\\">\\n\\t<source src=\\\"http://zippy.gfycat.com/WeakNaturalApatosaur.webm\\\" type=\\\"video/webm\\\" />\\n\\t<source src=\\\"http://zippy.gfycat.com/WeakNaturalApatosaur.ogv\\\" type=\\\"video/ogg\\\" />\\n\\t<source src=\\\"http://zippy.gfycat.com/WeakNaturalApatosaur.mp4\\\" type=\\\"video/mp4\\\" />\\n\\t<p>Your web browser doesn't support this video preview, please download a new browser such as <a href=\\\"http://www.google.co.uk/intl/en_uk/chrome/browser/\\\">Google Chrome</a>.</p>\\n\\t</video>\\n</center>\"\n}\n[/block]\n##**Rotate and Zoom Transition** - Rotate and zoom out the outgoing scene, and then rotate and zoom in the incoming scene.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"Scene *scene = NewScene::createScene( );\\n\\nDirector::getInstance( )->replaceScene( TransitionRotoZoom::create( 1.0, scene ) );\",\n      \"language\": \"cplusplus\",\n      \"name\": \"Cocos2d-x C++\"\n    },\n    {\n      \"code\": \"var scene = new NewScene( );\\n\\ncc.director.runScene( new cc.TransitionRotoZoom( 1.0, scene ) );\",\n      \"language\": \"javascript\",\n      \"name\": \"Cocos2d-JS\"\n    }\n  ]\n}\n[/block]\n\n[block:html]\n{\n  \"html\": \"<center><strong>Transition Preview</strong></center>\\n\\n<center>\\n\\t<video controls=\\\"\\\" preload=\\\"none\\\" name=\\\"media\\\" width=\\\"300\\\" poster=\\\"http://thumbs.gfycat.com/SecretFocusedGypsymoth-thumb100.jpg\\\">\\n\\t<source src=\\\"http://zippy.gfycat.com/SecretFocusedGypsymoth.webm\\\" type=\\\"video/webm\\\" />\\n\\t<source src=\\\"http://zippy.gfycat.com/SecretFocusedGypsymoth.ogv\\\" type=\\\"video/ogg\\\" />\\n\\t<source src=\\\"http://zippy.gfycat.com/SecretFocusedGypsymoth.mp4\\\" type=\\\"video/mp4\\\" />\\n\\t<p>Your web browser doesn't support this video preview, please download a new browser such as <a href=\\\"http://www.google.co.uk/intl/en_uk/chrome/browser/\\\">Google Chrome</a>.</p>\\n\\t</video>\\n</center>\"\n}\n[/block]\n##**Shrink and Grow Transition** - Shrink the outgoing scene while growing the incoming scene.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"Scene *scene = NewScene::createScene( );\\n\\nDirector::getInstance( )->replaceScene( TransitionShrinkGrow::create( 1.0, scene ) );\",\n      \"language\": \"cplusplus\",\n      \"name\": \"Cocos2d-x C++\"\n    },\n    {\n      \"code\": \"var scene = new NewScene( );\\n\\ncc.director.runScene( new cc.TransitionShrinkGrow( 1.0, scene ) );\",\n      \"language\": \"javascript\",\n      \"name\": \"Cocos2d-JS\"\n    }\n  ]\n}\n[/block]\n\n[block:html]\n{\n  \"html\": \"<center><strong>Transition Preview</strong></center>\\n\\n<center>\\n\\t<video controls=\\\"\\\" preload=\\\"none\\\" name=\\\"media\\\" width=\\\"300\\\" poster=\\\"http://thumbs.gfycat.com/SourKnobbyImperatorangel-thumb100.jpg\\\">\\n\\t<source src=\\\"http://zippy.gfycat.com/SourKnobbyImperatorangel.webm\\\" type=\\\"video/webm\\\" />\\n\\t<source src=\\\"http://zippy.gfycat.com/SourKnobbyImperatorangel.ogv\\\" type=\\\"video/ogg\\\" />\\n\\t<source src=\\\"http://zippy.gfycat.com/SourKnobbyImperatorangel.mp4\\\" type=\\\"video/mp4\\\" />\\n\\t<p>Your web browser doesn't support this video preview, please download a new browser such as <a href=\\\"http://www.google.co.uk/intl/en_uk/chrome/browser/\\\">Google Chrome</a>.</p>\\n\\t</video>\\n</center>\"\n}\n[/block]\n##**Slide In From Bottom Transition** - Slide in the incoming scene from the bottom border.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"Scene *scene = NewScene::createScene( );\\n\\nDirector::getInstance( )->replaceScene( TransitionSlideInB::create( 1.0, scene ) );\",\n      \"language\": \"cplusplus\",\n      \"name\": \"Cocos2d-x C++\"\n    },\n    {\n      \"code\": \"var scene = new NewScene( );\\n\\ncc.director.runScene( new cc.TransitionSlideInB( 1.0, scene ) );\",\n      \"language\": \"javascript\",\n      \"name\": \"Cocos2d-JS\"\n    }\n  ]\n}\n[/block]\n\n[block:html]\n{\n  \"html\": \"<center><strong>Transition Preview</strong></center>\\n\\n<center>\\n\\t<video controls=\\\"\\\" preload=\\\"none\\\" name=\\\"media\\\" width=\\\"300\\\" poster=\\\"http://thumbs.gfycat.com/LargeNecessaryDogwoodtwigborer-thumb100.jpg\\\">\\n\\t<source src=\\\"http://zippy.gfycat.com/LargeNecessaryDogwoodtwigborer.webm\\\" type=\\\"video/webm\\\" />\\n\\t<source src=\\\"http://zippy.gfycat.com/LargeNecessaryDogwoodtwigborer.ogv\\\" type=\\\"video/ogg\\\" />\\n\\t<source src=\\\"http://zippy.gfycat.com/LargeNecessaryDogwoodtwigborer.mp4\\\" type=\\\"video/mp4\\\" />\\n\\t<p>Your web browser doesn't support this video preview, please download a new browser such as <a href=\\\"http://www.google.co.uk/intl/en_uk/chrome/browser/\\\">Google Chrome</a>.</p>\\n\\t</video>\\n</center>\"\n}\n[/block]\n##**Slide In From Left Transition** - Slide in the incoming scene from the left border.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"Scene *scene = NewScene::createScene( );\\n\\nDirector::getInstance( )->replaceScene( TransitionSlideInL::create( 1.0, scene ) );\",\n      \"language\": \"cplusplus\",\n      \"name\": \"Cocos2d-x C++\"\n    },\n    {\n      \"code\": \"var scene = new NewScene( );\\n\\ncc.director.runScene( new cc.TransitionSlideInL( 1.0, scene ) );\",\n      \"language\": \"javascript\",\n      \"name\": \"Cocos2d-JS\"\n    }\n  ]\n}\n[/block]\n\n[block:html]\n{\n  \"html\": \"<center><strong>Transition Preview</strong></center>\\n\\n<center>\\n\\t<video controls=\\\"\\\" preload=\\\"none\\\" name=\\\"media\\\" width=\\\"300\\\" poster=\\\"http://thumbs.gfycat.com/MajorUncomfortableIraniangroundjay-thumb100.jpg\\\">\\n\\t<source src=\\\"http://zippy.gfycat.com/MajorUncomfortableIraniangroundjay.webm\\\" type=\\\"video/webm\\\" />\\n\\t<source src=\\\"http://zippy.gfycat.com/MajorUncomfortableIraniangroundjay.ogv\\\" type=\\\"video/ogg\\\" />\\n\\t<source src=\\\"http://zippy.gfycat.com/MajorUncomfortableIraniangroundjay.mp4\\\" type=\\\"video/mp4\\\" />\\n\\t<p>Your web browser doesn't support this video preview, please download a new browser such as <a href=\\\"http://www.google.co.uk/intl/en_uk/chrome/browser/\\\">Google Chrome</a>.</p>\\n\\t</video>\\n</center>\"\n}\n[/block]\n##**Slide In From Right Transition** - Slide in the incoming scene from the right border.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"Scene *scene = NewScene::createScene( );\\n\\nDirector::getInstance( )->replaceScene( TransitionSlideInR::create( 1.0, scene ) );\",\n      \"language\": \"cplusplus\",\n      \"name\": \"Cocos2d-x C++\"\n    },\n    {\n      \"code\": \"var scene = new NewScene( );\\n\\ncc.director.runScene( new cc.TransitionSlideInR( 1.0, scene ) );\",\n      \"language\": \"javascript\",\n      \"name\": \"Cocos2d-JS\"\n    }\n  ]\n}\n[/block]\n\n[block:html]\n{\n  \"html\": \"<center><strong>Transition Preview</strong></center>\\n\\n<center>\\n\\t<video controls=\\\"\\\" preload=\\\"none\\\" name=\\\"media\\\" width=\\\"300\\\" poster=\\\"http://thumbs.gfycat.com/SickFewBighorn-thumb100.jpg\\\">\\n\\t<source src=\\\"http://zippy.gfycat.com/SickFewBighorn.webm\\\" type=\\\"video/webm\\\" />\\n\\t<source src=\\\"http://zippy.gfycat.com/SickFewBighorn.ogv\\\" type=\\\"video/ogg\\\" />\\n\\t<source src=\\\"http://zippy.gfycat.com/SickFewBighorn.mp4\\\" type=\\\"video/mp4\\\" />\\n\\t<p>Your web browser doesn't support this video preview, please download a new browser such as <a href=\\\"http://www.google.co.uk/intl/en_uk/chrome/browser/\\\">Google Chrome</a>.</p>\\n\\t</video>\\n</center>\"\n}\n[/block]\n##**Slide In From Top Transition** - Slide in the incoming scene from the top border.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"Scene *scene = NewScene::createScene( );\\n\\nDirector::getInstance( )->replaceScene( TransitionSlideInT::create( 1.0, scene ) );\",\n      \"language\": \"cplusplus\",\n      \"name\": \"Cocos2d-x C++\"\n    },\n    {\n      \"code\": \"var scene = new NewScene( );\\n\\ncc.director.runScene( new cc.TransitionSlideInT( 1.0, scene ) );\",\n      \"language\": \"javascript\",\n      \"name\": \"Cocos2d-JS\"\n    }\n  ]\n}\n[/block]\n\n[block:html]\n{\n  \"html\": \"<center><strong>Transition Preview</strong></center>\\n\\n<center>\\n\\t<video controls=\\\"\\\" preload=\\\"none\\\" name=\\\"media\\\" width=\\\"300\\\" poster=\\\"http://thumbs.gfycat.com/SingleReflectingIndianrockpython-thumb100.jpg\\\">\\n\\t<source src=\\\"http://zippy.gfycat.com/SingleReflectingIndianrockpython.webm\\\" type=\\\"video/webm\\\" />\\n\\t<source src=\\\"http://zippy.gfycat.com/SingleReflectingIndianrockpython.ogv\\\" type=\\\"video/ogg\\\" />\\n\\t<source src=\\\"http://zippy.gfycat.com/SingleReflectingIndianrockpython.mp4\\\" type=\\\"video/mp4\\\" />\\n\\t<p>Your web browser doesn't support this video preview, please download a new browser such as <a href=\\\"http://www.google.co.uk/intl/en_uk/chrome/browser/\\\">Google Chrome</a>.</p>\\n\\t</video>\\n</center>\"\n}\n[/block]\n##**Split Column Transition** - The odd columns goes upwards while the even columns goes downwards.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"Scene *scene = NewScene::createScene( );\\n\\nDirector::getInstance( )->replaceScene( TransitionSplitCols::create( 1.0, scene ) );\",\n      \"language\": \"cplusplus\",\n      \"name\": \"Cocos2d-x C++\"\n    },\n    {\n      \"code\": \"var scene = new NewScene( );\\n\\ncc.director.runScene( new cc.TransitionSplitCols( 1.0, scene ) );\",\n      \"language\": \"javascript\",\n      \"name\": \"Cocos2d-JS\"\n    }\n  ]\n}\n[/block]\n\n[block:html]\n{\n  \"html\": \"<center><strong>Transition Preview</strong></center>\\n\\n<center>\\n\\t<video controls=\\\"\\\" preload=\\\"none\\\" name=\\\"media\\\" width=\\\"300\\\" poster=\\\"http://thumbs.gfycat.com/PleasedGrotesqueGreatdane-thumb100.jpg\\\">\\n\\t<source src=\\\"http://zippy.gfycat.com/PleasedGrotesqueGreatdane.webm\\\" type=\\\"video/webm\\\" />\\n\\t<source src=\\\"http://zippy.gfycat.com/PleasedGrotesqueGreatdane.ogv\\\" type=\\\"video/ogg\\\" />\\n\\t<source src=\\\"http://zippy.gfycat.com/PleasedGrotesqueGreatdane.mp4\\\" type=\\\"video/mp4\\\" />\\n\\t<p>Your web browser doesn't support this video preview, please download a new browser such as <a href=\\\"http://www.google.co.uk/intl/en_uk/chrome/browser/\\\">Google Chrome</a>.</p>\\n\\t</video>\\n</center>\"\n}\n[/block]\n##**Split Row Transition** - The odd rows goes to the left  while the even rows goes to the right.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"Scene *scene = NewScene::createScene( );\\n\\nDirector::getInstance( )->replaceScene( TransitionSplitRows::create( 1.0, scene ) );\",\n      \"language\": \"cplusplus\",\n      \"name\": \"Cocos2d-x C++\"\n    },\n    {\n      \"code\": \"var scene = new NewScene( );\\n\\ncc.director.runScene( new cc.TransitionSplitRows( 1.0, scene ) );\",\n      \"language\": \"javascript\",\n      \"name\": \"Cocos2d-JS\"\n    }\n  ]\n}\n[/block]\n\n[block:html]\n{\n  \"html\": \"<center><strong>Transition Preview</strong></center>\\n\\n<center>\\n\\t<video controls=\\\"\\\" preload=\\\"none\\\" name=\\\"media\\\" width=\\\"300\\\" poster=\\\"http://thumbs.gfycat.com/WetBreakableHoki-thumb100.jpg\\\">\\n\\t<source src=\\\"http://zippy.gfycat.com/WetBreakableHoki.webm\\\" type=\\\"video/webm\\\" />\\n\\t<source src=\\\"http://zippy.gfycat.com/WetBreakableHoki.ogv\\\" type=\\\"video/ogg\\\" />\\n\\t<source src=\\\"http://zippy.gfycat.com/WetBreakableHoki.mp4\\\" type=\\\"video/mp4\\\" />\\n\\t<p>Your web browser doesn't support this video preview, please download a new browser such as <a href=\\\"http://www.google.co.uk/intl/en_uk/chrome/browser/\\\">Google Chrome</a>.</p>\\n\\t</video>\\n</center>\"\n}\n[/block]\n##**Turn Off The Tiles Transition** - Turn of the tiles of the outgoing scene in random order.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"Scene *scene = NewScene::createScene( );\\n\\nDirector::getInstance( )->replaceScene( TransitionTurnOffTiles::create( 1.0, scene ) );\",\n      \"language\": \"cplusplus\",\n      \"name\": \"Cocos2d-x C++\"\n    },\n    {\n      \"code\": \"var scene = new NewScene( );\\n\\ncc.director.runScene( new cc.TransitionTurnOffTiles( 1.0, scene ) );\",\n      \"language\": \"javascript\",\n      \"name\": \"Cocos2d-JS\"\n    }\n  ]\n}\n[/block]\n\n[block:html]\n{\n  \"html\": \"<center><strong>Transition Preview</strong></center>\\n\\n<center>\\n\\t<video controls=\\\"\\\" preload=\\\"none\\\" name=\\\"media\\\" width=\\\"300\\\" poster=\\\"http://thumbs.gfycat.com/BelovedReadyHylaeosaurus-thumb100.jpg\\\">\\n\\t<source src=\\\"http://zippy.gfycat.com/BelovedReadyHylaeosaurus.webm\\\" type=\\\"video/webm\\\" />\\n\\t<source src=\\\"http://zippy.gfycat.com/BelovedReadyHylaeosaurus.ogv\\\" type=\\\"video/ogg\\\" />\\n\\t<source src=\\\"http://zippy.gfycat.com/BelovedReadyHylaeosaurus.mp4\\\" type=\\\"video/mp4\\\" />\\n\\t<p>Your web browser doesn't support this video preview, please download a new browser such as <a href=\\\"http://www.google.co.uk/intl/en_uk/chrome/browser/\\\">Google Chrome</a>.</p>\\n\\t</video>\\n</center>\"\n}\n[/block]\n##**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.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"Scene *scene = NewScene::createScene( );\\n\\nDirector::getInstance( )->replaceScene( TransitionZoomFlipAngular::create( 1.0, scene ) );\",\n      \"language\": \"cplusplus\",\n      \"name\": \"Cocos2d-x C++\"\n    },\n    {\n      \"code\": \"var scene = new NewScene( );\\n\\ncc.director.runScene( new cc.TransitionZoomFlipAngular( 1.0, scene, cc.TRANSITION_ORIENTATION_DOWN_OVER ) );\",\n      \"language\": \"javascript\",\n      \"name\": \"Cocos2d-JS\"\n    }\n  ]\n}\n[/block]\n\n[block:html]\n{\n  \"html\": \"<center><strong>Transition Preview</strong></center>\\n\\n<center>\\n\\t<video controls=\\\"\\\" preload=\\\"none\\\" name=\\\"media\\\" width=\\\"300\\\" poster=\\\"http://thumbs.gfycat.com/PrestigiousInferiorKookaburra-thumb100.jpg\\\">\\n\\t<source src=\\\"http://zippy.gfycat.com/PrestigiousInferiorKookaburra.webm\\\" type=\\\"video/webm\\\" />\\n\\t<source src=\\\"http://zippy.gfycat.com/PrestigiousInferiorKookaburra.ogv\\\" type=\\\"video/ogg\\\" />\\n\\t<source src=\\\"http://zippy.gfycat.com/PrestigiousInferiorKookaburra.mp4\\\" type=\\\"video/mp4\\\" />\\n\\t<p>Your web browser doesn't support this video preview, please download a new browser such as <a href=\\\"http://www.google.co.uk/intl/en_uk/chrome/browser/\\\">Google Chrome</a>.</p>\\n\\t</video>\\n</center>\"\n}\n[/block]\nZoom 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. \n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"Director::getInstance( )->replaceScene( TransitionZoomFlipAngular::create( 1.0, scene, TransitionScene::Orientation::DOWN_OVER ) );\\n\\nDirector::getInstance( )->replaceScene( TransitionZoomFlipAngular::create( 1.0, scene, TransitionScene::Orientation::LEFT_OVER ) );\\n\\nDirector::getInstance( )->replaceScene( TransitionZoomFlipAngular::create( 1.0, scene, TransitionScene::Orientation::RIGHT_OVER ) );\\n\\nDirector::getInstance( )->replaceScene( TransitionZoomFlipAngular::create( 1.0, scene, TransitionScene::Orientation::UP_OVER ) );\",\n      \"language\": \"cplusplus\",\n      \"name\": \"Cocos2d-x C++\"\n    },\n    {\n      \"code\": \"cc.director.runScene( new cc.TransitionZoomFlipAngular( 1.0, scene, cc.TRANSITION_ORIENTATION_DOWN_OVER ) );\\n\\ncc.director.runScene( new cc.TransitionZoomFlipAngular( 1.0, scene, cc.TRANSITION_ORIENTATION_LEFT_OVER ) );\\n\\ncc.director.runScene( new cc.TransitionZoomFlipAngular( 1.0, scene, cc.TRANSITION_ORIENTATION_RIGHT_OVER ) );\\n\\ncc.director.runScene( new cc.TransitionZoomFlipAngular( 1.0, scene, cc.TRANSITION_ORIENTATION_UP_OVER ) );\",\n      \"language\": \"javascript\",\n      \"name\": \"Cocos2d-JS\"\n    }\n  ]\n}\n[/block]\n##**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.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"Scene *scene = NewScene::createScene( );\\n\\nDirector::getInstance( )->replaceScene( TransitionZoomFlipX::create( 1.0, scene ) );\",\n      \"language\": \"cplusplus\",\n      \"name\": \"Cocos2d-x C++\"\n    },\n    {\n      \"code\": \"var scene = new NewScene( );\\n\\ncc.director.runScene( new cc.TransitionZoomFlipX( 1.0, scene, cc.TRANSITION_ORIENTATION_DOWN_OVER ) );\",\n      \"language\": \"javascript\",\n      \"name\": \"Cocos2d-JS\"\n    }\n  ]\n}\n[/block]\n\n[block:html]\n{\n  \"html\": \"<center><strong>Transition Preview</strong></center>\\n\\n<center>\\n\\t<video controls=\\\"\\\" preload=\\\"none\\\" name=\\\"media\\\" width=\\\"300\\\" poster=\\\"http://thumbs.gfycat.com/UnrulyDecisiveBigmouthbass-thumb100.jpg\\\">\\n\\t<source src=\\\"http://zippy.gfycat.com/UnrulyDecisiveBigmouthbass.webm\\\" type=\\\"video/webm\\\" />\\n\\t<source src=\\\"http://zippy.gfycat.com/UnrulyDecisiveBigmouthbass.ogv\\\" type=\\\"video/ogg\\\" />\\n\\t<source src=\\\"http://zippy.gfycat.com/UnrulyDecisiveBigmouthbass.mp4\\\" type=\\\"video/mp4\\\" />\\n\\t<p>Your web browser doesn't support this video preview, please download a new browser such as <a href=\\\"http://www.google.co.uk/intl/en_uk/chrome/browser/\\\">Google Chrome</a>.</p>\\n\\t</video>\\n</center>\"\n}\n[/block]\nZoom 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. \n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"Director::getInstance( )->replaceScene( TransitionZoomFlipX::create( 1.0, scene, TransitionScene::Orientation::DOWN_OVER ) );\\n\\nDirector::getInstance( )->replaceScene( TransitionZoomFlipX::create( 1.0, scene, TransitionScene::Orientation::LEFT_OVER ) );\\n\\nDirector::getInstance( )->replaceScene( TransitionZoomFlipX::create( 1.0, scene, TransitionScene::Orientation::RIGHT_OVER ) );\\n\\nDirector::getInstance( )->replaceScene( TransitionZoomFlipX::create( 1.0, scene, TransitionScene::Orientation::UP_OVER ) );\",\n      \"language\": \"cplusplus\",\n      \"name\": \"Cocos2d-x C++\"\n    },\n    {\n      \"code\": \"cc.director.runScene( new cc.TransitionZoomFlipX( 1.0, scene, cc.TRANSITION_ORIENTATION_DOWN_OVER ) );\\n\\ncc.director.runScene( new cc.TransitionZoomFlipX( 1.0, scene, cc.TRANSITION_ORIENTATION_LEFT_OVER ) );\\n\\ncc.director.runScene( new cc.TransitionZoomFlipX( 1.0, scene, cc.TRANSITION_ORIENTATION_RIGHT_OVER ) );\\n\\ncc.director.runScene( new cc.TransitionZoomFlipX( 1.0, scene, cc.TRANSITION_ORIENTATION_UP_OVER ) );\",\n      \"language\": \"javascript\",\n      \"name\": \"Cocos2d-JS\"\n    }\n  ]\n}\n[/block]\n##**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.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"Scene *scene = NewScene::createScene( );\\n\\nDirector::getInstance( )->replaceScene( TransitionZoomFlipY::create( 1.0, scene ) );\",\n      \"language\": \"cplusplus\",\n      \"name\": \"Cocos2d-x C++\"\n    },\n    {\n      \"code\": \"var scene = new NewScene( );\\n\\ncc.director.runScene( new cc.TransitionZoomFlipY( 1.0, scene, cc.TRANSITION_ORIENTATION_DOWN_OVER ) );\",\n      \"language\": \"javascript\",\n      \"name\": \"Cocos2d-JS\"\n    }\n  ]\n}\n[/block]\n\n[block:html]\n{\n  \"html\": \"<center><strong>Transition Preview</strong></center>\\n\\n<center>\\n\\t<video controls=\\\"\\\" preload=\\\"none\\\" name=\\\"media\\\" width=\\\"300\\\" poster=\\\"http://thumbs.gfycat.com/WearyImpracticalAsiansmallclawedotter-thumb100.jpg\\\">\\n\\t<source src=\\\"http://zippy.gfycat.com/WearyImpracticalAsiansmallclawedotter.webm\\\" type=\\\"video/webm\\\" />\\n\\t<source src=\\\"http://zippy.gfycat.com/WearyImpracticalAsiansmallclawedotter.ogv\\\" type=\\\"video/ogg\\\" />\\n\\t<source src=\\\"http://zippy.gfycat.com/WearyImpracticalAsiansmallclawedotter.mp4\\\" type=\\\"video/mp4\\\" />\\n\\t<p>Your web browser doesn't support this video preview, please download a new browser such as <a href=\\\"http://www.google.co.uk/intl/en_uk/chrome/browser/\\\">Google Chrome</a>.</p>\\n\\t</video>\\n</center>\"\n}\n[/block]\nZoom 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. \n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"Director::getInstance( )->replaceScene( TransitionZoomFlipY::create( 1.0, scene, TransitionScene::Orientation::DOWN_OVER ) );\\n\\nDirector::getInstance( )->replaceScene( TransitionZoomFlipY::create( 1.0, scene, TransitionScene::Orientation::LEFT_OVER ) );\\n\\nDirector::getInstance( )->replaceScene( TransitionZoomFlipY::create( 1.0, scene, TransitionScene::Orientation::RIGHT_OVER ) );\\n\\nDirector::getInstance( )->replaceScene( TransitionZoomFlipY::create( 1.0, scene, TransitionScene::Orientation::UP_OVER ) );\",\n      \"language\": \"cplusplus\",\n      \"name\": \"Cocos2d-x C++\"\n    },\n    {\n      \"code\": \"cc.director.runScene( new cc.TransitionZoomFlipY( 1.0, scene, cc.TRANSITION_ORIENTATION_DOWN_OVER ) );\\n\\ncc.director.runScene( new cc.TransitionZoomFlipY( 1.0, scene, cc.TRANSITION_ORIENTATION_LEFT_OVER ) );\\n\\ncc.director.runScene( new cc.TransitionZoomFlipY( 1.0, scene, cc.TRANSITION_ORIENTATION_RIGHT_OVER ) );\\n\\ncc.director.runScene( new cc.TransitionZoomFlipY( 1.0, scene, cc.TRANSITION_ORIENTATION_UP_OVER ) );\",\n      \"language\": \"javascript\",\n      \"name\": \"Cocos2d-JS\"\n    }\n  ]\n}\n[/block]","excerpt":"This page will cover all the transitions provided by Cocos for switching between scenes using transitions.","slug":"scene-transitions","type":"basic","title":"Scene Transitions"}

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. [block:code] { "codes": [ { "code": "Scene *scene = NewScene::createScene( );\n\nDirector::getInstance( )->replaceScene( TransitionCrossFade::create( 3.0, scene ) );", "language": "cplusplus", "name": "Cocos2d-x C++" }, { "code": "var scene = new NewScene( );\n\ncc.director.runScene( new cc.TransitionCrossFade( 1.0, scene ) );", "language": "javascript", "name": "Cocos2d-JS" } ] } [/block] [block:html] { "html": "<center><strong>Transition Preview</strong></center>\n\n<center>\n\t<video controls=\"\" preload=\"none\" name=\"media\" width=\"300\" poster=\"http://thumbs.gfycat.com/OldWarpedAlpinegoat-thumb100.jpg\">\n\t<source src=\"http://zippy.gfycat.com/OldWarpedAlpinegoat.webm\" type=\"video/webm\" />\n\t<source src=\"http://zippy.gfycat.com/OldWarpedAlpinegoat.ogv\" type=\"video/ogg\" />\n\t<source src=\"http://zippy.gfycat.com/OldWarpedAlpinegoat.mp4\" type=\"video/mp4\" />\n\t<p>Your web browser doesn't support this video preview, please download a new browser such as <a href=\"http://www.google.co.uk/intl/en_uk/chrome/browser/\">Google Chrome</a>.</p>\n\t</video>\n</center>" } [/block] ##**Fade Transition** - Fade out the outgoing scene and then fade in the incoming scene. [block:code] { "codes": [ { "code": "Scene *scene = NewScene::createScene( );\n\nDirector::getInstance( )->replaceScene( TransitionFade::create( 1.0, scene ) );", "language": "cplusplus", "name": "Cocos2d-x C++" }, { "code": "var scene = new NewScene( );\n\ncc.director.runScene( new cc.TransitionFade( 1.0, scene ) );", "language": "javascript", "name": "Cocos2d-JS" } ] } [/block] [block:html] { "html": "<center><strong>Transition Preview</strong></center>\n\n<center>\n\t<video controls=\"\" preload=\"none\" name=\"media\" width=\"300\" poster=\"http://thumbs.gfycat.com/EducatedSeriousKitten-thumb100.jpg\">\n\t<source src=\"http://zippy.gfycat.com/EducatedSeriousKitten.webm\" type=\"video/webm\" />\n\t<source src=\"http://zippy.gfycat.com/EducatedSeriousKitten.ogv\" type=\"video/ogg\" />\n\t<source src=\"http://zippy.gfycat.com/EducatedSeriousKitten.mp4\" type=\"video/mp4\" />\n\t<p>Your web browser doesn't support this video preview, please download a new browser such as <a href=\"http://www.google.co.uk/intl/en_uk/chrome/browser/\">Google Chrome</a>.</p>\n\t</video>\n</center>" } [/block] Fade transition can also take an optional third parameter to change the colour the scenes fade to and from in Cocos2d-x C++. [block:code] { "codes": [ { "code": "Director::getInstance( )->replaceScene( TransitionFade::create( 1.0, scene, Color3B::BLACK ) );\n\nDirector::getInstance( )->replaceScene( TransitionFade::create( 1.0, scene, Color3B::BLUE ) );\n\nDirector::getInstance( )->replaceScene( TransitionFade::create( 1.0, scene, Color3B::GRAY ) );\n\nDirector::getInstance( )->replaceScene( TransitionFade::create( 1.0, scene, Color3B::GREEN ) );\n\nDirector::getInstance( )->replaceScene( TransitionFade::create( 1.0, scene, Color3B::MAGENTA ) );\n\nDirector::getInstance( )->replaceScene( TransitionFade::create( 1.0, scene, Color3B::ORANGE ) );\n\nDirector::getInstance( )->replaceScene( TransitionFade::create( 1.0, scene, Color3B::RED ) );\n\nDirector::getInstance( )->replaceScene( TransitionFade::create( 1.0, scene, Color3B::WHITE ) );\n\nDirector::getInstance( )->replaceScene( TransitionFade::create( 1.0, scene, Color3B::YELLOW ) );\n\n// Red, Green and Blue values range between 0 and 255\nDirector::getInstance( )->replaceScene( TransitionFade::create( 1.0, scene, Color3B( Red, Green, Blue ) ) );", "language": "cplusplus", "name": "Cocos2d-x C++" } ] } [/block] ##**Bottom Left Fade Transition** - Fade the tiles of the outgoing scene from the top-right corner to the bottom-left corner. [block:code] { "codes": [ { "code": "Scene *scene = NewScene::createScene( );\n\nDirector::getInstance( )->replaceScene( TransitionFadeBL::create( 1.0, scene ) );", "language": "cplusplus", "name": "Cocos2d-x C++" }, { "code": "var scene = new NewScene( );\n\ncc.director.runScene( new cc.TransitionFadeBL( 1.0, scene ) );", "language": "javascript", "name": "Cocos2d-JS" } ] } [/block] [block:html] { "html": "<center><strong>Transition Preview</strong></center>\n\n<center>\n\t<video controls=\"\" preload=\"none\" name=\"media\" width=\"300\" poster=\"http://thumbs.gfycat.com/EvergreenBlushingAmericanbadger-thumb100.jpg\">\n\t<source src=\"http://zippy.gfycat.com/EvergreenBlushingAmericanbadger.webm\" type=\"video/webm\" />\n\t<source src=\"http://zippy.gfycat.com/EvergreenBlushingAmericanbadger.ogv\" type=\"video/ogg\" />\n\t<source src=\"http://zippy.gfycat.com/EvergreenBlushingAmericanbadger.mp4\" type=\"video/mp4\" />\n\t<p>Your web browser doesn't support this video preview, please download a new browser such as <a href=\"http://www.google.co.uk/intl/en_uk/chrome/browser/\">Google Chrome</a>.</p>\n\t</video>\n</center>" } [/block] ##**Fade Down Transition** - Fade the tiles of the outgoing scene from the top to the bottom. [block:code] { "codes": [ { "code": "Scene *scene = NewScene::createScene( );\n\nDirector::getInstance( )->replaceScene( TransitionFadeDown::create( 1.0, scene ) );", "language": "cplusplus", "name": "Cocos2d-x C++" }, { "code": "var scene = new NewScene( );\n\ncc.director.runScene( new cc.TransitionFadeDown( 1.0, scene ) );", "language": "javascript", "name": "Cocos2d-JS" } ] } [/block] [block:html] { "html": "<center><strong>Transition Preview</strong></center>\n\n<center>\n\t<video controls=\"\" preload=\"none\" name=\"media\" width=\"300\" poster=\"http://thumbs.gfycat.com/DaringBrokenEmeraldtreeskink-thumb100.jpg\">\n\t<source src=\"http://zippy.gfycat.com/DaringBrokenEmeraldtreeskink.webm\" type=\"video/webm\" />\n\t<source src=\"http://zippy.gfycat.com/DaringBrokenEmeraldtreeskink.ogv\" type=\"video/ogg\" />\n\t<source src=\"http://zippy.gfycat.com/DaringBrokenEmeraldtreeskink.mp4\" type=\"video/mp4\" />\n\t<p>Your web browser doesn't support this video preview, please download a new browser such as <a href=\"http://www.google.co.uk/intl/en_uk/chrome/browser/\">Google Chrome</a>.</p>\n\t</video>\n</center>" } [/block] ##**Top Right Fade Transition** - Fade the tiles of the outgoing scene from the left-bottom corner the to top-right corner. [block:code] { "codes": [ { "code": "Scene *scene = NewScene::createScene( );\n\nDirector::getInstance( )->replaceScene( TransitionFadeTR::create( 1.0, scene ) );", "language": "cplusplus", "name": "Cocos2d-x C++" }, { "code": "var scene = new NewScene( );\n\ncc.director.runScene( new cc.TransitionFadeTR( 1.0, scene ) );", "language": "javascript", "name": "Cocos2d-JS" } ] } [/block] [block:html] { "html": "<center><strong>Transition Preview</strong></center>\n\n<center>\n\t<video controls=\"\" preload=\"none\" name=\"media\" width=\"300\" poster=\"http://thumbs.gfycat.com/DetailedSpitefulCusimanse-thumb100.jpg\">\n\t<source src=\"http://zippy.gfycat.com/DetailedSpitefulCusimanse.webm\" type=\"video/webm\" />\n\t<source src=\"http://zippy.gfycat.com/DetailedSpitefulCusimanse.ogv\" type=\"video/ogg\" />\n\t<source src=\"http://zippy.gfycat.com/DetailedSpitefulCusimanse.mp4\" type=\"video/mp4\" />\n\t<p>Your web browser doesn't support this video preview, please download a new browser such as <a href=\"http://www.google.co.uk/intl/en_uk/chrome/browser/\">Google Chrome</a>.</p>\n\t</video>\n</center>" } [/block] ##**Fade Up Transition** - Fade the tiles of the outgoing scene from the bottom to the top. [block:code] { "codes": [ { "code": "Scene *scene = NewScene::createScene( );\n\nDirector::getInstance( )->replaceScene( TransitionFadeUp::create( 1.0, scene ) );", "language": "cplusplus", "name": "Cocos2d-x C++" }, { "code": "var scene = new NewScene( );\n\ncc.director.runScene( new cc.TransitionFadeUp( 1.0, scene ) );", "language": "javascript", "name": "Cocos2d-JS" } ] } [/block] [block:html] { "html": "<center><strong>Transition Preview</strong></center>\n\n<center>\n\t<video controls=\"\" preload=\"none\" name=\"media\" width=\"300\" poster=\"http://thumbs.gfycat.com/FarJointAmericancicada-thumb100.jpg\">\n\t<source src=\"http://zippy.gfycat.com/FarJointAmericancicada.webm\" type=\"video/webm\" />\n\t<source src=\"http://zippy.gfycat.com/FarJointAmericancicada.ogv\" type=\"video/ogg\" />\n\t<source src=\"http://zippy.gfycat.com/FarJointAmericancicada.mp4\" type=\"video/mp4\" />\n\t<p>Your web browser doesn't support this video preview, please download a new browser such as <a href=\"http://www.google.co.uk/intl/en_uk/chrome/browser/\">Google Chrome</a>.</p>\n\t</video>\n</center>" } [/block] ##**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. [block:code] { "codes": [ { "code": "Scene *scene = NewScene::createScene( );\n\nDirector::getInstance( )->replaceScene( TransitionFlipAngular::create( 1.0, scene ) );", "language": "cplusplus", "name": "Cocos2d-x C++" }, { "code": "var scene = new NewScene( );\n\ncc.director.runScene( new cc.TransitionFlipAngular( 1.0, scene, cc.TRANSITION_ORIENTATION_UP_OVER ) );", "language": "javascript", "name": "Cocos2d-JS" } ] } [/block] [block:html] { "html": "<center><strong>Transition Preview</strong></center>\n\n<center>\n\t<video controls=\"\" preload=\"none\" name=\"media\" width=\"300\" poster=\"http://thumbs.gfycat.com/EagerExemplaryGermanshorthairedpointer-thumb100.jpg\">\n\t<source src=\"http://zippy.gfycat.com/EagerExemplaryGermanshorthairedpointer.webm\" type=\"video/webm\" />\n\t<source src=\"http://zippy.gfycat.com/EagerExemplaryGermanshorthairedpointer.ogv\" type=\"video/ogg\" />\n\t<source src=\"http://zippy.gfycat.com/EagerExemplaryGermanshorthairedpointer.mp4\" type=\"video/mp4\" />\n\t<p>Your web browser doesn't support this video preview, please download a new browser such as <a href=\"http://www.google.co.uk/intl/en_uk/chrome/browser/\">Google Chrome</a>.</p>\n\t</video>\n</center>" } [/block] 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. [block:code] { "codes": [ { "code": "Director::getInstance( )->replaceScene( TransitionFlipAngular::create( 1.0, scene, TransitionScene::Orientation::DOWN_OVER ) );\n\nDirector::getInstance( )->replaceScene( TransitionFlipAngular::create( 1.0, scene, TransitionScene::Orientation::LEFT_OVER ) );\n\nDirector::getInstance( )->replaceScene( TransitionFlipAngular::create( 1.0, scene, TransitionScene::Orientation::UP_OVER ) );\n\nDirector::getInstance( )->replaceScene( TransitionFlipAngular::create( 1.0, scene, TransitionScene::Orientation::RIGHT_OVER ) );", "language": "cplusplus", "name": "Cocos2d-x C++" }, { "code": "cc.director.runScene( new cc.TransitionFlipAngular( 1.0, scene, cc.TRANSITION_ORIENTATION_DOWN_OVER ) );\n\ncc.director.runScene( new cc.TransitionFlipAngular( 1.0, scene, cc.TRANSITION_ORIENTATION_LEFT_OVER ) );\n\ncc.director.runScene( new cc.TransitionFlipAngular( 1.0, scene, cc.TRANSITION_ORIENTATION_UP_OVER ) );\n\ncc.director.runScene( new cc.TransitionFlipAngular( 1.0, scene, cc.TRANSITION_ORIENTATION_RIGHT_OVER ) );", "language": "javascript", "name": "Cocos2d-JS" } ] } [/block] ##**Flip X Transition** - Flips the screen horizontally. The front face is the outgoing scene and the back face is the incoming scene. [block:code] { "codes": [ { "code": "Scene *scene = NewScene::createScene( );\n\nDirector::getInstance( )->replaceScene( TransitionFlipX::create( 1.0, scene ) );", "language": "cplusplus", "name": "Cocos2d-x C++" }, { "code": "var scene = new NewScene( );\n\ncc.director.runScene( new cc.TransitionFlipX( 1.0, scene, cc.TRANSITION_ORIENTATION_UP_OVER ) );", "language": "javascript", "name": "Cocos2d-JS" } ] } [/block] [block:html] { "html": "<center><strong>Transition Preview</strong></center>\n\n<center>\n\t<video controls=\"\" preload=\"none\" name=\"media\" width=\"300\" poster=\"http://thumbs.gfycat.com/WatchfulPalatableHapuka-thumb100.jpg\">\n\t<source src=\"http://zippy.gfycat.com/WatchfulPalatableHapuka.webm\" type=\"video/webm\" />\n\t<source src=\"http://zippy.gfycat.com/WatchfulPalatableHapuka.ogv\" type=\"video/ogg\" />\n\t<source src=\"http://zippy.gfycat.com/WatchfulPalatableHapuka.mp4\" type=\"video/mp4\" />\n\t<p>Your web browser doesn't support this video preview, please download a new browser such as <a href=\"http://www.google.co.uk/intl/en_uk/chrome/browser/\">Google Chrome</a>.</p>\n\t</video>\n</center>" } [/block] 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. [block:code] { "codes": [ { "code": "Director::getInstance( )->replaceScene( TransitionFlipX::create( 1.0, scene, TransitionScene::Orientation::DOWN_OVER ) );\n\nDirector::getInstance( )->replaceScene( TransitionFlipX::create( 1.0, scene, TransitionScene::Orientation::LEFT_OVER ) );\n\nDirector::getInstance( )->replaceScene( TransitionFlipX::create( 1.0, scene, TransitionScene::Orientation::UP_OVER ) );\n\nDirector::getInstance( )->replaceScene( TransitionFlipX::create( 1.0, scene, TransitionScene::Orientation::RIGHT_OVER ) );", "language": "cplusplus", "name": "Cocos2d-x C++" }, { "code": "cc.director.runScene( new cc.TransitionFlipX( 1.0, scene, cc.TRANSITION_ORIENTATION_DOWN_OVER ) );\n\ncc.director.runScene( new cc.TransitionFlipX( 1.0, scene, cc.TRANSITION_ORIENTATION_LEFT_OVER ) );\n\ncc.director.runScene( new cc.TransitionFlipX( 1.0, scene, cc.TRANSITION_ORIENTATION_UP_OVER ) );\n\ncc.director.runScene( new cc.TransitionFlipX( 1.0, scene, cc.TRANSITION_ORIENTATION_RIGHT_OVER ) );", "language": "javascript", "name": "Cocos2d-JS" } ] } [/block] ##**Flip Y Transition** - Flips the screen vertically. The front face is the outgoing scene and the back face is the incoming scene. [block:code] { "codes": [ { "code": "Scene *scene = NewScene::createScene( );\n\nDirector::getInstance( )->replaceScene( TransitionFlipY::create( 1.0, scene ) );", "language": "cplusplus", "name": "Cocos2d-x C++" }, { "code": "var scene = new NewScene( );\n\ncc.director.runScene( new cc.TransitionFlipY( 1.0, scene, cc.TRANSITION_ORIENTATION_UP_OVER ) );", "language": "javascript", "name": "Cocos2d-JS" } ] } [/block] [block:html] { "html": "<center><strong>Transition Preview</strong></center>\n\n<center>\n\t<video controls=\"\" preload=\"none\" name=\"media\" width=\"300\" poster=\"http://thumbs.gfycat.com/UltimateRingedAntbear-thumb100.jpg\">\n\t<source src=\"http://zippy.gfycat.com/UltimateRingedAntbear.webm\" type=\"video/webm\" />\n\t<source src=\"http://zippy.gfycat.com/UltimateRingedAntbear.ogv\" type=\"video/ogg\" />\n\t<source src=\"http://zippy.gfycat.com/UltimateRingedAntbear.mp4\" type=\"video/mp4\" />\n\t<p>Your web browser doesn't support this video preview, please download a new browser such as <a href=\"http://www.google.co.uk/intl/en_uk/chrome/browser/\">Google Chrome</a>.</p>\n\t</video>\n</center>" } [/block] 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. [block:code] { "codes": [ { "code": "Director::getInstance( )->replaceScene( TransitionFlipY::create( 1.0, scene, TransitionScene::Orientation::DOWN_OVER ) );\n\nDirector::getInstance( )->replaceScene( TransitionFlipY::create( 1.0, scene, TransitionScene::Orientation::LEFT_OVER ) );\n\nDirector::getInstance( )->replaceScene( TransitionFlipY::create( 1.0, scene, TransitionScene::Orientation::UP_OVER ) );\n\nDirector::getInstance( )->replaceScene( TransitionFlipY::create( 1.0, scene, TransitionScene::Orientation::RIGHT_OVER ) );", "language": "cplusplus", "name": "Cocos2d-x C++" }, { "code": "cc.director.runScene( new cc.TransitionFlipY( 1.0, scene, cc.TRANSITION_ORIENTATION_DOWN_OVER ) );\n\ncc.director.runScene( new cc.TransitionFlipY( 1.0, scene, cc.TRANSITION_ORIENTATION_LEFT_OVER ) );\n\ncc.director.runScene( new cc.TransitionFlipY( 1.0, scene, cc.TRANSITION_ORIENTATION_UP_OVER ) );\n\ncc.director.runScene( new cc.TransitionFlipY( 1.0, scene, cc.TRANSITION_ORIENTATION_RIGHT_OVER ) );", "language": "javascript", "name": "Cocos2d-JS" } ] } [/block] ##**Jump Zoom Transition** - Zoom out and jump the outgoing scene, and then jump and zoom in the incoming. [block:code] { "codes": [ { "code": "Scene *scene = NewScene::createScene( );\n \nDirector::getInstance( )->replaceScene( TransitionJumpZoom::create( 1.0, scene ) );", "language": "cplusplus", "name": "Cocos2d-x C++" }, { "code": "var scene = new NewScene( );\n\ncc.director.runScene( new cc.TransitionJumpZoom( 1.0, scene ) );", "language": "javascript", "name": "Cocos2d-JS" } ] } [/block] [block:html] { "html": "<center><strong>Transition Preview</strong></center>\n\n<center>\n\t<video controls=\"\" preload=\"none\" name=\"media\" width=\"300\" poster=\"http://thumbs.gfycat.com/WellmadeReadyAnemone-thumb100.jpg\">\n\t<source src=\"http://zippy.gfycat.com/WellmadeReadyAnemone.webm\" type=\"video/webm\" />\n\t<source src=\"http://zippy.gfycat.com/WellmadeReadyAnemone.ogv\" type=\"video/ogg\" />\n\t<source src=\"http://zippy.gfycat.com/WellmadeReadyAnemone.mp4\" type=\"video/mp4\" />\n\t<p>Your web browser doesn't support this video preview, please download a new browser such as <a href=\"http://www.google.co.uk/intl/en_uk/chrome/browser/\">Google Chrome</a>.</p>\n\t</video>\n</center>" } [/block] ##**Move In Bottom Transition** - Move in from to the bottom the incoming scene. [block:code] { "codes": [ { "code": "Scene *scene = NewScene::createScene( );\n\nDirector::getInstance( )->replaceScene( TransitionMoveInB::create( 1.0, scene ) );", "language": "cplusplus", "name": "Cocos2d-x C++" }, { "code": "var scene = new NewScene( );\n\ncc.director.runScene( new cc.TransitionMoveInB(1.0, scene ) );", "language": "javascript", "name": "Cocos2d-JS" } ] } [/block] [block:html] { "html": "<center><strong>Transition Preview</strong></center>\n\n<center>\n\t<video controls=\"\" preload=\"none\" name=\"media\" width=\"300\" poster=\"http://thumbs.gfycat.com/BlackThornyCatbird-thumb100.jpg\">\n\t<source src=\"http://zippy.gfycat.com/BlackThornyCatbird.webm\" type=\"video/webm\" />\n\t<source src=\"http://zippy.gfycat.com/BlackThornyCatbird.ogv\" type=\"video/ogg\" />\n\t<source src=\"http://zippy.gfycat.com/BlackThornyCatbird.mp4\" type=\"video/mp4\" />\n\t<p>Your web browser doesn't support this video preview, please download a new browser such as <a href=\"http://www.google.co.uk/intl/en_uk/chrome/browser/\">Google Chrome</a>.</p>\n\t</video>\n</center>" } [/block] ##**Move In Left Transition** - Move in from to the left the incoming scene. [block:code] { "codes": [ { "code": "Scene *scene = NewScene::createScene( );\n\nDirector::getInstance( )->replaceScene( TransitionMoveInL::create( 1.0, scene ) );", "language": "cplusplus", "name": "Cocos2d-x C++" }, { "code": "var scene = new NewScene( );\n\ncc.director.runScene( new cc.TransitionMoveInL(1.0, scene ) );", "language": "javascript", "name": "Cocos2d-JS" } ] } [/block] [block:html] { "html": "<center><strong>Transition Preview</strong></center>\n\n<center>\n\t<video controls=\"\" preload=\"none\" name=\"media\" width=\"300\" poster=\"http://thumbs.gfycat.com/ReliableSpeedyJabiru-thumb100.jpg\">\n\t<source src=\"http://zippy.gfycat.com/ReliableSpeedyJabiru.webm\" type=\"video/webm\" />\n\t<source src=\"http://zippy.gfycat.com/ReliableSpeedyJabiru.ogv\" type=\"video/ogg\" />\n\t<source src=\"http://zippy.gfycat.com/ReliableSpeedyJabiru.mp4\" type=\"video/mp4\" />\n\t<p>Your web browser doesn't support this video preview, please download a new browser such as <a href=\"http://www.google.co.uk/intl/en_uk/chrome/browser/\">Google Chrome</a>.</p>\n\t</video>\n</center>" } [/block] ##**Move In Right Transition** - Move in from to the right the incoming scene. [block:code] { "codes": [ { "code": "Scene *scene = NewScene::createScene( );\n\nDirector::getInstance( )->replaceScene( TransitionMoveInR::create( 1.0, scene ) );", "language": "cplusplus", "name": "Cocos2d-x C++" }, { "code": "var scene = new NewScene( );\n\ncc.director.runScene( new cc.TransitionMoveInR(1.0, scene ) );", "language": "javascript", "name": "Cocos2d-JS" } ] } [/block] [block:html] { "html": "<center><strong>Transition Preview</strong></center>\n\n<center>\n\t<video controls=\"\" preload=\"none\" name=\"media\" width=\"300\" poster=\"http://thumbs.gfycat.com/DeliciousEachBeardeddragon-thumb100.jpg\">\n\t<source src=\"http://zippy.gfycat.com/DeliciousEachBeardeddragon.webm\" type=\"video/webm\" />\n\t<source src=\"http://zippy.gfycat.com/DeliciousEachBeardeddragon.ogv\" type=\"video/ogg\" />\n\t<source src=\"http://zippy.gfycat.com/DeliciousEachBeardeddragon.mp4\" type=\"video/mp4\" />\n\t<p>Your web browser doesn't support this video preview, please download a new browser such as <a href=\"http://www.google.co.uk/intl/en_uk/chrome/browser/\">Google Chrome</a>.</p>\n\t</video>\n</center>" } [/block] ##**Move In Top Transition** - Move in from to the top the incoming scene. [block:code] { "codes": [ { "code": "Scene *scene = NewScene::createScene( );\n\nDirector::getInstance( )->replaceScene( TransitionMoveInT::create( 1.0, scene ) );", "language": "cplusplus", "name": "Cocos2d-x C++" }, { "code": "var scene = new NewScene( );\n\ncc.director.runScene( new cc.TransitionMoveInT(1.0, scene ) );", "language": "javascript", "name": "Cocos2d-JS" } ] } [/block] [block:html] { "html": "<center><strong>Transition Preview</strong></center>\n\n<center>\n\t<video controls=\"\" preload=\"none\" name=\"media\" width=\"300\" poster=\"http://thumbs.gfycat.com/DecisiveFatHedgehog-thumb100.jpg\">\n\t<source src=\"http://zippy.gfycat.com/DecisiveFatHedgehog.webm\" type=\"video/webm\" />\n\t<source src=\"http://zippy.gfycat.com/DecisiveFatHedgehog.ogv\" type=\"video/ogg\" />\n\t<source src=\"http://zippy.gfycat.com/DecisiveFatHedgehog.mp4\" type=\"video/mp4\" />\n\t<p>Your web browser doesn't support this video preview, please download a new browser such as <a href=\"http://www.google.co.uk/intl/en_uk/chrome/browser/\">Google Chrome</a>.</p>\n\t</video>\n</center>" } [/block] ##**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. [block:code] { "codes": [ { "code": "Scene *scene = NewScene::createScene( );\n\nDirector::getInstance( )->replaceScene( TransitionPageTurn::create( 1.0, scene, true ) );", "language": "cplusplus", "name": "Cocos2d-x C++" }, { "code": "var scene = new NewScene( );\n\ncc.director.runScene( new cc.TransitionPageTurn( 1.0, scene, true ) );", "language": "javascript", "name": "Cocos2d-JS" } ] } [/block] [block:html] { "html": "<center><strong>Transition Preview</strong></center>\n\n<center>\n\t<video controls=\"\" preload=\"none\" name=\"media\" width=\"300\" poster=\"http://thumbs.gfycat.com/OldfashionedVibrantAcouchi-thumb100.jpg\">\n\t<source src=\"http://zippy.gfycat.com/OldfashionedVibrantAcouchi.webm\" type=\"video/webm\" />\n\t<source src=\"http://zippy.gfycat.com/OldfashionedVibrantAcouchi.ogv\" type=\"video/ogg\" />\n\t<source src=\"http://zippy.gfycat.com/OldfashionedVibrantAcouchi.mp4\" type=\"video/mp4\" />\n\t<p>Your web browser doesn't support this video preview, please download a new browser such as <a href=\"http://www.google.co.uk/intl/en_uk/chrome/browser/\">Google Chrome</a>.</p>\n\t</video>\n</center>" } [/block] 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. [block:code] { "codes": [ { "code": "Scene *scene = NewScene::createScene( );\n\nDirector::getInstance( )->replaceScene( TransitionProgressHorizontal::create( 1.0, scene ) );", "language": "cplusplus", "name": "Cocos2d-x C++" }, { "code": "var scene = new NewScene( );\n\ncc.director.runScene( new cc.TransitionProgressHorizontal( 1.0, scene ) );", "language": "javascript", "name": "Cocos2d-JS" } ] } [/block] [block:html] { "html": "<center><strong>Transition Preview</strong></center>\n\n<center>\n\t<video controls=\"\" preload=\"none\" name=\"media\" width=\"300\" poster=\"http://thumbs.gfycat.com/AllThirdAmericanbadger-thumb100.jpg\">\n\t<source src=\"http://zippy.gfycat.com/AllThirdAmericanbadger.webm\" type=\"video/webm\" />\n\t<source src=\"http://zippy.gfycat.com/AllThirdAmericanbadger.ogv\" type=\"video/ogg\" />\n\t<source src=\"http://zippy.gfycat.com/AllThirdAmericanbadger.mp4\" type=\"video/mp4\" />\n\t<p>Your web browser doesn't support this video preview, please download a new browser such as <a href=\"http://www.google.co.uk/intl/en_uk/chrome/browser/\">Google Chrome</a>.</p>\n\t</video>\n</center>" } [/block] ##**Progress In Out Transition** [block:code] { "codes": [ { "code": "Scene *scene = NewScene::createScene( );\n\nDirector::getInstance( )->replaceScene( TransitionProgressInOut::create( 1.0, scene ) );", "language": "cplusplus", "name": "Cocos2d-x C++" }, { "code": "var scene = new NewScene( );\n\t\ncc.director.runScene( new cc.TransitionProgressInOut( 1.0, scene ) );", "language": "javascript", "name": "Cocos2d-JS" } ] } [/block] [block:html] { "html": "<center><strong>Transition Preview</strong></center>\n\n<center>\n\t<video controls=\"\" preload=\"none\" name=\"media\" width=\"300\" poster=\"http://thumbs.gfycat.com/AstonishingNastyHadrosaurus-thumb100.jpg\">\n\t<source src=\"http://zippy.gfycat.com/AstonishingNastyHadrosaurus.webm\" type=\"video/webm\" />\n\t<source src=\"http://zippy.gfycat.com/AstonishingNastyHadrosaurus.ogv\" type=\"video/ogg\" />\n\t<source src=\"http://zippy.gfycat.com/AstonishingNastyHadrosaurus.mp4\" type=\"video/mp4\" />\n\t<p>Your web browser doesn't support this video preview, please download a new browser such as <a href=\"http://www.google.co.uk/intl/en_uk/chrome/browser/\">Google Chrome</a>.</p>\n\t</video>\n</center>" } [/block] ##**Progress Out In Transition** [block:code] { "codes": [ { "code": "Scene *scene = NewScene::createScene( );\n\nDirector::getInstance( )->replaceScene( TransitionProgressOutIn::create( 1.0, scene ) );", "language": "cplusplus", "name": "Cocos2d-x C++" }, { "code": "var scene = new NewScene( );\n\ncc.director.runScene( new cc.TransitionProgressOutIn( 1.0, scene ) );", "language": "javascript", "name": "Cocos2d-JS" } ] } [/block] [block:html] { "html": "<center><strong>Transition Preview</strong></center>\n\n<center>\n\t<video controls=\"\" preload=\"none\" name=\"media\" width=\"300\" poster=\"http://thumbs.gfycat.com/SevereEnchantedFirecrest-thumb100.jpg\">\n\t<source src=\"http://zippy.gfycat.com/SevereEnchantedFirecrest.webm\" type=\"video/webm\" />\n\t<source src=\"http://zippy.gfycat.com/SevereEnchantedFirecrest.ogv\" type=\"video/ogg\" />\n\t<source src=\"http://zippy.gfycat.com/SevereEnchantedFirecrest.mp4\" type=\"video/mp4\" />\n\t<p>Your web browser doesn't support this video preview, please download a new browser such as <a href=\"http://www.google.co.uk/intl/en_uk/chrome/browser/\">Google Chrome</a>.</p>\n\t</video>\n</center>" } [/block] ##**Radial Counter Clock-Wise Transition** - A counter clock-wise radial transition to the next scene. [block:code] { "codes": [ { "code": "Scene *scene = NewScene::createScene( );\n\nDirector::getInstance( )->replaceScene( TransitionProgressRadialCCW::create( 1.0, scene ) );", "language": "cplusplus", "name": "Cocos2d-x C++" }, { "code": "var scene = new NewScene( );\n\ncc.director.runScene( new cc.TransitionProgressRadialCCW( 1.0, scene ) );", "language": "javascript", "name": "Cocos2d-JS" } ] } [/block] [block:html] { "html": "<center><strong>Transition Preview</strong></center>\n\n<center>\n\t<video controls=\"\" preload=\"none\" name=\"media\" width=\"300\" poster=\"http://thumbs.gfycat.com/ForsakenGregariousIndianskimmer-thumb100.jpg\">\n\t<source src=\"http://zippy.gfycat.com/ForsakenGregariousIndianskimmer.webm\" type=\"video/webm\" />\n\t<source src=\"http://zippy.gfycat.com/ForsakenGregariousIndianskimmer.ogv\" type=\"video/ogg\" />\n\t<source src=\"http://zippy.gfycat.com/ForsakenGregariousIndianskimmer.mp4\" type=\"video/mp4\" />\n\t<p>Your web browser doesn't support this video preview, please download a new browser such as <a href=\"http://www.google.co.uk/intl/en_uk/chrome/browser/\">Google Chrome</a>.</p>\n\t</video>\n</center>" } [/block] ##**Radial Clock-Wise Transition** - A clock-wise radial transition to the next scene. [block:code] { "codes": [ { "code": "Scene *scene = NewScene::createScene( );\n\nDirector::getInstance( )->replaceScene( TransitionProgressRadialCW::create( 1.0, scene ) );", "language": "cplusplus", "name": "Cocos2d-x C++" }, { "code": "var scene = new NewScene( );\n\ncc.director.runScene( new cc.TransitionProgressRadialCW( 1.0, scene ) );", "language": "javascript", "name": "Cocos2d-JS" } ] } [/block] [block:html] { "html": "<center><strong>Transition Preview</strong></center>\n\n<center>\n\t<video controls=\"\" preload=\"none\" name=\"media\" width=\"300\" poster=\"http://thumbs.gfycat.com/MaturePoisedApisdorsatalaboriosa-thumb100.jpg\">\n\t<source src=\"http://zippy.gfycat.com/MaturePoisedApisdorsatalaboriosa.webm\" type=\"video/webm\" />\n\t<source src=\"http://zippy.gfycat.com/MaturePoisedApisdorsatalaboriosa.ogv\" type=\"video/ogg\" />\n\t<source src=\"http://zippy.gfycat.com/MaturePoisedApisdorsatalaboriosa.mp4\" type=\"video/mp4\" />\n\t<p>Your web browser doesn't support this video preview, please download a new browser such as <a href=\"http://www.google.co.uk/intl/en_uk/chrome/browser/\">Google Chrome</a>.</p>\n\t</video>\n</center>" } [/block] ##**Vertical Progress Transition** - A clock-wise radial transition to the next scene. [block:code] { "codes": [ { "code": "Scene *scene = NewScene::createScene( );\n \nDirector::getInstance( )->replaceScene( TransitionProgressVertical::create( 1.0, scene ) );", "language": "cplusplus", "name": "Cocos2d-x C++" }, { "code": "var scene = new NewScene( );\n\ncc.director.runScene( new cc.TransitionProgressVertical( 1.0, scene ) );", "language": "javascript", "name": "Cocos2d-JS" } ] } [/block] [block:html] { "html": "<center><strong>Transition Preview</strong></center>\n\n<center>\n\t<video controls=\"\" preload=\"none\" name=\"media\" width=\"300\" poster=\"http://thumbs.gfycat.com/WeakNaturalApatosaur-thumb100.jpg\">\n\t<source src=\"http://zippy.gfycat.com/WeakNaturalApatosaur.webm\" type=\"video/webm\" />\n\t<source src=\"http://zippy.gfycat.com/WeakNaturalApatosaur.ogv\" type=\"video/ogg\" />\n\t<source src=\"http://zippy.gfycat.com/WeakNaturalApatosaur.mp4\" type=\"video/mp4\" />\n\t<p>Your web browser doesn't support this video preview, please download a new browser such as <a href=\"http://www.google.co.uk/intl/en_uk/chrome/browser/\">Google Chrome</a>.</p>\n\t</video>\n</center>" } [/block] ##**Rotate and Zoom Transition** - Rotate and zoom out the outgoing scene, and then rotate and zoom in the incoming scene. [block:code] { "codes": [ { "code": "Scene *scene = NewScene::createScene( );\n\nDirector::getInstance( )->replaceScene( TransitionRotoZoom::create( 1.0, scene ) );", "language": "cplusplus", "name": "Cocos2d-x C++" }, { "code": "var scene = new NewScene( );\n\ncc.director.runScene( new cc.TransitionRotoZoom( 1.0, scene ) );", "language": "javascript", "name": "Cocos2d-JS" } ] } [/block] [block:html] { "html": "<center><strong>Transition Preview</strong></center>\n\n<center>\n\t<video controls=\"\" preload=\"none\" name=\"media\" width=\"300\" poster=\"http://thumbs.gfycat.com/SecretFocusedGypsymoth-thumb100.jpg\">\n\t<source src=\"http://zippy.gfycat.com/SecretFocusedGypsymoth.webm\" type=\"video/webm\" />\n\t<source src=\"http://zippy.gfycat.com/SecretFocusedGypsymoth.ogv\" type=\"video/ogg\" />\n\t<source src=\"http://zippy.gfycat.com/SecretFocusedGypsymoth.mp4\" type=\"video/mp4\" />\n\t<p>Your web browser doesn't support this video preview, please download a new browser such as <a href=\"http://www.google.co.uk/intl/en_uk/chrome/browser/\">Google Chrome</a>.</p>\n\t</video>\n</center>" } [/block] ##**Shrink and Grow Transition** - Shrink the outgoing scene while growing the incoming scene. [block:code] { "codes": [ { "code": "Scene *scene = NewScene::createScene( );\n\nDirector::getInstance( )->replaceScene( TransitionShrinkGrow::create( 1.0, scene ) );", "language": "cplusplus", "name": "Cocos2d-x C++" }, { "code": "var scene = new NewScene( );\n\ncc.director.runScene( new cc.TransitionShrinkGrow( 1.0, scene ) );", "language": "javascript", "name": "Cocos2d-JS" } ] } [/block] [block:html] { "html": "<center><strong>Transition Preview</strong></center>\n\n<center>\n\t<video controls=\"\" preload=\"none\" name=\"media\" width=\"300\" poster=\"http://thumbs.gfycat.com/SourKnobbyImperatorangel-thumb100.jpg\">\n\t<source src=\"http://zippy.gfycat.com/SourKnobbyImperatorangel.webm\" type=\"video/webm\" />\n\t<source src=\"http://zippy.gfycat.com/SourKnobbyImperatorangel.ogv\" type=\"video/ogg\" />\n\t<source src=\"http://zippy.gfycat.com/SourKnobbyImperatorangel.mp4\" type=\"video/mp4\" />\n\t<p>Your web browser doesn't support this video preview, please download a new browser such as <a href=\"http://www.google.co.uk/intl/en_uk/chrome/browser/\">Google Chrome</a>.</p>\n\t</video>\n</center>" } [/block] ##**Slide In From Bottom Transition** - Slide in the incoming scene from the bottom border. [block:code] { "codes": [ { "code": "Scene *scene = NewScene::createScene( );\n\nDirector::getInstance( )->replaceScene( TransitionSlideInB::create( 1.0, scene ) );", "language": "cplusplus", "name": "Cocos2d-x C++" }, { "code": "var scene = new NewScene( );\n\ncc.director.runScene( new cc.TransitionSlideInB( 1.0, scene ) );", "language": "javascript", "name": "Cocos2d-JS" } ] } [/block] [block:html] { "html": "<center><strong>Transition Preview</strong></center>\n\n<center>\n\t<video controls=\"\" preload=\"none\" name=\"media\" width=\"300\" poster=\"http://thumbs.gfycat.com/LargeNecessaryDogwoodtwigborer-thumb100.jpg\">\n\t<source src=\"http://zippy.gfycat.com/LargeNecessaryDogwoodtwigborer.webm\" type=\"video/webm\" />\n\t<source src=\"http://zippy.gfycat.com/LargeNecessaryDogwoodtwigborer.ogv\" type=\"video/ogg\" />\n\t<source src=\"http://zippy.gfycat.com/LargeNecessaryDogwoodtwigborer.mp4\" type=\"video/mp4\" />\n\t<p>Your web browser doesn't support this video preview, please download a new browser such as <a href=\"http://www.google.co.uk/intl/en_uk/chrome/browser/\">Google Chrome</a>.</p>\n\t</video>\n</center>" } [/block] ##**Slide In From Left Transition** - Slide in the incoming scene from the left border. [block:code] { "codes": [ { "code": "Scene *scene = NewScene::createScene( );\n\nDirector::getInstance( )->replaceScene( TransitionSlideInL::create( 1.0, scene ) );", "language": "cplusplus", "name": "Cocos2d-x C++" }, { "code": "var scene = new NewScene( );\n\ncc.director.runScene( new cc.TransitionSlideInL( 1.0, scene ) );", "language": "javascript", "name": "Cocos2d-JS" } ] } [/block] [block:html] { "html": "<center><strong>Transition Preview</strong></center>\n\n<center>\n\t<video controls=\"\" preload=\"none\" name=\"media\" width=\"300\" poster=\"http://thumbs.gfycat.com/MajorUncomfortableIraniangroundjay-thumb100.jpg\">\n\t<source src=\"http://zippy.gfycat.com/MajorUncomfortableIraniangroundjay.webm\" type=\"video/webm\" />\n\t<source src=\"http://zippy.gfycat.com/MajorUncomfortableIraniangroundjay.ogv\" type=\"video/ogg\" />\n\t<source src=\"http://zippy.gfycat.com/MajorUncomfortableIraniangroundjay.mp4\" type=\"video/mp4\" />\n\t<p>Your web browser doesn't support this video preview, please download a new browser such as <a href=\"http://www.google.co.uk/intl/en_uk/chrome/browser/\">Google Chrome</a>.</p>\n\t</video>\n</center>" } [/block] ##**Slide In From Right Transition** - Slide in the incoming scene from the right border. [block:code] { "codes": [ { "code": "Scene *scene = NewScene::createScene( );\n\nDirector::getInstance( )->replaceScene( TransitionSlideInR::create( 1.0, scene ) );", "language": "cplusplus", "name": "Cocos2d-x C++" }, { "code": "var scene = new NewScene( );\n\ncc.director.runScene( new cc.TransitionSlideInR( 1.0, scene ) );", "language": "javascript", "name": "Cocos2d-JS" } ] } [/block] [block:html] { "html": "<center><strong>Transition Preview</strong></center>\n\n<center>\n\t<video controls=\"\" preload=\"none\" name=\"media\" width=\"300\" poster=\"http://thumbs.gfycat.com/SickFewBighorn-thumb100.jpg\">\n\t<source src=\"http://zippy.gfycat.com/SickFewBighorn.webm\" type=\"video/webm\" />\n\t<source src=\"http://zippy.gfycat.com/SickFewBighorn.ogv\" type=\"video/ogg\" />\n\t<source src=\"http://zippy.gfycat.com/SickFewBighorn.mp4\" type=\"video/mp4\" />\n\t<p>Your web browser doesn't support this video preview, please download a new browser such as <a href=\"http://www.google.co.uk/intl/en_uk/chrome/browser/\">Google Chrome</a>.</p>\n\t</video>\n</center>" } [/block] ##**Slide In From Top Transition** - Slide in the incoming scene from the top border. [block:code] { "codes": [ { "code": "Scene *scene = NewScene::createScene( );\n\nDirector::getInstance( )->replaceScene( TransitionSlideInT::create( 1.0, scene ) );", "language": "cplusplus", "name": "Cocos2d-x C++" }, { "code": "var scene = new NewScene( );\n\ncc.director.runScene( new cc.TransitionSlideInT( 1.0, scene ) );", "language": "javascript", "name": "Cocos2d-JS" } ] } [/block] [block:html] { "html": "<center><strong>Transition Preview</strong></center>\n\n<center>\n\t<video controls=\"\" preload=\"none\" name=\"media\" width=\"300\" poster=\"http://thumbs.gfycat.com/SingleReflectingIndianrockpython-thumb100.jpg\">\n\t<source src=\"http://zippy.gfycat.com/SingleReflectingIndianrockpython.webm\" type=\"video/webm\" />\n\t<source src=\"http://zippy.gfycat.com/SingleReflectingIndianrockpython.ogv\" type=\"video/ogg\" />\n\t<source src=\"http://zippy.gfycat.com/SingleReflectingIndianrockpython.mp4\" type=\"video/mp4\" />\n\t<p>Your web browser doesn't support this video preview, please download a new browser such as <a href=\"http://www.google.co.uk/intl/en_uk/chrome/browser/\">Google Chrome</a>.</p>\n\t</video>\n</center>" } [/block] ##**Split Column Transition** - The odd columns goes upwards while the even columns goes downwards. [block:code] { "codes": [ { "code": "Scene *scene = NewScene::createScene( );\n\nDirector::getInstance( )->replaceScene( TransitionSplitCols::create( 1.0, scene ) );", "language": "cplusplus", "name": "Cocos2d-x C++" }, { "code": "var scene = new NewScene( );\n\ncc.director.runScene( new cc.TransitionSplitCols( 1.0, scene ) );", "language": "javascript", "name": "Cocos2d-JS" } ] } [/block] [block:html] { "html": "<center><strong>Transition Preview</strong></center>\n\n<center>\n\t<video controls=\"\" preload=\"none\" name=\"media\" width=\"300\" poster=\"http://thumbs.gfycat.com/PleasedGrotesqueGreatdane-thumb100.jpg\">\n\t<source src=\"http://zippy.gfycat.com/PleasedGrotesqueGreatdane.webm\" type=\"video/webm\" />\n\t<source src=\"http://zippy.gfycat.com/PleasedGrotesqueGreatdane.ogv\" type=\"video/ogg\" />\n\t<source src=\"http://zippy.gfycat.com/PleasedGrotesqueGreatdane.mp4\" type=\"video/mp4\" />\n\t<p>Your web browser doesn't support this video preview, please download a new browser such as <a href=\"http://www.google.co.uk/intl/en_uk/chrome/browser/\">Google Chrome</a>.</p>\n\t</video>\n</center>" } [/block] ##**Split Row Transition** - The odd rows goes to the left while the even rows goes to the right. [block:code] { "codes": [ { "code": "Scene *scene = NewScene::createScene( );\n\nDirector::getInstance( )->replaceScene( TransitionSplitRows::create( 1.0, scene ) );", "language": "cplusplus", "name": "Cocos2d-x C++" }, { "code": "var scene = new NewScene( );\n\ncc.director.runScene( new cc.TransitionSplitRows( 1.0, scene ) );", "language": "javascript", "name": "Cocos2d-JS" } ] } [/block] [block:html] { "html": "<center><strong>Transition Preview</strong></center>\n\n<center>\n\t<video controls=\"\" preload=\"none\" name=\"media\" width=\"300\" poster=\"http://thumbs.gfycat.com/WetBreakableHoki-thumb100.jpg\">\n\t<source src=\"http://zippy.gfycat.com/WetBreakableHoki.webm\" type=\"video/webm\" />\n\t<source src=\"http://zippy.gfycat.com/WetBreakableHoki.ogv\" type=\"video/ogg\" />\n\t<source src=\"http://zippy.gfycat.com/WetBreakableHoki.mp4\" type=\"video/mp4\" />\n\t<p>Your web browser doesn't support this video preview, please download a new browser such as <a href=\"http://www.google.co.uk/intl/en_uk/chrome/browser/\">Google Chrome</a>.</p>\n\t</video>\n</center>" } [/block] ##**Turn Off The Tiles Transition** - Turn of the tiles of the outgoing scene in random order. [block:code] { "codes": [ { "code": "Scene *scene = NewScene::createScene( );\n\nDirector::getInstance( )->replaceScene( TransitionTurnOffTiles::create( 1.0, scene ) );", "language": "cplusplus", "name": "Cocos2d-x C++" }, { "code": "var scene = new NewScene( );\n\ncc.director.runScene( new cc.TransitionTurnOffTiles( 1.0, scene ) );", "language": "javascript", "name": "Cocos2d-JS" } ] } [/block] [block:html] { "html": "<center><strong>Transition Preview</strong></center>\n\n<center>\n\t<video controls=\"\" preload=\"none\" name=\"media\" width=\"300\" poster=\"http://thumbs.gfycat.com/BelovedReadyHylaeosaurus-thumb100.jpg\">\n\t<source src=\"http://zippy.gfycat.com/BelovedReadyHylaeosaurus.webm\" type=\"video/webm\" />\n\t<source src=\"http://zippy.gfycat.com/BelovedReadyHylaeosaurus.ogv\" type=\"video/ogg\" />\n\t<source src=\"http://zippy.gfycat.com/BelovedReadyHylaeosaurus.mp4\" type=\"video/mp4\" />\n\t<p>Your web browser doesn't support this video preview, please download a new browser such as <a href=\"http://www.google.co.uk/intl/en_uk/chrome/browser/\">Google Chrome</a>.</p>\n\t</video>\n</center>" } [/block] ##**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. [block:code] { "codes": [ { "code": "Scene *scene = NewScene::createScene( );\n\nDirector::getInstance( )->replaceScene( TransitionZoomFlipAngular::create( 1.0, scene ) );", "language": "cplusplus", "name": "Cocos2d-x C++" }, { "code": "var scene = new NewScene( );\n\ncc.director.runScene( new cc.TransitionZoomFlipAngular( 1.0, scene, cc.TRANSITION_ORIENTATION_DOWN_OVER ) );", "language": "javascript", "name": "Cocos2d-JS" } ] } [/block] [block:html] { "html": "<center><strong>Transition Preview</strong></center>\n\n<center>\n\t<video controls=\"\" preload=\"none\" name=\"media\" width=\"300\" poster=\"http://thumbs.gfycat.com/PrestigiousInferiorKookaburra-thumb100.jpg\">\n\t<source src=\"http://zippy.gfycat.com/PrestigiousInferiorKookaburra.webm\" type=\"video/webm\" />\n\t<source src=\"http://zippy.gfycat.com/PrestigiousInferiorKookaburra.ogv\" type=\"video/ogg\" />\n\t<source src=\"http://zippy.gfycat.com/PrestigiousInferiorKookaburra.mp4\" type=\"video/mp4\" />\n\t<p>Your web browser doesn't support this video preview, please download a new browser such as <a href=\"http://www.google.co.uk/intl/en_uk/chrome/browser/\">Google Chrome</a>.</p>\n\t</video>\n</center>" } [/block] 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. [block:code] { "codes": [ { "code": "Director::getInstance( )->replaceScene( TransitionZoomFlipAngular::create( 1.0, scene, TransitionScene::Orientation::DOWN_OVER ) );\n\nDirector::getInstance( )->replaceScene( TransitionZoomFlipAngular::create( 1.0, scene, TransitionScene::Orientation::LEFT_OVER ) );\n\nDirector::getInstance( )->replaceScene( TransitionZoomFlipAngular::create( 1.0, scene, TransitionScene::Orientation::RIGHT_OVER ) );\n\nDirector::getInstance( )->replaceScene( TransitionZoomFlipAngular::create( 1.0, scene, TransitionScene::Orientation::UP_OVER ) );", "language": "cplusplus", "name": "Cocos2d-x C++" }, { "code": "cc.director.runScene( new cc.TransitionZoomFlipAngular( 1.0, scene, cc.TRANSITION_ORIENTATION_DOWN_OVER ) );\n\ncc.director.runScene( new cc.TransitionZoomFlipAngular( 1.0, scene, cc.TRANSITION_ORIENTATION_LEFT_OVER ) );\n\ncc.director.runScene( new cc.TransitionZoomFlipAngular( 1.0, scene, cc.TRANSITION_ORIENTATION_RIGHT_OVER ) );\n\ncc.director.runScene( new cc.TransitionZoomFlipAngular( 1.0, scene, cc.TRANSITION_ORIENTATION_UP_OVER ) );", "language": "javascript", "name": "Cocos2d-JS" } ] } [/block] ##**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. [block:code] { "codes": [ { "code": "Scene *scene = NewScene::createScene( );\n\nDirector::getInstance( )->replaceScene( TransitionZoomFlipX::create( 1.0, scene ) );", "language": "cplusplus", "name": "Cocos2d-x C++" }, { "code": "var scene = new NewScene( );\n\ncc.director.runScene( new cc.TransitionZoomFlipX( 1.0, scene, cc.TRANSITION_ORIENTATION_DOWN_OVER ) );", "language": "javascript", "name": "Cocos2d-JS" } ] } [/block] [block:html] { "html": "<center><strong>Transition Preview</strong></center>\n\n<center>\n\t<video controls=\"\" preload=\"none\" name=\"media\" width=\"300\" poster=\"http://thumbs.gfycat.com/UnrulyDecisiveBigmouthbass-thumb100.jpg\">\n\t<source src=\"http://zippy.gfycat.com/UnrulyDecisiveBigmouthbass.webm\" type=\"video/webm\" />\n\t<source src=\"http://zippy.gfycat.com/UnrulyDecisiveBigmouthbass.ogv\" type=\"video/ogg\" />\n\t<source src=\"http://zippy.gfycat.com/UnrulyDecisiveBigmouthbass.mp4\" type=\"video/mp4\" />\n\t<p>Your web browser doesn't support this video preview, please download a new browser such as <a href=\"http://www.google.co.uk/intl/en_uk/chrome/browser/\">Google Chrome</a>.</p>\n\t</video>\n</center>" } [/block] 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. [block:code] { "codes": [ { "code": "Director::getInstance( )->replaceScene( TransitionZoomFlipX::create( 1.0, scene, TransitionScene::Orientation::DOWN_OVER ) );\n\nDirector::getInstance( )->replaceScene( TransitionZoomFlipX::create( 1.0, scene, TransitionScene::Orientation::LEFT_OVER ) );\n\nDirector::getInstance( )->replaceScene( TransitionZoomFlipX::create( 1.0, scene, TransitionScene::Orientation::RIGHT_OVER ) );\n\nDirector::getInstance( )->replaceScene( TransitionZoomFlipX::create( 1.0, scene, TransitionScene::Orientation::UP_OVER ) );", "language": "cplusplus", "name": "Cocos2d-x C++" }, { "code": "cc.director.runScene( new cc.TransitionZoomFlipX( 1.0, scene, cc.TRANSITION_ORIENTATION_DOWN_OVER ) );\n\ncc.director.runScene( new cc.TransitionZoomFlipX( 1.0, scene, cc.TRANSITION_ORIENTATION_LEFT_OVER ) );\n\ncc.director.runScene( new cc.TransitionZoomFlipX( 1.0, scene, cc.TRANSITION_ORIENTATION_RIGHT_OVER ) );\n\ncc.director.runScene( new cc.TransitionZoomFlipX( 1.0, scene, cc.TRANSITION_ORIENTATION_UP_OVER ) );", "language": "javascript", "name": "Cocos2d-JS" } ] } [/block] ##**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. [block:code] { "codes": [ { "code": "Scene *scene = NewScene::createScene( );\n\nDirector::getInstance( )->replaceScene( TransitionZoomFlipY::create( 1.0, scene ) );", "language": "cplusplus", "name": "Cocos2d-x C++" }, { "code": "var scene = new NewScene( );\n\ncc.director.runScene( new cc.TransitionZoomFlipY( 1.0, scene, cc.TRANSITION_ORIENTATION_DOWN_OVER ) );", "language": "javascript", "name": "Cocos2d-JS" } ] } [/block] [block:html] { "html": "<center><strong>Transition Preview</strong></center>\n\n<center>\n\t<video controls=\"\" preload=\"none\" name=\"media\" width=\"300\" poster=\"http://thumbs.gfycat.com/WearyImpracticalAsiansmallclawedotter-thumb100.jpg\">\n\t<source src=\"http://zippy.gfycat.com/WearyImpracticalAsiansmallclawedotter.webm\" type=\"video/webm\" />\n\t<source src=\"http://zippy.gfycat.com/WearyImpracticalAsiansmallclawedotter.ogv\" type=\"video/ogg\" />\n\t<source src=\"http://zippy.gfycat.com/WearyImpracticalAsiansmallclawedotter.mp4\" type=\"video/mp4\" />\n\t<p>Your web browser doesn't support this video preview, please download a new browser such as <a href=\"http://www.google.co.uk/intl/en_uk/chrome/browser/\">Google Chrome</a>.</p>\n\t</video>\n</center>" } [/block] 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. [block:code] { "codes": [ { "code": "Director::getInstance( )->replaceScene( TransitionZoomFlipY::create( 1.0, scene, TransitionScene::Orientation::DOWN_OVER ) );\n\nDirector::getInstance( )->replaceScene( TransitionZoomFlipY::create( 1.0, scene, TransitionScene::Orientation::LEFT_OVER ) );\n\nDirector::getInstance( )->replaceScene( TransitionZoomFlipY::create( 1.0, scene, TransitionScene::Orientation::RIGHT_OVER ) );\n\nDirector::getInstance( )->replaceScene( TransitionZoomFlipY::create( 1.0, scene, TransitionScene::Orientation::UP_OVER ) );", "language": "cplusplus", "name": "Cocos2d-x C++" }, { "code": "cc.director.runScene( new cc.TransitionZoomFlipY( 1.0, scene, cc.TRANSITION_ORIENTATION_DOWN_OVER ) );\n\ncc.director.runScene( new cc.TransitionZoomFlipY( 1.0, scene, cc.TRANSITION_ORIENTATION_LEFT_OVER ) );\n\ncc.director.runScene( new cc.TransitionZoomFlipY( 1.0, scene, cc.TRANSITION_ORIENTATION_RIGHT_OVER ) );\n\ncc.director.runScene( new cc.TransitionZoomFlipY( 1.0, scene, cc.TRANSITION_ORIENTATION_UP_OVER ) );", "language": "javascript", "name": "Cocos2d-JS" } ] } [/block]