Newbie looking for advice

Phaser 3
1

Hi all,

I’m a web dev looking to learn some game development basics with Phaser.

My immediate goal is to make some simple point, click and drag actions and was hoping someone could point me in the right direction to learn about it.

I have some static illustrations I want to put on the screen and then have the user interact with them in the following ways:

Action 1:
Click on one illustration then another and have a line appear between them if they are a match. (according to differing criteria)

Action 2:
Draw a circle around a variable number of pictures and if the right amount are within that circle the user “wins”. Output a boolean.

Action 3:
Drag and drop pictures into various dropzones and if it is the correct dropzone for that picture, they “win”.

Which examples/tutorials are best to look at to accomplish these tasks with Phaser?

Thanks very much!

2

I’ve successfully managed to implement “Action 1” as above.

The only issue is I’m not sure how to register a click on the background.
For images I’m using

images.forEach(function(image) {
    image.on('pointerdown', function (pointer) {
        // Do stuff here.
    });
});

My goal is to have the line I’m drawing disappear/deselect if the background is clicked rather than an image.
For example (“this” being the root of the create() function):

this.input.on('pointerdown',function(pointer) {
    console.log('clicked');
});

which registers a click even if an image is clicked.
How can I make it so it only registers if the background and nothing else is clicked?

3

Hello there, nice to meet you

I’m also a newbie here. I’ve been wrestling with my own game for a month now. I’ve some experience in other languages, like C# and Dart, but my guess is you’re more pro than I am.

Just to let you know, you can direct message me anytime if you need anything, and perhaps we can help each other out

peace!
:smile:

1 Like
4

How can I make it so it only registers if the background and nothing else is clicked?

I’d probably make the background an image or something and register a pointerdown listener on it

1 Like
5

I appreciate it, thanks!

6

Thanks a lot, @snowbillr. I’ll give that a go and report back. :slight_smile:

7

Here’s what it looks like:
giphy

Here’s the code which seems to be working nicely.


<script>
    var config = {
        type: Phaser.AUTO,
        width: 800,
        height: 600,
        physics: {
            default: 'arcade',
            arcade: {
                gravity: { y: 0 }
            }
        },
        scene: {
            preload: preload,
            create: create
        }
    };

    var game = new Phaser.Game(config);
    var images;

    var lineActive = false;
    var line;
    var lines = [];
    var firstSelected = null;
    var reset = false;
    var completedNodes = [];

    function preload ()
    {
        //this.cameras.main.backgroundColor.setTo(255,255,255);

        this.load.image('bg', 'assets/n/1/bg.png');
        this.load.image('sock1a', 'assets/n/1/sock1a.png');
        this.load.image('sock1b', 'assets/n/1/sock1b.png');
        this.load.image('sock2a', 'assets/n/1/sock2a.png');
        this.load.image('sock2b', 'assets/n/1/sock2b.png');
        this.load.image('sock3a', 'assets/n/1/sock3a.png');
        this.load.image('sock3b', 'assets/n/1/sock3b.png');
        this.load.image('sock4a', 'assets/n/1/sock4a.png');
        this.load.image('sock4b', 'assets/n/1/sock4b.png');
    }

    function create ()
    {
        var main = this;
        var bg = this.add.image(400, 300, 'bg').setInteractive();
        images = [
            this.add.image(80, 100, 'sock1a').setInteractive({useHandCursor: true}).setData('match','sock1b').setData('name','sock1a'),
            this.add.image(400, 450, 'sock1b').setInteractive({useHandCursor: true}).setData('match','sock1a').setData('name','sock1b'),
            this.add.image(150, 350, 'sock2a').setInteractive({useHandCursor: true}).setData('match','sock2b').setData('name','sock2a'),
            this.add.image(700, 300, 'sock2b').setInteractive({useHandCursor: true}).setData('match','sock2a').setData('name','sock2b'),
            this.add.image(700, 500, 'sock3a').setInteractive({useHandCursor: true}).setData('match','sock3b').setData('name','sock3a'),
            this.add.image(400, 150, 'sock3b').setInteractive({useHandCursor: true}).setData('match','sock3a').setData('name','sock3b'),
            this.add.image(100, 550, 'sock4a').setInteractive({useHandCursor: true}).setData('match','sock4b').setData('name','sock4a'),
            this.add.image(680, 100, 'sock4b').setInteractive({useHandCursor: true}).setData('match','sock4a').setData('name','sock4b')
        ];

        images.forEach(function(image) {
            image.on('pointerdown', function (pointer) {
                this.setTint(0x888888);

                // If one object has already been selected, a line is active following the mouse cursor.
                if(lineActive === true ) {
                    main.input.removeListener('pointermove');
                    if(image.getData('name') === firstSelected.getData('match')) {
                        line.setTo(firstSelected.x, firstSelected.y, image.x, image.y);
                        //line.setData('node1',firstSelected);
                        //line.setData('node2',image);
                        completedNodes.push(firstSelected.getData('name'));
                        completedNodes.push(image.getData('name'));
                        lines.push(line);
                        lineActive = false;
                        image.setData('selected', true);
                        firstSelected = null;
                    } else {
                        line.destroy();
                        lineActive = false;
                        firstSelected = null;
                        reset = true;
                    }
                }

                // Nothing has been selected yet
                if(lineActive === false && !image.getData('selected') && !reset) {
                    // Make sure it's not one that's already been completed
                    if(!completedNodes.includes(image.getData('name'))) {
                        line = main.add.line(0, 0, image.x, image.y, pointer.x, pointer.y, 0xd50102).setOrigin(0, 0);
                        line.setLineWidth(2);
                        main.input.on('pointermove', function (pointer, gameObject) {
                            line.setTo(image.x, image.y, pointer.x, pointer.y);
                        });
                        lineActive = true;
                        image.setData('selected', true);
                        firstSelected = image;
                    }
                }

                // Unselect any failed attempts
                image.setData('selected',false);
                reset = false;
            })

            image.on('pointerout', function (pointer) {
                this.clearTint();
            });

            image.on('pointerup', function (pointer) {
                this.clearTint();
            });
        });

        
        // Clicking the background causes the current line to disappear and reset related objects/images
        bg.on('pointerdown',function(pointer) {
            if(lineActive) {
                if(line) {
                    line.destroy();
                    main.input.removeListener('pointermove');
                }
                lineActive = false;
                firstSelected.setData('selected',false);
                firstSelected = null;
                reset = false;
            }
        });
    }

</script>
1 Like