How To Make a Clickable Text in Unity

Is your clickable text in Unity not working or are you learning how to make one? In this article, we will show you how to make a clickable text in Unity.

In short, we can make a clickable text in Unity by creating a TextMesh Pro Text Component and add <link> tags to the portions of text we want clickable. Next, we check if a link was clicked using the TMP_TextUtilities.FindIntersectingLink() method.

How to make a clickable text in Unity

Example of Clickable Text in Unity

In order to make a clickable text in Unity, we can use the code listed below. This code creates a new component called TMPTextObserver that can be added to any game object with a TextMeshPro Text Component. While we will explain the code in a moment, we urge you to read through the code yourself first.

TMPTextObserver.cs
  1. using UnityEngine;
  2. using TMPro;
  3.  
  4. public class TMPTextObserver : MonoBehaviour
  5. {
  6. private TMP_Text m_TextComponent;
  7. private const int INVALID_LINK_INDEX = -1;
  8.  
  9. private void Awake()
  10. {
  11. m_TextComponent = GetComponent<TMP_Text>();
  12. }
  13.  
  14. private void LateUpdate()
  15. {
  16. int selectedLink = INVALID_LINK_INDEX;
  17. if(CheckForInteraction(out selectedLink))
  18. {
  19. Debug.Log("Link Clicked!");
  20. }
  21. }
  22.  
  23. private bool CheckForInteraction(out int linkIndex)
  24. {
  25. linkIndex = INVALID_LINK_INDEX;
  26. Vector2 inputPosition = Vector2.zero;
  27.  
  28. if(!CheckForInput(out inputPosition))
  29. {
  30. return false;
  31. }
  32.  
  33. linkIndex = TMP_TextUtilities.FindIntersectingLink(m_TextComponent, inputPosition, null);
  34. return (linkIndex > INVALID_LINK_INDEX);
  35. }
  36.  
  37. private bool CheckForInput(out Vector2 inputPosition)
  38. {
  39. inputPosition = Vector2.zero;
  40.  
  41. if(!Input.GetMouseButtonUp(0)) return false;
  42. inputPosition = Input.mousePosition;
  43.  
  44. return TMP_TextUtilities.IsIntersectingRectTransform(m_TextComponent.rectTransform, inputPosition, null);
  45. }
  46. }
  47.  

Specifying Clickable Text in TextMesh Pro

Before you write any code in Unity, you have to tell TextMesh Pro what portion of the text is clickable. You can do this simply by adding <link> tags surrounding the portions of text that you want clickable.

Please note that you are not limited to creating clickable text in the Editor alone. You can add tags through scripting as well:

Clickable Text in TextMesh Pro
Adding <link> tags to the text
Example of how to add links through scripting.
  1. private void Awake()
  2. {
  3. m_TextComponent = GetComponent<TMP_Text>();
  4. m_TextComponent.text = "Click <link>HERE</link> to Continue";
  5. }

Check if a Text is Clicked in Unity

To see if a text is clicked, we create a new component called TMPTextObserver that checks if any links have been clicked. The component does this by using a utility method provided by TextMesh Pro called TMP_TextUtilities.FindIntersectingLink(text, position, camera) that takes in a couple of parameters:

ParameterTypeDescription
textTMP_TextThe text component you want to check for clicks
positionUnityEngine.Vector2The position in Screen Space where the click happened.
Usually this is the mouse position.
cameraUnityEngine.CameraThe camera that renders the canvas containing the TMP_Text component. You can use null for this parameter if your Canvas is rendered using the default Main Camera.
Parameters of the TMP_TextUtilities.FindIntersectingLink method.

Add a Clickable Text Event

One way to improve our component is by adding an event that triggers whenever the text is clicked. In order to implement this, we add a new Unity Event that will be invoked once we detected a valid click.

Also, make sure to add the SerializeField attribute to make the new event show up in the inspector.

Add a Clickable Text Event
TMP Text Observer Components with Events
TMPTextObserver.cs
using UnityEngine.Events;
 
