Jump to content
GameMonetize.com © The leading broker of high quality cross-platform HTML5 games ×

Phaser 3 Scene change, Basic Physics and Spritesheet animation demo

RedMonk

By RedMonk,
in Demos and Projects

 Share

Recommended Posts

RedMonk Newbie

RedMonk

Posted
Posted

CODE
  

var GameScene1 = new Phaser.Class({

    Extends: Phaser.Scene,
    initialize:

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

    preload: function ()
    {
        this.load.spritesheet('Girl', 'Girl.png',  {frameWidth: 256, frameHeight:256, endFrame: 12});
        this.load.spritesheet('Boy', 'Boy.png', {frameWidth: 64, frameHeight:64, endFrame: 36});
        this.load.image('Particle', 'Particle.png');
        this.load.image('Ground1', 'Ground1.png');
        this.load.image('Ground2', 'Ground2.jpg');
        this.load.image('Ground3', 'Ground3.jpg');
        this.load.image('PortalL', 'PortalL.png');
        this.load.image('PortalR', 'PortalR.png');
        this.load.image('Anthima', 'Anthima.png');
        this.load.image('Yashit', 'Yashit.png');
        this.load.image('Door', 'Door.png');
        this.load.image('Win', 'Win.png');
    },

    create: function ()
    {
        ground = this.add.sprite(300, 200, 'Ground1');
        ground.setScale(1.5);
        ground = this.add.sprite(300, 680, 'Ground1');
        ground.setScale(1.5);
        cursors = this.input.keyboard.createCursorKeys();

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

        this.anims.create({
            key: 'left',
            frames: this.anims.generateFrameNumbers('Boy', { start: 24, end: 31 }),
            frameRate: 10,
            repeat: -1
        });

        this.anims.create({
            key: 'down',
            frames: this.anims.generateFrameNumbers('Boy', { start: 0, end: 7 }),
            frameRate: 10,
            repeat: -1
        });

        this.anims.create({
            key: 'up',
            frames: this.anims.generateFrameNumbers('Boy', { start: 16, end: 23 }),
            frameRate: 10,
            repeat: -1
        });

        this.anims.create({
            key: 'pause',
            frames: this.anims.generateFrameNumbers('Boy', { start: 16, end: 16 }),
            frameRate: 10,
            repeat: -1
        });
            
        Boy = this.add.sprite(200, 300, 'Boy');
        door = this.add.sprite(710, 510, 'Door');
        door.setScale(0.5);
        Boy.setScale(1.5);

    },

    update: function(){
        if (cursors.right.isDown)
        {
            if (Boy.x !=790)
            {
                Boy.anims.play('left', true);
                Boy.x += 2;
            }
        } 
        else if (cursors.left.isDown)
        {
            if (Boy.x !=20)
            {
                Boy.anims.play('right', true);
                Boy.x -= 2;
            }
        }
        else if (cursors.up.isDown)
        {
            if (Boy.y !=30)
            {
                Boy.anims.play('down', true);
                Boy.y -= 2;
            }
        }
        else if (cursors.down.isDown)
        {
            if (Boy.y !=570)
            {
                Boy.anims.play('up', true);
                Boy.y += 2;
            }
        }
        else if (Boy.y >= 450 && Boy.x >= 680)
        {
            door.setInteractive({ useHandCursor: true });
            door.setInteractive().on('pointerdown', function() {
                this.scene.scene.start('GameScene2');
                this.scene.scene.pause('GameScene1');
            });
        }
        else
        {
            Boy.anims.play('pause', true);
        }

    }
});

