An Interaction Area is an invisible zone which can receive raycasts in order to inform Selectables (like buttons) about user interaction.

It will render a preview of the area in the scene view.


The Interaction Area has the following options:

  • Raycast Target: If enabled, user interactions can be handled, otherwise not.
  • Clickable Shape: The shape which is used to evaluate if the mouse / finger is inside the area or not:
    • Rectangle: The whole RectTransform is considered as interactible area.
    • Rounded Rectangle: The RectTransform's corners are rounded by the Corner Radius (see below)
    • Ellipse: An ellipse is touching the borders of the RectTransform is considered as interactible area.
  • Corner Radius: Only appears if the Clickable Shpae is "Rounded Rectangle"
    Defines the radius for the corners to exclude. Can resize with resolution changes and set up differently for different screen configurations.



Troubleshooting

  • Why is there a "Canvas Renderer" component which cannot be removed?
    • The UI event system performs raycasts against all components which derive from "Graphic". This is why the "Interaction Area" has to derive from Graphic although it doesn't display anything. All Graphics require a "Canvas Renderer" by definition. However, since nothing is rendered at all, it doesn't really have impact on the performance.
  • I cannot add an "Interaction Area" to my game object. Why?
    • You have probably an Image, Raw Image or Text component on your game object. Since the "Interaction Area" is also considered as "Graphic" (see answer above) it cannot be added. What you can do is putting the interaction area as a child or making the image or text a child of the interaction area.
  • I cannot add an Image, Text (or something else which is rendered) to my game object with an "Interaction Area" on it. Why?
    • Same reason as above. Just parent them.
  • The "Interaction Area" also detects interactions outside the defined area.
    • You probably have other Graphics (Images, Text components) in the hierarchy of the same Selectable as your "Interaction Area" which are raycasted. Make sure they all have "Raycast Target" disabled. Only the "Interaction Area" should have it enabled.