1 /****************************************************************************
  2  Copyright (c) 2010-2012 cocos2d-x.org
  3  Copyright (c) 2008-2010 Ricardo Quesada
  4  Copyright (c) 2011      Zynga Inc.
  5 
  6  http://www.cocos2d-x.org
  7 
  8  Permission is hereby granted, free of charge, to any person obtaining a copy
  9  of this software and associated documentation files (the "Software"), to deal
 10  in the Software without restriction, including without limitation the rights
 11  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 12  copies of the Software, and to permit persons to whom the Software is
 13  furnished to do so, subject to the following conditions:
 14 
 15  The above copyright notice and this permission notice shall be included in
 16  all copies or substantial portions of the Software.
 17 
 18  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 19  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 20  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 21  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 22  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 23  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 24  THE SOFTWARE.
 25  ****************************************************************************/
 26 /**
 27  * A tag constant for identifying fade scenes
 28  * @constant
 29  * @type Number
 30  */
 31 cc.SCENE_FADE = 4208917214;
 32 
 33 /**
 34  * cc.TransitionEaseScene can ease the actions of the scene protocol.
 35  * @class
 36  * @extends cc.Class
 37  */
 38 cc.TransitionEaseScene = cc.Class.extend(/** @lends cc.TransitionEaseScene# */{
 39     /**
 40      * returns the Ease action that will be performed on a linear action.
 41      */
 42     easeActionWithAction:function () {
 43     }
 44 });
 45 
 46 /**
 47  * horizontal orientation Type where the Left is nearer
 48  * @constant
 49  * @type Number
 50  */
 51 cc.TRANSITION_ORIENTATION_LEFT_OVER = 0;
 52 /**
 53  * horizontal orientation type where the Right is nearer
 54  * @constant
 55  * @type Number
 56  */
 57 cc.TRANSITION_ORIENTATION_RIGHT_OVER = 1;
 58 /**
 59  * vertical orientation type where the Up is nearer
 60  * @constant
 61  * @type Number
 62  */
 63 cc.TRANSITION_ORIENTATION_UP_OVER = 0;
 64 /**
 65  * vertical orientation type where the Bottom is nearer
 66  * @constant
 67  * @type Number
 68  */
 69 cc.TRANSITION_ORIENTATION_DOWN_OVER = 1;
 70 
 71 /**
 72  * @class
 73  * @extends cc.Scene
 74  */
 75 cc.TransitionScene = cc.Scene.extend(/** @lends cc.TransitionScene# */{
 76     _inScene:null,
 77     _outScene:null,
 78     _duration:null,
 79     _isInSceneOnTop:false,
 80     _isSendCleanupToScene:false,
 81 
 82     //private
 83     _setNewScene:function (dt) {
 84         // [self unschedule:_cmd];
 85         // "_cmd" is a local variable automatically defined in a method
 86         // that contains the selector for the method
 87         this.unschedule(this._setNewScene);
 88         var director = cc.Director.getInstance();
 89         // Before replacing, save the "send cleanup to scene"
 90         this._isSendCleanupToScene = director.isSendCleanupToScene();
 91         director.replaceScene(this._inScene);
 92 
 93         // enable events while transitions
 94         director.getTouchDispatcher().setDispatchEvents(true);
 95         // issue #267
 96         this._outScene.setVisible(true);
 97     },
 98 
 99     //protected
100     _sceneOrder:function () {
101         this._isInSceneOnTop = true;
102     },
103 
104     /**
105      * stuff gets drawn here
106      */
107     draw:function () {
108         this._super();
109 
110         if (this._isInSceneOnTop) {
111             this._outScene.visit();
112             this._inScene.visit();
113         } else {
114             this._inScene.visit();
115             this._outScene.visit();
116         }
117     },
118 
119     /**
120      * custom onEnter
121      */
122     onEnter:function () {
123         this._super();
124         this._inScene.onEnter();
125     },
126 
127     /**
128      * custom onExit
129      */
130     onExit:function () {
131         this._super();
132         this._outScene.onExit();
133 
134         // inScene should not receive the onExit callback
135         // only the onEnterTransitionDidFinish
136         this._inScene.onEnterTransitionDidFinish();
137     },
138 
139     /**
140      * custom cleanup
141      */
142     cleanup:function () {
143         this._super();
144 
145         if (this._isSendCleanupToScene)
146             this._outScene.cleanup();
147     },
148 
149     /**
150      * initializes a transition with duration and incoming scene
151      * @param {Number} t time in seconds
152      * @param {cc.Scene} scene a scene to transit to
153      * @return {Boolean} return false if error
154      */
155     initWithDuration:function (t, scene) {
156         cc.Assert(scene != null, "CCTransitionScene.initWithDuration() Argument scene must be non-nil");
157 
158         if (this.init()) {
159             this._duration = t;
160             this.setAnchorPoint(cc.p(0, 0));
161             this.setPosition(cc.p(0, 0));
162             // retain
163             this._inScene = scene;
164             this._outScene = cc.Director.getInstance().getRunningScene();
165             if (!this._outScene) {
166                 this._outScene = cc.Scene.create();
167                 this._outScene.init();
168             }
169 
170             cc.Assert(this._inScene != this._outScene, "CCTransitionScene.initWithDuration() Incoming scene must be different from the outgoing scene");
171 
172             // disable events while transitions
173             cc.Director.getInstance().getTouchDispatcher().setDispatchEvents(false);
174             this._sceneOrder();
175 
176             return true;
177         } else {
178             return false;
179         }
180     },
181 
182     /**
183      * called after the transition finishes
184      */
185     finish:function () {
186         // clean up
187         this._inScene.setVisible(true);
188         this._inScene.setPosition(cc.p(0, 0));
189         this._inScene.setScale(1.0);
190         this._inScene.setRotation(0.0);
191         this._inScene.getCamera().restore();
192 
193         this._outScene.setVisible(false);
194         this._outScene.setPosition(cc.p(0, 0));
195         this._outScene.setScale(1.0);
196         this._outScene.setRotation(0.0);
197         this._outScene.getCamera().restore();
198 
199         //[self schedule:@selector(setNewScene:) interval:0];
200         this.schedule(this._setNewScene, 0);
201     },
202 
203     /**
204      * set hide the out scene and show in scene
205      */
206     hideOutShowIn:function () {
207         this._inScene.setVisible(true);
208         this._outScene.setVisible(false);
209     }
210 });
211 /**
212  * creates a base transition with duration and incoming scene
213  * @param {Number} t time in seconds
214  * @param {cc.Scene} scene the scene to transit with
215  * @return {cc.TransitionScene|Null}
216  */
217 cc.TransitionScene.create = function (t, scene) {
218     var tempScene = new cc.TransitionScene();
219     if ((tempScene != null) && (tempScene.initWithDuration(t, scene))) {
220         return tempScene;
221     }
222     return null;
223 };
224 
225 /**
226  * A cc.Transition that supports orientation like.<br/>
227  * Possible orientation: LeftOver, RightOver, UpOver, DownOver<br/>
228  * useful for when you want to make a transition happen between 2 orientations
229  * @class
230  * @extends cc.TransitionScene
231  */
232 cc.TransitionSceneOriented = cc.TransitionScene.extend(/** @lends cc.TransitionSceneOriented# */{
233     _orientation:0,
234 
235     /**
236      * initialize the transition
237      * @param {Number} t time in seconds
238      * @param {cc.Scene} scene
239      * @param {cc.TRANSITION_ORIENTATION_LEFT_OVER|cc.TRANSITION_ORIENTATION_RIGHT_OVER|cc.TRANSITION_ORIENTATION_UP_OVER|cc.TRANSITION_ORIENTATION_DOWN_OVER} orientation
240      * @return {Boolean}
241      */
242     initWithDuration:function (t, scene, orientation) {
243         if (this._super(t, scene)) {
244             this._orientation = orientation;
245         }
246         return true;
247     }
248 });
249 
250 /**
251  * creates a base transition with duration and incoming scene
252  * @param {Number} t time in seconds
253  * @param {cc.Scene} scene
254  * @param {cc.TRANSITION_ORIENTATION_LEFT_OVER|cc.TRANSITION_ORIENTATION_RIGHT_OVER|cc.TRANSITION_ORIENTATION_UP_OVER|cc.TRANSITION_ORIENTATION_DOWN_OVER} orientation
255  * @return {cc.TransitionSceneOriented}
256  * @example
257  * // Example
258  * var goHorizontal = cc.TransitionSceneOriented.create(0.5, thisScene, cc.TRANSITION_ORIENTATION_LEFT_OVER)
259  */
260 cc.TransitionSceneOriented.create = function (t, scene, orientation) {
261     var tempScene = new cc.TransitionSceneOriented();
262     tempScene.initWithDuration(t, scene, orientation);
263 
264     return tempScene;
265 };
266 
267 /**
268  *  Rotate and zoom out the outgoing scene, and then rotate and zoom in the incoming
269  * @class
270  * @extends cc.TransitionScene
271  */
272 cc.TransitionRotoZoom = cc.TransitionScene.extend(/** @lends cc.TransitionRotoZoom# */{
273     /**
274      * Constructor
275      */
276     ctor:function () {
277     },
278 
279     /**
280      * Custom On Enter callback
281      * @override
282      */
283     onEnter:function () {
284         this._super();
285 
286         this._inScene.setScale(0.001);
287         this._outScene.setScale(1.0);
288 
289         this._inScene.setAnchorPoint(cc.p(0.5, 0.5));
290         this._outScene.setAnchorPoint(cc.p(0.5, 0.5));
291 
292         var rotozoom = cc.Sequence.create(
293             cc.Spawn.create(cc.ScaleBy.create(this._duration / 2, 0.001),
294                 cc.RotateBy.create(this._duration / 2, 360 * 2)),
295             cc.DelayTime.create(this._duration / 2));
296 
297         this._outScene.runAction(rotozoom);
298         this._inScene.runAction(
299             cc.Sequence.create(rotozoom.reverse(),
300                 cc.CallFunc.create(this.finish, this)));
301     }
302 });
303 
304 /**
305  * Creates a Transtion rotation and zoom
306  * @param {Number} t time in seconds
307  * @param {cc.Scene} scene the scene to work with
308  * @return {cc.TransitionRotoZoom}
309  * @example
310  * // Example
311  * var RotoZoomTrans = cc.TransitionRotoZoom.create(2, nextScene);
312  */
313 cc.TransitionRotoZoom.create = function (t, scene) {
314     var tempScene = new cc.TransitionRotoZoom();
315     if ((tempScene != null) && (tempScene.initWithDuration(t, scene))) {
316         return tempScene;
317     }
318     return null;
319 };
320 
321 /**
322  * Zoom out and jump the outgoing scene, and then jump and zoom in the incoming
323  * @class
324  * @extends cc.TransitionScene
325  */
326 cc.TransitionJumpZoom = cc.TransitionScene.extend(/** @lends cc.TransitionJumpZoom# */{
327     /**
328      * Custom on enter
329      */
330     onEnter:function () {
331         this._super();
332 
333         var s = cc.Director.getInstance().getWinSize();
334 
335         this._inScene.setScale(0.5);
336         this._inScene.setPosition(cc.p(s.width, 0));
337         this._inScene.setAnchorPoint(cc.p(0.5, 0.5));
338         this._outScene.setAnchorPoint(cc.p(0.5, 0.5));
339 
340         //TODO
341         var jump = cc.JumpBy.create(this._duration / 4, cc.p(-s.width, 0), s.width / 4, 2);
342         var scaleIn = cc.ScaleTo.create(this._duration / 4, 1.0);
343         var scaleOut = cc.ScaleTo.create(this._duration / 4, 0.5);
344 
345         var jumpZoomOut = cc.Sequence.create(scaleOut, jump);
346         var jumpZoomIn = cc.Sequence.create(jump, scaleIn);
347 
348         var delay = cc.DelayTime.create(this._duration / 2);
349         this._outScene.runAction(jumpZoomOut);
350         this._inScene.runAction(cc.Sequence.create(delay, jumpZoomIn,
351             cc.CallFunc.create(this.finish, this)));
352     }
353 });
354 
355 /**
356  * creates a scene transition that zooms then jump across the screen, the same for the incoming scene
357  * @param {Number} t time in seconds
358  * @param {cc.Scene} scene
359  * @return {cc.TransitionJumpZoom}
360  */
361 cc.TransitionJumpZoom.create = function (t, scene) {
362     var tempScene = new cc.TransitionJumpZoom();
363     if ((tempScene != null) && (tempScene.initWithDuration(t, scene))) {
364         return tempScene;
365     }
366     return null;
367 };
368 
369 /**
370  * Move in from to the left the incoming scene.
371  * @class
372  * @extends cc.TransitionScene
373  */
374 cc.TransitionMoveInL = cc.TransitionScene.extend(/** @lends cc.TransitionMoveInL# */{
375 
376     /**
377      * Custom on enter
378      */
379     onEnter:function () {
380         this._super();
381         this.initScenes();
382 
383         var a = this.action();
384 
385         this._inScene.runAction(
386             cc.Sequence.create
387                 (
388                     this.easeActionWithAction(a),
389                     cc.CallFunc.create(this.finish, this),
390                     null
391                 )
392         );
393     },
394 
395     /**
396      * initializes the scenes
397      */
398     initScenes:function () {
399         this._inScene.setPosition(cc.p(-cc.Director.getInstance().getWinSize().width, 0));
400     },
401 
402     /**
403      * returns the action that will be performed
404      */
405     action:function () {
406         return cc.MoveTo.create(this._duration, cc.p(0, 0));
407     },
408 
409     /**
410      * creates an ease action from action
411      * @param {cc.ActionInterval} action
412      * @return {cc.EaseOut}
413      */
414     easeActionWithAction:function (action) {
415         //TODO need implement
416         return cc.EaseOut.create(action, 2.0);
417     }
418 });
419 
420 /**
421  * creates an action that  Move in from to the left the incoming scene.
422  * @param {Number} t time in seconds
423  * @param {cc.Scene} scene
424  * @return {cc.TransitionMoveInL}
425  * @example
426  * // Example
427  * var MoveInLeft = cc.TransitionMoveInL.create(1, nextScene)
428  */
429 cc.TransitionMoveInL.create = function (t, scene) {
430     var tempScene = new cc.TransitionMoveInL();
431     if ((tempScene != null) && (tempScene.initWithDuration(t, scene))) {
432         return tempScene;
433     }
434     return null;
435 };
436 
437 /**
438  * Move in from to the right the incoming scene.
439  * @class
440  * @extends cc.TransitionMoveInL
441  */
442 cc.TransitionMoveInR = cc.TransitionMoveInL.extend(/** @lends cc.TransitionMoveInR# */{
443 
444     /**
445      * Init
446      */
447     initScenes:function () {
448         var s = cc.Director.getInstance().getWinSize();
449         this._inScene.setPosition(cc.p(s.width, 0));
450     }
451 });
452 
453 /**
454  * create a scene transition that Move in from to the right the incoming scene.
455  * @param {Number} t time in seconds
456  * @param {cc.Scene} scene
457  * @return {cc.TransitionMoveInR}
458  * @example
459  * // Example
460  * var MoveInRight = cc.TransitionMoveInR.create(1, nextScene)
461  */
462 cc.TransitionMoveInR.create = function (t, scene) {
463     var tempScene = new cc.TransitionMoveInR();
464     if ((tempScene != null) && (tempScene.initWithDuration(t, scene))) {
465         return tempScene;
466     }
467     return null;
468 };
469 
470 /**
471  * Move in from to the top the incoming scene.
472  * @class
473  * @extends cc.TransitionMoveInL
474  */
475 cc.TransitionMoveInT = cc.TransitionMoveInL.extend(/** @lends cc.TransitionMoveInT# */{
476 
477     /**
478      * init
479      */
480     initScenes:function () {
481         var s = cc.Director.getInstance().getWinSize();
482         this._inScene.setPosition(cc.p(s.height, 0));
483     }
484 });
485 
486 /**
487  * Move in from to the top the incoming scene.
488  * @param {Number} t time in seconds
489  * @param {cc.Scene} scene
490  * @return {cc.TransitionMoveInT}
491  * @example
492  * // Example
493  * var MoveInTop = cc.TransitionMoveInT.create(1, nextScene)
494  */
495 cc.TransitionMoveInT.create = function (t, scene) {
496     var tempScene = new cc.TransitionMoveInT();
497     if ((tempScene != null) && (tempScene.initWithDuration(t, scene))) {
498         return tempScene;
499     }
500     return null;
501 };
502 
503 /**
504  *  Move in from to the bottom the incoming scene.
505  * @class
506  * @extends cc.TransitionMoveInL
507  */
508 cc.TransitionMoveInB = cc.TransitionMoveInL.extend(/** @lends cc.TransitionMoveInB# */{
509 
510     /**
511      * init
512      */
513     initScenes:function () {
514         var s = cc.Director.getInstance().getWinSize();
515         this._inScene.setPosition(cc.p(0, -s.height));
516     }
517 });
518 
519 /**
520  * create a scene transition that Move in from to the bottom the incoming scene.
521  * @param {Number} t time in seconds
522  * @param {cc.Scene} scene
523  * @return {cc.TransitionMoveInB}
524  * @example
525  * // Example
526  * var MoveinB = cc.TransitionMoveInB.create(1, nextScene)
527  */
528 cc.TransitionMoveInB.create = function (t, scene) {
529     var tempScene = new cc.TransitionMoveInB();
530     if ((tempScene != null) && (tempScene.initWithDuration(t, scene))) {
531         return tempScene;
532     }
533     return null;
534 };
535 
536 /**
537  * The adjust factor is needed to prevent issue #442<br/>
538  * One solution is to use DONT_RENDER_IN_SUBPIXELS images, but NO<br/>
539  * The other issue is that in some transitions (and I don't know why)<br/>
540  * the order should be reversed (In in top of Out or vice-versa).
541  * @constant
542  * @type Number
543  */
544 cc.ADJUST_FACTOR = 0.5;
545 
546 /**
547  * a transition that a new scene is slided from left
548  * @class
549  * @extends cc.TransitionScene
550  */
551 cc.TransitionSlideInL = cc.TransitionScene.extend(/** @lends cc.TransitionSlideInL# */{
552     _sceneOrder:function () {
553         this._isInSceneOnTop = false;
554     },
555 
556     /**
557      * Constructor
558      */
559     ctor:function () {
560     },
561 
562     /**
563      * custom on enter
564      */
565     onEnter:function () {
566         this._super();
567         this.initScenes();
568 
569         var inA = this.action();
570         var outA = this.action();
571 
572         var inAction = this.easeActionWithAction(inA);
573         var outAction = cc.Sequence.create
574             (
575                 this.easeActionWithAction(outA),
576                 cc.CallFunc.create(this.finish, this),
577                 null
578             );
579         this._inScene.runAction(inAction);
580         this._outScene.runAction(outAction);
581     },
582 
583     /**
584      * initializes the scenes
585      */
586     initScenes:function () {
587         var s = cc.Director.getInstance().getWinSize();
588         this._inScene.setPosition(cc.p(-(s.width - cc.ADJUST_FACTOR), 0));
589     },
590     /**
591      * returns the action that will be performed by the incomming and outgoing scene
592      * @return {cc.MoveBy}
593      */
594     action:function () {
595         var s = cc.Director.getInstance().getWinSize();
596         return cc.MoveBy.create(this._duration, cc.p(s.width - cc.ADJUST_FACTOR, 0));
597     },
598 
599     /**
600      * @param {cc.ActionInterval} action
601      * @return {*}
602      */
603     easeActionWithAction:function (action) {
604         return cc.EaseOut.create(action, 2.0);
605     }
606 });
607 
608 /**
609  * create a transition that a new scene is slided from left
610  * @param {Number} t time in seconds
611  * @param {cc.Scene} scene
612  * @return {cc.TransitionSlideInL}
613  * @example
614  * // Example
615  * var myTransition = cc.TransitionSlideInL.create(1.5, nextScene)
616  */
617 cc.TransitionSlideInL.create = function (t, scene) {
618     var tempScene = new cc.TransitionSlideInL();
619     if ((tempScene != null) && (tempScene.initWithDuration(t, scene))) {
620         return tempScene;
621     }
622     return null;
623 };
624 
625 /**
626  *  Slide in the incoming scene from the right border.
627  * @class
628  * @extends cc.TransitionSlideInL
629  */
630 cc.TransitionSlideInR = cc.TransitionSlideInL.extend(/** @lends cc.TransitionSlideInR# */{
631     _sceneOrder:function () {
632         this._isInSceneOnTop = true;
633     },
634     /**
635      * initializes the scenes
636      */
637     initScenes:function () {
638         var s = cc.Director.getInstance().getWinSize();
639         this._inScene.setPosition(cc.p(s.width - cc.ADJUST_FACTOR, 0));
640     },
641     /**
642      *  returns the action that will be performed by the incomming and outgoing scene
643      * @return {cc.MoveBy}
644      */
645     action:function () {
646         var s = cc.Director.getInstance().getWinSize();
647         return cc.MoveBy.create(this._duration, cc.p(-(s.width - cc.ADJUST_FACTOR), 0));
648     }
649 });
650 
651 /**
652  * create Slide in the incoming scene from the right border.
653  * @param {Number} t time in seconds
654  * @param {cc.Scene} scene
655  * @return {cc.TransitionSlideInR}
656  * @example
657  * // Example
658  * var myTransition = cc.TransitionSlideInR.create(1.5, nextScene)
659  */
660 cc.TransitionSlideInR.create = function (t, scene) {
661     var tempScene = new cc.TransitionSlideInR();
662     if ((tempScene != null) && (tempScene.initWithDuration(t, scene))) {
663         return tempScene;
664     }
665     return null;
666 };
667 
668 /**
669  * Slide in the incoming scene from the bottom border.
670  * @class
671  * @extends cc.TransitionSlideInL
672  */
673 cc.TransitionSlideInB = cc.TransitionSlideInL.extend(/** @lends cc.TransitionSlideInB# */{
674     _sceneOrder:function () {
675         this._isInSceneOnTop = false;
676     },
677 
678     /**
679      * initializes the scenes
680      */
681     initScenes:function () {
682         var s = cc.Director.getInstance().getWinSize();
683         this._inScene.setPosition(cc.p(0, s.height - cc.ADJUST_FACTOR));
684     },
685 
686     /**
687      * returns the action that will be performed by the incomming and outgoing scene
688      * @return {cc.MoveBy}
689      */
690     action:function () {
691         var s = cc.Director.getInstance().getWinSize();
692         return cc.MoveBy.create(this._duration, cc.p(0, -(s.height - cc.ADJUST_FACTOR)));
693     }
694 });
695 
696 /**
697  * create a Slide in the incoming scene from the bottom border.
698  * @param {Number} t time in seconds
699  * @param {cc.Scene} scene
700  * @return {cc.TransitionSlideInB}
701  * @example
702  * // Example
703  * var myTransition = cc.TransitionSlideInB.create(1.5, nextScene)
704  */
705 cc.TransitionSlideInB.create = function (t, scene) {
706     var tempScene = new cc.TransitionSlideInB();
707     if ((tempScene != null) && (tempScene.initWithDuration(t, scene))) {
708         return tempScene;
709     }
710     return null;
711 };
712 
713 /**
714  *  Slide in the incoming scene from the top border.
715  *  @class
716  *  @extends cc.TransitionSlideInL
717  */
718 cc.TransitionSlideInT = cc.TransitionSlideInL.extend(/** @lends cc.TransitionSlideInT# */{
719     _sceneOrder:function () {
720         this._isInSceneOnTop = true;
721     },
722 
723     /**
724      * initializes the scenes
725      */
726     initScenes:function () {
727         var s = cc.Director.getInstance().getWinSize();
728         this._inScene.setPosition(cc.p(0, -(s.height - cc.ADJUST_FACTOR)));
729     },
730 
731     /**
732      * returns the action that will be performed by the incomming and outgoing scene
733      * @return {cc.MoveBy}
734      */
735     action:function () {
736         var s = cc.Director.getInstance().getWinSize();
737         return cc.MoveBy.create(this._duration, cc.p(0, s.height - cc.ADJUST_FACTOR));
738     }
739 });
740 
741 /**
742  * create a Slide in the incoming scene from the top border.
743  * @param {Number} t time in seconds
744  * @param {cc.Scene} scene
745  * @return {cc.TransitionSlideInT}
746  * @example
747  * // Example
748  * var myTransition = cc.TransitionSlideInT.create(1.5, nextScene)
749  */
750 cc.TransitionSlideInT.create = function (t, scene) {
751     var tempScene = new cc.TransitionSlideInT();
752     if ((tempScene != null) && (tempScene.initWithDuration(t, scene))) {
753         return tempScene;
754     }
755     return null;
756 };
757 
758 /**
759  * Shrink the outgoing scene while grow the incoming scene
760  * @class
761  * @extends cc.TransitionScene
762  */
763 cc.TransitionShrinkGrow = cc.TransitionScene.extend(/** @lends cc.TransitionShrinkGrow# */{
764 
765     /**
766      * Custom on enter
767      */
768     onEnter:function () {
769         this._super();
770 
771         this._inScene.setScale(0.001);
772         this._outScene.setScale(1.0);
773 
774         this._inScene.setAnchorPoint(cc.p(2 / 3.0, 0.5));
775         this._outScene.setAnchorPoint(cc.p(1 / 3.0, 0.5));
776 
777         var scaleOut = cc.ScaleTo.create(this._duration, 0.01);
778         var scaleIn = cc.ScaleTo.create(this._duration, 1.0);
779 
780         this._inScene.runAction(this.easeActionWithAction(scaleIn));
781         this._outScene.runAction(
782             cc.Sequence.create(
783                 this.easeActionWithAction(scaleOut),
784                 cc.CallFunc.create(this.finish, this)
785             )
786         );
787     },
788 
789     /**
790      * @param action
791      * @return {cc.EaseOut}
792      */
793     easeActionWithAction:function (action) {
794         //TODO
795         return cc.EaseOut.create(action, 2.0);
796     }
797 });
798 
799 /**
800  * Shrink the outgoing scene while grow the incoming scene
801  * @param {Number} t time in seconds
802  * @param {cc.Scene} scene
803  * @return {cc.TransitionShrinkGrow}
804  * @example
805  * // Example
806  * var myTransition = cc.TransitionShrinkGrow.create(1.5, nextScene)
807  */
808 cc.TransitionShrinkGrow.create = function (t, scene) {
809     var tempScene = new cc.TransitionShrinkGrow();
810     if ((tempScene != null) && (tempScene.initWithDuration(t, scene))) {
811         return tempScene;
812     }
813     return null;
814 };
815 
816 /**
817  *  Flips the screen horizontally.<br/>
818  * The front face is the outgoing scene and the back face is the incoming scene.
819  * @class
820  * @extends cc.TransitionSceneOriented
821  */
822 cc.TransitionFlipX = cc.TransitionSceneOriented.extend(/** @lends cc.TransitionFlipX# */{
823 
824     /**
825      * custom on enter
826      */
827     onEnter:function () {
828         this._super();
829 
830         var inA, outA;
831         this._inScene.setVisible(false);
832 
833         var inDeltaZ, inAngleZ;
834         var outDeltaZ, outAngleZ;
835 
836         if (this._orientation == cc.TRANSITION_ORIENTATION_RIGHT_OVER) {
837             inDeltaZ = 90;
838             inAngleZ = 270;
839             outDeltaZ = 90;
840             outAngleZ = 0;
841         } else {
842             inDeltaZ = -90;
843             inAngleZ = 90;
844             outDeltaZ = -90;
845             outAngleZ = 0;
846         }
847 
848         inA = cc.Sequence.create
849             (
850                 cc.DelayTime.create(this._duration / 2),
851                 cc.Show.create(),
852                 //TODO
853                 cc.OrbitCamera.create(this._duration / 2, 1, 0, inAngleZ, inDeltaZ, 0, 0),
854                 cc.CallFunc.create(this.finish, this)
855             );
856 
857         outA = cc.Sequence.create
858             (
859                 cc.OrbitCamera.create(this._duration / 2, 1, 0, outAngleZ, outDeltaZ, 0, 0),
860                 cc.Hide.create(),
861                 cc.DelayTime.create(this._duration / 2)
862             );
863 
864         this._inScene.runAction(inA);
865         this._outScene.runAction(outA);
866     }
867 });
868 
869 /**
870  * Flips the screen horizontally.<br/>
871  * The front face is the outgoing scene and the back face is the incoming scene.
872  * @param {Number} t time in seconds
873  * @param {cc.Scene} scene
874  * @param {cc.TRANSITION_ORIENTATION_LEFT_OVER|cc.TRANSITION_ORIENTATION_RIGHT_OVER|cc.TRANSITION_ORIENTATION_UP_OVER|cc.TRANSITION_ORIENTATION_DOWN_OVER} o
875  * @return {cc.TransitionFlipX}
876  * @example
877  * // Example
878  * var myTransition = cc.TransitionFlipX.create(1.5, nextScene) //default is cc.TRANSITION_ORIENTATION_RIGHT_OVER
879  *
880  * //OR
881  * var myTransition = cc.TransitionFlipX.create(1.5, nextScene, cc.TRANSITION_ORIENTATION_UP_OVER)
882  */
883 cc.TransitionFlipX.create = function (t, scene, o) {
884     if (o == null)
885         o = cc.TRANSITION_ORIENTATION_RIGHT_OVER;
886 
887     var tempScene = new cc.TransitionFlipX();
888     tempScene.initWithDuration(t, scene, o);
889 
890     return tempScene;
891 };
892 
893 /**
894  * Flips the screen vertically.<br/>
895  * The front face is the outgoing scene and the back face is the incoming scene.
896  * @class
897  * @extends cc.TransitionSceneOriented
898  */
899 cc.TransitionFlipY = cc.TransitionSceneOriented.extend(/** @lends cc.TransitionFlipY# */{
900 
901     /**
902      * custom on enter
903      */
904     onEnter:function () {
905         this._super();
906 
907         var inA, outA;
908         this._inScene.setVisible(false);
909 
910         var inDeltaZ, inAngleZ;
911         var outDeltaZ, outAngleZ;
912 
913         if (this._orientation == cc.TRANSITION_ORIENTATION_UP_OVER) {
914             inDeltaZ = 90;
915             inAngleZ = 270;
916             outDeltaZ = 90;
917             outAngleZ = 0;
918         } else {
919             inDeltaZ = -90;
920             inAngleZ = 90;
921             outDeltaZ = -90;
922             outAngleZ = 0;
923         }
924 
925         //TODO
926         inA = cc.Sequence.create
927             (
928                 cc.DelayTime.create(this._duration / 2),
929                 cc.Show.create(),
930                 cc.OrbitCamera.create(this._duration / 2, 1, 0, inAngleZ, inDeltaZ, 90, 0),
931                 cc.CallFunc.create(this.finish, this)
932             );
933         outA = cc.Sequence.create
934             (
935                 cc.OrbitCamera.create(this._duration / 2, 1, 0, outAngleZ, outDeltaZ, 90, 0),
936                 cc.Hide.create(),
937                 cc.DelayTime.create(this._duration / 2)
938             );
939 
940         this._inScene.runAction(inA);
941         this._outScene.runAction(outA);
942     }
943 });
944 
945 /**
946  * Flips the screen vertically.<br/>
947  * The front face is the outgoing scene and the back face is the incoming scene.
948  * @param {Number} t time in seconds
949  * @param {cc.Scene} scene
950  * @param {cc.TRANSITION_ORIENTATION_LEFT_OVER|cc.TRANSITION_ORIENTATION_RIGHT_OVER|cc.TRANSITION_ORIENTATION_UP_OVER|cc.TRANSITION_ORIENTATION_DOWN_OVER} o
951  * @return {cc.TransitionFlipY}
952  * @example
953  * // Example
954  * var myTransition = cc.TransitionFlipY.create(1.5, nextScene)//default is cc.TRANSITION_ORIENTATION_UP_OVER
955  *
956  * //OR
957  * var myTransition = cc.TransitionFlipY.create(1.5, nextScene, cc.TRANSITION_ORIENTATION_RIGHT_OVER)
958  */
959 cc.TransitionFlipY.create = function (t, scene, o) {
960     if (o == null)
961         o = cc.TRANSITION_ORIENTATION_UP_OVER;
962 
963     var tempScene = new cc.TransitionFlipY();
964     tempScene.initWithDuration(t, scene, o);
965 
966     return tempScene;
967 };
968 
969 /**
970  * Flips the screen half horizontally and half vertically.<br/>
971  * The front face is the outgoing scene and the back face is the incoming scene.
972  * @class
973  * @extends cc.TransitionSceneOriented
974  */
975 cc.TransitionFlipAngular = cc.TransitionSceneOriented.extend(/** @lends cc.TransitionFlipAngular# */{
976     /**
977      * custom on enter
978      */
979     onEnter:function () {
980         this._super();
981 
982         var inA, outA;
983         this._inScene.setVisible(false);
984 
985         var inDeltaZ, inAngleZ;
986         var outDeltaZ, outAngleZ;
987 
988         if (this._orientation == cc.TRANSITION_ORIENTATION_RIGHT_OVER) {
989             inDeltaZ = 90;
990             inAngleZ = 270;
991             outDeltaZ = 90;
992             outAngleZ = 0;
993         } else {
994             inDeltaZ = -90;
995             inAngleZ = 90;
996             outDeltaZ = -90;
997             outAngleZ = 0;
998         }
999 
1000         //TODO
1001         inA = cc.Sequence.create
1002             (
1003                 cc.DelayTime.create(this._duration / 2),
1004                 cc.Show.create(),
1005                 cc.OrbitCamera.create(this._duration / 2, 1, 0, inAngleZ, inDeltaZ, -45, 0),
1006                 cc.CallFunc.create(this.finish, this)
1007             );
1008         outA = cc.Sequence.create
1009             (
1010                 cc.OrbitCamera.create(this._duration / 2, 1, 0, outAngleZ, outDeltaZ, 45, 0),
1011                 cc.Hide.create(),
1012                 cc.DelayTime.create(this._duration / 2)
1013             );
1014 
1015         this._inScene.runAction(inA);
1016         this._outScene.runAction(outA);
1017     }
1018 });
1019 
1020 /**
1021  * Flips the screen half horizontally and half vertically.<br/>
1022  * The front face is the outgoing scene and the back face is the incoming scene.
1023  * @param {Number} t time in seconds
1024  * @param {cc.Scene} scene
1025  * @param {cc.TRANSITION_ORIENTATION_LEFT_OVER|cc.TRANSITION_ORIENTATION_RIGHT_OVER|cc.TRANSITION_ORIENTATION_UP_OVER|cc.TRANSITION_ORIENTATION_DOWN_OVER} o
1026  * @return {cc.TransitionFlipAngular}
1027  * @example
1028  * // Example
1029  * var myTransition = cc.TransitionFlipAngular.create(1.5, nextScene)//default is cc.TRANSITION_ORIENTATION_RIGHT_OVER
1030  *
1031  * //or
1032  * var myTransition = cc.TransitionFlipAngular.create(1.5, nextScene, cc.TRANSITION_ORIENTATION_DOWN_OVER)
1033  */
1034 cc.TransitionFlipAngular.create = function (t, scene, o) {
1035     if (o == null)
1036         o = cc.TRANSITION_ORIENTATION_RIGHT_OVER;
1037 
1038     var tempScene = new cc.TransitionFlipAngular();
1039     tempScene.initWithDuration(t, scene, o);
1040 
1041     return tempScene;
1042 };
1043 
1044 /**
1045  *  Flips the screen horizontally doing a zoom out/in<br/>
1046  * The front face is the outgoing scene and the back face is the incoming scene.
1047  * @class
1048  * @extends cc.TransitionSceneOriented
1049  */
1050 cc.TransitionZoomFlipX = cc.TransitionSceneOriented.extend(/** @lends cc.TransitionZoomFlipX# */{
1051 
1052     /**
1053      * custom on enter
1054      */
1055     onEnter:function () {
1056         this._super();
1057 
1058         var inA, outA;
1059         this._inScene.setVisible(false);
1060 
1061         var inDeltaZ, inAngleZ;
1062         var outDeltaZ, outAngleZ;
1063 
1064         if (this._orientation == cc.TRANSITION_ORIENTATION_RIGHT_OVER) {
1065             inDeltaZ = 90;
1066             inAngleZ = 270;
1067             outDeltaZ = 90;
1068             outAngleZ = 0;
1069         } else {
1070             inDeltaZ = -90;
1071             inAngleZ = 90;
1072             outDeltaZ = -90;
1073             outAngleZ = 0;
1074         }
1075         //TODO
1076         inA = cc.Sequence.create(
1077             cc.DelayTime.create(this._duration / 2),
1078             cc.Spawn.create(
1079                 cc.OrbitCamera.create(this._duration / 2, 1, 0, inAngleZ, inDeltaZ, 0, 0),
1080                 cc.ScaleTo.create(this._duration / 2, 1),
1081                 cc.Show.create()),
1082             cc.CallFunc.create(this.finish, this)
1083         );
1084         outA = cc.Sequence.create(
1085             cc.Spawn.create(
1086                 cc.OrbitCamera.create(this._duration / 2, 1, 0, outAngleZ, outDeltaZ, 0, 0),
1087                 cc.ScaleTo.create(this._duration / 2, 0.5)),
1088             cc.Hide.create(),
1089             cc.DelayTime.create(this._duration / 2)
1090         );
1091 
1092         this._inScene.setScale(0.5);
1093         this._inScene.runAction(inA);
1094         this._outScene.runAction(outA);
1095     }
1096 });
1097 
1098 /**
1099  * Flips the screen horizontally doing a zoom out/in<br/>
1100  * The front face is the outgoing scene and the back face is the incoming scene.
1101  * @param {Number} t time in seconds
1102  * @param {cc.Scene} scene
1103  * @param {cc.TRANSITION_ORIENTATION_LEFT_OVER|cc.TRANSITION_ORIENTATION_RIGHT_OVER|cc.TRANSITION_ORIENTATION_UP_OVER|cc.TRANSITION_ORIENTATION_DOWN_OVER} o
1104  * @return {cc.TransitionZoomFlipX}
1105  * @example
1106  * // Example
1107  * var myTransition = cc.TransitionZoomFlipX.create(1.5, nextScene)//default is cc.TRANSITION_ORIENTATION_RIGHT_OVER
1108  *
1109  * //OR
1110  * var myTransition = cc.TransitionZoomFlipX.create(1.5, nextScene, cc.TRANSITION_ORIENTATION_DOWN_OVER)
1111  */
1112 cc.TransitionZoomFlipX.create = function (t, scene, o) {
1113     if (o == null)
1114         o = cc.TRANSITION_ORIENTATION_RIGHT_OVER;
1115 
1116     var tempScene = new cc.TransitionZoomFlipX();
1117     tempScene.initWithDuration(t, scene, o);
1118 
1119     return tempScene;
1120 };
1121 
1122 /**
1123  * Flips the screen vertically doing a little zooming out/in<br/>
1124  * The front face is the outgoing scene and the back face is the incoming scene.
1125  * @class
1126  * @extends cc.TransitionSceneOriented
1127  */
1128 cc.TransitionZoomFlipY = cc.TransitionSceneOriented.extend(/** @lends cc.TransitionZoomFlipY# */{
1129 
1130     /**
1131      * custom on enter
1132      */
1133     onEnter:function () {
1134         this._super();
1135 
1136         var inA, outA;
1137         this._inScene.setVisible(false);
1138 
1139         var inDeltaZ, inAngleZ;
1140         var outDeltaZ, outAngleZ;
1141 
1142         if (this._orientation == cc.TRANSITION_ORIENTATION_UP_OVER) {
1143             inDeltaZ = 90;
1144             inAngleZ = 270;
1145             outDeltaZ = 90;
1146             outAngleZ = 0;
1147         } else {
1148             inDeltaZ = -90;
1149             inAngleZ = 90;
1150             outDeltaZ = -90;
1151             outAngleZ = 0;
1152         }
1153 
1154         //TODO
1155         inA = cc.Sequence.create(
1156             cc.DelayTime.create(this._duration / 2),
1157             cc.Spawn.create(
1158                 cc.OrbitCamera.create(this._duration / 2, 1, 0, inAngleZ, inDeltaZ, 90, 0),
1159                 cc.ScaleTo.create(this._duration / 2, 1),
1160                 cc.Show.create()),
1161             cc.CallFunc.create(this.finish, this));
1162 
1163         outA = cc.Sequence.create(
1164             cc.Spawn.create(
1165                 cc.OrbitCamera.create(this._duration / 2, 1, 0, outAngleZ, outDeltaZ, 90, 0),
1166                 cc.ScaleTo.create(this._duration / 2, 0.5)),
1167             cc.Hide.create(),
1168             cc.DelayTime.create(this._duration / 2));
1169 
1170         this._inScene.setScale(0.5);
1171         this._inScene.runAction(inA);
1172         this._outScene.runAction(outA);
1173     }
1174 });
1175 
1176 /**
1177  * Flips the screen vertically doing a little zooming out/in<br/>
1178  * The front face is the outgoing scene and the back face is the incoming scene.
1179  * @param {Number} t time in seconds
1180  * @param {cc.Scene} scene
1181  * @param {cc.TRANSITION_ORIENTATION_LEFT_OVER|cc.TRANSITION_ORIENTATION_RIGHT_OVER|cc.TRANSITION_ORIENTATION_UP_OVER|cc.TRANSITION_ORIENTATION_DOWN_OVER} o
1182  * @return {cc.TransitionZoomFlipY}
1183  * @example
1184  * // Example
1185  * var myTransition = cc.TransitionZoomFlipY.create(1.5, nextScene)//default is cc.TRANSITION_ORIENTATION_UP_OVER
1186  *
1187  * //OR
1188  * var myTransition = cc.TransitionZoomFlipY.create(1.5, nextScene, cc.TRANSITION_ORIENTATION_DOWN_OVER)
1189  */
1190 cc.TransitionZoomFlipY.create = function (t, scene, o) {
1191     if (o == null)
1192         o = cc.TRANSITION_ORIENTATION_UP_OVER;
1193 
1194     var tempScene = new cc.TransitionZoomFlipY();
1195     tempScene.initWithDuration(t, scene, o);
1196 
1197     return tempScene;
1198 };
1199 
1200 /**
1201  *  Flips the screen half horizontally and half vertically doing a little zooming out/in.<br/>
1202  * The front face is the outgoing scene and the back face is the incoming scene.
1203  * @class
1204  * @extends cc.TransitionSceneOriented
1205  */
1206 cc.TransitionZoomFlipAngular = cc.TransitionSceneOriented.extend(/** @lends cc.TransitionZoomFlipAngular# */{
1207 
1208     /**
1209      * custom on enter
1210      */
1211     onEnter:function () {
1212         this._super();
1213 
1214         var inA, outA;
1215         this._inScene.setVisible(false);
1216 
1217         var inDeltaZ, inAngleZ;
1218         var outDeltaZ, outAngleZ;
1219 
1220         if (this._orientation == cc.TRANSITION_ORIENTATION_RIGHT_OVER) {
1221             inDeltaZ = 90;
1222             inAngleZ = 270;
1223             outDeltaZ = 90;
1224             outAngleZ = 0;
1225         } else {
1226             inDeltaZ = -90;
1227             inAngleZ = 90;
1228             outDeltaZ = -90;
1229             outAngleZ = 0;
1230         }
1231 
1232         //TODO
1233         inA = cc.Sequence.create(
1234             cc.DelayTime.create(this._duration / 2),
1235             cc.Spawn.create(
1236                 cc.OrbitCamera.create(this._duration / 2, 1, 0, inAngleZ, inDeltaZ, -45, 0),
1237                 cc.ScaleTo.create(this._duration / 2, 1),
1238                 cc.Show.create()),
1239             cc.Show.create(),
1240             cc.CallFunc.create(this.finish, this));
1241         outA = cc.Sequence.create(
1242             cc.Spawn.create(
1243                 cc.OrbitCamera.create(this._duration / 2, 1, 0, outAngleZ, outDeltaZ, 45, 0),
1244                 cc.ScaleTo.create(this._duration / 2, 0.5)),
1245             cc.Hide.create(),
1246             cc.DelayTime.create(this._duration / 2));
1247 
1248         this._inScene.setScale(0.5);
1249         this._inScene.runAction(inA);
1250         this._outScene.runAction(outA);
1251     }
1252 });
1253 
1254 /**
1255  *  Flips the screen half horizontally and half vertically doing a little zooming out/in.<br/>
1256  * The front face is the outgoing scene and the back face is the incoming scene.
1257  * @param {Number} t time in seconds
1258  * @param {cc.Scene} scene
1259  * @param {cc.TRANSITION_ORIENTATION_LEFT_OVER|cc.TRANSITION_ORIENTATION_RIGHT_OVER|cc.TRANSITION_ORIENTATION_UP_OVER|cc.TRANSITION_ORIENTATION_DOWN_OVER} o
1260  * @return {cc.TransitionZoomFlipAngular}
1261  * @example
1262  * // Example
1263  * var myTransition = cc.TransitionZoomFlipAngular.create(1.5, nextScene)//default is cc.TRANSITION_ORIENTATION_RIGHT_OVER
1264  *
1265  * //OR
1266  * var myTransition = cc.TransitionZoomFlipAngular.create(1.5, nextScene, cc.TRANSITION_ORIENTATION_DOWN_OVER)
1267  */
1268 cc.TransitionZoomFlipAngular.create = function (t, scene, o) {
1269     if (o == null)
1270         o = cc.TRANSITION_ORIENTATION_RIGHT_OVER;
1271 
1272     var tempScene = new cc.TransitionZoomFlipAngular();
1273     tempScene.initWithDuration(t, scene, o);
1274 
1275     return tempScene;
1276 };
1277 
1278 /**
1279  * Fade out the outgoing scene and then fade in the incoming scene.
1280  * @class
1281  * @extends cc.TransitionScene
1282  */
1283 cc.TransitionFade = cc.TransitionScene.extend(/** @lends cc.TransitionFade# */{
1284     _color:new cc.Color3B(),
1285 
1286     /**
1287      * Constructor
1288      */
1289     ctor:function () {
1290     },
1291 
1292     /**
1293      * custom on enter
1294      */
1295     onEnter:function () {
1296         this._super();
1297 
1298         var l = cc.LayerColor.create(this._color);
1299         this._inScene.setVisible(false);
1300 
1301         this.addChild(l, 2, cc.SCENE_FADE);
1302         var f = this.getChildByTag(cc.SCENE_FADE);
1303 
1304         //TODO
1305         var a = cc.Sequence.create(
1306             cc.FadeIn.create(this._duration / 2),
1307             cc.CallFunc.create(this.hideOutShowIn, this), //CCCallFunc.actionWithTarget:self selector:@selector(hideOutShowIn)],
1308             cc.FadeOut.create(this._duration / 2),
1309             cc.CallFunc.create(this.finish, this) //:self selector:@selector(finish)],
1310         );
1311         f.runAction(a);
1312     },
1313 
1314     /**
1315      * custom on exit
1316      */
1317     onExit:function () {
1318         this._super();
1319         this.removeChildByTag(cc.SCENE_FADE, false);
1320     },
1321 
1322     /**
1323      * initializes the transition with a duration and with an RGB color
1324      * @param {Number} t time in seconds
1325      * @param {cc.Scene} scene
1326      * @param {cc.Color3B} color
1327      * @return {Boolean}
1328      */
1329     initWithDuration:function (t, scene, color) {
1330         if ((color == 'undefined') || (color == null)) {
1331             color = cc.black();
1332         }
1333 
1334         if (this._super(t, scene)) {
1335             this._color.r = color.r;
1336             this._color.g = color.g;
1337             this._color.b = color.b;
1338             this._color.a = 0;
1339         }
1340         return true;
1341     }
1342 });
1343 
1344 
1345 /**
1346  * Fade out the outgoing scene and then fade in the incoming scene.
1347  * @param {Number} t time in seconds
1348  * @param {cc.Scene} scene
1349  * @param {cc.Color3B} color
1350  * @return {cc.TransitionFade}
1351  * @example
1352  * // Example
1353  * var myTransition = cc.TransitionFade.create(1.5, nextScene, cc.c3b(255,0,0))//fade to red
1354  */
1355 cc.TransitionFade.create = function (t, scene, color) {
1356     var transition = new cc.TransitionFade();
1357     transition.initWithDuration(t, scene, color);
1358 
1359     return transition;
1360 };
1361 
1362 /**
1363  * Cross fades two scenes using the cc.RenderTexture object.
1364  * @class
1365  * @extends cc.TransitionScene
1366  */
1367 cc.TransitionCrossFade = cc.TransitionScene.extend(/** @lends cc.TransitionCrossFade# */{
1368 
1369     /**
1370      * custom on enter
1371      */
1372     onEnter:function () {
1373         this._super();
1374 
1375         // create a transparent color layer
1376         // in which we are going to add our rendertextures
1377         var color = new cc.Color4B(0, 0, 0, 0);
1378         var size = cc.Director.getInstance().getWinSize();
1379         var layer = cc.LayerColor.create(color);
1380 
1381         // create the first render texture for inScene
1382         var inTexture = cc.RenderTexture.create(size.width, size.height);
1383 
1384         if (null == inTexture) {
1385             return;
1386         }
1387 
1388         inTexture.getSprite().setAnchorPoint(cc.p(0.5, 0.5));
1389         inTexture.setPosition(cc.p(size.width / 2, size.height / 2));
1390         inTexture.setAnchorPoint(cc.p(0.5, 0.5));
1391 
1392         // render inScene to its texturebuffer
1393         inTexture.begin();
1394         this._inScene.visit();
1395         inTexture.end();
1396 
1397         // create the second render texture for outScene
1398         var outTexture = cc.RenderTexture.create(size.width, size.height);
1399         outTexture.getSprite().setAnchorPoint(cc.p(0.5, 0.5));
1400         outTexture.setPosition(cc.p(size.width / 2, size.height / 2));
1401         outTexture.setAnchorPoint(cc.p(0.5, 0.5));
1402 
1403         // render outScene to its texturebuffer
1404         outTexture.begin();
1405         this._outScene.visit();
1406         outTexture.end();
1407 
1408         // inScene will lay on background and will not be used with alpha
1409         inTexture.getSprite().setBlendFunc(gl.ONE, gl.ONE);
1410         // we are going to blend outScene via alpha
1411         outTexture.getSprite().setBlendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
1412 
1413         // add render textures to the layer
1414         layer.addChild(inTexture);
1415         layer.addChild(outTexture);
1416 
1417         // initial opacity:
1418         inTexture.getSprite().setOpacity(255);
1419         outTexture.getSprite().setOpacity(255);
1420 
1421         // create the blend action
1422         //TODO
1423         var layerAction = cc.Sequence.create(
1424             cc.FadeTo.create(this._duration, 0),
1425             cc.CallFunc.create(this.hideOutShowIn, this),
1426             cc.CallFunc.create(this.finish, this)
1427         );
1428 
1429         // run the blend action
1430         outTexture.getSprite().runAction(layerAction);
1431 
1432         // add the layer (which contains our two rendertextures) to the scene
1433         this.addChild(layer, 2, cc.SCENE_FADE);
1434     },
1435 
1436     /**
1437      * custom on exit
1438      */
1439     onExit:function () {
1440         this.removeChildByTag(cc.SCENE_FADE, false);
1441         this._super();
1442     },
1443 
1444     /**
1445      * overide draw
1446      */
1447     draw:function () {
1448         // override draw since both scenes (textures) are rendered in 1 scene
1449     }
1450 });
1451 
1452 /**
1453  * Cross fades two scenes using the cc.RenderTexture object.
1454  * @param {Number} t time in seconds
1455  * @param {cc.Scene} scene
1456  * @return {cc.TransitionCrossFade}
1457  * @example
1458  * // Example
1459  * var myTransition = cc.TransitionCrossFade.create(1.5, nextScene)
1460  */
1461 cc.TransitionCrossFade.create = function (t, scene) {
1462     var Transition = new cc.TransitionCrossFade();
1463     Transition.initWithDuration(t, scene);
1464     return Transition;
1465 };
1466 
1467 /**
1468  *  Turn off the tiles of the outgoing scene in random order
1469  * @class
1470  * @extends cc.TransitionScene
1471  */
1472 cc.TransitionTurnOffTiles = cc.TransitionScene.extend(/** @lends cc.TransitionTurnOffTiles# */{
1473     _sceneOrder:function () {
1474         this._isInSceneOnTop = false;
1475     },
1476 
1477     /**
1478      * custom on enter
1479      */
1480     onEnter:function () {
1481         this._super();
1482         var s = cc.Director.getInstance().getWinSize();
1483         var aspect = s.width / s.height;
1484         var x = 12 * aspect;
1485         var y = 12;
1486         var toff = cc.TurnOffTiles.create(cc.g(x, y), this._duration);
1487         var action = this.easeActionWithAction(toff);
1488         //TODO
1489         this._outScene.runAction(cc.Sequence.create(action, cc.CallFunc.create(this.finish, this), cc.StopGrid.create()));
1490     },
1491 
1492     /**
1493      * @param {cc.ActionInterval} action
1494      * @return {cc.ActionInterval}
1495      */
1496     easeActionWithAction:function (action) {
1497         return action;
1498     }
1499 });
1500 
1501 /**
1502  *  Turn off the tiles of the outgoing scene in random order
1503  * @param {Number} t time in seconds
1504  * @param {cc.Scene} scene
1505  * @return {cc.TransitionTurnOffTiles}
1506  * @example
1507  * // Example
1508  * var myTransition = cc.TransitionTurnOffTiles.create(1.5, nextScene)
1509  */
1510 cc.TransitionTurnOffTiles.create = function (t, scene) {
1511     var tempScene = new cc.TransitionTurnOffTiles();
1512     if ((tempScene != null) && (tempScene.initWithDuration(t, scene))) {
1513         return tempScene;
1514     }
1515     return null;
1516 };
1517 
1518 /**
1519  *  The odd columns goes upwards while the even columns goes downwards.
1520  * @class
1521  * @extends cc.TransitionScene
1522  */
1523 cc.TransitionSplitCols = cc.TransitionScene.extend(/** @lends cc.TransitionSplitCols# */{
1524 
1525     /**
1526      * custom on enter
1527      */
1528     onEnter:function () {
1529         this._super();
1530         this._inScene.setVisible(false);
1531 
1532         var split = this.action();
1533         //TODO
1534         var seq = cc.Sequence.create(
1535             split,
1536             cc.CallFunc.create(this.hideOutShowIn, this),
1537             split.reverse());
1538 
1539         this.runAction(
1540             cc.Sequence.create(
1541                 this.easeActionWithAction(seq),
1542                 cc.CallFunc.create(this.finish, this),
1543                 cc.StopGrid.create()
1544             ));
1545     },
1546 
1547     /**
1548      * @param {cc.ActionInterval} action
1549      * @return {cc.EaseInOut}
1550      */
1551     easeActionWithAction:function (action) {
1552         return cc.EaseInOut.create(action, 3.0);
1553     },
1554 
1555     /**
1556      * @return {*}
1557      */
1558     action:function () {
1559         //TODO
1560         return cc.SplitCols.create(3, this._duration / 2.0);
1561     }
1562 });
1563 
1564 /**
1565  * The odd columns goes upwards while the even columns goes downwards.
1566  * @param {Number} t time in seconds
1567  * @param {cc.Scene} scene
1568  * @return {cc.TransitionSplitCols}
1569  * @example
1570  * // Example
1571  * var myTransition = cc.TransitionSplitCols.create(1.5, nextScene)
1572  */
1573 cc.TransitionSplitCols.create = function (t, scene) {
1574     var tempScene = new cc.TransitionSplitCols();
1575     if ((tempScene != null) && (tempScene.initWithDuration(t, scene))) {
1576         return tempScene;
1577     }
1578     return null;
1579 };
1580 
1581 /**
1582  *  The odd rows goes to the left while the even rows goes to the right.
1583  * @class
1584  * @extends cc.TransitionSplitCols
1585  */
1586 cc.TransitionSplitRows = cc.TransitionSplitCols.extend(/** @lends cc.TransitionSplitRows# */{
1587 
1588     /**
1589      * @return {*}
1590      */
1591     action:function () {
1592         return cc.SplitRows.actionWithRows(3, this._duration / 2.0);
1593     }
1594 });
1595 
1596 /**
1597  * The odd rows goes to the left while the even rows goes to the right.
1598  * @param {Number} t time in seconds
1599  * @param {cc.Scene} scene
1600  * @return {cc.TransitionSplitRows}
1601  * @example
1602  * // Example
1603  * var myTransition = cc.TransitionSplitRows.create(1.5, nextScene)
1604  */
1605 cc.TransitionSplitRows.create = function (t, scene) {
1606     var tempScene = new cc.TransitionSplitRows();
1607     if ((tempScene != null) && (tempScene.initWithDuration(t, scene))) {
1608         return tempScene;
1609     }
1610     return null;
1611 };
1612 
1613 /**
1614  *  Fade the tiles of the outgoing scene from the left-bottom corner the to top-right corner.
1615  * @class
1616  * @extends cc.TransitionScene
1617  */
1618 cc.TransitionFadeTR = cc.TransitionScene.extend(/** @lends cc.TransitionFadeTR# */{
1619     _sceneOrder:function () {
1620         this._isInSceneOnTop = false;
1621     },
1622 
1623     /**
1624      * Custom on enter
1625      */
1626     onEnter:function () {
1627         this._super();
1628 
1629         var s = cc.Director.getInstance().getWinSize();
1630         var aspect = s.width / s.height;
1631         var x = (12 * aspect);
1632         var y = 12;
1633 
1634         var action = this.actionWithSize(cc.g(x, y));
1635 
1636         this._outScene.runAction(
1637             cc.Sequence.create(
1638                 this.easeActionWithAction(action),
1639                 cc.CallFunc.create(this.finish, this),
1640                 cc.StopGrid.create())
1641         );
1642     },
1643 
1644     /**
1645      * @param {cc.ActionInterval} action
1646      * @return {cc.ActionInterval}
1647      */
1648     easeActionWithAction:function (action) {
1649         return action;
1650     },
1651 
1652     /**
1653      * @param {cc.Size} size
1654      * @return {*}
1655      */
1656     actionWithSize:function (size) {
1657         return cc.FadeOutTRTiles.create(size, this._duration);
1658     }
1659 });
1660 
1661 /**
1662  *  Fade the tiles of the outgoing scene from the left-bottom corner the to top-right corner.
1663  * @param {Number} t time in seconds
1664  * @param {cc.Scene} scene
1665  * @return {cc.TransitionFadeTR}
1666  * @example
1667  * // Example
1668  * var myTransition = cc.TransitionFadeTR.create(1.5, nextScene)
1669  */
1670 cc.TransitionFadeTR.create = function (t, scene) {
1671     var tempScene = new cc.TransitionFadeTR();
1672     if ((tempScene != null) && (tempScene.initWithDuration(t, scene))) {
1673         return tempScene;
1674     }
1675     return null;
1676 };
1677 
1678 /**
1679  *  Fade the tiles of the outgoing scene from the top-right corner to the bottom-left corner.
1680  * @class
1681  * @extends cc.TransitionFadeTR
1682  */
1683 cc.TransitionFadeBL = cc.TransitionFadeTR.extend(/** @lends cc.TransitionFadeBL# */{
1684 
1685     /**
1686      * @param {cc.Size} size
1687      * @return {*}
1688      */
1689     actionWithSize:function (size) {
1690         return cc.FadeOutBLTiles.create(size, this._duration);
1691     }
1692 });
1693 
1694 /**
1695  * Fade the tiles of the outgoing scene from the top-right corner to the bottom-left corner.
1696  * @param {Number} t time in seconds
1697  * @param {cc.Scene} scene
1698  * @return {cc.TransitionFadeBL}
1699  * @example
1700  * // Example
1701  * var myTransition = cc.TransitionFadeBL.create(1.5, nextScene)
1702  */
1703 cc.TransitionFadeBL.create = function (t, scene) {
1704     var tempScene = new cc.TransitionFadeBL();
1705     if ((tempScene != null) && (tempScene.initWithDuration(t, scene))) {
1706         return tempScene;
1707     }
1708     return null;
1709 };
1710 
1711 /**
1712  * Fade the tiles of the outgoing scene from the top-right corner to the bottom-left corner.
1713  * @class
1714  * @extends cc.TransitionFadeTR
1715  */
1716 cc.TransitionFadeUp = cc.TransitionFadeTR.extend(/** @lends cc.TransitionFadeUp# */{
1717 
1718     /**
1719      * @param {cc.Size} size
1720      * @return {*}
1721      */
1722     actionWithSize:function (size) {
1723         return cc.FadeOutUpTiles.create(size, this._duration);
1724     }
1725 });
1726 
1727 /**
1728  * Fade the tiles of the outgoing scene from the top-right corner to the bottom-left corner.
1729  * @param {Number} t time in seconds
1730  * @param {cc.Scene} scene
1731  * @return {cc.TransitionFadeUp}
1732  * @example
1733  * // Example
1734  * var myTransition = cc.TransitionFadeUp.create(1.5, nextScene)
1735  */
1736 cc.TransitionFadeUp.create = function (t, scene) {
1737     var tempScene = new cc.TransitionFadeUp();
1738     if ((tempScene != null) && (tempScene.initWithDuration(t, scene))) {
1739         return tempScene;
1740     }
1741     return null;
1742 };
1743 
1744 /**
1745  * Fade the tiles of the outgoing scene from the top to the bottom.
1746  * @class
1747  * @extends cc.TransitionFadeTR
1748  */
1749 cc.TransitionFadeDown = cc.TransitionFadeTR.extend(/** @lends cc.TransitionFadeDown# */{
1750 
1751     /**
1752      * @param {cc.Size} size
1753      * @return {*}
1754      */
1755     actionWithSize:function (size) {
1756         return cc.FadeOutDownTiles.create(size, this._duration);
1757     }
1758 });
1759 
1760 /**
1761  * Fade the tiles of the outgoing scene from the top to the bottom.
1762  * @param {Number} t time in seconds
1763  * @param {cc.Scene} scene
1764  * @return {cc.TransitionFadeDown}
1765  * @example
1766  * // Example
1767  * var myTransition = cc.TransitionFadeDown.create(1.5, nextScene)
1768  */
1769 cc.TransitionFadeDown.create = function (t, scene) {
1770     var tempScene = new cc.TransitionFadeDown();
1771     if ((tempScene != null) && (tempScene.initWithDuration(t, scene))) {
1772         return tempScene;
1773     }
1774     return null;
1775 };
1776