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

Help & Support
,
#1

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?

image
image2445×586 75.2 KB

#2

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?

#3

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.

#4

Please can you make it public?

#5

Done.

#6

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
#7

Thank you!