How to make your text clickable 💛 Unity TextMeshPro and the link tag

Summary

This tutorial delves into the versatile Text Mesh Pro link tag, exploring its potential beyond URL links to enhance game interactions. It demonstrates creating a tooltip system for a text box, showing how to use custom tags for gradient effects and handling mouse clicks to display ingredient information. The video guides viewers through setting up scripts for tooltip control, handling text interactions, and utilizing the link tag with unique keywords. It also touches on implementing animations and subscribing to events for a dynamic user experience, concluding with a call to action for feedback and further learning.

Takeaways

• 🔗 The Text Mesh Pro link tag is not just for URLs but can be used to integrate with game systems.
• 📚 The tutorial series will explore advanced uses of the link tag, starting with a tooltip example.
• 🎯 The first example project demonstrates creating a tooltip for text or sprites in a textbox when clicked.
• 🛠️ Three scripts are created: one for tooltip info, one for textbox interaction, and one for controlling the tooltip.
• 📝 The link tag syntax is introduced, with emphasis on unique 'keywords' that trigger actions.
• 👀 The 'LinkHandlerForTMPText' class is explained, detailing how to attach it to a GameObject and find necessary elements.
• 🐾 Implementing the 'IPointerClickHandler' interface makes text elements clickable and able to detect links.
• 📡 A system for detecting mouse position and linking it to a tooltip is described, including the use of events.
• 📜 The 'Tooltip Handler' script is detailed, showing how to manage the display of tooltips with keywords and sprites.
• 🖼️ A 'TooltipInfos' struct is introduced to link keywords with corresponding graphics for the tooltip.
• 🛑 A method for closing the tooltip, either by clicking or reversing an animation, is suggested.

Q & A

What is the primary purpose of the link tag in Text Mesh Pro discussed in the script?

The primary purpose of the link tag in Text Mesh Pro is to enable interactive elements within the game, such as displaying tooltips when a word or a sprite in the textbox is clicked, rather than just linking to external websites.

What is the first example project discussed in the video?

The first example project is about creating a tooltip that appears when a word or sprite in a textbox is clicked, displaying the name of the ingredient and some visualization.

What are the three small scripts mentioned in the script that will be created?

The three small scripts to be created are: one for holding information for the tooltip, one for handling interactions with the textbox, and one to control the tooltip.

How does the script determine if there is a link under the cursor when clicked?

The script uses the `TMP_Text.GetLinkedTextComponent` method to check if there is a link under the cursor when clicked, which returns an int value representing the index of the link, not a boolean.

What is the purpose of the `LinkHandlerForTMPText` class in the script?

The `LinkHandlerForTMPText` class is a MonoBehaviour that handles the detection of link tags within the Text Mesh Pro component and manages the interactions when a user clicks on these tags.

Why is the camera required in the script and how is it handled?

The camera is required to calculate the mouse position relative to the UI elements. It is handled by assigning it to the script either automatically or by manually setting it in the Unity Inspector.

What interface does the script implement to make text elements clickable?

The script implements the `IPointerClickHandler` interface to make text elements clickable and respond to user clicks.

How does the script notify the tooltip controller to show the tooltip box?

The script uses an event and a delegate to notify the tooltip controller to show the tooltip box, passing a string parameter that contains the keyword associated with the clicked text.

What is the structure of the `TooltipInfos` script mentioned in the script?

The `TooltipInfos` script is a Serializable struct that contains a keyword and a Sprite, used to associate specific keywords with corresponding graphics for display in the tooltip.

How can the tooltip be closed in the system described?

The tooltip can be closed by either playing the popup animation in reverse, setting the tooltip's active state to false, or triggering a click event that sets the tooltip inactive.

What additional step is suggested to make clickable elements stand out in the text?

To make clickable elements stand out, the tutorial suggests tagging them with a distinct style, which can be learned more about in a separate tutorial focused on styles.

Outlines

00:00

🔗 Introduction to Text Mesh Pro's Link Tag

The video introduces the Text Mesh Pro's link tag, emphasizing its versatility beyond just displaying URLs. It suggests thinking of the link tag as a connector to game systems rather than web links. The tutorial promises to explore the link tag's capabilities through examples, starting with a project that shows a tooltip upon clicking words or sprites in a textbox. The setup includes a textbox with a bread recipe, custom gradient tags using Text Animator, and a tooltip system. The tooltip is a simple GameObject with a background image, a TextMeshPro (TMP) object, and an image component. The video outlines creating three scripts: one for tooltip information, one for textbox interaction, and one for controlling the tooltip. It explains the syntax of the link tag and how to set up a class to handle the link tag, including finding necessary elements like the canvas and camera, and implementing the IPointerClickHandler interface.

05:05

🛠 Developing the Tooltip System

