axmol/samples/TestJavascript/js/test-easeactions.js

//
// http://www.cocos2d-iphone.org
// http://www.cocos2d-html5.org
// http://www.cocos2d-x.org
//
// Javascript + cocos2d actions tests
//

require("js/helper.js");

director = cc.Director.getInstance();
winSize = director.getWinSize();
centerPos = cc.p( winSize.width/2, winSize.height/2 );

var scenes = []
var currentScene = 0;

var nextScene = function () {
	currentScene = currentScene + 1;
	if( currentScene >= scenes.length )
		currentScene = 0;

	withTransition = true;
	loadScene(currentScene);
};

var previousScene = function () {
	currentScene = currentScene -1;
	if( currentScene < 0 )
		currentScene = scenes.length -1;

	withTransition = true;
	loadScene(currentScene);
};

var restartScene = function () {
	loadScene( currentScene );
};

var loadScene = function (sceneIdx)
{
	winSize = director.getWinSize();
	centerPos = cc.p( winSize.width/2, winSize.height/2 );

	var scene = new cc.Scene();
	scene.init();
	var layer = new scenes[ sceneIdx ]();

	scene.addChild( layer );

//	scene.walkSceneGraph(0);

	director.replaceScene( scene );
//    __jsc__.garbageCollect();
}


//
// Base Layer
//

var BaseLayer = cc.LayerGradient.extend({

    ctor:function () {
                                
        var parent = new cc.LayerGradient();
        __associateObjWithNative(this, parent);
        this.init(cc.c4b(0, 0, 0, 255), cc.c4b(0, 128, 255, 255));
    },

    title:function () {
        return "No Title";
    },

    subtitle:function () {
        return "";
    },

    code:function () {
        return "";
    },

    restartCallback:function (sender) {
        restartScene();
    },

    nextCallback:function (sender) {
        nextScene();
    },

    backCallback:function (sender) {
       previousScene();
    },

    positionForTwo:function () {
        this._grossini.setPosition(cc.p(60, winSize.height*2/3));
        this._tamara.setPosition(cc.p(60, winSize.height*1/3));
        this._kathia.setVisible(false);
    },

    onEnter:function () {
        // DO NOT CALL this._super()
//        this._super();

        // add title and subtitle
        var label = cc.LabelTTF.create(this.title(), "Arial", 28);
        this.addChild(label, 1);
        label.setPosition( cc.p(winSize.width / 2, winSize.height - 50));

        var strSubtitle = this.subtitle();
        if (strSubtitle != "") {
            var l = cc.LabelTTF.create(strSubtitle, "Thonburi", 16);
            this.addChild(l, 1);
            l.setPosition( cc.p(winSize.width / 2, winSize.height - 80));
        }

        var strCode = this.code();
        if( strCode !="" ) {
            var label = cc.LabelTTF.create(strCode, 'CourierNewPSMT', 16);
            label.setPosition( cc.p( winSize.width/2, winSize.height-100) );
            this.addChild( label,10 );

            var labelbg = cc.LabelTTF.create(strCode, 'CourierNewPSMT', 16);
            labelbg.setColor( cc.c3b(10,10,255) );
            labelbg.setPosition( cc.p( winSize.width/2 +1, winSize.height-100 -1) );
            this.addChild( labelbg,9);
        }
        // Menu
        var item1 = cc.MenuItemImage.create("b1.png", "b2.png", this, this.backCallback);
        var item2 = cc.MenuItemImage.create("r1.png", "r2.png", this, this.restartCallback);
        var item3 = cc.MenuItemImage.create("f1.png", "f2.png", this, this.nextCallback);
        var item4 = cc.MenuItemFont.create("back", this, function() { require("js/main.js"); } );
        item4.setFontSize( 22 );

        var menu = cc.Menu.create(item1, item2, item3, item4 );

        menu.setPosition( cc.p(0,0) );
        item1.setPosition( cc.p(winSize.width / 2 - 100, 30));
        item2.setPosition( cc.p(winSize.width / 2, 30));
        item3.setPosition( cc.p(winSize.width / 2 + 100, 30));
        item4.setPosition( cc.p(winSize.width - 60, winSize.height - 30 ) );


        this.addChild(menu, 1);

        // Setup Sprites for this:w
        this._grossini = cc.Sprite.create("grossini.png");
        this._tamara = cc.Sprite.create("grossinis_sister1.png");
        this._kathia = cc.Sprite.create("grossinis_sister2.png");
        this.addChild(this._grossini, 1);
        this.addChild(this._tamara, 2);
        this.addChild(this._kathia, 3);
        this._grossini.setPosition(cc.p(60, winSize.height*3/4));
        this._kathia.setPosition(cc.p(60, winSize.height*2/4));
        this._tamara.setPosition(cc.p(60, winSize.height*1/4));
    }
});


