Recognising when a user is clicking below a particular sprite

[davro12345]

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. After doing some research, I think the problem, more specifically, might be that I need to convert "screen coordinates" to "world cordinates". I'm not really familiar with the difference between "screen coordinates" and "world cordinates", but presumably the y position of the pointer is being calculated using "screen cordinates", and I need to convert these coordinates into "world cordinates", but I don't have any idea how to do this. Any suggestions?

[ivan.popelyshev]

You have to look inside transform `element.worldTransform.ty` is global (screen) position. Also methods like `toLocal` and `toGlobal` can help you. In pixi there's no camera, so global coords are actually screen coords. Map coords are relative to certain element (map).