# Recognising when a user is clicking below a particular sprite

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?

• 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. – 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.

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

this.children.marker1.position.y

this.children.marker1.worldTransform.ty