Making the Text Prefabs Float Up the Screen Using an Animation Curve
This is where the fun really begins and you get to use your imagination as to how you want the text to be visually appealing. There could be changes to the height, scale or even color over time using a gradient. Then you could add a whole new option for critical hits. But let’s get started with the height.
First, we will need to create a public AnimationCurve class, which we will look at in the Inspector. This is where we will decide what curve to utilise. We need to make sure it is public or the field won’t generate:
Clicking on the ‘Anim Height’ field will open up the Animation Curve window. At the bottom we can see some pre-set curves already waiting for us. Let’s test one out:
We could also choose to create our own curve by simply adding keys to the curve and adjusting it as you see fit. To do this you need to right-click on the line and select ‘Add key’. From here you here 2 options to adjust it’s position, first is by grabbing the key and dragging it around and the second is to right-click on the key and select ‘Edit Key’. This is where you can choose to place the key on the Time(X) Vs Value(Y) graph. You could come up with some pretty unique Animation Curves playing around with this.
This curve will have a type of bounce effect:
Moving on from Animation Curves, let’s create a float _time variable which will we will use as our Evaluation() parameter.
Next, we are going to need a reference to the target GameObjects Vector3 origin, which in my case will be the enemies I am shooting. We will use this point to then move the text upwards from there over time. Let’s make sure to set the origin point equal to the transform.position of the target GameObject otherwise the origin will always be the default (0, 0, 0).
Now in Update(), let’s set the transform.position to be equal to the origin location PLUS the movement, which is the new Vector3 value.
The only change we want on this new Vector3 variable is on the Y-Axis to make it move upwards, hence we have set the X & Z-Axis to 0. The calculation for the Y-Axis reads: (1 * _animHeight.Evaluate(_time)). This Evalaute() method represents “the time within the curve you want to evaluate”:
In our case we are evaluating from 0–1 on the Time(X) axis.
As such the calculation will always start at 0: (1 * 0)
Now we need to increase the _time variable otherwise it will always stay at 0, this is why we are adding Time.deltaTime to it.
Similarly, if we wanted this to be evaluated over a longer period of time (hence, the end point of the prefab will be higher on the Y-Axis), we could adjust the X-Axis to a value of 2:
Now, if we hit ‘Play’ let’s see the difference:
Finally, make sure to attach this script to the prefab ‘Floating Combat Text’.