//------------------------------------------------------------------
//
// SpriteEase
//
//------------------------------------------------------------------
var SpriteEase = BaseLayer.extend({

    elapsedTime: 0,

    onEnter:function () {
        this._super();

        var move = cc.MoveBy.create(3, cc.p(winSize.width-80, 0));
        var move_back = move.reverse();

        var move_ease_in = cc.EaseIn.create(move.copy(), 3.0);
        var move_ease_in_back = move_ease_in.reverse();

        var move_ease_out = cc.EaseOut.create(move.copy(), 3.0);
        var move_ease_out_back = move_ease_out.reverse();


        var seq1 = cc.Sequence.create(move, move_back );
        var seq2 = cc.Sequence.create(move_ease_in, move_ease_in_back );
        var seq3 = cc.Sequence.create(move_ease_out, move_ease_out_back );


        var a2 = this._grossini.runAction(cc.RepeatForever.create(seq1));
        a2.setTag(1);

        var a1 = this._tamara.runAction(cc.RepeatForever.create(seq2));
        a1.setTag(1);

        var a = this._kathia.runAction(cc.RepeatForever.create(seq3));
        a.setTag(1);

        this.scheduleUpdate();
    },
    title:function () {
        return "EaseIn - EaseOut - Stop";
    },

    code:function () {
        return "var actionIn = cc.EaseIn.create( action, rate );\n" + 
                "var actionOut = cc.EaseOut.create( action, rate );";
    },

    testStopAction:function (dt) {
        elapsedTime += dt;
        
        if( dt > 6 ) {
            this.unscheduleUpdate();
            this._tamara.stopActionByTag(1);
            this._kathia.stopActionByTag(1);
            this._grossini.stopActionByTag(1);
        }
    }
});

//------------------------------------------------------------------
//
// SpriteEaseInOut
//
//------------------------------------------------------------------
var SpriteEaseInOut = BaseLayer.extend({

    onEnter:function () {
        this._super();

        var move = cc.MoveBy.create(3, cc.p(winSize.width-80, 0));
        //	id move_back = move.reverse();

        var move_ease_inout1 = cc.EaseInOut.create(move.copy(), 2.0);
        var move_ease_inout_back1 = move_ease_inout1.reverse();

        var move_ease_inout2 = cc.EaseInOut.create(move.copy(), 3.0);
        var move_ease_inout_back2 = move_ease_inout2.reverse();

        var move_ease_inout3 = cc.EaseInOut.create(move.copy(), 4.0);
        var move_ease_inout_back3 = move_ease_inout3.reverse();


        var seq1 = cc.Sequence.create(move_ease_inout1, move_ease_inout_back1 );
        var seq2 = cc.Sequence.create(move_ease_inout2, move_ease_inout_back2 );
        var seq3 = cc.Sequence.create(move_ease_inout3, move_ease_inout_back3 );

        this._tamara.runAction(cc.RepeatForever.create(seq1));
        this._kathia.runAction(cc.RepeatForever.create(seq2));
        this._grossini.runAction(cc.RepeatForever.create(seq3));
    },
    title:function () {
        return "EaseInOut and rates";
    },

    code:function () {
        return "var actionInOut = cc.EaseInOut.create( action, rate );";
    },
});

