I have a game, built using pixi.js, where I want to run some code every time the user presses below a certain sprite. I am handling the press event using hammer.js. The problem is that the y attribute of the sprite and the y attribute of the user’s touch event don’t match what I can see on my screen.

As, an example, consider the code below:

if (touchPointer.clientY > this.children.marker1.position.y) {
  console.log("******* Clicked Below the Line ********: ");}
  console.log("******* Clicked Above the Line ********: ");}

The problem I have is that, when I click slightly above the sprite, the first section of code will run (which prints “Clicked Below the Sprit”), even though on the screen, I can clearly see the pointer is above the sprite. I am guessing, what’s going on is that the y positions for the pointer and the sprite are being calculated differently, but I don’t know how to go about ensuring they’re calculated consistently, so I can properly compare sprites against the pointer. Any suggestions?

  • 1
    \$\begingroup\$ Could you provide a sample of your setup? The problem is going to be related to where your canvas exists in the document as well as any camera movement you've done. \$\endgroup\$ – Mike Cluck Dec 8 '17 at 17:41

The coordinates of the mouse/touch are in screen coordinates. To translate to world coordinates, you need to convert to world coordinates by adjusting for the current transform and rotation of your camera.

  • \$\begingroup\$ I don't think those objects and functions are available in PIXI \$\endgroup\$ – user7524411 Dec 1 '17 at 12:46
  • \$\begingroup\$ My apologies. I thought I was filtering by unity tags. Updated. \$\endgroup\$ – Stephan Dec 1 '17 at 13:02

Instead of using


I used


and then it worked properly.


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.