Sign in to follow this  
B.Guyl

Efficient drag and drop ?

Recommended Posts

Hi !

I started with Phaser3 this weekend, I wanted to make a card game.
I'm struggling with the lack of documentation.

My current way to make a draggable object is to track the position of the `pointermove` event.

export class Card extends Phaser.GameObjects.Sprite {
  constructor (scene: Phaser.Scene, x: number, y: number, frame?: string) {
    super(scene, x, y, 'card', frame)
    this.setInteractive()
    this.on('pointerdown', () => this.dragOn())
    this.on('pointerup', () => this.dragOff())
  }

  private dragOn (): void {
    this.addListener('pointermove', (e: any) => {
      this.x = e.event.x
      this.y = e.event.y
    })
  }

  private dragOff (): void {
    this.removeAllListeners('pointermove')
  }
}

But I have an issue when I move my mouse too fast.
Is there a good way of doing this ?

Also, bonus question: Is there a list of available events ?

Share this post


Link to post
Share on other sites

Thank's !

Now my code look like this:


export class Card extends Phaser.GameObjects.Sprite {
  constructor (scene: Phaser.Scene, x: number, y: number, frame?: string) {
    super(scene, x, y, 'cards', 'back')
    this.setInteractive()
    scene.input.setDraggable(this)
    scene.input.on('drag', (pointer: any, gameObject: Card, dragX: number, dragY: number) => {
      gameObject.x = dragX
      gameObject.y = dragY
    })
  }
}

I probably should move the event listener on the scene level.

Is this working better because the `drag` event fire more events thant `pointermove` ?

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.