//------------------------------------------------------------------
//
// SpriteEaseExponential
//
//------------------------------------------------------------------
var SpriteEaseExponential = BaseLayer.extend({

    onEnter:function () {
        this._super();

        var move = cc.MoveBy.create(3, cc.p(winSize.width-80, 0));
        var move_back = move.reverse();

        var move_ease_in = cc.EaseExponentialIn.create(move.copy());
        var move_ease_in_back = move_ease_in.reverse();

        var move_ease_out = cc.EaseExponentialOut.create(move.copy());
        var move_ease_out_back = move_ease_out.reverse();


        var seq1 = cc.Sequence.create(move, move_back );
        var seq2 = cc.Sequence.create(move_ease_in, move_ease_in_back );
        var seq3 = cc.Sequence.create(move_ease_out, move_ease_out_back );


        this._grossini.runAction(cc.RepeatForever.create(seq1));
        this._tamara.runAction(cc.RepeatForever.create(seq2));
        this._kathia.runAction(cc.RepeatForever.create(seq3));
    },
    title:function () {
        return "ExpIn - ExpOut actions";
    },

    code:function () {
        return "var actionIn = cc.EaseExponentialIn.create( action );\n" + 
                "var actionOut = cc.EaseExponentialOut.create( action );";
    },
});

//------------------------------------------------------------------
//
// SpriteEaseExponentialInOut
//
//------------------------------------------------------------------
var SpriteEaseExponentialInOut = BaseLayer.extend({

    onEnter:function () {
        this._super();

        var move = cc.MoveBy.create(3, cc.p(winSize.width-80, 0));
        var move_back = move.reverse();

        var move_ease = cc.EaseExponentialInOut.create(move.copy());
        var move_ease_back = move_ease.reverse();	//-. reverse()

        var seq1 = cc.Sequence.create(move, move_back );
        var seq2 = cc.Sequence.create(move_ease, move_ease_back );

        this.positionForTwo();

        this._grossini.runAction(cc.RepeatForever.create(seq1));
        this._tamara.runAction(cc.RepeatForever.create(seq2));
    },
    title:function () {
        return "EaseExponentialInOut action";
    },
    code:function () {
        return "var actionIn = cc.EaseExponentialInOut.create( action );";
    },
});

//------------------------------------------------------------------
//
// SpriteEaseSine
//
//------------------------------------------------------------------
var SpriteEaseSine = BaseLayer.extend({
    onEnter:function () {
        this._super();

        var move = cc.MoveBy.create(3, cc.p(winSize.width-80, 0));
        var move_back = move.reverse();

        var move_ease_in = cc.EaseSineIn.create(move.copy());
        var move_ease_in_back = move_ease_in.reverse();

        var move_ease_out = cc.EaseSineOut.create(move.copy());
        var move_ease_out_back = move_ease_out.reverse();


        var seq1 = cc.Sequence.create(move, move_back );
        var seq2 = cc.Sequence.create(move_ease_in, move_ease_in_back );
        var seq3 = cc.Sequence.create(move_ease_out, move_ease_out_back );


        this._grossini.runAction(cc.RepeatForever.create(seq1));
        this._tamara.runAction(cc.RepeatForever.create(seq2));
        this._kathia.runAction(cc.RepeatForever.create(seq3));

    },
    title:function () {
        return "EaseSineIn - EaseSineOut";
    }
});

//------------------------------------------------------------------
//
// SpriteEaseSineInOut
//
//------------------------------------------------------------------
var SpriteEaseSineInOut = BaseLayer.extend({
    onEnter:function () {
        this._super();

        var move = cc.MoveBy.create(3, cc.p(winSize.width-80, 0));
        var move_back = move.reverse();

        var move_ease = cc.EaseSineInOut.create(move.copy());
        var move_ease_back = move_ease.reverse();

        var seq1 = cc.Sequence.create(move, move_back );
        var seq2 = cc.Sequence.create(move_ease, move_ease_back );

        this.positionForTwo();

        this._grossini.runAction(cc.RepeatForever.create(seq1));
        this._tamara.runAction(cc.RepeatForever.create(seq2));
    },
    title:function () {
        return "EaseSineInOut action";
    }
});

//------------------------------------------------------------------
//
// SpriteEaseElastic
//
//------------------------------------------------------------------
var SpriteEaseElastic = BaseLayer.extend({
    onEnter:function () {
        this._super();

        var move = cc.MoveBy.create(3, cc.p(winSize.width-80, 0));
        var move_back = move.reverse();

        var move_ease_in = cc.EaseElasticIn.create(move.copy());
        var move_ease_in_back = move_ease_in.reverse();

        var move_ease_out = cc.EaseElasticOut.create(move.copy());
        var move_ease_out_back = move_ease_out.reverse();

        var seq1 = cc.Sequence.create(move, move_back );
        var seq2 = cc.Sequence.create(move_ease_in, move_ease_in_back );
        var seq3 = cc.Sequence.create(move_ease_out, move_ease_out_back );

        this._grossini.runAction(cc.RepeatForever.create(seq1));
        this._tamara.runAction(cc.RepeatForever.create(seq2));
        this._kathia.runAction(cc.RepeatForever.create(seq3));
    },
    title:function () {
        return "Elastic In - Out actions";
    }
});

//------------------------------------------------------------------
//
// SpriteEaseElasticInOut
//
//------------------------------------------------------------------
var SpriteEaseElasticInOut = BaseLayer.extend({
    onEnter:function () {
        this._super();

        var move = cc.MoveBy.create(3, cc.p(winSize.width-80, 0));

        var move_ease_inout1 = cc.EaseElasticInOut.create(move.copy(), 0.3);
        var move_ease_inout_back1 = move_ease_inout1.reverse();

        var move_ease_inout2 = cc.EaseElasticInOut.create(move.copy(), 0.45);
        var move_ease_inout_back2 = move_ease_inout2.reverse();

        var move_ease_inout3 = cc.EaseElasticInOut.create(move.copy(), 0.6);
        var move_ease_inout_back3 = move_ease_inout3.reverse();


        var seq1 = cc.Sequence.create(move_ease_inout1, move_ease_inout_back1 );
        var seq2 = cc.Sequence.create(move_ease_inout2, move_ease_inout_back2 );
        var seq3 = cc.Sequence.create(move_ease_inout3, move_ease_inout_back3 );

        this._tamara.runAction(cc.RepeatForever.create(seq1));
        this._kathia.runAction(cc.RepeatForever.create(seq2));
        this._grossini.runAction(cc.RepeatForever.create(seq3));
    },
    title:function () {
        return "EaseElasticInOut action";
    }
});

//------------------------------------------------------------------
//
// SpriteEaseBounce
//
//------------------------------------------------------------------
var SpriteEaseBounce = BaseLayer.extend({
    onEnter:function () {
        this._super();

        var move = cc.MoveBy.create(3, cc.p(winSize.width-80, 0));
        var move_back = move.reverse();

        var move_ease_in = cc.EaseBounceIn.create(move.copy());
        var move_ease_in_back = move_ease_in.reverse();

        var move_ease_out = cc.EaseBounceOut.create(move.copy());
        var move_ease_out_back = move_ease_out.reverse();

        var seq1 = cc.Sequence.create(move, move_back );
        var seq2 = cc.Sequence.create(move_ease_in, move_ease_in_back );
        var seq3 = cc.Sequence.create(move_ease_out, move_ease_out_back );

        this._grossini.runAction(cc.RepeatForever.create(seq1));
        this._tamara.runAction(cc.RepeatForever.create(seq2));
        this._kathia.runAction(cc.RepeatForever.create(seq3));
    },
    title:function () {
        return "Bounce In - Out actions";
    }
});

//------------------------------------------------------------------
//
// SpriteEaseBounceInOut
//
//------------------------------------------------------------------
var SpriteEaseBounceInOut = BaseLayer.extend({
    onEnter:function () {
        this._super();

        var move = cc.MoveBy.create(3, cc.p(winSize.width-80, 0));
        var move_back = move.reverse();

        var move_ease = cc.EaseBounceInOut.create(move.copy());
        var move_ease_back = move_ease.reverse();

        var seq1 = cc.Sequence.create(move, move_back );
        var seq2 = cc.Sequence.create(move_ease, move_ease_back );

        this.positionForTwo();

        this._grossini.runAction(cc.RepeatForever.create(seq1));
        this._tamara.runAction(cc.RepeatForever.create(seq2));
    },
    title:function () {
        return "EaseBounceInOut action";
    }
});

