Increase touch area of Button

Unity Engine
1

How do I increase the touch area of a button without changing the size of the image?
thank you.

2

Put the button as a parent of the image and make it larger then the element you want to be the image.

1 Like
3

Hi. sorry to kind of necro this thread but I tried your solution but it did not work as expected. By parenting the image with a Button I cannot click on the button entire size but only on the Image.

Could this be a bug of some sort?

I’m using beta v18

4

The solution I’ve found for this is to add an image component to the parent button object and set it’s colour to fully transparent. Hopefully the engine spots this and does not bother adding the polygons.

This is necessary as the hit test code only acts on things that have a Canvas Renderer. I’m having to a similar with a full screen fully transparent object to grab dragging events behind objects in a list.

It does seem like a bit of an unnecessary hack, hopefully unity can add a component that adds the bounds of the rect transform as a clickable area without a graphic.

4 Likes
5

Works fine for me in b17.

6

I’ve written a helper script for this.

4 Likes
7

Sorry about necroing this thread but I ran into this issue today. Normally I would just move the button to a parent and scale that while keeping the visuals the same.
I couldn’t do that this time so I wanted a fix for this.
This script has only been tested with ui image’s that use the “simple” image type and will likely not work on any other.

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class UITouchEnlarger : MonoBehaviour, IMeshModifier
{
    [Range(0.001f,4)]
    public float meshScale = 1;
    // Start is called before the first frame update
    void Start()
    {
        (transform as RectTransform).sizeDelta = (transform as RectTransform).sizeDelta * meshScale;
    }

    // Update is called once per frame
    void Update()
    {
       
    }

    public void ModifyMesh(Mesh mesh) {
        if(Application.isPlaying){
            Vector3[] verts = mesh.vertices;
            for(int index = 0; index < verts.Length; index++){
                verts[index] /= meshScale;
            }
            mesh.vertices = verts;
        }
    }

    public void ModifyMesh(VertexHelper verts) {
       
        if(Application.isPlaying){
            Vector2 size = ((transform as RectTransform).sizeDelta / 2)/meshScale;
            verts.Clear();

            int startID = verts.currentVertCount;
            verts.AddVert(new Vector3(-size.x, -size.y), Color.white, new Vector2(0f, 0f));
            verts.AddVert(new Vector3(-size.x, size.y), Color.white, new Vector2(0f, 1f));
            verts.AddVert(new Vector3(size.x, size.y), Color.white, new Vector2(1f, 1f));
            verts.AddVert(new Vector3(size.x, -size.y), Color.white, new Vector2(1f, 0f));

            verts.AddTriangle(startID+0, startID+1, startID+2);
            verts.AddTriangle(startID+2, startID+3, startID+0);
        }
    }
}
8

Try raycast padding to grow/shrink clickable area. Size the graphic as appropriate then grow/shrink the padding (you might need negative padding to get what you want, it’s confusing).

9617879--1365248--padding.png

2 Likes
9

Thank you. :slight_smile:
I have been working with unity for years and never noticed it:hushed:
I’ll look over this (new) feature during the weekend.

10

This worked for me to increase the button size area without using the graphic. You want to use negative numbers for the padding.