public class TMPTextObserver : MonoBehaviour
{
    [SerializeField]
    private UnityEvent<int> m_ClickedEvent;
    private TMP_Text m_TextComponent;
    private const int INVALID_LINK_INDEX = -1;
TMPTextObserver.cs
if(CheckForInteraction(out selectedLink))
{
    Debug.Log("Link Clicked!");
    m_ClickedEvent?.Invoke(selectedLink);
}

Make a Clickable URL or Hyperlink in Unity

Making a clickable URL or Hyperlink in Unity can be a bit more complicated. Especially if you’re trying to add multiple URLs to the same text component.

To make a clickable URL or hyperlink in Unity, we recommend you to read our article. In this article, we show you how to make multiple clickable URLs (or Hyperlinks) in a single TextMeshPro Component.

How to make a clickable URL in Unity using TextMesh Pro
Click To Learn More

Format Clickable Text in Unity

If you want to change how the color or style of the text looks, you have to use rich text tags provided by TextMeshPro. You can use mix multiple tags to create more artistic results. The most important tags are:

TagDescriptionExample
colorChanges the color of the text between the tags<color=#ff0000>Red</color> Text
sizeChanges the size of the color between the tags<size=20>BIG</size> Text
boldChanges the style of the text between the tags to bold<b>Bold</b Text
italicChanges the style of the text between the tags to italic<i>Italic</i Text
underlineChanges the style of the text between the tags to underline<u>Underline</u Text
SuperscriptChanges the style of the text between the tags to superscript<sup>Super</sup> Text
SubscriptChanges the style of the text between the tags to subscript<sub>Sub</sub> Text
Most Important TextMeshPro Tags

Adding an Extension Method to TextMesh Pro

Alternatively, we can pack the clickable text functionality we created into an extension method. This way, we can use make it seem as if it’s natively part of the TextMesh Pro classes. To do this, we create a new script called TextMeshProExtensions and add the following code:

TextMeshProExtensions.cs
  1. using UnityEngine;
  2. using TMPro;
  3.  
  4. public static class TextMeshProExtensions
  5. {
  6. private static int INVALID_LINK_INDEX = -1;
  7.  
  8. public static bool CheckIntersection(this TMP_Text component, Vector3 position, out int linkIndex)
  9. {
  10. linkIndex = INVALID_LINK_INDEX;
  11.  
  12. if(!TMP_TextUtilities.IsIntersectingRectTransform(component.rectTransform, position, null)) return false;
  13.  
  14. linkIndex = TMP_TextUtilities.FindIntersectingLink(component, position, null);
  15. return (linkIndex > INVALID_LINK_INDEX);
  16. }
  17.  
  18. public static bool CheckIntersection(this TMP_Text component, Vector3 position)
  19. {
  20. int linkIndex = INVALID_LINK_INDEX;
  21. return CheckIntersection(component, position, out linkIndex);
  22. }
  23. }

The code listed above creates a new method extension specifically for the TMP_Text component If you want to learn more about method extensions you can read our article. Finally, to use the method extension we could use the method extension as demonstrated below:

TMPTextObserver.cs
private void LateUpdate()
{
    if(CheckForInteraction())
    {
        Debug.Log("Link Clicked!");
    }
}
 
private bool CheckForInteraction()
{
    if(Input.GetMouseButtonUp(0))
    {
        if(m_TextComponent.CheckIntersection(m_TextComponent, Input.mousePosition))
        {
            return true;
        }
    }
 
    return false;
}

Make a Clickable Text in Unity Without TextMesh Pro

Unfortunately, it is currently not possible to create a clickable text without TextMeshPro. However, you can make a button that contains the text you want clickable. Still, the downside to this is that it all the text in the button will be clickable. At this point in time, Unity does not offer any API to write your own algorithm to check for clicks, nor does such a method currently exist. If you want to create a text you can click with your mouse or finger, you will have to use TextMesh Pro.


Summary

What you learned in this article:

  • We have shown you a component that can detect if a text was clicked.
  • You always have to tell TextMesh Pro what portion of the text is clickable through <link> tags.
  • You know how to use the TMP_TextUtilities.FindIntersectingLink method and what it does.
  • We improved our component by adding an event that triggers whenever the text is clicked
  • If you want to change how the color or style of the text looks, you have to use rich text tags.
  • At this point in time, Unity does not offer any native API to write your own algorithm to check for clicks, nor does such a method currently exist

Conclusion

In the end, we hope you now understand how you can make a clickable text in unity. Unfortunately, there is no out of the box functionality that’s easy to use.. However, it is relatively straightforward to implement it yourself in a reusable component. If you found this article helpful, please share it.