Feedback UI Image component raycast padding needs a gizmo

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.

Thank you for considering!

 

Good idea i'll put it on the list

 

+1 for a visual indicator of the collider when using Raycast Padding!

 

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 ...

 

Plus one here (2020.2). I get difficult times deciding between negative and positive values.

 

I also needed this resource for a while, so I decided to make a MacGyverism.
it is only a partial and visual remedy in response to the topic:
https://forum.unity.com/threads/ui-image-component-raycast-padding-needs-a-gizmo.1019260/
how to config: https://imgur.com/a/NVpHgzu
I hope it helps.
@AllanSamurai

RaycastPaddingHelper.cs:

Code (CSharp):

1. using UnityEngine;
2. using UnityEngine.EventSystems;
3. using UnityEngine.UI;
4. #if UNITY_EDITOR
5. using UnityEditor;
6. #endif
7. /// <summary>
8. /// I also needed this resource for a while, so I decided to make a MacGyverism.
9. /// it is only a partial and visual remedy in response to the topic:
10. /// https://forum.unity.com/threads/ui-image-component-raycast-padding-needs-a-gizmo.1019260/
11. /// how to config: https://imgur.com/a/NVpHgzu
12. /// I hope it helps.
13. /// @AllanSamurai
14. /// </summary>
15. [RequireComponent(typeof(Image), typeof(RectTransform))]
16. public class RaycastPaddingHelper : UIBehaviour
17. {
18. #if UNITY_EDITOR
19.  
20.     #region https://github.com/Unity-Technologies/UnityCsReference/blob/61f92bd79ae862c4465d35270f9d1d57befd1761/Editor/Mono/Inspector/RectTransformEditor.cs#L24-L26
21.     private static Vector2 kShadowOffset = new Vector2(1, -1);
22.     private static Color kShadowColor = new Color(0, 0, 0, 0.5f);
23.     private const float kDottedLineSize = 5f;
24.     #endregion
25.  
26.     void OnDrawGizmos()
27.     {
28.         Image image = GetComponent<Image>();
29.         RectTransform gui = GetComponent<RectTransform>();
30.  
31.         #region https://github.com/Unity-Technologies/UnityCsReference/blob/61f92bd79ae862c4465d35270f9d1d57befd1761/Editor/Mono/Inspector/RectTransformEditor.cs#L646-L660
32.         Rect rectInOwnSpace = gui.rect;
33.         // Rect rectInUserSpace = rectInOwnSpace;
34.         Rect rectInParentSpace = rectInOwnSpace;
35.         Transform ownSpace = gui.transform;
36.         // Transform userSpace = ownSpace;
37.         Transform parentSpace = ownSpace;
38.         RectTransform guiParent = null;
39.         if (ownSpace.parent != null)
40.         {
41.             parentSpace = ownSpace.parent;
42.             rectInParentSpace.x += ownSpace.localPosition.x;
43.             rectInParentSpace.y += ownSpace.localPosition.y;
44.  
45.             guiParent = parentSpace.GetComponent<RectTransform>();
46.         }
47.         #endregion
48.  
49.         // patSilva's post: https://forum.unity.com/threads/ui-image-component-raycast-padding-needs-a-gizmo.1019260/#post-6828020
50.         // The image.raycastPadding order of the Vector4 is:
51.         // X = Left
52.         // Y = Bottom
53.         // Z = Right
54.         // W = Top
55.  
56.         Rect paddingRect = new Rect(rectInParentSpace);
57.         paddingRect.xMin += image.raycastPadding.x;
58.         paddingRect.xMax -= image.raycastPadding.z;
59.         paddingRect.yMin += image.raycastPadding.y;
60.         paddingRect.yMax -= image.raycastPadding.w;
61.  
62.         // uncomment below line to show only when rect tool is active
63.         // if (Tools.current == Tool.Rect)
64.         {
65.             //change the color of the handles as you wish
66.             Handles.color = Color.green;
67.             DrawRect(paddingRect, parentSpace, true);
68.         }
69.     }
70.  
71.     #region https://github.com/Unity-Technologies/UnityCsReference/blob/61f92bd79ae862c4465d35270f9d1d57befd1761/Editor/Mono/Inspector/RectTransformEditor.cs#L618-L638
72.     void DrawRect(Rect rect, Transform space, bool dotted)
73.     {
74.         Vector3 p0 = space.TransformPoint(new Vector2(rect.x, rect.y));
75.         Vector3 p1 = space.TransformPoint(new Vector2(rect.x, rect.yMax));
76.         Vector3 p2 = space.TransformPoint(new Vector2(rect.xMax, rect.yMax));
77.         Vector3 p3 = space.TransformPoint(new Vector2(rect.xMax, rect.y));
78.         if (!dotted)
79.         {
80.             Handles.DrawLine(p0, p1);
81.             Handles.DrawLine(p1, p2);
82.             Handles.DrawLine(p2, p3);
83.             Handles.DrawLine(p3, p0);
84.         }
85.         else
86.         {
87.             DrawDottedLineWithShadow(kShadowColor, kShadowOffset, p0, p1, kDottedLineSize);
88.             DrawDottedLineWithShadow(kShadowColor, kShadowOffset, p1, p2, kDottedLineSize);
89.             DrawDottedLineWithShadow(kShadowColor, kShadowOffset, p2, p3, kDottedLineSize);
90.             DrawDottedLineWithShadow(kShadowColor, kShadowOffset, p3, p0, kDottedLineSize);
91.         }
92.     }
93.     #endregion
94.  
95.     #region https://github.com/Unity-Technologies/UnityCsReference/blob/61f92bd79ae862c4465d35270f9d1d57befd1761/Editor/Mono/Inspector/RectHandles.cs#L278-L296
96.     public static void DrawDottedLineWithShadow(Color shadowColor, Vector2 screenOffset, Vector3 p1, Vector3 p2, float screenSpaceSize)
97.     {
98.         Camera cam = Camera.current;
99.         if (!cam || Event.current.type != EventType.Repaint)
100.             return;
101.  
102.         Color oldColor = Handles.color;
103.  
104.         // shadow
105.         shadowColor.a = shadowColor.a * oldColor.a;
106.         Handles.color = shadowColor;
107.         Handles.DrawDottedLine(
108.             cam.ScreenToWorldPoint(cam.WorldToScreenPoint(p1) + (Vector3)screenOffset),
109.             cam.ScreenToWorldPoint(cam.WorldToScreenPoint(p2) + (Vector3)screenOffset), screenSpaceSize);
110.  
111.         // line itself
112.         Handles.color = oldColor;
113.         Handles.DrawDottedLine(p1, p2, screenSpaceSize);
114.     }
115.     #endregion
116.  
117. #endif
118. }
119.  

 

