UI Visualization for Player Interactions

Showing UI elements to the Player for interactable items is a valuable tool for any game developer. Let’s work through doing a quick setup using Unity HDRP

Game Objects

This box is an item that can be interacted with, so it uses a Pickup script and a Sphere Collider that is large enough to trigger before touching the box itself.

The box pickup has a world space UI Canvas attached as a child. This will be off by default, and then turn on when the player enters the collider.

The world space Canvas can have the Main Camera dragged into the Event Camera assignment.

Scripting

For prototyping purposes here, let’s check some input in an OnTriggerStay method. The Pickup class has references to a particle effect object, as well as the UI display object. While the Player is within the Sphere Collider, the UI display will turn on. If the Player presses the E key while in the collider, you can interact with the box. In this case I just play a particle effect, but this is where you could give the player an item or stat boost for example.

The OnTriggerExit method will hide the UI display once the Player leaves the collider.

using UnityEngine;
using UnityEngine.InputSystem;

public class Pickup : MonoBehaviour
{
    [SerializeField] private GameObject _particleFX;
    [SerializeField] private GameObject _uiDisplay;

    private void OnTriggerStay(Collider other)
    {
        if (other.CompareTag("Player"))
        {
            if (!_uiDisplay.activeInHierarchy)
                _uiDisplay.SetActive(true);

            if (Keyboard.current.eKey.wasPressedThisFrame)
            {
                if (_particleFX != null)
                    Instantiate(_particleFX, transform.position, Quaternion.identity);
            }
        }
    }

    private void OnTriggerExit(Collider other)
    {
        if (other.CompareTag("Player"))
        {  
            if (_uiDisplay.activeInHierarchy)
                _uiDisplay.SetActive(false);
        }
    }
}

The UI Display object has a script running in Late Update to always face the main camera.

using UnityEngine;

public class LookAtCamera : MonoBehaviour
{
    private Transform _cameraTransform;

    private void Start()
    {
        if (Camera.main != null)
            _cameraTransform = Camera.main.transform;
    }
    private void LateUpdate()
    {
        if (_cameraTransform != null)
            transform.LookAt(_cameraTransform);
    }
}

Camera Stacking

The Main Camera has a secondary camera attached as a child that will be used for showing the UI elements. Making this the top layer ensures the UI elements do not hide behind the player in a 3rd person camera scenario.

URP

I am working in an HDRP project, so here are some screen shots from the Unity documentation for URP camera stacking support.

The Main Camera should have a Render Type option where you can select Base or Overlay. Here the main camera is set to Base.

The Base camera has a Stack option, where you can add any Overlay cameras after they have been created.

The UI Camera is set to Overlay, and it’s Culling Mask can be set to UI only.

Once you add the overlay camera to the Stack on the Base camera, UI elements should not hide behind the player.

HDRP

Unity HDRP doesn’t support camera stacking in the same way as URP. It’s good to remember that rendering more than one camera in HDRP is costly, but if you choose to do so, the Graphics Compositor appears to be the way to go. You can load it up by navigating to Window>Render Pipeline>Graphics Compositor. After being enabled, a MainCompositorCamera will be added to the scene.

The Graphics Compositor tab shows the Output Camera as the Main Compositor Camera, with other cameras being added under the Render Schedule as Layers. The cameras will render according to the layer order in the Render Schedule, so I put the UI Camera as the top layer to not hide the UI elements behind the Player.

The Base layer UI camera has Clear Color set to Sky and Anti-aliasing enabled.

The second layer Main Camera just has Anti-aliasing as the Base layer handles the sky.

Now the UI element shows and hides when the player gets close or walks away, remains visible behind the player, and plays a particle effect when the pickup is interacted with.

Please join me for my next article where I cover using Interfaces for interactable objects. Thanks for reading!