Unity UI Quick Solutions

Here are a few quick solutions for problems you might run into when working with Unity UI.

This is a simple fix, just change the order in the Hierarchy, elements on the bottom will be on the top/front of the UI, so adjust elements as needed. You may need to use Canvas Groups to adjust alpha if you need things in a certain order.

Did you add an element and then find you can’t click on the elements behind it?

Here are 3 things to check

1. Make sure EventSystem is in the scene as that handles UI events like mouse clicks
2. Make sure you don’t have an element blocking that current element and this UI element is a child of Canvas
3. Check the Raycast settings on the object

Raycast settings can block interactions and are the most common reason things fail.

If you are having issues turning on/off interactions add a Canvas Group to the problematic element, turn on interactions and see if it’s working. If you are already using a Canvas Group, check your Interactable settings.

Say you have a button object and switched out the background to a new image. You might find it doesn’t highlight on hover.

It’s a pretty easy fix, simply dim the image by changing the Normal Color Setting in the button component. It will default to being full white, make it slightly darker. Test it and you should see a highlight working now.

Post-processing doesn’t work with screen space overlay, nor do particle effects… The solution for that is to work in Screen Space – Camera, it’s just about the same thing, you get the overlay but now you just need to position things in front of the camera to get them working correctly.

The simple solution when working in VR or display like a computer screen in world spaces is to set the canvas to World Space when dealing with canvas elements in the world. You will want to scale down the canvas to fit that space or else you end up with very blurry text, working with 0.00004 is not unreasonable.