Recognising when a user is clicking below a particular sprite

Question

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 ********: ");}
else{
  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?

Answer 1

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.

Answer 2

Instead of using

this.children.marker1.position.y

I used

this.children.marker1.worldTransform.ty

and then it worked properly.