Transition of state animation

[craidencool]

Hey guys! can someone help me how do you add a transition animation every time I switch state? like in other game when you go to main menu there is animation before you go to the main menu state? hope you can help me thank you!

[end3r]

You can do it in many ways, for example by tweening images (like I did in Wizard Quest), or with the new camera features in Phaser - flash and fade, like it's shown in Enclave Phaser Template, this commit in particular.

Basically, you can setup the tweening animation and when it's finished go to the next state, or with the camera: fade the screen and enter the new state when it finishes fading.

[craidencool]

Yes sir. this is what I meant in your game Wizard quest when I clicked play this animation plays (I print screen it) can you maybe have a sample sir how to implement this? im really new with phaser. hope you can help me. thank you!

[end3r]

Sure. It's not beautiful and could be done a lot better (feel free to provide a cleaner solution based on events), but it works. This is how the Start button in the Main Menu looks like:

clickStart: function() {
    if(!this.transitioning) {
        this.transitioning = true;
        Wizard._transitionTweenIn(this);
        var event = this.game.time.create(true);
        event.add(Wizard._transitionDelay*1.5, function(){
            this.transitioning = false;
            this.game.state.start('Map');
            event.destroy();
        }, this);
        event.start();
    }
},

The transitionTweenIn moves the sides from the edges of the screen. Then, in the Map state I only need this:

Wizard._transitionTweenOut(this);

I do the transition in the opposite direction. Now the most interesting part - both functions:

var Wizard = {
    _WIDTH: 960,
    _HEIGHT: 640,
    _LEVEL: 1,
    // ...
    _transitionDelay: 300,
    _transitionInit: function(game,monster) {
        // console.log('tweenInit');
        var coverImage = (monster) ? 'screen-battle-'+monster : 'screen-cover';
        var coverOffset = (monster) ? 0 : 33;
        Wizard.transitionCoverLeft = game.add.sprite(-(Wizard._WIDTH*0.5)+coverOffset, 0, coverImage, 0);
        Wizard.transitionCoverRight = game.add.sprite(Wizard._WIDTH, 0, coverImage, 1);
    },
    _transitionTweenIn: function(game,monster,callback) {
        // console.log('tweenIn');
        Wizard._transitionInit(game,monster);
        var coverOffset = (monster) ? 0 : 58;
        var coverEasing = (monster) ? Phaser.Easing.Linear.None : Phaser.Easing.Circular.Out;
        game.add.tween(Wizard.transitionCoverLeft).to({ x: 0 }, Wizard._transitionDelay, coverEasing, true, 0);
        game.add.tween(Wizard.transitionCoverRight).to({ x: (Wizard._WIDTH*0.5)-coverOffset }, Wizard._transitionDelay, coverEasing, true, 0).onComplete.addOnce(function(){
            if(callback) {
                var tween = game.add.tween(Wizard.transitionCoverLeft).to({ x: 0 }, Wizard._transitionDelay*6, coverEasing, true, 0).onComplete.addOnce(function(){
                    game.transitioning = false;
                    game.state.start('Game');
                }, game);
            }
        }, game);
    },
    _transitionTweenOut: function(game,monster) {
        // console.log('tweenOut');
        Wizard._transitionInit(game,monster);
        var coverOffset = (monster) ? 0 : 58;
        var coverEasing = (monster) ? Phaser.Easing.Linear.None : Phaser.Easing.Circular.In;
        Wizard.transitionCoverLeft.x = 0;
        Wizard.transitionCoverRight.x = (Wizard._WIDTH*0.5)-coverOffset;
        game.add.tween(Wizard.transitionCoverLeft).to({ x: -(Wizard._WIDTH*0.5)-coverOffset }, Wizard._transitionDelay, coverEasing, true, 0);
        game.add.tween(Wizard.transitionCoverRight).to({ x: Wizard._WIDTH }, Wizard._transitionDelay, coverEasing, true, 0);
    },
    // ...
};

Keep in mind I'm using this function for both the general tweening between states, and tweening every monster's cover before the battle. This is the execution of the tween in the showBattlePortrait function:

Wizard._transitionTweenIn(this,Wizard._monster.type[Wizard._LEVEL],true);

As I said - it's not perfect (I'd even say it's ugly), but it works. It might be a little bit an overkill for you, but I hope you can extract what you want from that.

[craidencool]

Thank you so much sir! this is very helpful.