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…

min read

highlightEffect

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

0) Elements hiding elements

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.

1) Unclickable Areas

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.

Raycast Target checked on will block interactions on images
Raycast Target checked on will block interactions on images

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.

Canvas Group components control both alpha and interactions
Canvas Group components control both alpha and interactions

2) No highlight on Image Buttons

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

No highlight when hovering

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.

Example image of adjusting color
Here you can adjust the color easily

3) Screen Space Overlay No Particle Effects or Post-processing

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.

4) Text blurry in the world

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.

Leave a Reply

Your email address will not be published. Required fields are marked *

Ashley Hooper