Detect multiple pointer eventz

Phaser 3
1

Hi,

I was wondering if there is a better way to detect two pointer events than my current code. For example in this code, i’m trying to draw a line from point A to point B by detecting point A when the user touched down and point B while the user still pressed own and moving.

However i’m having an issue with my code, After the first pointer down event, it will keep drawing lines even after releasing the pointer. How can I make sure it only draws when pointer is down and moving ?

      function create() {
           this.input.on('pointerdown', (pointer) => {
       
            startLineXpos = pointer.x;
            startLineYpos = pointer.y;


            this.input.on('pointermove', (pointer, currentlyOver) => {
                this.add.line(0, 0, startLineXpos, startLineYpos, pointer.x, pointer.y, 0xff6699), console.log("pointermove: X " + pointer.x + " Y " + pointer.y);
            })

        });}

Thanks

2

If I understood you correctly, you need to use the ‘pointerup’ event for the second one.

3

Yes, using pointerup will work to draw one line from point A to point B.
I guess what I’m trying to achieve and failed to mention it earlier is, once I have point A from the pointer down I want to keep drawing the lines while the pointer is pressed and moving until it’s released.

4

Mmmmm
For that you’ll need to save the line created at each ‘pointermove’ event in a scene property and delete the previous one.
Something like:

this.input.on('pointermove', (pointer, currentlyOver) => {
    if (this.tempLine) this.tempLine.destroy();
    this.tempLine = this.add.line(0, 0, startLineXpos, startLineYpos, pointer.x, pointer.y, 0xff6699);
})
1 Like
5

Maybe you want

2 Likes
6

Thanks glantucan and samme.
Yes the code pen you shared is exactly what I was trying to achieve. :+1: