Basic Point and Click Game

Examples
1

Below is code for a (very basic) single scene in a point and click adventure game with support for disappearing text dialogues. It is a good starting point for someone looking to make this type of a game, you can take the code below and build upon it.
I also plan to update this example scene with more features such as a hint button, the ability for the player to walk around (w/ animations) and interact more personally with the objects on scene, and a proper dialogue system between characters.

Here is the config file for the game -

var config = {

type: Phaser.AUTO,
width: 1280,
height: 720,
physics: {
    default: 'arcade'
},
backgroundColor: 0xffffff,
width: 1280,
height: 720,
scene: [GameScene1] //, GameScene2, GameScene3, GameComplete]
};

Here the sample scene as described above -

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

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

preload: function ()
{
    this.load.image('bg1', 'assets/background1.jpeg');
    this.load.image('bg2', 'assets/background2.jpeg');
    this.load.image('player', 'assets/player.png');
    this.load.image('obj2', 'assets/12.png');
    this.load.image('obj1', 'assets/11.png');
    this.load.image('solution1', 'assets/15.png');
},

create: function()
{
    var bg1 = this.add.image(0,0,'bg1');
    bg1.setOrigin(0,0);

    playerSprite = this.physics.add.image(300, 500, 'player').setScale(0.1, 0.1);
    playerSprite.setScale(0.1,0.1);
    
    var obj1 = this.add.image(650,500,'obj1').setScale(0.9,0.9);
    var obj2 = this.add.image(1130,500,'obj2').setScale(0.6,0.6);
    var solution = this.add.image(750,500,'solution1').setScale(0.075,0.075);

    var d12 = this.add.text(1110,540, "Nothing useful \nhere").setInteractive();
    var d11 = this.add.text(575, 565, "Nothing but stale news here").setInteractive();
    
    d11.visible = false;
    d12.visible = false;
    
    obj2.setInteractive().on('pointerdown', function () {
        d12.visible = true;
        this.tweens.add({
            targets: d12,
            alpha: 0,
            duration: 2500,
            ease: 'Power1'
        });
    }, this),

    obj1.setInteractive().on('pointerdown', function () {
        d11.visible = true;
        this.tweens.add({
            targets: d11,
            alpha: 0,
            duration: 2750,
            ease: 'Power1'
        });
    }, this),

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

update:function(){
    
}

});

var game= new Phaser.Game(config);

I am very new to Phaser and if I have made any mistakes, or if there is anything that could be implemented better, please let me know, and I’ll change it. Cheers! :smiley:

2

Hey!! Did you ever continue with this?