Create a simple flying text.
Flying texts are used to display things like damage numbers or other status changes on screen, at the position of the combatant they affect.
In this tutorial we’ll create a prefab that’ll be used to create flying texts in the UI.
Your project’s UI system should already be set to use the Unity UI module. If not, check the initial setup tutorial for the Unity UI module.
You can download finished prefab here:
This contains a flying text prefab as set up below and the used font.
Flying Text Prefab Setup #
Creating our flying text prefab is pretty straight forward. We create a ready to use setup using the scene hierarchy’s context menu: Makinum > UI > Flying Text (Sprite + TextMeshPro)
This creates a simple flying text game object with an icon and text, horizontally arranged.
Styling #
The icon (sprite) is displayed by the Flying Text > Image child object – depending on your icons, font and font size you might want to adjust it’s size.
Displaying the text is handled by the TextMeshPro – Text (UI) component on the Flying Text > Text child object. This is where you can change the font, font size, font color, etc.
Don’t worry too much about the font color, though – this is usually changed by the individual flying texts that’ll use the prefab.
I’d recommend to change the font and disable wrapping.
- Wrapping
Disable this setting.
When using the tutorial assets provided by other tutorials (FFF Forward font, icons), I’d recommend a 50×50 sprite size and a font size of 30. See the TextMesh Pro setup tutorial for details on the font/sprite setup.
However, the position seems to be a bit off – let’s fix that.
Content Size Fitters #
We’ll use Content Size Fitter components to adjust the horizontal size of the flying text to the displayed content (icon and text).
Select the Flying Text > Text child object and add a Content Size Fitter component to it.
- Horizontal Fit
Select Preferred Size.
Select the Flying Text game object and add a Content Size Fitter component to it.
- Horizontal Fit
Select Preferred Size.
Now this looks better.
Create Prefab #
That’s already everything we need to do. Create a prefab out of the flying text, e.g. save it as Flying Text.
You can now remove the canvas (and flying text) from the scene.
Default Setup #
Next, we’ll use our prefab as the default flying text. Open the Makinom editor and navigate to UI > UI Settings.
Change the following settings.
Flying Text Settings #
- UI Prefab
Select the prefab you created.
Default Flying Text Positions #
Since we’re already here, let’s randomize the flying text’s position a bit.
Flying texts are displayed at the position of game objects on screen, you can add a random offset and use child objects for placement (if available). We’ll use both.
- Use Child
Set to Center.
In case the game object has a child object named Center, the flying text will be placed using it.
Otherwise, it’ll use the game object’s own position.
You can add multiple positions for flying texts, e.g. using them in order and automatically resetting the order after a time. This can be useful when multiple flying texts are displayed at the same time to bring order into the chaos.
We’ll just use a randomized position, though. Change the Position 0 settings.
- Random Offset From
Set to X=-0.5, Y=-0.5, Z=-0.5. - Random Offset To
Set to X=0.5, Y=0.5, Z=0.5.
That’s it – don’t forget to save the changes you did in the Makinom editor via the Save Settings button at the bottom.
Animating Flying Texts #
You want to animate the flying text, e.g. fade in/out and move it upwards?
This can be done by using a schematic – see this schematic tutorial for an example.
You can do even more by using prefabs to place flying texts, learn more in this gameplay bits tutorial.
