cocos2d-js Transition 一覧（ CCTransition 編）

Transition 全体一覧

nisenabe.hatenablog.com

一覧

ココでは下記のリストにある transition の gif を貼る。

CCTransition.js に定義

• cc.TransitionSceneOriented
• cc.TransitionRotoZoom
• cc.TransitionJumpZoom
• cc.TransitionMoveInL
• cc.TransitionMoveInR
• cc.TransitionMoveInT
• cc.TransitionMoveInB
• cc.TransitionSlideInL
• cc.TransitionSlideInR
• cc.TransitionSlideInB
• cc.TransitionSlideInT
• cc.TransitionShrinkGro
• cc.TransitionFlipX
• cc.TransitionFlipY
• cc.TransitionFlipAngular
• cc.TransitionZoomFlipX
• cc.TransitionZoomFlipY
• cc.TransitionZoomFlipAngular
• cc.TransitionFade
• cc.TransitionCrossFade
• cc.TransitionTurnOffTiles
• cc.TransitionSplitCols
• cc.TransitionSplitRows
• cc.TransitionFadeTR
• cc.TransitionFadeBL
• cc.TransitionFadeUp
• cc.TransitionFadeDown

動作確認環境

• cocos2d-js v3.5
• firefox

cc.TransitionFade

    //load resources
    cc.LoaderScene.preload(g_resources, function () {
        cc.director.runScene(new ColorScene(cc.color(255,255,0,255)));
        _.delay(function() {
            var nextScene = new ColorScene(cc.color(255,0,255,255));
            cc.director.runScene(new cc.TransitionFade(1, nextScene));
        }, 3000);
    }, this);

gyazo.com

cc.TransitionRotoZoom

    //load resources
    cc.LoaderScene.preload(g_resources, function () {
        cc.director.runScene(new ColorScene(cc.color(255,255,0,255)));
        _.delay(function() {
            var nextScene = new ColorScene(cc.color(255,0,255,255));
            cc.director.runScene(new cc.TransitionRotoZoom(1, nextScene));
        }, 3000);
    }, this);

gyazo.com

cc.TransitionJumpZoom

    //load resources
    cc.LoaderScene.preload(g_resources, function () {
        cc.director.runScene(new ColorScene(cc.color(255,255,0,255)));
        _.delay(function() {
            var nextScene = new ColorScene(cc.color(255,0,255,255));
            cc.director.runScene(new cc.TransitionJumpZoo(1, nextScene));
        }, 3000);
    }, this);

gyazo.com

cc.TransitionMoveInL

    //load resources
    cc.LoaderScene.preload(g_resources, function () {
        cc.director.runScene(new ColorScene(cc.color(255,255,0,255)));
        _.delay(function() {
            var nextScene = new ColorScene(cc.color(255,0,255,255));
            cc.director.runScene(new cc.TransitionMoveInL(1, nextScene));
        }, 3000);
    }, this);

gyazo.com

cc.TransitionMoveInR

    //load resources
    cc.LoaderScene.preload(g_resources, function () {
        cc.director.runScene(new ColorScene(cc.color(255,255,0,255)));
        _.delay(function() {
            var nextScene = new ColorScene(cc.color(255,0,255,255));
            cc.director.runScene(new cc.TransitionMoveInR(1, nextScene));
        }, 3000);
    }, this);

gyazo.com

cc.TransitionMoveInT

    //load resources
    cc.LoaderScene.preload(g_resources, function () {
        cc.director.runScene(new ColorScene(cc.color(255,255,0,255)));
        _.delay(function() {
            var nextScene = new ColorScene(cc.color(255,0,255,255));
            cc.director.runScene(new cc.TransitionMoveInT(1, nextScene));
        }, 3000);
    }, this);

gyazo.com

cc.TransitionMoveInB

    //load resources
    cc.LoaderScene.preload(g_resources, function () {
        cc.director.runScene(new ColorScene(cc.color(255,255,0,255)));
        _.delay(function() {
            var nextScene = new ColorScene(cc.color(255,0,255,255));
            cc.director.runScene(new cc.TransitionMoveInB(1, nextScene));
        }, 3000);
    }, this);

gyazo.com

cc.TransitionSlideInL

    //load resources
    cc.LoaderScene.preload(g_resources, function () {
        cc.director.runScene(new ColorScene(cc.color(255,255,0,255)));
        _.delay(function() {
            var nextScene = new ColorScene(cc.color(255,0,255,255));
            cc.director.runScene(new cc.TransitionSlideInL(1, nextScene));
        }, 3000);
    }, this);

gyazo.com

cc.TransitionSlideInR

    //load resources
    cc.LoaderScene.preload(g_resources, function () {
        cc.director.runScene(new ColorScene(cc.color(255,255,0,255)));
        _.delay(function() {
            var nextScene = new ColorScene(cc.color(255,0,255,255));
            cc.director.runScene(new cc.TransitionSlideInR(1, nextScene));
        }, 3000);
    }, this);

gyazo.com

cc.TransitionSlideInB

    //load resources
    cc.LoaderScene.preload(g_resources, function () {
        cc.director.runScene(new ColorScene(cc.color(255,255,0,255)));
        _.delay(function() {
            var nextScene = new ColorScene(cc.color(255,0,255,255));
            cc.director.runScene(new cc.TransitionSlideInB(1, nextScene));
        }, 3000);
    }, this);

Gyazo - a10233045cdb93c8ef357d6904d18de3.gif

cc.TransitionSlideInT

    //load resources
    cc.LoaderScene.preload(g_resources, function () {
        cc.director.runScene(new ColorScene(cc.color(255,255,0,255)));
        _.delay(function() {
            var nextScene = new ColorScene(cc.color(255,0,255,255));
            cc.director.runScene(new cc.TransitionSlideInT(1, nextScene));
        }, 3000);
    }, this);

gyazo.com

cc.TransitionShrinkGrow

    //load resources
    cc.LoaderScene.preload(g_resources, function () {
        cc.director.runScene(new ColorScene(cc.color(255,255,0,255)));
        _.delay(function() {
            var nextScene = new ColorScene(cc.color(255,0,255,255));
            cc.director.runScene(new cc.TransitionShrinkGrow(1, nextScene));
        }, 3000);
    }, this);

追記予定