In this lecture, we are going to learn some more skills for handling text in strings for our label
3D, as well as some ways we can start utilizing colors in our scripts.
So at present we have a health total displaying in a label 3D above the player, and this is just a
single number, but I think it would be helpful if we also showed our player's max health immediately
next to what their current health is.
So for example, we should say we could say that the player has five of five total hit points and then
as they take damage, they drop to four of five and then three of five.
And the way you display that is by having the current health, a forward slash and then their maximum
health.
But if we want to join variables together in this way, we need to learn a little bit about concatenating
strings.
So you will often want to join strings together with variables.
And in order to do that you use the plus symbol.
And that's just like the plus symbol for addition.
It's just in the context of strings.
It appends two strings together.
So let's say for example, I have a string that is called player name and it's set to be Arthur Dent.
If I wanted to print out you were called, and then that variable.
So I could change this variable to whatever I want.
Depending on context, we would use the plus symbol in between those two strings.
So we'd say you were called as a string.
And then the plus symbol to concatenate.
And then the variable that is a string.
And that will join them together.
And we can use this to join the numbers together.
So let's return to our script.
So I want to join our current health a forward slash and our max health.
So let's open the base script, enter distraction free mode and look to where our label 3D is.
Text value is set.
So we have the value.
I want to start with our current health.
I just want to join a forward slash afterwards and then the max health, and I will do that with that
plus concatenation symbol.
So after we've got our current health string, I'm going to add a plus to concatenate another string
on.
And then in double quotes I'm going to put a forward slash.
And so that's the slash that's going to go after our numerator health value.
And then afterwards I'll put another plus to concatenate another string.
And then we'll want to convert the maximum health into a string as well.
Because we can't concatenate any values that aren't strings.
We have to convert them first.
So we'll convert it into a string with the str function, and then pass in max health as a parameter.
So now whenever we update our label 3D text value, it should instead display the current health forward
slash the max health.
Let's see that in action.
There we have it and we have 5/5.
And when our enemies reach the base, it should drop to four, slash five, then three, slash five,
and so on.
With that tackled, we can start moving on to a challenge.
I want to reinforce what we've just learned about concatenating strings.
So I want you to find a ready function somewhere it doesn't matter where, and create a string variable
holding your name.
And then afterwards create an integer variable holding your favorite number.
That's an integer.
So it's not got a decimal place, it is a whole number.
After that, I want you to print out those two variables concatenated with a hyphen and spaces in between
them.
So for example, if our variable name was set to Arthur Dent and our favorite number was set to 42,
I want you to print out the name a space, the hyphen, a space, and then the number.
All right, give that a whirl and I'll see you back here in a few moments.
Welcome back.
Let's find a ready function we can put this into.
I'm going to use the one that's in base SGD, because it's the nearest on a new line.
In that ready function I'm going to declare the variable that holds my name.
So var my name I'm going to set it to be a string.
So colon string with a capital S I'm going to set that to be equal to Bram.
So that's my name.
Afterwards, I want to declare my favorite number.
So I'm going to declare var my number.
This one's an integer.
So I'm going to set the type to be int.
And I'm going to set that to be equal to 42.
And then afterwards I want to print out Ram hyphen 42.
And the way I'll do that is I will type print.
I'll start by printing my name, which is already a string, so I don't need to convert it.
And then I will add I will concatenate that with a string containing a hyphen.
So I'm going to use plus as the concatenation symbol.
Add some quotes I'm going to add a space so that there's a space between the name and the hyphen.
And then I'm going to add the hyphen.
And then I'm going to add another space.
So there's a space between the hyphen and the number.
And then after this string I'm going to use the concatenation symbol again plus and I am going to add
the number.
But I need to convert this number to be a string because we can only concatenate strings.
So we can convert that number into a string with the str function.
So I'll type str in brackets my number.
So if I save that and then run this scene, we should see Bram hyphen 42 printing out in the console.
There it is.
We did the job.
All right.
With that done, we can move on to something else.
I'm just going to tidy this up for the moment.
I'm going to get rid of that now.
It's complete.
So the next thing I want to move on to is a bit of a nicer way to show our label 3D updating in real
time.
I'm going to exit distraction free mode, change over to the 3D view, and click on my label 3D.
So I want to make it so that as we take damage, this starting health text gets redder and redder.
So we start out white, but by the time we're on very low health, this text is red and we can control
the color of this label with its modulate property.
If we scroll down in the inspector and find the modulate property, we will see a color picker.
This takes a color object and we can say fiddle around with this and pick a color we want.
But if we want to animate this value changing in code, we need to know a little bit more about using
colors.
So I'm going to reset that and let's talk.
I'm going to reset the modulate not the text.
And let's talk about colors in scripts.
So when creating a color in scripts we need the color object.
Now a color object lets us create colors in code.
And you can create them in a few different ways.
We can create a color from a string hex code.
If you've done much web dev or have interacted with colors in various applications, you might be familiar
with representing colors as a series of six alphanumeric characters.
These are known as hexadecimal numbers, hence the name hex code.
But in short, if you're familiar with this, we can use each two characters.
So these first two characters map onto the red channel.
So this is how red the color is.
The second two is how green the color is, and the third two is how blue the color is.
So we could define a red color as being this string FF0000 to get an all red color.
That's one way.
There are also predefined colors built into the color object for.
So for example we could pick the red constant color is a red color you can just pick.
But there are other nice ones too.
For example slate gray and firebrick and some other nice ones like that.
I'll show you a bit more about selecting those predefined colors later on.
And the last way we can create a color is by creating it with three float values.
This lets us select a value between 0 and 1 for our red channel, our green channel, and our blue channel.
So a color created in this way would have all red, no green and no blue, so it would be a red color.
So that's how we can create a color in a script.
Let's try that out quickly.
I'm going to return to our base.
I'm going to open the base script, enter distraction free mode.
After I set label 3D dot text, I'm going to set its color.
I'm going to say label 3D dot.
Modulate is the property that holds its color.
We were just messing with.
I'm going to set that to be equal to a new color object.
So capital C color and open a bracket to create it.
And we can pass in the parameter here that sets it up.
So we can pass in a string.
For example FF0000.
You can see it's showing us a variety of ways of creating colors here.
There's the one we're doing at the moment where we're passing in a string or passing in the red, green
and blue values.
ET cetera.
But this, if we run it, should set our string, our label 3D to be red.
Let's run that and see it in action.
There we are.
It's all red.
So I was also saying there are a bunch of predefined colors.
If I just add a dot on the end of the color property, you'll see it's already trying to autocomplete
a bunch of predefined constant colors, and you see their names are in all capitals, and that's how
you know they're constants.
But I could, for example, pick cyan as a color, and then this will set it to whatever the default
cyan color is.
If you want to look through these colors in more detail, you can hold Ctrl and click on this color
object.
And we will now be in the documentation for colors.
We can scroll down and look at its functions, properties, and all of those.
But if we go down far enough, we'll get to this constant section where you can see all of the constants
are defined.
And you can see what their red, green and blue channels are set to.
So for example, this cyan color is has one in its green channel, one in its blue channel, and it
gives you a cyan color.
And if we go down far enough, we'll find the red that maps onto the color we were trying to add.
So here's the red color.
So that's how you can grab a bunch of predefined colors.
You just type dot and then in all capitals the name of the color you want.
So we can pick a color, but how do we blend our color?
As I was talking about earlier, going from when we're at full health, being white, and then when
we're at low health having it be red.
Well.
One particularly useful game dev function is the lerp function.
Lerp stands for linear interpolation, and what it does is it blends one value to another based on a
weight.
So let's say we want to blend our red color to white.
What we can do is we could define our red color as a variable called red, and our white color as a
variable called white.
And what we could do is we could take our red color and use the lerp function to lerp it towards white.
And then the second parameter we pass into this lerp function is how much we're going to blend from
one to the other, where 0.0 is no blending at all, and 1.0 is blending all the way there.
So if you imagine this gradient at the moment, if we've got red at one end, this is where the weight
is 0.0.
We can blend it all the way to the other end.
And this is where the weight is at 1.0, where we're getting our white color.
And if we pass in 0.5 as the weight, we will go halfway through this blending and we will get a color
that is exactly this red.
So this lets us control how blended the color is based just on a value between 0 and 1.
There are lots and lots of other applications for the lerp function, and it's very helpful to know
about.
So this is all well and good, but the one thing we don't know right now is how we're going to get our
value between 0 and 1.
And there's actually quite a convenient way we can do that.
What we can do is we can take what our current health is and divide it by our maximum health, and that
will give us a fraction.
So a value between 0 and 1.
So if we're at low health.
So we've got one health at the moment and we've got a maximum of five.
If we do one divided by five we'll get one over five which is 0.2 which would be down near this red
area.
And then if we were at full health, so we had five of five health, that fraction would give us one,
which would give us a white value.
So we can just do that division to get a value to plug in as this weight.
So returning to our script, let's define those red and white colours.
I'm going to say var red colon color equals color dot red.
And then on the line afterwards, I'm going to define the white color.
VAR white colon color equals color dot white.
So now we want to lerp our value from red to white.
I'm going to declare a new variable.
I'm going to say var blended.
Color.
And I'm going to say that is equal to red.
And if I type dot, we'll get access to its functions.
And I can type lerp and we'll see lerp shows up there.
And once I've selected lerp it's showing me code completion.
Saying this needs two parameters the color we're blending red towards and the weight of how far to blend
it.
So I'm going to lerp it towards white.
So white is my first parameter.
And then the second parameter is whatever our blend value is.
So our example is 0.5.
But as I was saying, we can use our current health divided by our maximum health as a weight for this
to get a value that's whiter when we're at full health and redder when we're at low health.
There is one extra hiccup I'm going to explain now.
And because our current health is an integer and our max health is an integer, they don't have decimal
places.
So that means if we take our current health and divide it by our max health, there won't be any decimal
places in the number we get out the other end.
The way we can make this work is by turning the current health and the maximum health into a float value,
that is, a number with a decimal place.
And then when we divide them, we'll get a number with a decimal place at the other end, something
like 0.2 or 0.5.
So what I'm going to do is I am going to turn our current health into a float.
We do that the same way we converted our max health into a string.
There is a float function just like there's an str function.
So I'm going to pass in float and the current health is the parameter I'm going to convert into a float.
And then I'm going to divide that by something else which we do at the forward slash symbol.
And then I'm going to turn the max health into a float.
So I'm going to add another float function.
And I'm going to pass in the max health.
So now we've got this blended color.
We can set our label three demodulate to be this blended color.
In fact actually we don't need an extra variable.
I am going to just set label three demodulate directly to this value here rather than adding an unnecessary
line.
So I'm going to say label three demodulate equals red dot lerp towards white.
And then our ratio of our current health.
So let's run that and see it in action.
So you see it's starting at white, which is a good start.
And we should see that as the enemies hit that base, it gets redder and redder until eventually they
do the final bit of damage and the level reloads a little bit pale, darker, darker, very red.
And the level restarts.
Perfect.
So with that all said and done, we've learnt a bit about how to concatenate strings and how we can
create and manipulate colors in code.
In the next lecture, we are going to be moving on to getting inputs from our mouse so that we can start
figuring out what the player is clicking on.