In this tutorial we’ll set up a flying text prefab.

Flying texts are used to display things like damage numbers or other status changes on screen at the position of the combatant they affect.

We’ll set up:

• flying text prefab
• flying text mover schematic
• default flying text settings

Let’s get to it!

Flying Text Prefab #

Create a ready-to-use setup using the scene hierarchy’s context menu (ORK Framework > UI > Flying Text (Sprite + TextMeshPro)) or ORK toolbar (search for: Flying Text and use the sprite+TMP variant).

This creates a simple flying text object with an icon and text, horizontally arranged.

Horizontal Layout Group #

With the root Flying Text object selected, we’ll adjust some layout settings in the Horizontal Layout Group component.

Content Size Fitter #

We’ll adjust the width of the flying text to the displayed content to keep it centered.

Add a Content Size Fitter component to the Flying Text object using the component menu.

Image Size #

Select the Flying Text > Image child object, we’ll change the size of the Rect Transform to better fith with the text.

Fitting the Text #

Next, select the Flying Text > Text child object, we also need a Content Size Fitter component on the text to make it adjust it’s size.

Add a Content Size Fitter component using the component menu.

Create Prefab #

Create a prefab out of the Flying Text object by dragging it into the project view.

Remove the object from the canvas.

Flying Text Mover Schematic #

Like with the UI boxes, we’ll use a schematic to animate flying texts.

The flying text is available using local selected data via the selected key ui.

Open the schematic editor. We’ll move the flying text upwards, fade it in and fade it out after some time.

Change UI Offset #

Add Node > UI > Change UI Offset

This node is used to set or fade the offset of UI elements (e.g. flying texts, UI boxes or HUDs).

We’ll move it upwards in screen space and continue the schematic without waiting for the movement to finish – i.e. the move will happen in the background while we use other nodes.

Change UI Color #

Add Node > UI > Change UI Color

We’ll do a short fade in (alpha value), but without waiting for it.

Wait #

Add Node > Base > Wait

We’ll now wait – in total we want the flying text to be visible for 3 seconds (matching the movement), but we also need some time to fade out the text.

Change UI Color #

Add Node > UI > Change UI Color

Just like before, but with reversed colors. Best just copy the previous Change UI Color node and adjust it.

This time we wait for the fade to complete.

And that’s it for the schematic. Click on Save Schematic to save it, e.g. as FlyingTextMover.

Flying Text Setup #

We’ll now set up the basic flying text settings in the editor.

Open the ORK editor and navigate to Texts > Flying Texts.

Default Settings #

The default settings are used by all flying texts, individual setups can override the different default settings.

Display Settings #

Object Creation #

Position Settings #

These settings handle how flying texts are positioned on screen, based on the object they’re displayed for.

We’ll set up multiple positions for cases where more than 1 flying text is displayed at the same time, e.g. an attack that deals damage and adds a status effect. Otherwise, the flying texts would overlap, making it hard to read them.

That should be enough to keep flying texts from overlapping in our small game.

Status Effects #

We’ll also set up the default flying texts for status effects (which we’ll set up soon). Individual status effects can optionally override this with their custom flying texts.

Add Flying Text #

We’ll show a flying text when adding a status effect to a combatant.

Remove Flying Text #

We’ll show a flying text when removing a status effect from a combatant.

Save Changes #

And that’s it for now.

Save the changes using the Save Settings button at the bottom of the editor.

 

Next, we’ll get to the bones of our game – the status system.