If you have ever played a game before, you are likely familiar with the concept of “floating text” or damage popups. A lot, and I mean a lot of games have this UI feature, and for beginner game developers it is a great polish feature that also provides information to the player.
And you can use text popups for more than just representing damage dealt or received. Level ups, incremental growth, achievements, and more can be conveyed to the player using popup text. It is important to be wary of popup overload, however. Think Cookie Clicker, with an endless stream of “+1”s floating to the top of the screen, or MMORPGs with dozens of numbers and words floating around without any clear purpose to the uninitiated eye.
This guide will help you write your own damage popups in Unity. This guide was created against Unity 2019.4.3.f1 (the LTS at the time of writing). You will need to utilize TextMesh Pro and DoTween to complete this tutorial.
The great news is that you do not need a canvas parent to render text — have the TextMesh render directly in scene!
Creating the Text Popup Prefab
- Open up Unity and open up your project (or a new project).
- Create an empty GameObject in the Hierarchy, name if something like “TextPopup”
- Add the “TextMeshPro - Text” component to your GameObject. This will add a Mesh Renderer and Material to your object automatically. If you don’t have TextMesh Pro imported, you will be prompted to import this before you begin.
- Make your text appear in the Game window. You will probably need to resize the Width and Height fields, as the text default is quite big. The sizing will depend on your Camera size as well. My example has the width at around 1.29 and the height around 0.19, with a default scale (1,1,1)
- Add a new script component to your GameObject, name it something like “TextPopup”. Right now the text is quite static. It’s time to break out Visual Studio and write the functionality.
- The code is simple — we want to set the text for the TextMesh to render, a simple Fade twee, and an upward moving tween in parallel. We set the GameObject to destroy itself once the tween is over.
- Once you are done, drag the TextPopup prefab from your Hierarchy into your Prefabs folder. Guess what? You are done! All you need to do is Instantiate this prefab when you want to show the floating text.
Using the Text Popup in Your Game
You can easily use the Text Popup from a static function, with a little work. Here is what I’ve done in previous projects to make creating text popups quick and easy:
- (If you haven’t already) Create a Game Manager GameObject in your scene — this will orchestrate high level game functions, and provide utility functions to the rest of the game’s components. Give the Game Manager GameObject a script component named “GameManager”.
- Create a script component on the Game Manager called “EffectsManager”. The EffectsManager.cs script will hold the reference to the TextPopup prefab.
- Within GameManager.cs create a static function like the one below. This function will allow you to set the text start position, color, and string.
Now you can simply call this function from any script to trigger a floating text prefab!