Jump to content

Transition of state animation


craidencool
 Share

Recommended Posts

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...