Classes

Transition

Transitions are a kind of full screen Sprite effect, which occur when a Room is loading or unloading. JackyJS has a transition called 'fade', and is employed by all Rooms as a default. This class allows you to build your own transitions quite easily. You initialize them in the GAME.initTransitions() global function, and then assign them via the Room's transitionInType and/or transitionOutType property. The following example shows you how:


	GAME.initTransitions(function(){
		var curtain = GAME.Transition.create({name:'curtain'});

		curtain.onAddIn(function(){
			GAME.Sprite.add('transition', {
				name: 'curtainLeft',
				width: GAME.width/2,
				height: GAME.height,
				x: 0,
				y: 0
			});
			GAME.Sprite.add('transition', {
				name: 'curtainRight',
				width: GAME.width/2,
				height: GAME.height,
				x: GAME.width/2,
				y: 0
			});
		});

		curtain.onAddOut(function(){			
			GAME.Sprite.add('transition', {
				name: 'curtainLeft',
				width: GAME.width/2,
				height: GAME.height,
				x: GAME.width/2 * -1,
				y: 0
			});
			GAME.Sprite.add('transition', {
				name: 'curtainRight',
				width: GAME.width/2,
				height: GAME.height,
				x: GAME.width,
				y: 0
			});
		});

		curtain.onIn(function(done){
			GAME.find({name:'curtainLeft'}).each(function(obj){
				obj.move({target:{x:GAME.width/2 * -1, y:0}, speed:4}, function(){
					done();
				});
			});
			GAME.find({name:'curtainRight'}).each(function(obj){
				obj.move({target:{x:GAME.width, y:0}, speed:4}, function(){
				});
			});
		});

		curtain.onOut(function(done){
			GAME.find({name:'curtainLeft'}).each(function(obj){
				obj.move({target:{x:0, y:0}, speed:4}, function(){
					done();
				});
			});
			GAME.find({name:'curtainRight'}).each(function(obj){
				obj.move({target:{x:GAME.width/2, y:0}, speed:4}, function(){
				});
			});
		});

	});

NOTE: custom transition Sprite entities should have a class of 'transition'; the garbage collector looks for sprites with this class after a transition has finished.

TIP: there are three built-in transition types in JackyJS: 'fade', 'curtain', and 'shutter'.

Methods (static)

Name Parameter Type Description
create* nameStringname of the transition object.

Events (object)

Name Parameter Type Description
onAddIncallbackFunctionthis is where your custom transition IN sprites are added and initialized.
onAddOutcallbackFunctionthis is where your custom transition OUT sprites are added and initialized.
onIncallback(callback)Functionthis is where the IN transition action occurs.
onOutcallback(*done)Functionthis is where the OUT transition action occurs.

NOTE: the onIn and onOut events require a special callback parameter called done to tell the internal system when your transition is finished. Simply pass 'done' as a parameter and call done() when your transition effect is complete.