Controls in HTML5 for Mobile and Desktop simultaneously

Hey there,

I am fairly new to Unreal and starting to develop a small Gallery Exhibition of Photos in 3D.
So far I could easily build the 3D assets, place them etc., but I cannot wrap my head around how to make the project controllable from Desktop AND on mobile devices (Android & iOS).

Moving through the space should be possible with Virtual Joysticks (and WASD Keys for Desktop)

My problem is that in:

→ Project Settings → Engine → Input

I have set up the Virtual Joysticks to be Alway visible and have set up some Mappings for moving forward, backwards, up, down etc.

This made it possible to navigate through the map on the Desktop Browser by clicking and dragging with the Mouse on the Virtual Joysticks, but on my Smartphone Browser I cannot click and drag on them.

I have tried to assign “Touch 1” to the Main Input Keys of the DefaultVirtualJoysticks Template, but that did also not work unfortunately.

Did I miss something here? Is it actually possible to use the Virtual Joysticks in a HTML5 packaged Project on a smartphone Browser?

There is nothing on the HTML5 template that hooks the webpage Touch events to your project wasm. As fair as I know, it won’t work without some hacks on the HTML5 page (like convert touch to fake keyboard inputs) or lots of customs changes and updates on your engine source code.