craidencool

Transition of state animation

Recommended Posts

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!

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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!

asd.png

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.