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.