Pixi.js: How to get correct local coordinates from HTML touch event (on mobile)?

Created on 4 Sep 2018 · 5Comments · Source: pixijs/pixi.js

I've looked through a lot of other issues hoping to find the solution to this issue, but haven't found any that quite fit my use case.

I have a very large map with multiple different locations, but not all of these locations are present as sprites at any point in time.

The best way I've found to handle this situation is to render the map's tiles within a ParticleContainer and then create a touch listener on the container outside of the canvas that grabs the touches outside of pixi and then uses some math to figure out where in the context of the map the touch occurred.

This works great on browsers by using renderer.plugins.interaction.mouse.global in combination with the container's toLocal, but this breaks down on mobile as both the x and y coordinates have some garbage value like -9999999.

Is there some recommended way to go from the raw coordinates of the HTML touch event to the local coordinates of the rendering? I have tried things like toLocal'ing the clientX/Y to no avail (although possibly incorrectly).

💾 v4.x (Legacy) 🤔 Question

Source

burz

Most helpful comment

It's because you're trying to access the mouse data, which a touch event doesn't change.

How about accessing either renderer.plugins.interaction.eventData.data.global?

Tho i'd say if you want events globally, then put your event listeners globally. For example
renderer.plugins.interaction.on( 'pointerdown', ( event ) => { console.log( event.data.global ) } );

themoonrat on 4 Sep 2018

❤1 👍1

All 5 comments

It's because you're trying to access the mouse data, which a touch event doesn't change.

How about accessing either renderer.plugins.interaction.eventData.data.global?

Tho i'd say if you want events globally, then put your event listeners globally. For example
renderer.plugins.interaction.on( 'pointerdown', ( event ) => { console.log( event.data.global ) } );

themoonrat on 4 Sep 2018

❤1 👍1

renderer.plugins.interaction.eventData.data.global worked swimmingly for me, I really appreciate the tip -- I had been pulling my hair out for quite a while over this...

Perhaps this method should be recommended for use as opposed to mouse.global? I think this might save some users quite a bit of time.

burz on 4 Sep 2018

No probs! Is it recommended somewhere in the docs that I can update? Or has the advice been on forums via Google search?

themoonrat on 4 Sep 2018

I depended on the solution given for this issue for my own personal project. I could try and look for places in the docs to change if it is desired.