Rich Text in TextMesh Pro - Unity 3D
Doing UI in Unity isn't too bad.
No really, there's lots of room for customisation to make a UI in a way that works for you and your game.
New Notification System
Since the last update of Skell's Quest, I've been working on improving the UI. One thing that I took away from the last update is the ability to embed rich text. I also wanted to create a new self-managed system for in-game notifications.
Without bogging this article down too much, the new system I've made allows me to have multiple types of notifications appear on screen and have 5 notifications at any one time, each with their own countdown logic and removes themselves. All I have to do is this to add a new notification to the queue:
NotificationManager._instance.AddNotificationToQueue(new NotificationMessage("{{notification text}}")I can define what type of notification I want to add to the queue by adding additional context after the message. Here's what the NotificationMessage class expects:
NotificationMessage.NotificationMessage(string s, [float t = 3], [NotificationType type = NotificationType.STANDARD], [PlayerStat st = null])With this in mind, I wanted a quick way to display that an item has entered the players inventory. I decided for now to just add it to the standard notification. I then realised that I wouldn't mind displaying the icon as well as the name in the notification. Enter TextMesh Pro's rich text capabilities.
Rich Text with TextMesh Pro
TextMesh Pro has the ability to render rich text. This is a relatively expensive operation so should be done lightly. It should also be set once and not re-rendered multiple times - In other words, don't put rich text in an Update method that keeps updating some text, that'll get heavy on your games performance.
Rich text is done with tags. Here's the documentation for all supported tags in the latest version.
Previously, I had used rich text to indicate if some equipment was better, worse or the same for various attributes. That was simple and just looked like this:
"<color=green>(+" + valueChange.ToString() + ")</color>"This was pretty simple, it's just a tag on either side and some values in the middle. I did the same for negative and equal attributes. But to include the items icon would be a much bigger beast to tackle. This is what my code ended up looking like:
NotificationManager._instance.AddNotificationToQueue(new NotificationMessage("<sprite=\"" + item.GetIcon().name + "\" index=0>" + " " + itemName + " added to inventory."));One thing to note is I needed to ensure to escape the string and provide escaped double quotes, so I could include the item's Icon asset name, which is the name of the Sprite Asset. Another thing to note is that TextMesh Pro has its own TextMesh Pro/ directory within your game's Assets/ directory. Within there is a Sprites/ directory and most importantly, a Sprite Assets/ directory. Within this Sprite Assets/ is where you must include a Sprite Asset. You can find this under Assets > Create > TextMesh Pro > Sprite Asset. You can do individual sprite assets this way like I have, or you can put them all into one spritesheet and determine the index, or instead of index=0, you can use name="your-asset-name".
The end results are sprites appearing correctly in text:
By default, TextMesh Pro gives you a spritesheet to work with. At the time of writing, the asset is called EmojiOne and it is as you might imagine, a spritesheet with some emojis. There are 12 total emojis within the default spritesheet. If you want to change the location of where it looks for your spritesheets, or just look at the settings in general, they are under Edit > Project Settings > TextMesh Pro.
That's about it for Rich Text. Hopefully you find this useful for your own projects. Perhaps you're already using rich text in your projects - Let me know if you knew about this, as well as what you like or dislike about this approach.
Much love to all, thanks for reading and happy coding. -Timlah