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	* name	String	name of the transition object.

Events (object)

Name	Parameter	Type	Description
onAddIn	callback	Function	this is where your custom transition IN sprites are added and initialized.
onAddOut	callback	Function	this is where your custom transition OUT sprites are added and initialized.
onIn	callback(callback)	Function	this is where the IN transition action occurs.
onOut	callback(*done)	Function	this 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.