Phaser3 Changing scene by Collision detection

[Anish_Aggarwal]

//In the following phaser programme a player is shown which can be moved using the arrow keys.
//The platforms contains some pictures above them, when the player collides with any image, 
//Scene changes and the corresponding video plays on the new scene.
//Assets used are 1 image for background, 1 for platform, 3 for interaction with player,
//1 player sprite sheet and 3 videos.

//We will create the first scene GameScene1

    var GameScene1 = new Phaser.Class({

    Extends: Phaser.Scene,

    initialize:

    function GameScene1 ()
    {
        Phaser.Scene.call(this, { key: 'GameScene1' });
    },

    preload: function(){
        //We will load all the images and spritesheet here
        this.load.image('background', 'assets/sky.png');
        this.load.image('ground', 'assets/platform1.png');
        this.load.image('img1', 'assets/pet.jpg');
        this.load.image('img2', 'assets/eye.png');
        this.load.image('img3', 'assets/cupcake.png');
        //Make sure to get the frameWidth and framHeight of the sprits in  the spritesheet accurate 
        this.load.spritesheet('player', 'assets/reddude.png', {
            frameWidth: 64,
            frameHeight: 64
        });
    }, //Preload function ends here

    create: function(){
        //We added the images and sprites
        //We added physics component to the images such that we can detect collision 
        this.background = this.add.tileSprite(0, 0, config.width, config.height, 'background').setScale(2);
        this.img1 = this.physics.add.image(80, 130, 'pets').setScale(0.1);
        this.img2 = this.physics.add.image(750, 100, 'eye').setScale(0.08);
        this.img3 = this.physics.add.image(650, 300, 'cupcake').setScale(0.08);

        //We create a variable for platforms
        //We used StaticGroup as we dont want the platforms to move on appling physical force
        platforms = this.physics.add.staticGroup();

        platforms.create(425, 570, 'ground').setScale(2.2).refreshBody();

        platforms.create(550, 400, 'ground');
        platforms.create(50, 250, 'ground');
        platforms.create(700, 230, 'ground');

        //We will add the player sprite as this.player to make it more accessible
        //We will add a little bounce and gravity to the player to make it jump and fall down
        //We have added world bounds such that player won't be able to leave the bounds
        this.player = this.physics.add.sprite(100,450, 'player');
        this.player.setBounce(0.2).setGravityY(300);
        this.player.setCollideWorldBounds(true);

        //We have add the collider between the platforms and the player 
        this.physics.add.collider(this.player, platforms);

        //We will add text here to provide some information to the payer
        txt = this.add.text(10,570, 'Click on image to load video, use arrow keys to move player');

        cursors = this.input.keyboard.createCursorKeys();

        //We will add the animations here
        this.anims.create({
        key: 'left',
        frames: this.anims.generateFrameNumbers('player', { start: 4, end: 7 }),
        frameRate: 10,
        repeat: -1
        });

        this.anims.create({
        key: 'right',
        frames: this.anims.generateFrameNumbers('player', { start: 8, end: 11 }),
        frameRate: 10,
        repeat: -1
        });

        this.anims.create({
        key: 'turn',
        frames: [ { key: 'player', frame: 0 } ],
        frameRate: 20
        });
        
      }, //Create function ends here

    update: function(){
    //Update function is called every frame
    //Here using the cursor input created in the create function we can assign movement of the player to different arrow keys
        if (cursors.left.isDown)
    {
        this.player.setVelocityX(-160);

        this.player.anims.play('left', true);
    }
    else if (cursors.right.isDown)
    {
        this.player.setVelocityX(160);

        this.player.anims.play('right', true);
    }
    else
    {
        this.player.setVelocityX(0);

        this.player.anims.play('turn');
    }

    if (cursors.up.isDown && this.player.body.touching.down)
    {
        this.player.setVelocityY(-330);
    }

    //This is the function that detects collision between player and the images 
    //If the collision is true it implement the function which in this case is scene change
    this.physics.world.collide(this.player, this.img1, function(){
    game.scene.start('GameScene2');
    });
    this.physics.world.collide(this.player, this.img2, function(){
    game.scene.start('GameScene3');
    });
    this.physics.world.collide(this.player, this.img3, function(){
    game.scene.start('GameScene4');
    });

    }, // Update function ends here
    }); //GameScene1 ends here

