Screen transitions

Out of the box transitions

Currently, Moscrif provides 4 pre-created custom transitions as follows:

1.     
2. Slide To Top    
3. Slide To Bottom    
4. Slide To Left    
5. Slide To Right

Because new transitions can be easily created, the number of available transitions will probably be increased in the future.

Handling the transitions

The scene transitions are based on SceneTransition (hence the name) base class that can be extended to create your own custom transitions (see below). In order to use any of provided transition in our game, the desired class has to be included in the project.

//for the Slide to Left transition
include "lib://game2d/sceneTransitions/slideToLeft.ms" 
//for Slide to Right transition
include "lib://game2d/sceneTransitions/slideToRight.ms" 
//for Slide to Top transition
include "lib://game2d/sceneTransitions/slideToTop.ms"
//for Slide to Bottom transition
include "lib://game2d/sceneTransitions/slideToBottom.ms"

The transition can be called any time during the game's life cycle. In this demo, we have created 4 text buttons representing each one of the pre-created ones. Following, the transition call was added to the OnClick method of each text button.

Text decoration object was used to adjust the settings (text size, font, its weight, color) of the buttons.

//text decoration object
var textBold = new Paint();
textBold.textSize = System.height/12;
textBold.typeface = Typeface.fromName("mailrays", #bold);
textBold.color = 0xffffffff;

No matter what transition is used (pre-created or your own), the constructor takes 2 arguments:

• the duration of the transition in milliseconds
• one of the effects provided by Animator.Transition class (see below for details)

Once the buttons are created, the OnClick methods are used to create the transitions. For the sake and simplicity of this tutorial, only one scene is used, so it is transitioning into its self.

Following code snippet shows how to create the SlideToTop animation with bouncy affects and 1000 milliseconds to complete.

btnTop.onClick = function() {
       //scene transition to top
       this super.push(scene, new SlideToTop({duration:1000, transition:Animator.Transition.bouncy}));
    };

Animating the transition

Once you decide which transition to use, there are several transitioning effects available to choose from. The desired effect is the second and mandatory argument of each transition constructor.

Currently you can choose out of these supported effects:

• bouncy 
• linear
• easeIn 
• strongEaseIn
• easeInOut
• strongEaseOut
• easeOut
• veryBouncy
• elastic 
• veryElastic

Creating your own transition

The base Scene transition class can be easily extended to create our every own scene transition. This allows the developer to create a game that differs even in the most basic UI factors from the rest.

class OwnTransition : SceneTransition {     function init()     {         super.init();         this._scale = 0;     }       function draw(canvas)     {         super.draw(canvas);         // draw initial scene         if (this._sceneFrom) {             canvas.save();             this._sceneFrom.draw(canvas);             canvas.restore();         }         // draw end scene         if (this._sceneTo) {             canvas.save();             // scaled and centered new scene             canvas.translate(System.width / 2 - (System.width             / 2*this._scale).toInteger(), System.height / 2 -             (System.height / 2*this._scale).toInteger());             canvas.scale(this._scale, this._scale);             this._sceneTo.draw(canvas);             canvas.restore();         }     }       // sets local variables according to animation state     function setState(value)     {         this._scale = value * 1.0;         super.setState(value);     } }

Summary

By transitions, we understand the process of switching between the screens within the application. These transitions are a part of rich UI and make every game more appealing. Moscrif allows the developer to choose from several transitions with an option to create a custom one.

With up to 10 animation effects available, you have plenty of options how to attract the user.