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:

Download Prefab

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.

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.

Select the Flying Text game object and add a Content Size Fitter component to it.

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 #

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.

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.

Tip: When Using Multiple Cameras #

Flying texts are displayed on-screen based on where the camera sees the game object or world position they are placed at.

If you switch between different cameras, e.g. between in- and out-of-battle, the main camera that was used when the level was loaded is still being used for positioning flying texts.

To switch the used camera, add an Is Makinom Camera component to each of the cameras. This component will set the game object’s camera as the main camera used by ORK/Makinom when the game object is enabled. Please note that this will only work if you enable/disable the cameras as needed.