//We will create the second scene GameScene2

    var GameScene2 = new Phaser.Class(
    {
    Extends: Phaser.Scene,

    initialize:

    function GameScene(){
        Phaser.Scene.call(this, {key: 'GameScene2' });
    },

    preload: function(){
        //We will load the image and video here
        this.load.image('background', 'assets/blackbg.jpg');
        this.load.video('dogvid', 'assets/dogbanana.mp4');
    }, //Preload function ends here

    create: function(){
        //We added the image and text
        this.background = this.add.tileSprite(0, 0, config.width, config.height, 'background').setScale(2);
        txt2 = this.add.text(config.width - 200 ,0 , 'Go back').setScale(2);

        txt2.setInteractive().on('pointerdown', function() {
        this.scene.scene.start('GameScene1');
        });

        //We will assign the video (dogvid) to the variable video
        var video = this.add.video(config.width/2, config.height/2, 'dogvid');
        //This plays the video as soon as the scene is loaded
        video.play(true);
    }, //Create function ends here

    update:function(){

    },
    }); //GameScene2 ends here

//We will create the third scene GameScene3

    var GameScene3 = new Phaser.Class(
    {
    Extends: Phaser.Scene,

    initialize:

    function GameScene(){
        Phaser.Scene.call(this, {key: 'GameScene3' });
    },

    preload: function(){
        //We will load the image and video here
        this.load.image('background', 'assets/blackbg.jpg');
        this.load.video('eyevid', 'assets/eye.mp4');
    }, // Preload function ends here

    create: function(){
        //We added the image and text
        this.background = this.add.image(400, 300, 'background').setScale(2);
        txt2 = this.add.text(config.width - 200 ,0 , 'Go back').setScale(2);

        txt2.setInteractive().on('pointerdown', function() {
        this.scene.scene.start('GameScene1');
        });
        
        //We will assign the video (eyevid) to the variable video
        var video = this.add.video(config.width/2, config.height/2, 'eyevid');
        //This plays the video as soon as the scene is loaded
        video.play(true);
    }, // Create function ends here

    update:function(){

    },
    }); //GameScene3 ends here

//We will create the fourth scene GameScene4

    var GameScene4 = new Phaser.Class(
    {
    Extends: Phaser.Scene,

    initialize:

    function GameScene(){
        Phaser.Scene.call(this, {key: 'GameScene4' });
    },

    preload: function(){
        //We will load the image and video here
        this.load.image('background', 'assets/blackbg.jpg');
        this.load.video('cupcakevid', 'assets/cupake.mp4');
    }, //Preload function ends here

    create: function(){
        //We added the image and text
        this.background = this.add.image(400, 300, 'background').setScale(2);
        txt2 = this.add.text(config.width - 200 ,0 , 'Go back').setScale(2);

        txt2.setInteractive().on('pointerdown', function() {
        this.scene.scene.start('GameScene1');
        });

        //We will assign the video (cupcakevid) to the variable video
        var video = this.add.video(config.width/2, config.height/2, 'cupcakevid');
        //This plays the video as soon as the scene is loaded
        video.play(true);
    }, // Create function ends here

    update:function(){

    },
    }); //GameScene4 ends here

//We will set the configuration of the game here
var config = {
        type: Phaser.AUTO,
        width: 850,
        height: 600,
        physics: {
            default: 'arcade',
            arcade: {
                gravity: { y: 0 },
                debug: false
            }
        },
        scene: [GameScene1,GameScene2,GameScene3,GameScene4]         
    
};

    var game = new Phaser.Game(config);