Add onStart parameter into scene.transition(config)

[rexrainbow]

It can define transition action of scenes in a single scene.transition(config) call.

Please do not update the README or Change Log, we will do this when we merge your PR.

This PR (delete as applicable)

• Adds a new feature

Describe the changes below:

The goal is transition from fromScene to toScene.

Currently, we use 'transitionout' of fromScene and 'transitionstart' of toScene, to define the action of transition :

fromScene.events.on('transitionout', function(targetScene, duration){ 
    // actions
});
toScene.events.on('transitionstart', function(fromScene, duration){ 
    // actions
});

then invoke scene.scene.transition(config) method to start transition.

This PR try to integrate actions of transition callbacks from event in fromScene and toScene into config of scene.scene.transition method, by adding new parameter onStart callback.

Parameter of onStart callback is

function(fromScene, toScene, duration) {
    // actions
}

Here is a sample code of using this onStart callback

class SceneA extends Phaser.Scene {
    constructor() {
        super({
            key: 'SceneA'
        })
    }

    preload() {
        this.load.image('classroom', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/assets/images/backgrounds/classroom.png');
    }

    create() {
        console.log('Create SceneA')
        this.add.image(400, 300, 'classroom');

        this.input.on('pointerdown', function () {
            this.scene.transition({
                target: 'SceneB',
                duration: 6000,
                moveBelow: true,

                onStart(fromScene, toScene, duration) {
                    fromScene.tweens.add({
                        targets: fromScene.cameras.main,
                        alpha: { start: 1, to: 0 },
                        delay: 0,
                        duration: duration * 0.6,
                        repeat: 0,
                    });

                    toScene.tweens.add({
                        targets: toScene.cameras.main,
                        alpha: { start: 0, to: 1 },
                        delay: duration * 0.4,
                        duration: duration * 0.6,
                        repeat: 0,
                    });
                }
            });
        }, this)
    }

    update() {

    }
}

class SceneB extends Phaser.Scene {
    constructor() {
        super({
            key: 'SceneB'
        })
    }

    preload() {
        this.load.image('road', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/assets/images/backgrounds/road.png');
    }

    create() {
        console.log('Create SceneB')
        this.add.image(400, 300, 'road');

        this.input.on('pointerdown', function () {
            this.scene.transition({
                target: 'SceneA',
                duration: 3000,
                moveBelow: true,

                onStart(fromScene, toScene, duration) {
                    fromScene.tweens.add({
                        targets: fromScene.cameras.main,
                        scrollX: { start: 0, to: -800 },
                        duration: duration,
                        repeat: 0,
                    });

                    toScene.tweens.add({
                        targets: toScene.cameras.main,
                        scrollX: { start: 800, to: 0 },
                        duration: duration,
                        repeat: 0,
                    });
                }
            });
        }, this)
    }

    update() {

    }
}

var config = {
    type: Phaser.AUTO,
    scale: {
        parent: 'phaser-example',
        mode: Phaser.Scale.FIT,
        autoCenter: Phaser.Scale.CENTER_BOTH,
        width: 800,
        height: 600,
    },
    scene: [SceneA, SceneB]
};

Question : Where can I add definition about parameters of this new onStart callback?

[photonstorm]

Thanks for this. re: parameters for onStart, you would create a new typedef, like SceneCreateCallback, with whatever parameters it passes in there.

[rexrainbow]

Typedef added. Thanks for reviewing it.

[photonstorm]

👍