Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Error when dragging constrained object on top of another interactive object #5699

Closed
lyger opened this issue May 14, 2021 · 3 comments
Closed

Comments

@lyger
Copy link

lyger commented May 14, 2021

Version

  • Phaser Version: 3.54.0
  • Operating system: Windows
  • Browser: Tested on both Chrome and FIrefox

Description

Error when dragging an object outside the game area, if the object is constrained and the object is on top of another interactive object.

In my testing, this did not occur when the game object was not constrained, and it did not occur when it was not on top of another interactive object. I discovered this when trying to create a volume slider for my game, for which the slider knob was constrained to the slider area.

Although it does not crash the game, the error shows up on console.

Steps to reproduce (using test code below):

  1. Click the green box and begin dragging it
  2. Keep dragging until the mouse pointer is outside the game area (e.g. in the white area of the page background)
  3. Release the mouse button
  4. Console will show:
Uncaught TypeError: Cannot read property 'renderList' of undefined
    at initialize.sortGameObjects (phaser.min.js:1)
    at initialize.processOverOutEvents (phaser.min.js:1)
    at initialize.update (phaser.min.js:1)
    at initialize.updateInputPlugins (phaser.min.js:1)
    at initialize.onMouseUp (phaser.min.js:1)
    at onMouseUpWindow (phaser.min.js:1)

This appears to be because the camera associated with the pointer is undefined when the event takes place outside the game area.

Example Test Code

https://codepen.io/lyger-zero/pen/PopNKbM

const game = new Phaser.Game({
  parent: "phaser-root",
  width: 800,
  height: 600,
  scene: {
    create: create,
  }
})

function create() {
  const rect1 = this.add.rectangle(400, 300, 800, 600, 0xff0000).setInteractive();
  const rect2 = this.add.rectangle(400, 300, 200, 100, 0x00ff00).setInteractive();
  
  this.input.setDraggable(rect2);
  
  rect2.on("drag", function(pointer, dragX, dragY) {
    rect2.x = Phaser.Math.Clamp(dragX, 200, 600);
    rect2.y = Phaser.Math.Clamp(dragY, 100, 400);
  });
}

Additional Information

@Mayr-Katarn
Copy link

Fixed this by manually setting camera for the mousePointer on 'dragend' event.

this.world.on('dragend', (): void => { this.input.mousePointer.camera = this.cameras.main })

@photonstorm
Copy link
Collaborator

Thank you for submitting this issue. We have fixed this and the fix has been pushed to the master branch. It will be part of the next release. If you get time to build and test it for yourself we would appreciate that.

@photonstorm
Copy link
Collaborator

This issue has been mentioned on Phaser. There might be relevant details there:

https://phaser.discourse.group/t/uncaught-typeerror-on-dragend-event/9753/8

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants