Our game is now mostly working.
But when we get to the final question, the game just seems to stop.
So in this lecture, we're going to finish off the experience with a wind screen that will show the
player their final score and also give them the option to play again.
We're also going to be fixing a minor bug that we left in the last lecture, which is all to do with
our slider, because at the moment the player could, in theory, click on the slider and change the
value to whatever they like, potentially ending the game early.
So let's fix our slider bug first.
So over on the quiz canvas, let's go down to our slider.
And it's really just as simple as changing this interactive toggle to be off.
This will prevent the player from being able to interact with it, and it will now only move based on
the code that we've written for it.
So with bug fixed now let's think about our windscreen.
So for now, I'm going to hide my quiz canvas.
I'm going to re-enable my pre visualization canvas.
And because we're now done with our core game screen, what I'm going to do instead is on the image.
I'm just going to drag over the end screen pre visualization that I've got here.
So pre visualization set, it's now time to create our windscreen canvas.
And that is going to be your challenge using all the knowledge that you've gained in this section so
far.
I want you to set up your new windscreen canvas in the hierarchy.
On this new canvas, I want you to add a text field that we can use to display the final score.
And I also want you to add a button so that the player can choose to reload the game if they want.
Now, we're only worried about setting up the UI elements at this point and not the code that drives
it all.
So pause the video now and give that a go.
Okay.
Welcome back.
So let's set up a new canvas by right clicking in the hierarchy, going to UI and then canvas, and
we'll call this the win canvas.
Now, before I go and add any other elements, the first thing I want to do is go to my canvas component
and just change the sort order to two.
This will then make sure that it always appears above our quiz canvas and also above our background
canvas.
Next, let's go ahead and add some text.
So right click on our win canvas down to UI and then up to text text mesh pro.
Let's roughly drag it into position.
Let's set some dummy text to maybe congratulations.
You scored and then a default score.
Then we'll change the font size and we'll make this maybe 65.
I won't change the alignment options to middle and center.
With that set up.
Let's also give it a half decent name in the hierarchy.
So let's call this the final score text.
And finally, let's add a new button.
So right click on our win canvas down to UI and then up to button text mesh pro.
Let's call this the replay button.
Drag it into position.
And for this button I'm going to change the source image.
So over in our sprites I'm going to drag over the Neon Orange Square.
And rather than directly following my visualization, I think I'm going to make it a little bit shorter
and a little bit fatter.
Let's quickly center that.
And then down on our button component.
We don't need the color transition.
So we'll clear that off for now and we will be setting up the on click later on.
We drill down into the text object on the button.
Let's go ahead and change the text to play again.
Let's set the font size again to around 65 and I'm going to change the vertex color to be pure black.
So with our canvas now set up, let's go ahead and hide our pre visualization canvas.
And I think that's not looking too bad.
The last step is to tidy up our hierarchy a little bit.
So I'm going to drag my win canvas to be underneath my quiz canvas so that all of my canvases are together.
And I'm also going to go ahead and delete my pre visualization canvas because I'm no longer going to
need it.
Okay, so hierarchy all tidied up.
It's now time to write a script for our canvas.
So just like we had the quiz script in our quiz canvas, we're going to have a script that controls
the elements on our win canvas.
So over in our scripts folder, let's create a new script and let's think about a name.
Now, I don't think when is a particularly good name for a script, so I'm going to call this the end
screen dot CSS.
Let's drag that over onto our win canvas and then go ahead and open it up.
In this script, we're not going to need our update method.
So let's clear that out of the way and also get rid of our comment above the start method.
We're not really going to need access to the button on the canvas, but we will need access to the text
field.
So at the very top, remember, we need to include a using statement for our text mesh pro field.
So using TM pro and then inside the class itself, we can add a serialized field of type text mesh pro.
You go and we'll call this the final score text.
And since we're going to need to display the score, we're going to need access to our scorekeeper there.
We'll call that scorekeeper as well.
Down in start, let's find the reference to that scorekeeper so we can say scorekeeper equals find object
of type scorekeeper.
And finally, let's create a method to update the final score when the end screen is shown.
Now, there are a couple of good ways to do this, but I'm just going to use a standard public method,
which we're very familiar with, that we can then later call from another script.
So let's call this a public void show, final score.
And all this needs to do is update the final score, text, text to be equal to our congratulations
message.
So congratulations.
Then we'll add a new line character.
So the second part of our message will appear on a second line and finish it off with you.
Got a score of our scorekeeper dot calculate score.
Let's also consider adding our final percentage sign there as well.
And because this line is very long.
Let's hide our sidebar and also let's just break this onto a second line.
And because C-sharp doesn't care about whitespace, this is absolutely fine to do.
The only real caveat is that it needs to be broken in the right place.
So here we're adding something to our string.
So it's a good place to break on this line.
If we broke in the middle of a string, then we'd definitely get some weird errors.
So as long as you're careful about where you decide to break your lines, the compiler really won't
care that much.
Let's go ahead and save our script and jump back over into unity.
Then on our win canvas, let's scroll down to our end screen script and just drag over our final score
text.
With that set up.
Unfortunately, we're not currently in a state where we can really test it because we're still lacking
the key component that will switch between our quiz canvas and our win canvas.
So in the next lecture, we're going to finally finish up our game by adding in a game manager, which
will do all of that work for us and also allow us to reload our game.
So I'll see you there.