This section delves into the development of the tooltip system. It describes creating a script called TooltipHandler that manages the tooltip's appearance and content. The script subscribes to an event triggered by the LinkHandler to display the tooltip with relevant information based on keywords. The TooltipHandler script includes a list of TooltipInfos, which are structs containing keywords and corresponding sprites. The video demonstrates how to enable the tooltip, set its title, and update the image component based on the keyword. It also covers creating a function to close the tooltip, either by playing an animation in reverse or through a click event. The tutorial concludes with instructions on tagging text elements in the TMP component to trigger the tooltip and suggests adding styles to make clickable elements stand out. The presenter encourages feedback and questions, inviting viewers to engage with the content.

Keywords

💡Text Mesh Pro

Text Mesh Pro (TMP) is a plugin for the Unity engine that enhances the text rendering capabilities of the game development platform. It allows for more advanced text styling and effects compared to the default Unity text component. In the video, the presenter discusses utilizing the link tag feature within TMP to create interactive text elements, such as tooltips, which go beyond simple URL links.

💡Link tag

The link tag in Text Mesh Pro is a feature that enables text elements to be interactive, allowing them to link to various actions or data within a game. The video focuses on using the link tag to create a tooltip system that displays additional information when certain words or sprites are clicked, demonstrating the tag's utility beyond just linking to websites.

💡Tooltip

A tooltip is a small, interactive, floating text label that appears when a user hovers over or clicks on an element, typically providing additional information or context. In the video script, the presenter describes creating a tooltip that appears when clicking on ingredients within a text box, showcasing how the link tag in TMP can be used to implement such a feature.

💡TMP component

The TMP component refers to the TextMesh Pro component in Unity, which is used to add rich text elements to game objects. The video script mentions attaching a LinkHandlerForTMPText script to the same GameObject as the TMP component to handle the interaction with the link tag and display tooltips.

💡IPointerClickHandler

IPointerClickHandler is an interface in Unity that allows a script to respond to pointer clicks. The video script describes implementing this interface to make text elements clickable, which is crucial for triggering the tooltip functionality when a user clicks on tagged words.

💡Canvas

In Unity, a Canvas is a UI component that serves as a container for UI elements like text, images, and buttons. The video script mentions locating the TMP text box on a Canvas and using its properties to calculate mouse positions relative to the text elements, which is necessary for detecting clicks on specific words.

💡LinkInfo

LinkInfo is a structure in Text Mesh Pro that contains information about a link, such as its ID and the text it is associated with. The video script describes using LinkInfo to retrieve details about the clicked link, which is then used to display the appropriate tooltip.

💡Serializable struct

A Serializable struct in Unity is a custom data structure that can be saved and loaded as part of a scriptableObject or used within the inspector. In the video, the presenter creates a TooltipInfos struct to store keyword-sprite pairs, which is used to associate keywords in the text with corresponding images for the tooltip.

💡Event

In the context of Unity and programming, an event is a mechanism that allows for communication between different parts of a program. The video script describes setting up an event using a delegate to notify the tooltip controller script to display the tooltip when a link is clicked.

💡Animation

Animation in Unity refers to the process of creating movement or change over time, often used to enhance the visual appeal of UI elements. The video script mentions using an animation to make the tooltip appear when it is triggered, adding a dynamic visual effect to the tooltip display.

💡Tagging

Tagging in the context of the video refers to the process of marking specific words or elements within the text for special treatment, such as triggering a tooltip. The presenter explains how to tag elements in the text with a style to make them stand out and be clickable, which is essential for the link tag functionality.

Highlights

Introduction to the link tag in Text Mesh Pro and its powerful capabilities beyond linking to websites.

Plan to explore the link tag in depth over several tutorials, starting with a tooltip example.

Base setup: a big text box with a recipe, using custom tags for gradient effects with Text Animator.

Objective: Display a tooltip box with the ingredient name and a visual representation when clicking on an ingredient.

The tooltip is a simple GameObject with a background image, a Text Mesh Pro component for the title, and an image below.

Creation of three scripts: one for tooltip information, one for handling textbox interactions, and one for controlling the tooltip.

Explanation of the link tag syntax, which requires a closing tag and allows any keyword to be set.

First script: LinkHandlerForTMPText, a MonoBehaviour that will be attached to the GameObject with the TMP component.

Setting up the LinkHandlerForTMPText script with private variables for the TMP text box, Canvas, and Camera.

Implementation of IPointerClickHandler to detect clicks and identify links under the cursor.

Using events to notify the Tooltip Controller to show the tooltip box, with a delegate and a static event.

TooltipHandler script to manage the tooltip display, including searching for the correct keyword and sprite.

Creation of a Serializable struct called TooltipInfos to store keywords and sprites for the tooltip.

Final steps involve populating the list with keywords and sprites, tagging the text, and customizing the tooltip appearance.

Recommendation to style clickable elements to make them stand out, with a suggestion to watch a related tutorial.

Transcripts

Hi and welcome 😊

One of the most mysterious Text Mesh Pro tags  is the link tag. This tag can enable you to do  

a lot you might not have thought possible  before and not just display a linked URL.  

Think about this tag like it links up with your  game’s systems, less about linking to websites.