//create a scene with class
var GameScene2 = new Phaser.Class({
    Extends: Phaser.Scene,
    initialize:

    function GameScene ()
    {
        Phaser.Scene.call(this, { key: 'GameScene2' });
    },
    
    create: function ()
    {
        ground1 = this.add.sprite(400, 300, 'Ground2');
        ground1.setScale(1, 1.2);
        cursors = this.input.keyboard.createCursorKeys();

        this.anims.create({
            key: 'rightG',
            frames: this.anims.generateFrameNumbers('Girl', { start: 0, end: 5 }),
            frameRate: 10,
            repeat: -1
        });

        this.anims.create({
            key: 'leftG',
            frames: this.anims.generateFrameNumbers('Girl', { start: 6, end: 10 }),
            frameRate: 10,
            repeat: -1
        });

        this.anims.create({
            key: 'pauseG',
            frames: this.anims.generateFrameNumbers('Girl', { start: 4, end: 4 }),
            frameRate: 10,
            repeat: -1
        });

        
        portalL = this.add.sprite(50, 420, 'PortalL');
        portalL.setScale(0.1);
        portalR = this.add.sprite(750, 420, 'PortalR');
        portalR.setScale(0.1);
        Girl = this.add.sprite(300, 440, 'Girl');
        Girl.setScale(0.5);
    },

    update: function(){
        if (cursors.right.isDown)
        {
            if (Girl.x != 710)
            {
                Girl.anims.play('rightG', true);
                Girl.x += 2;
            }
        } 
        else if (cursors.left.isDown)
        {
            if (Girl.x != 80)
            {
                Girl.anims.play('leftG', true);
                Girl.x -= 2;
            }
        }
        else if (Girl.x <= 100)
        {
            portalL.setInteractive({ useHandCursor: true });
            portalL.setInteractive().on('pointerdown', function() {
                this.scene.scene.start('GameScene3');
                this.scene.scene.pause('GameScene2');
            });
        }
        else if (Girl.x >= 680)
        {
            portalR.setInteractive({ useHandCursor: true });
            portalR.setInteractive().on('pointerdown', function() {
                this.scene.scene.start('GameScene2');
            });
        }
        else
        {
            Girl.anims.play('pauseG', true);
        }

    }
});

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

    function GameScene ()
    {
        Phaser.Scene.call(this, { key: 'GameScene3' });
    },
    
    create: function ()
    {
        ground2 = this.add.sprite(400, 320, 'Ground3');
        ground2.setScale(0.2);
        var txt5 = this.add.image(400, 100, 'Win');
        txt5.setInteractive({ useHandCursor: true });
        txt5.setInteractive().on('pointerdown', function() {
            this.scene.scene.start('GameScene1');
            this.scene.scene.pause('GameScene3');
        });

        var particles = this.add.particles('Particle');
        var emitter = particles.createEmitter({
            speed: 100,
            scale: { start: 0.05, end: 0 },
            blendMode: 'ADD'
        });

        var particles2 = this.add.particles('Particle');
        var emitter2 = particles2.createEmitter({
            speed: 100,
            scale: { start: 0.05, end: 0 },
            blendMode: 'ADD'
        });
            
        logo1 = this.physics.add.image(100, 100, 'Yashit');
        logo1.setScale(0.3);
        logo1.setVelocity(100, 0);
        logo1.setBounce(1, 1);
        logo1.setGravityY(300);
        logo1.setCollideWorldBounds(true);
        emitter.startFollow(logo1, -60, 30);

        logo2 = this.physics.add.image(500, 200, 'Anthima');
        logo2.setScale(0.3);
        logo2.setVelocity(100, 0);
        logo2.setBounce(1, 1);
        logo2.setGravityY(300);
        logo2.setCollideWorldBounds(true);
        emitter2.startFollow(logo2, 80, 10);
    }
});

//settings required to configure the game
var config = {
    type: Phaser.AUTO,   
    width: 800,
    height:  600,
    physics: {
        default: 'arcade',
        arcade: {
            gravity: 10,
        }
    },
    
    //set background color
    backgroundColor: 0x8080,
    scale: {
        //we place it in the middle of the page.
        autoCenter: Phaser.Scale.CENTER_BOTH
    },

    scene:[GameScene1, GameScene2, GameScene3]

};

var game = new Phaser.Game(config);





What we are trying to do:

 
–In Phaser we have scene changing functions to help us navigate through our game.
–We are making 3 scenes in total. In 1st  scene we have to reach a door to navigate to the second scene, the 2nd  scene has a completely different Art type and not one but two portals which player should figure out which is the correct door to win the game.
–3rd scene is radically different from other two scenes as it has physics components and particle effects, it is a Game win scene in a way.
image.thumb.png.748dd635427bbbaf751aa4f9c7f2e1b2.png
 
 
 
Elements in this scene
–Backdrop Image of grass, Door added as sprite and Character added as sprite and animated. 
Boy = this.add.sprite(200, 300, 'Boy');

door = this.add.sprite(710, 510, 'Door');

ground = this.add.sprite(300, 200, 'Ground1’);
–Boy is animated which we will see further in slide along with how we are changing scenes.
image.thumb.png.6782819f7e99f3e0c497844f5d67f319.png
 
Elements in this scene
–Girl as a sprite, Backdrop picture as a sprite and two portals with same sprite.
–Girl is animated which we will see further in slide along with how we are changing scenes. 
portalL = this.add.sprite(50, 420, 'PortalL');

portalR = this.add.sprite(750, 420, 'PortalR');

Girl = this.add.sprite(300, 440, 'Girl');

ground1 = this.add.sprite(400, 300, 'Ground2’);

 

image.thumb.png.ed075bd12e13c37793a756b07f45a33f.png
 
 
Physics in this scene
–Code snippet for Particle effect 
var emitter = particles.createEmitter({

            speed: 100,

            scale: { start: 0.05, end: 0 },

            blendMode: 'ADD'

        });
–Code snippet for Bounce, gravity, setBounds and velocity 
logo1.setVelocity(100, 0);

        logo1.setBounce(1, 1);

        logo1.setGravityY(300);

        logo1.setCollideWorldBounds(true);

 

 

Animation 

this.anims.create({

            key: 'right',

            frames: this.anims.generateFrameNumbers('Boy', { start: 8, end: 15 }),

            frameRate: 10,

            repeat: -1

        });
–This is an animation clip we have similar clips for left, up and down animation which we can see in the Rar file attached with work.
–This snippet sets speed of animation with frameRate and which frames are included in clip with frames.
–Usage, we use this snippet to activate the respective clip. 
if (cursors.left.isDown)

{

    if (Boy.x !=20)

    {

          Boy.anims.play('right', true);

          Boy.x -= 2;

    }

 }

 

 
 

Scene Change 

if (Boy.y >= 450 && Boy.x >= 680)

{

     door.setInteractive({ useHandCursor: true });

     door.setInteractive().on('pointerdown', function() 

     {

                this.scene.scene.start('GameScene2');

                this.scene.scene.pause('GameScene1');

     });

}

This snippet takes us to Scene 2 from Scene 1.

Link to comment
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...
×
 Share
Go to topic listing

  • Recently Browsing   0 members

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