UI design not ideal for mobile/touch

Unity Engine
1

Using the UI for touch controls it seems not a lot of consideration has been given for the extra [large] hit areas required on mobile.
The drag threshold also is not dpi-based so requires code to set correctly.

Controls need additional collision rects/areas around to make them easier to touch, something not included as an option so it must be done by adding white space around images (wasting texture space), adding extra transparent images for raycast tests (more overdraw) or using a custom collider.
An extended image class with border size for mobile might be the answer

Circle Collisions are not covered ‘out of the box’ either so I had to add for circular buttons - typical on mobile

It would be great if these things were made easier in future UI updates

2

regarding drag threshold: good point! That is something I should integrate in my Better UI asset. Thanks for pointing out!

regarding bigger collisions:

the extra space inside the sprites would actually cause overdraw. Adding extra Image Component which has its colors alpha set to zero does not. As far as I know unity simply skips fully transparent images in the render pipeline. So this is the preferred way to make a bigger hit area.

3

This is what I do, but don’t be so sure it skips the image in the render pipeline, it still adds it for whatever reason - check the overdraw mode in the scene view.
Thus people doing crazy things like using an empty Text component instead as then there is actually no geometry added!

4

hmm… I actually never checked myself but have read it somewhere I thought…
Maybe it is possible to create a custom class which inherits from Graphic and doesn’t render anything but catches raycasts…

5

This is one way to do it - Graphic contains a bunch of mesh stuff which you just keep clear, but if that is the base class for raycasting it has too much in it!

public class UIRaycastCollider : Graphic
{
    protected override void OnPopulateMesh( VertexHelper vh )
    {
        vh.Clear();
    }
}
6

yeah, but the problem is that the UI is using the GraphicRaycaster class which does raycasts only against Graphics objects. So, this is the fastest kind of clean approach.
If you want to make it work without graphics, you can maybe derive from BaseRaycaster and handle your own types… But I am not sure how to introduce this Raycaster then to the event system.

Edit: Just checked the code. It doesn’t have to be registered by hand. the BaseRaycaster registers it automatically on creation. And the Event system just uses all registered raycasters. So you could create your own Raycaster and add it to the Canvas Game Object.
If you do, I would take the GraphicRaycaster as a starting point and modify it.