So, over the next few videos, we’ll have a look  at this mighty tag and a couple of examples of  

what we can do with it. In this video, we’ll  start with a small example project about  

displaying some kind of tooltip when a word  or a sprite in our textbox is being clicked.  

In the next tutorial, we’ll see how we need to  modify this system to display infos when we hover  

over certain parts and go a bit deeper into which  kinds of infos we can get by using the link tag.

The base setup of my scene is this: I have a  big text box with the recipe for bread here.  

These tags here are custom tags I  wrote to have a gradient play by  

using the Text Animator and don’t  matter for this system to work.

I want to have a tooltip box pop up when I  click on the ingredients and I want it to  

display the name of the ingredient as  well as some kind of visualisation.

The tooltip is a simple Gameobject with a  

background image, a TMP object to hold  the title as well as an image below.

I also use an animation to  have the tooltip appear,  

but that’s really just for the sake of  having something interesting to look at.

Additionally, we will create three small  scripts: One for holding infos for our tooltip,  

one for handling the interactions with the  textbox and one to control the tooltip.

The syntax of the link tag looks like this and  it needs a closing tag, too. You can set any  

word you want in here - I’m going to call these  the keywords. These keywords are one of a kind.

Let’s get to the code.

The first class will be  called LinkHandlerForTMPText.  

It is a monobehaviour and I’m going  to stick it on the same Gameobject my  

TMP component is on, so I’ll give it a  requiredComponent of the type TMP_Text.

Our class will get three private variables: the  tmpTextBox as well as the Canvas the textbox  

is located on and lastly the camera we want to  use. There are multiple ways of handing a camera  

to the script, I’m fond of just hooking it up by  hand so I’ll have this show up in the inspector.

In Awake, we will have our script find the  needed elements. We needed to hand it our  

Canvas as well as our Camera (in the case of our  canvas being not in Screen Space Overlay mode),  

because the way our mouse position will  be calculated depends on these values.

To have our text elements be clickable,  

we’ll add the IPointerClickHandler  interface and implement its member.

We need to know our mouse  position. We’ll get it like this.

Next, we need to check if there’s actually  a link below our cursor when we click.  

We check for it with this line of code. Please  note, it returns an int value, not a bool.

So, if our linkedTaggedText is not -1,  which is the default return value if  

there is no link to be found, we need  to get the LinkInfo of our tagged text.

Throw a Debug.Log like this into  your code to check if your tagged  

word is being found correctly and give it a test 🙂

My tooltip controler is its own script and I  don’t want to link them up, so I’ll be using  

an event to notify it to show the tooltip box.  For that, we’ll need to add a delegate and an  

event using the delegate like this. By setting  it up like you see, we can now Invoke the event  

down here and hand it a string parameter for  the event listener to work with. Don’t forget  

to set your event to static, or you won’t be  able to listen to it from another script 😊

Next up is our Tooltip Handler.  It’s just a basic Monobehaviour.

It needs to know about our Tooltip, its  TMP Component to fill it with a correct  

title as well as its Image component.  I’ll add the Image by hand while having  

it search for the TMP component on its own,  because if I were to let it search for it  

like I do with the text field, I’d get the  background image. This is quicker for now.

In OnEnable, we’ll subscribe to the  Event we created in our Linkhandler  

and will unsubscribe from it in OnDisable.

The function to display our  Tooltip takes a string parameter.  

If we set up our previous script correctly, it  will get this part of our text handed it it.

To be able to look up a keyword and corresponding  graphic, we’ll need a new script - this  

time it will be a Serializabled struct called  TooltipInfos. It contains a keyword and a Sprite.

Back in our TooltipHandler, we  will create a List (or an array,  

if you like) of TooltipInfos at the top  of the script and in our GetTooltipInfo  

function, we’ll search through the list’s  elements if an entry contains the keyword.  

If it does, the Tooltip gets enabled, we’ll  set the title to the keyword and set the  

entry’s sprite to the tooltip’s image  component. We’ll return at that point.

If our script wasn’t able to find an entry,  

we want to get notified, so  we’ll add this line, as well.

To make our system complete, we’ll need  some kind of CloseTooltip function.  

How you set this up is up to you. For example,  if you add this SetActive(false) and add an Event  

Trigger for a click event to your Tooltip, you’ll  be able to make it disappear by clicking on it.  

My version is just playing  the popup animation backwards.

All that’s left is filling the created  list with keywords and sprites and of  

course tagging the elements in our  text which we want to be affected.

Give your system a try!

As you can see, the elements you can  click on to trigger a tooltip aren’t  

looking any different than the rest of the texts.  

For them to stand out, you’ll need to additionally  tag them with a style of some sort like this.  

Watch this tutorial to learn all about how and why  to work with styles, it’ll be worth your time :)!

I hope you enjoyed my tutorial!  Please give it a like if you did  

and subscribe if you enjoy learning more  about design topics for your games =)! I’d  

love to read your feedback and don’t  hesitate to post your questions, too!

Have a great week 😊