bberak / react-game-engine

A lightweight Game Engine for the web (React) 🕹⚡🎮
MIT License
413 stars 24 forks source link

input's onTouchStart and onTouchMove doesn't contain position values in mobile browser #12

Closed JiboStore closed 1 year ago

JiboStore commented 4 years ago

Hi,

Thanks for the great work!

I tried to support mobile browsers but the onMouse* functions aren't particularly cooperative especially the onMouseMove thus I am looking for alternatives and saw the onTouch* functions.

However, the onTouch* functions doesn't contains touch positions information. It is quite difficult to debug on mobile browsers but I managed to dump the entire onTouch* structures from inside the system and there is no traces of position information at all

const mysystem = (entities, {input}) => { const onTouchStart = input.find(x => x.name === 'onTouchStart') || {}; const onTouchMove = input.find(x => x.name === 'onTouchMove') || {}; console.log(onTouchStart) // no position info console.log(onTouchMove) // also blank }

Is there anything in particular I need to do to have the touch position information? I tested an empty reactjs project with react-touch-position and I can get touch-start and touch-move so I think mobile browsers support that

bberak commented 4 years ago

Hi @JiboStore,

Sorry fort the late reply.. What mobile browsers in particular are you have this issue with?

Can you try the following:

const mysystem = (entities, {input}) => { const onTouchStart = input.find(x => x.name === 'onTouchStart') || {}; const onTouchMove = input.find(x => x.name === 'onTouchMove') || {}; console.log(onTouchStart.payload.targetTouches[0].pageX, onTouchStart.payload.targetTouches[0].pageY) // no position info console.log(onTouchMove) // also blank }

Let me know how it goes :)