In this lecture, we're going to be adding the final touches to our quiz canvas by adding a progress
bar to show the player how far they are through our quiz.
Okay.
So to add a new slider to our canvas lets right click on our quiz canvas, head down to UI and then
find the slider option about halfway down.
This is added a very small slider to our canvas, so let's make that a little bit bigger and just move
it to somewhere where we can see it.
And this particular UI element is a little bit more complicated than the other ones we've encountered
so far.
So let's have a look at it and break it down.
First of all, on the root game object, we have this slider component and some of these options may
look familiar from things like the button component.
So we have the intractable toggle.
So whether we can use it or not, we have the transitions so we can change the colors when we click
on it and things like that.
Or if we click on the dropdown, we can do things like Sprite swapping for us, just like our button
component.
We're not going to worry about any of those.
So let's click that to none for now to simplify things down.
We've then got some navigation options, which again we're going to ignore.
We have a fill rect and a handle rect, and these relate to objects that are children of our slider.
So if we look over in the hierarchy and drill down into the children, we'll find the fill object and
the handle object.
Next, we have a direction.
So this at the moment, we'll slide from left to right as we fill it up.
But we could equally change this to one of the other options.
So we might go in the opposite direction, or we might go from top to bottom or bottom to top.
I'm going to leave mine on left to right for now.
We then have a minimum and a maximum value.
So these are the two values that our slider considers home on the left and right of the bar.
So at the moment our slider will go from values 0 to 1.
If we change this to say five, then we'll notice our one is only a fifth of the way through.
Next we have a whole numbers toggle flag.
So at the moment we're in floating point mode, which means we can have values with decimal points after
them.
But if we enable this whole numbers option, our slider will change from a continuous slider to a discrete
slider.
So we will only jump up in whole number increments.
And this is going to be very useful for our game because we're counting how many questions have passed.
So we're only ever going to need whole numbers for this.
And finally, on this component, we have the on value changed event system, which we're not going
to be using for our game.
But this would work very similar to the on click event on our buttons.
So we can run scripts and code based on when the value of the slider gets changed.
So that's the slider component.
And now let's look at some of the children contained within this because there are really three layers
to our slider.
We have the background element, which really is just a simple image component.
So we can do things like changing the color or changing the background sprite.
And underneath that we have the actual fill image.
And just like the background, this is just another image component that sits on top of the background.
So again, we can just go ahead and change the colors to whatever we like.
And finally, we have the handle slide area which contains the handle image.
And again, this is just a normal image component that sits over the top of the other two.
So we can again do things like changing the color.
Now when it comes to using sliders, we don't always want this handle to be present.
It's fine if we're using the slider as an actual slider and need to drag the values up and down to say,
volume levels or things like that in a settings menu.
But sliders are also very good for things like progress bars and health bars.
And because the background fill and handle are really just images, we can quite happily go ahead and
hide them in the inspector and not change any of the functionality of the slider itself.
So since all of the components of a slider are really just images, let's go ahead and set up the slider
for our game.
And that is going to be your challenge.
I want you to set up the progress bar on the quiz canvas.
So think about resizing and positioning your slider wherever you like on the canvas.
Change the background and feel colors or sprites for your slider and set up or disable the handle.
So pause the video now and set that up.
Okay.
Welcome back.
So before I go ahead and position things, I'm going to re enable my pre visualization canvas.
And you can see that I've originally designated our progress bar to sit at the bottom of the canvas.
So let's go ahead and take our slider and reposition it.
I'm going to drag it down and then resize it so it's long and thin.
I can then go ahead and hide our pre visualization canvas and do a final piece of movement.
So I'm just going to raise it up just a tiny bit.
Next.
I don't think this red and purply blue colour scheme is working for me, so I'm going to go on the background.
I'm going to change the background color to white and maybe lower the opacity to around 0.5.
I'm also going to change the source image from the background square image to our neon square image.
And finally, I'm going to change the fill to again use our neon square blue sprite.
But this time I'm just going to tint it to be a lighter blue.
So with our slider all set up on the canvas now let's go ahead and hook it up to our quiz script.
So the first thing we're going to need is a reference to our slider object.
So let's go ahead and add another header for all variables and we'll call this one the progress bar.
And then we're going to need a serialized field of type slider and we'll call this the Progress Bar.
With that set up, we now need to think about how we're going to update our slider and there are many
ways to do this.
But since ours is going to be working in discrete steps, it would make sense to set the sliders maximum
value to the number of questions in our quiz.
And then for every question that we show the player, we can just increment the sliders value by one.
So in start, let's set our progress bars maximum value by writing progress bar max value and we'll
set this to the questions count.
And we're also going to want to set our progress bar dot value to zero.
So that just sets up our starting value for our progress bar.
And then when we go ahead and get a new question.
So let's scroll all the way down to get next question in here.
We're going to want to increment our slider now.
We could go ahead and write a new method for this, but since it's just a single line of code, I think
we can be forgiven for writing it directly in this method.
And we're going to say progress, bar, dot, value plus plus.
Now one last thing I want to do before testing this out is actually to use this progress bar to indicate
when we've reached the end of the game.
So let's head all the way back up to our variables and add one last public variable and this is going
to be a boolean called is complete and this variable is just going to store the state of whether the
quiz is still in progress or whether the player has completed the game.
And to set this flag, we're going to head down to on answers selected.
And in here we're going to say that if the progress bar value is equal to the progress bar max value
then is complete will be true.
And we know this will be the case because our progress bar will be incremented when the question is
shown.
So on the very last question, by the time we've submitted our answer, the progress bar and max value
should match.
So let's go ahead and save that and head back into unity to test our new feature out.
Let's go to our quiz canvas and connect that slider up.
So let's drag down our slider into the progress bar.
Let's go ahead and hit play.
We'll see that our progress bar is around one fifth the way through because we're on our first question.
And as we go ahead and answer our questions and have new ones presented, our slider bar will continue
to go up.
If we just spam through the rest of this quiz very quickly.
Then once we're on our last question well notice the is complete flag isn't checked yet but once we
answer our question, the game is now completed and we're going to use that fact in the next lecture
to display a whole new end screen canvas and reload the level if the player wants to play again.
So I'll see you there.