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