Scene transitions

Sample scene transition show how to change scenes with attractive effect in games. Moscrif implements four basic scene transitions: movements with sliding effect into top, bottom, left or right.

Show screenshots (4)

In Moscrif game framework the scenes are the most important part. Changing of the game scenes can be done with animation slide effect. Old scene can be slide to top, bottom, left or right.

There are four classes defining scene transitions in Game2D packadge.

slideToTop: slide current scent to top
slideToBottom: slide current scent to bottom
slideToLeft: slide current scent to left
slideToRight: slide current scent to right

Source files

Every scene transitions is defined in separate source file, located at: lib://game2d/sceneTransitions/[scene name].ms. To use some of them, we need to add required source files firstly:

Example code 1: insert source files

include "lib://game2d/sceneTransitions/slideToLeft.ms"
include "lib://game2d/sceneTransitions/slideToRight.ms"
include "lib://game2d/sceneTransitions/slideToTop.ms"
include "lib://game2d/sceneTransitions/slideToBottom.ms"

Creating new scene

In onStart event we add first scene into our game using push method. This first scene is pushed without any animations. It is showed directly when application starts.

Examle code2: create new scene

//game scene instance
var scene = new GameScene();
this.push(scene);

Game scene class only draws its background. It also contains four buttons, which launch transition animations.

Transition animations

Using transition animations is very easy. It only required to use push method with second optional parameter - instance of SceneTransition class. SceneTransition constructor has same parameters as Animator class (see also Animations samplel).

Example code 3: apply scene transition
//create buttons
var btnTop = new TextButton({text: "Top", paint: textBold,x:System.width/2,y:System.height/2+System.height/15});
btnTop.onClick = function() {
//scene transition to top
this super.push(scene, new SlideToTop({duration:1000,transition:Animator.Transition.bouncy}));
};
scene.add(btnTop);

Create own transition

Finally, in this time, Moscrif framework offers four basic scene transitions, but you can also create your own transition. Just inherit your class from base SceneTransition class and change setScene and draw functions. Next sample code show you how to create basic scene transition class.

Example code 4: create own transitions
class OwnTransition : SceneTransition {
    function init()
    {
        super.init();
        this._scale = 0;
    }     // public fuctions
    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);
    }
    //
}