Creating Floating Combat Text For My FPS in Unity — Part 01
Objective: To show how I setup floating combat text in my project utilising Unity.
One thing I have always wanted to learn is how to create visually appealing floating combat text, and this is exactly what this series of articles is going to help you setup!
Step 1 — Import TextMeshPro
We can install this from the Package Manager:
Window → Package Manager → Packages: Unity Registry → TextMeshPro → Install
Step 2 — Canvas & Settings
Right-click in the Hierarchy:
UI → Text — TextMeshPro
This will automatically create a Canvas GameObject with the Text-TextMeshPro being a child of this.
I wanted to create a separate Canvas for this feature as I have other canvases for other features, so I created a Canvas first and then added the TMP as a child after.
Name the Canvas something like ‘Floating Combat Text’ and set the Render Mode to World Space and adjust some other settings by ‘Resetting’ the Rect Transform from the 3 dots:
Damage Text Settings:
Now the child GameObject of the Canvas will have the following settings:
Note: I had to adjust the rotation on my Y-axis as my game faces the other direction on the Z-Axis (don’t ask).
Adjust these next settings how you wish, but I updated my Font Size and also made sure the Alignment’s were both set to the middle:
Note: This article won’t cover how to setup custom fonts, so I have simply used a standard font.
Save your new ‘Floating Combat Text’ GameObject as a prefab in your Project window.
Step 3 — Creating a Script that will Instantiate a Random Damage Amount Using the Prefab
Now we want to test what the text will look like when it pops up, so let’s create a script which is going to instantiate a new random number within this text box every time we hit the ‘Space’ key.
Let’s step through this:
Firstly, we need a reference to our prefab, and don’t forget to drag and drop this into the Inspector field in Unity.
Secondly, as I am using the New Input System (NIS), we want to check if the ‘Space’ key was pressed and if it has, let’s instantiate a new prefab.
Thirdly, the InstantiateDamagePopUp() method is going to be responsible for instantiating the prefab and assigning the random number that is passed in through the parameters to the .text field.
Lastly, we have a return method here that is responsible for generating and returning a random int value between a min and max as parameters.
Note: As shown above in the script, I already have a MonoSingleton setup in my project so I am going to simply make this new class a MonoSingleton to make sure there is only ever one instance of it and we have easy access to it globally. If you don’t have a MonoSingleton setup, you could simply make the class a Singleton.
Test:
So far, so good!
However we can notice a few issues with it:
- They are instantiating on top of each other
- They are not being removed
- They are extremely rigid (meaning there is no randomness to their spawned location and they don’t move at all after spawning)
This will be addressed in a separate article — scroll down for link - Depending on the size of the numbers you will be using, you may need to go back and adjust the size of the text box
- If we rotate the camera, notice that the text has perspective. We want the text to always be facing us.
We will address all of these as we continue through the series.
Step 4— Billboarding. What is it? Why do we need it? Let’s create one
In Unity, Billboarding is essentially a process whereby a 2D sprite is represented in 3D. Or in our case, a Canvas will always be facing the camera.
How is this achieved? By making the 2D sprite rotate with the camera, removing any perspective.
Let’s start by creating a new script called ‘Billboard’ and opening that up:
First, we need a reference to the Main Camera GameObject in your scene. The reference will be grabbed from the first GameObject with the tag “MainCamera” in the scene. Just in case you have multiple Main Cameras that you switch between.
Second, let’s assign the reference to the Main Camera.
Third, let’s set the transforms forward position of the prefab to be equal to Main Camera’s forward transform. Now, in my case because my project is facing the opposite direction, I needed it to face the negative transform.
Lastly, make sure to attach this script to our prefab ‘Floating Combat Text’.
Test:
Now our text is rotating with our screen movement.
