Making Adjustments to the Color
Similar to how we have setup our scale and height changes, let’s utilise the alpha of the color channel with an AnimationCurve:
To start with let’s work on the fading in. Currently I have the color of my text set to white — (255, 255, 255, 0 — Byte values) or (1, 1, 1, 0 — floating point values), with the alpha channel being transparent. I am happy for my damage values to begin transparent and we will increase this alpha channel up to the maximum value — 255/1.
First, on the ‘FloatingCombatTextAnimations’ script, let’s grab a reference to the TextMeshProUGUI component on the child GameObject. We are going to directly set the color property through this reference.
Next, let’s create a new Color variable called ‘currentColor’ which will be equal to the components color. We have now stored that initial color value in the ‘currentColor’ variable.
Next, as we don’t need to change the RGB values, we can simply set the alpha value by accessing its field through ‘currentColor.a’. We are then setting this value to be equal to our AnimationCurve’s Evaluate() value.
Finally we are assigning the new ‘currentColor’ values back to the ‘_tmpU.color’ property.
Here we can see the colors fading in to their full value.
Now, I would like the colors to fade in quickly and then fade back out. So let’s adjust our AnimationCurve in the Inspector:
If you are wondering how I got the straight lines instead of the curves, it’s as simple as adjusting the tangents by right-clicking on the key and selecting whether you want to adjust the left/right/both(either side of the key), and then choosing Linear.
Voila! We have fade in/out floating combat text.
I have a few values to play around with to get my desired result, but I am very happy with the overall result so far!
Next steps will be to get these instantiating when I shoot an enemy and there is an opportunity to Object Pool these prefabs, allowing for better optimisation at runtime.