Friday’s DevTip #1: Information Overlay

Hey there!

We decided to give it a try and share a helpful tip from our Unity developer’s practice every Friday and this is the first try!

Today we’ll show you how to make this nice-looking information overlay for your game:

Coding

First tip: the overlay is just the UI element with transparency placed above the window’s UI:

Second tip: you just make it active when player’s mouse is above the “Info” button. Here is the script:

public class InformationUI : MonoBehaviour, IPointerEnterHandler, IPointerExitHandler
    {
        public Transform[] thingsToShow;

        private bool m_isShown;

        public void OnPointerEnter(PointerEventData eventData)
        {
            if (!m_isShown)
                Toggle();
        }

        private void Toggle()
        {
            m_isShown = !m_isShown;

            if (thingsToShow.IsNullOrEmpty())
            {
                Debug.LogWarning($"There are no things to show for information icon {gameObject}");
                return;
            }
            
            foreach (var target in thingsToShow)
                target.gameObject.SetActive(m_isShown);
        }

        public void OnPointerExit(PointerEventData eventData)
        {
            if (m_isShown)
                Toggle();
        }
    }

What you have to do is just add the “Help” object into the array:

public Transform[] thingsToShow;

That’s it! Just as easy as it can be.

Cheers! :)