Hi, I’m making a small dialog system with animated text, and previously I was using TextMeshPro, but now I want to make the jump to the UI Toolkit system, so I have to use a Label. Is there any way to access the characters (and their individual information) like in TextMeshPro?
Previously I could access the vertices of each letter and thus modify positions. Now I have to create individual Labels for each letter, which, apart from giving me some problems, does not convince me.
Has anyone already worked with UI Toolkit and can give me some advice or know if it can be accessed?
I have read in the documentation, that the Label is part of TextMeshPro, but I can’t find it.
You can/should use TextField. This has a value property.
You can also register a “value changed” callback (can’t recall the exact type). If you do that, you get a method executing every time a character is typed. I used that to confirm validity of an input string while typing.
I don’t think it’s good for what I want to do. I’m sorry if I didn’t explain myself correctly.
What I need is to access not only to the letter of the text individually. But really what I would like to be able to access is the individual mesh of that letter. And in this way to be able to modify its position and / or colour (among other things).
At least the color you can modify. I think RTF is supported ie try <color=red>Red</color>
If you want total control it’s best to stick to TextMesh. UI Toolkit is for the User Interface which does not focus on operations detrimental to the user experience respectively user interface best practices.
What you demo’ed is similar to a hacker’s intro which are known for creating the most ineligible text effects to show off l33t h4x0r sk1llz. This is not something you’ll commonly find supported in UI frameworks.
You can also try the old Legacy Text objects which I believe also provide full control over everything.
You must not play any video games then CodeSmile. Most games with text dialogue will use creative effects like that to emphasise dialogue in various ways nowadays.
It’s absolutely something that UI Toolkit should support in future.
That’s actually true.
In recent years I perhaps find one game and play that excessively, and then perhaps all of its clones.
I definitely don’t play mobile games, nor Anime/Manga/Hentai.
No, seriously, I probably couldn’t stand any such games that has the UI make me believe I’m on drugs. I do get the occassional highlight in color or font but none such nonsense as floating letters, non-uniformly colored words, fluctuating letter spacing, and crap like that.
But I’m curious, could you point me to some games that do use these features? Perhaps they actually use them to good effect when I just can’t imagine that right now.
The only thing that comes to my mind is some sort of transition effects. I’ve seen credits where the letters fly apart and come back together to form different names, or buttons that when highlighted have the letters jiggle a little.
I mean I don’t mean that effect specifically, but any effect that might manipulate the position and shape of text. For example, text shaking sharply when a character is angry. Or animating a specific word for emphasis.
Pretty sure all the most recent Mario games, like Super Mario Wonder, will use this effect some degree.
I understand what you mean, but it would not solve some of the problems I have encountered. It would be similar to making an individual label for each letter, as I do in the example.
But I would appreciate knowing the possibility of doing that.
My original code was already implemented with TextMeshPro, but I wanted to move it to the new UI Toolkit system. But it looks like, for the time being or for this case, I’ll stick with TextMeshPro.
Exactly, it would be for a dialogue system, in the example it is very exaggerated.
Anyway, thank you very much for your help, it has been a pleasure to share this conversation.
There are quite a few games where dialogue is part of the main mechanic, where this is implemented. For example, Animal Crossing itself among many others.
Or as ‘spiney199’ says, the dialogues of the new Mario, to give them more life.
Nice example!
This and the text in the text bubbles are not strictly UI texts but most likely individual sprites for each letter. It’s definitely not the entire word as a single image and then adjusting vertices because it’s not a fixed font and letters themselves are not skewed in any way.
Makes me think that the solution for UI Toolkit could be exactly the same. Create a custom VisualElement that renders text based on one’s own sprite atlas of letter images. Since we can’t easily draw on top of UI Toolkit each sprite would have to be a child VisualElement that just draws a letter sprite. You could probably even use USS to animate the letters then, but certainly you can do it with a script.
This could work and shouldn’t be hard to implement.
Right, the ‘problem’ is that you have to access the mesh of each letter individually to be able to modify its position or values necessary for the effect you want.
In textMeshPro, it allows you to access all the individual meshes, but not in the UI Toolkit’s ‘Label’.
In the video, the implementation is already using UI Toolkit, similar to what you say, in my case, are individual labels containing a single letter, so I can position them and change their colour individually.
But one of the problems that this system has, unlike the TextMeshPro system, is that I can’t control the line breaks that a text automatically makes if it doesn’t fit in that line.
Apart from the fact that I find it rather unclean, among other things.
But that’s ok, for this case, I’ll see if I keep using TextMeshPro or accept this problem temporarily.
I hope they will soon implement the option to access this information in UI Toolkit.