DocsArrow - Elements Webflow Library - BRIX Templates
Troubleshooting UI: Objects appear non-interactable. See: Raycast Targets

Troubleshooting UI: Objects appear non-interactable. See: Raycast Targets

Knowing about raycast targets will save you some headache when developing custom prefabs. A good understanding of these concepts can indeed save a lot of debugging time and make the development process smoother. A raycast is like a laser beam shooting out from your mouse click or finger, whatever that laser lands on you can interact with. But imagine there is an invisible layer over that button, instead of hitting the button, the laser hits the invisible layer, and so the button is not triggered. Below is an analogy for Unity Raycast Targets – playing darts. In a game of darts, you throw darts at a dartboard. The dartboard here represents a 2D game in Unity, and the different scoring sections on the board represent different objects (or UI elements) in the game.

1. Raycasting: Throwing a dart at the dartboard is similar to raycasting in Unity. Just like the dart follows a straight line towards the board, raycasting in Unity is about drawing an imaginary line (ray) from a point in a certain direction to check what it hits first.

2. Raycast Target: Now, imagine that some sections of the dartboard are covered with a transparent shield. You can see these sections, but when you throw a dart at them, it can’t reach the board because of the shield. This shield can be thought of as the “Raycast Target” set to false in Unity. It makes the object (or section of the dartboard) visible but not interactable – the raycast (dart) can’t hit it.

3. Raycast Target true/false: If there’s no shield on the dartboard section (Raycast Target = true), then when you throw a dart (perform a raycast), it will hit and interact with that section. But if there is a shield (Raycast Target = false), the dart will not be able to interact with that section – it’s as if the dart “misses” that section and checks for the next thing it can hit.

4. Hierarchy & Raycasting: Let’s add another layer to this analogy. Say there’s a small, secondary dartboard (child object) hanging in front of the larger dartboard (parent object). If you throw a dart aimed at the smaller board (and it doesn’t have a shield), you’ll hit it – not the larger board behind it. That’s because, just like raycasting, the dart will hit the first object it encounters. To sum up, in Unity 2D, setting the “Raycast Target” option is like deciding whether to put a shield on sections of your dartboard – you’re setting whether or not an object can be “hit” by user interactions like clicks or touches. In Unity’s UI system, an Image component with a transparent texture can still block raycasts if its raycastTarget property is set to true. The raycast doesn’t take the alpha (transparency) value of the image into account. It only cares whether or not the Image component is set as a raycast target and the image’s size and position. So if you have a transparent image in front of a button, and both of them have raycastTarget set to true, the raycast will hit the transparent image first and won’t reach the button, even if the image is fully transparent and the button is visible to the player. To make the button interactable, you would need to set the raycastTarget property of the transparent Image to false. This way, the raycast will “pass through” the transparent image and can hit the button behind it. This is an important point to remember when designing UIs in Unity. Even a fully transparent object can block interactions if it’s set as a raycast target.