Please add a scene visualization of the raycast padding property on UI Image components. It’s not entirely obvious if values need to be positive or negative to expand the clickable area and then it’s relatively cumbersome to tweak the expanded rect, since I either have to create a temporary RectTransform, play around with that, then copy the values and delete or try to debug this by hovering over my button and looking at the EventSystem preview inspector.
Both could simply be solved by showing a light green scene gizmo if the raycast padding is non-zero.
I don’t think it needs interactive handles. This would either clutter the scene view or require another button in the component inspector, and I think it’s ok to type in the values, but they need to be visually shown before I have to enter play mode.
I also agree but while on the topic… can we make the Vector4, of raycastPadding, order match the order of the Inspector or vice versa. I just tried changing that value dynamically and they were all over the place with bottom being y and top being w. It was all very confusing.
The order on the inspector is:
Left
Right
Top
Bottom
The order of the Vector4 is:
X = Left
Y = Bottom
Z = Right
W = Top
Could the inspector either match this or have the vector 4 match the inspector? It would just make it easier to understand out of the box.
Yes, it is very annoying to work as a blind person when trying to make the clickable area bigger or smaller. I am using now the latest version (2020.2.6) and this feature is still missing …
A better solution altogether might be a custom editor tool like this:
// Author: Chris Yarbrough
namespace Nementic
{
using UnityEditor;
using UnityEditor.EditorTools;
using UnityEngine;
using UnityEngine.UI;
[EditorTool("Raycast Padding Tool", typeof(Graphic))]
public class RaycastPaddingTool : EditorTool
{
[SerializeField]
private Texture2D icon;
private GUIContent iconContent;
public override GUIContent toolbarIcon => iconContent;
private void OnEnable()
{
iconContent = new GUIContent
{
image = icon,
text = "Raycast Padding Tool",
tooltip = "Interactively edits the raycast padding " +
"property of any UI.Graphic component."
};
}
public override void OnToolGUI(EditorWindow window)
{
var graphic = target as Graphic;
// Seems like an issue with Unity, but target can sometimes be a GameObject.
if (graphic == null)
return;
RectTransform rectTransform = (RectTransform)graphic.transform;
using (new Handles.DrawingScope(rectTransform.localToWorldMatrix))
{
Rect rect = rectTransform.rect;
Vector4 padding = graphic.raycastPadding;
rect.xMin += padding[0]; // Left
rect.yMin += padding[1]; // Bottom
rect.xMax -= padding[2]; // Right
rect.yMax -= padding[3]; // Top
Handles.DrawSolidRectangleWithOutline(rect, Color.clear, Color.cyan);
}
}
}
}
This would make it possible to actually use draggable handles in the scene view, but for now I use it to simply draw the padding Gizmo. It would also be possible to extend the builtin Image component editor, but I’ve encountered some issues with the order of execution in which Unity loads assemblies in packages, so in fact, I wasn’t able to override the default editor for Image. Works with other types such as Transform or MeshRenderer, but not for Image. But also not in all cases, might be a little random. Hence the custom Editor Tool seems more robust and cleaner to implement.
Over 10 years of using unity, I find so many small yet crucial features that you actually in need when you are making a game, are so overlooked by Unity. The worse part is that you feel like a lot of the actual problem is not because of the lack of the features, but the communication about it between community and Unity. It has been half an year since Unity responded anything about this…
Thank you for sharing this tool! However, how can I use it?
I’ve dropped your script on the Editor folder and nothing happens when I select a Graphic UI.
The OnEnable function is called but the OnToolGUI is not.
It should work just by dropping it into the editor assembly and show up as a custom tool in the toolbar or when any Graphic is selected. It’s not perfectly polished though and like I said it would make even more sense if if were interactive, so you could actually drag on the handles in the scene when activated, but it should be a starting point.
@phil-Unity@Von_Kiefferbach
All gizmos are toggled on (I’ve checked the list too, nothing turned off), where is it? (LTS 2021.3.14)
P.S. Image component won’t do any difference.
