Hey,
Probably many of you wanted to make mobile web controls for WebGL builds but encountered difficulties.
Here are 2 walls I've hit and overcome with Unity builds.
First there is a bug at least in the WebGL version of 2021.3.0f1 Unity that makes touch Stationary states non existent.
So it only reports Began until you move or lift the finger, then Moved.
So to overcome this just make a counter "per finger" (actually per zone, see in next section) that goes up on Moved or Began, resets to -1 when Ended or Canceled and before touch checks, it checks for -1 and sets it to 0 so you have a frame to check for -1 (Touch Up).
Then you just check -1 for Touch Up, 0 for No Touch, 1 for First Touch and >0 for Touch Down.
All sounds good until you implement it based on finger ids.
Screen tracking doesn't work so well as we feel it when using other apps.
If you hold one finger down and while pressing on other side of the screen with another finger, lift the first finger you'll see that you get reported the same finger id but on another position.
This is not good for fast tapping games like Platformers.
In order to overcome this limitation you can introduce screen zones (basically bounds that checks if touches are inside).
Because we assume one finger should be one zone at one moment, we can use zone ids for controls instead of finger ids.
So to put it together all we do is:
Loop through our touchCounts then inside loop througn our zones. If a touch position is inside our zone we apply the touch counter fix from above (depending on touch state we increment or reset the zone counter)
Don't forget to treat no finger in zone as a TouchUp if it was down.
Good luck and don't forget to check our game https://ldjam.com/events/ludum-dare/51/pandoras-box
See the itch.io link in description for Mobile web controls described here.