The joypad template from the example won't work on mobile

I have taken the joypad controls example from this link Touchscreen Joypad Controls | Learn PlayCanvas

like this:

I then implemented two joypads, one for the character’s movement and one for the camera. It works as intended on PC, but when I try a preview on my phone and my tablet, the joypad doesn’t even move. I didn’t specify any platform specific code on the JS file and I am certain the touch-joypad template has touch controls along with mouse controls.

On mobile (Android, Google Chrome), the joypad won’t move and the character/camera stays the same. What should I do?

Does the original joypad demo work on your device? If so, it means that something in your project is affecting touch in some way.

Can you share your project please?

It does.

https://playcanvas.com/project/1025970/

This is the project. It is private but I think you can see it. If you need us to make it public, just tell me.

I didn’t alter the template and I know it has Touch controls along with Mouse controls. I couldn’t fix it.

Please can you make it public?

Done.

Looks the script in Scripts/UI/ui.js is creating a full screen HTML DIV element that is blocking touch events from the WebGL canvas so no touch events are coming through at all to PlayCanvas

https://playcanvas.com/editor/code/1025970?tabs=117211258

If you remove usage of this script then touch events will be firing again the the joysticks work fine.

1 Like

Thank you!