Oh man.. this is still not implemented..

 

At this rate this will never be implemented.

 

Probably not in the UGUI. I can see to popup in the UI Toolkit though.

 

A better solution altogether might be a custom editor tool like this:

Code (CSharp):

1. // Author: Chris Yarbrough
2.  
3. namespace Nementic
4. {
5.     using UnityEditor;
6.     using UnityEditor.EditorTools;
7.     using UnityEngine;
8.     using UnityEngine.UI;
9.  
10.     [EditorTool("Raycast Padding Tool", typeof(Graphic))]
11.     public class RaycastPaddingTool : EditorTool
12.     {
13.         [SerializeField]
14.         private Texture2D icon;
15.  
16.         private GUIContent iconContent;
17.  
18.         public override GUIContent toolbarIcon => iconContent;
19.  
20.         private void OnEnable()
21.         {
22.             iconContent = new GUIContent
23.             {
24.                 image = icon,
25.                 text = "Raycast Padding Tool",
26.                 tooltip = "Interactively edits the raycast padding " +
27.                           "property of any UI.Graphic component."
28.             };
29.         }
30.  
31.         public override void OnToolGUI(EditorWindow window)
32.         {
33.             var graphic = target as Graphic;
34.  
35.             // Seems like an issue with Unity, but target can sometimes be a GameObject.
36.             if (graphic == null)
37.                 return;
38.            
39.             RectTransform rectTransform = (RectTransform)graphic.transform;
40.             using (new Handles.DrawingScope(rectTransform.localToWorldMatrix))
41.             {
42.                 Rect rect = rectTransform.rect;
43.                 Vector4 padding = graphic.raycastPadding;
44.                 rect.xMin += padding[0]; // Left
45.                 rect.yMin += padding[1]; // Bottom
46.                 rect.xMax -= padding[2]; // Right
47.                 rect.yMax -= padding[3]; // Top
48.  
49.                 Handles.DrawSolidRectangleWithOutline(rect, Color.clear, Color.cyan);
50.             }
51.         }
52.     }
53. }
54.  

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.

 

https://docs.unity3d.com/Manual/UsingCustomEditorTools.html

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.

 

Is there any update about when this will be available? It is a must have.

 

Its done, i'm not 100% what version it landed in i *think* 2021.1 has it if not 2021.2 will

 

How can I use it?
(2021.3 lts)

 

It's work in 2021.2. Toogle all gizmos and you can see it ^^

 

@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.

 

It's not there either on 2022.3.8f1 LTS... It would really be helpful!

 

For anyone struggling to see the raycast box (green) - be sure to enable gizmos AND select the actual gameobject that has the raycast padding.