//------------------------------------------------------------------
//
// SpriteEaseBack
//
//------------------------------------------------------------------
var SpriteEaseBack = BaseLayer.extend({
    onEnter:function () {
        this._super();

        var move = cc.MoveBy.create(3, cc.p(winSize.width-80, 0));
        var move_back = move.reverse();

        var move_ease_in = cc.EaseBackIn.create(move.copy());
        var move_ease_in_back = move_ease_in.reverse();

        var move_ease_out = cc.EaseBackOut.create(move.copy());
        var move_ease_out_back = move_ease_out.reverse();

        var seq1 = cc.Sequence.create(move, move_back );
        var seq2 = cc.Sequence.create(move_ease_in, move_ease_in_back );
        var seq3 = cc.Sequence.create(move_ease_out, move_ease_out_back );

        this._grossini.runAction(cc.RepeatForever.create(seq1));
        this._tamara.runAction(cc.RepeatForever.create(seq2));
        this._kathia.runAction(cc.RepeatForever.create(seq3));
    },
    title:function () {
        return "Back In - Out actions";
    }
});

//------------------------------------------------------------------
//
// SpriteEaseBackInOut
//
//------------------------------------------------------------------
var SpriteEaseBackInOut = BaseLayer.extend({
    onEnter:function () {
        this._super();

        var move = cc.MoveBy.create(3, cc.p(winSize.width-80, 0));
        var move_back = move.reverse();

        var move_ease = cc.EaseBackInOut.create(move.copy());
        var move_ease_back = move_ease.reverse();

        var seq1 = cc.Sequence.create(move, move_back );
        var seq2 = cc.Sequence.create(move_ease, move_ease_back );

        this.positionForTwo();

        this._grossini.runAction(cc.RepeatForever.create(seq1));
        this._tamara.runAction(cc.RepeatForever.create(seq2));
    },
    title:function () {
        return "EaseBackInOut action";
    }
});

var SpeedTest = BaseLayer.extend({
    onEnter:function () {
        this._super();

        // rotate and jump
        var jump1 = cc.JumpBy.create(4, cc.p(-400, 0), 100, 4);
        var jump2 = jump1.reverse();
        var rot1 = cc.RotateBy.create(4, 360 * 2);
        var rot2 = rot1.reverse();

        var seq3_1 = cc.Sequence.create(jump2, jump1 );
        var seq3_2 = cc.Sequence.create(rot1, rot2 );
        var spawn = cc.Spawn.create(seq3_1, seq3_2 );
        var action = cc.Speed.create(cc.RepeatForever.create(spawn), 1.0);
        action.setTag(TAG_ACTION1_EASE_ACTIONS);

        var action2 = action.copy();
        var action3 = action.copy();

        action2.setTag(TAG_ACTION1_EASE_ACTIONS);
        action3.setTag(TAG_ACTION1_EASE_ACTIONS);

        this._grossini.runAction(action2);
        this._tamara.runAction(action3);
        this._kathia.runAction(action);

        this.schedule(this.altertime, 1.0);//:@selector(altertime:) interval:1.0];
    },
    title:function () {
        return "Speed action";
    },

    altertime:function (dt) {
        var action1 = this._grossini.getActionByTag(TAG_ACTION1_EASE_ACTIONS);
        var action2 = this._tamara.getActionByTag(TAG_ACTION1_EASE_ACTIONS);
        var action3 = this._kathia.getActionByTag(TAG_ACTION1_EASE_ACTIONS);

        action1.setSpeed(cc.RANDOM_0_1() * 2);
        action2.setSpeed(cc.RANDOM_0_1() * 2);
        action3.setSpeed(cc.RANDOM_0_1() * 2);
    }
});

//
// Order of tests
//
scenes.push( SpriteEase );
scenes.push( SpriteEaseInOut );
scenes.push( SpriteEaseExponential );
scenes.push( SpriteEaseExponentialInOut );
scenes.push( SpriteEaseSine );
scenes.push( SpriteEaseSineInOut );
scenes.push( SpriteEaseElastic );
scenes.push( SpriteEaseElasticInOut );
scenes.push( SpriteEaseBounce );
scenes.push( SpriteEaseBounceInOut );
scenes.push( SpriteEaseBack );
scenes.push( SpriteEaseBackInOut );
scenes.push( SpeedTest );

//------------------------------------------------------------------
//
// Main entry point
//
//------------------------------------------------------------------
function run()
{
    var scene = cc.Scene.create();
    var layer = new scenes[currentScene]();
    scene.addChild( layer );

    var runningScene = director.getRunningScene();
    if( runningScene == null )
        director.runWithScene( scene );
    else
        director.replaceScene( cc.TransitionFade.create(0.5, scene ) );
}

run();