Search Unity

  1. Welcome to the Unity Forums! Please take the time to read our Code of Conduct to familiarize yourself with the forum rules and how to post constructively.
  2. We have updated the language to the Editor Terms based on feedback from our employees and community. Learn more.
    Dismiss Notice

Feedback UI Image component raycast padding needs a gizmo

Discussion in 'UGUI & TextMesh Pro' started by Xarbrough, Dec 9, 2020.

  1. Xarbrough

    Xarbrough

    Joined:
    Dec 11, 2014
    Posts:
    1,184
    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!
     
  2. phil-Unity

    phil-Unity

    Unity UI Lead Developer Unity Technologies

    Joined:
    Nov 23, 2012
    Posts:
    1,226
    Good idea i'll put it on the list
     
    awsapps, makaka-org, efge and 5 others like this.
  3. wagenheimer

    wagenheimer

    Joined:
    Jun 1, 2018
    Posts:
    319
    +1 for a visual indicator of the collider when using Raycast Padding!
     
  4. patSilva

    patSilva

    Joined:
    Mar 25, 2019
    Posts:
    27
    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.
     
    Ruslank100 and kadir_yuksel like this.
  5. AAK_Lebanon

    AAK_Lebanon

    Joined:
    May 30, 2015
    Posts:
    77
    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 ...
     
  6. guneyozsan

    guneyozsan

    Joined:
    Feb 1, 2012
    Posts:
    99
    Plus one here (2020.2). I get difficult times deciding between negative and positive values.
     
    Coco07 and Meatloaf4 like this.
  7. AllanSamurai

    AllanSamurai

    Joined:
    Jan 29, 2015
    Posts:
    6
    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.png
    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.  
     

    Attached Files:

  8. castor76

    castor76

    Joined:
    Dec 5, 2011
    Posts:
    2,512
    Oh man.. this is still not implemented..
     
    Meatloaf4 likes this.
  9. castor76

    castor76

    Joined:
    Dec 5, 2011
    Posts:
    2,512
    At this rate this will never be implemented.
     
  10. Lurking-Ninja

    Lurking-Ninja

    Joined:
    Jan 20, 2015
    Posts:
    10,053
    Probably not in the UGUI. I can see to popup in the UI Toolkit though.
     
  11. Xarbrough

    Xarbrough

    Joined:
    Dec 11, 2014
    Posts:
    1,184
    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.
     
    nobluff67 likes this.
  12. castor76

    castor76

    Joined:
    Dec 5, 2011
    Posts:
    2,512
    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...
     
  13. HyagoOliveira

    HyagoOliveira

    Joined:
    May 17, 2021
    Posts:
    6
    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.
     
  14. Xarbrough

    Xarbrough

    Joined:
    Dec 11, 2014
    Posts:
    1,184
    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.
     
    nobluff67 and HyagoOliveira like this.
  15. Sailendu

    Sailendu

    Joined:
    Jul 23, 2009
    Posts:
    250
    Is there any update about when this will be available? It is a must have.
     
  16. phil-Unity

    phil-Unity

    Unity UI Lead Developer Unity Technologies

    Joined:
    Nov 23, 2012
    Posts:
    1,226
    Its done, i'm not 100% what version it landed in i *think* 2021.1 has it if not 2021.2 will
     
    Taobyby, Braza, ju57m3 and 7 others like this.
  17. seoyeon222222

    seoyeon222222

    Joined:
    Nov 18, 2020
    Posts:
    158
    How can I use it?
    (2021.3 lts)
     
  18. Von_Kiefferbach

    Von_Kiefferbach

    Joined:
    Apr 20, 2018
    Posts:
    1
    It's work in 2021.2. Toogle all gizmos and you can see it ^^
     

    Attached Files:

  19. anton_unity626

    anton_unity626

    Joined:
    Mar 9, 2022
    Posts:
    3
    @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.

    upload_2022-12-28_14-2-46.png