How to make your text clickable š Unity TextMeshPro and the link tag
Summary
TLDRThis 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
š 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.
š 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.
Mindmap
Keywords
š”Text Mesh Pro
š”Link tag
š”Tooltip
š”TMP component
š”IPointerClickHandler
š”Canvas
š”LinkInfo
š”Serializable struct
š”Event
š”Animation
š”Tagging
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 š
Browse More Related Video
HTML Dasar : Paragraf (5/13)
Juiced Up First Person Character Controller Tutorial - Godot 3D FPS
Handling Events | Mastering React: An In-Depth Zero to Hero Video Series
End to end RAG LLM App Using Llamaindex and OpenAI- Indexing and Querying Multiple pdf's
Earn $17.32 Per Video Watching TikTok Videos On Your Phone | How To Make Money Online
Learn Descript in 15 Minutes [Full Tutorial]
5.0 / 5 (0 votes)