There were many ways that we could look at changing from one question to the next, but I think using
a timer would be a good idea here.
We can give them a set amount of time to answer the question before automatically showing them the answer.
We can then display that answer for a fixed amount of time before automatically showing them the next
question.
So let's look at how we might implement this almost turn based timer.
So the first thing we need to do is to place the timer onto our canvas.
So let's open up our pre visualization canvas to see where we want to place it.
And I've got mine in the top right corner here and all this really is it's just a plain image where
we're controlling the fill amount.
So over on our quiz canvas lets right click, go down to UI and then bring up an image and we'll call
this the timer image.
Before we move into place, let's drag over our image sprite.
So I'm going to use this neon round orange sprite.
And now if we zoom in a little bit so we can get the positioning correct, we can then drag that into
place.
And now it's just a case of resizing it.
Now with our timer in position, we can go ahead and hide our pre visualization canvas.
And then do any final movement tweaks for our timer based on our current design.
So I'm actually going to bring it down ever so slightly.
And now to make it act like a timer that's going to empty over time, let's go down to the image component
and where we've got the image type.
We've previously changed this to sliced for our buttons, but this time we're going to change this to
filled.
Now this has given us a whole bunch of extra options.
So as it's set up at the moment with radial 360 from the bottom, if we go ahead and decrease the fill
amount, we'll notice that it starts to carve away at our image.
Now, I think the radial 360 is going to be fine for us, but if you want a different one then you can
just select it from the dropdown for the Fill Origin.
I'm actually going to change this to the top and rather than going clockwise to fill it up, we're going
to go anti-clockwise or counterclockwise so that as we reduce the full amount, it starts to go down
a bit more like a clock.
And now it's time to create a new script which is going to control how this timer works.
So in our scripts folder lets right click and create a new script.
Ammar, call this the timer.
As for where we're going to place this timer in our game, we could reasonably put it wherever we think
is most sensible, so we might put it on the quiz canvas itself.
But I think I'm going to create a new empty object and just call it the timer.
This is a fairly separate component from the actual quiz mechanic itself, so it makes sense to be on
its own object.
Now, before we go ahead and write any code, let's think about what our timer script needs to do.
Well, first, it's going to need to know what state the game is in.
So is the player currently answering a question or are they being shown the answer?
Next, the time is going to need to know if the time has run out for one of those given states.
If it hasn't, then we're going to need to keep track of the fill amount for the timer image on the
canvas.
And when the time runs out, we're going to want to change the state of our game.
So if we're currently in the answering question state, we're going to move over into the showing answer
state and vice versa.
So let's jump over into our script and the waste.
I'm going to delete the comments above the start and update, and I'm also going to get rid of the START
method because we're not going to need it.
One important thing for our timer, though, is to keep track of how long we've got left for our question.
So let's do this with a float variable.
So we'll have a float and I'll call this the timer value.
And to set this timer value, we're going to have two other float variables.
One, for the amount of time we have to answer the question and another one for how long.
We've got to review our answers.
So let's make these serialized fields and they're both going to be of Type Float.
The first one I'm going to call Time to Complete Question.
And we'll maybe give the player 30 seconds for that one.
And the second one another serialized field of type float and we'll call this one time to show correct
answer.
And let's maybe give this 110 seconds.
So for our game, we're going to have a 32nd window to answer the question.
And once that time has elapsed, we'll have a 10/2 review of the answer before we eventually flip back
to the next question and give it another 30 seconds on the clock with those sets up.
Now, let's think about the methods that this timer script is going to need.
Well, the main purpose is really going to be to update this time of value based on the state of the
game.
So let's get this updating, first of all.
Now, we could do this all in update, but I'm actually going to create its own method just for readability.
So let's say void update timer.
And every frame of our game.
We want to be reducing this time of value.
And we can do that by saying time of value minus equals time, dot delta time.
So every frame of our game, we're going to shave off a little bit of time from our timer value.
Now, if you've never seen this minus equals syntax before, this is really just a useful shorthand
that we can use.
And what it essentially does is takes the value on the left and takes that and subtracts the amount
on the right.
So another way that we could write this in a longer format would be time of value equals the time of
value minus time dot delta time.
So here we're taking our initial timer value and we're then setting this equal to what it was before
minus time, delta time.
So that's what this minus equals syntax does.
So to save us a bit of time, rather than having to write all of this out, we can just use this nice
shorthand syntax to collapse our lines and make them shorter.
And then once our timer reaches zero, we want to set it to either our time to complete question or
our time to show correct answer.
Now, we'll build that in a second.
For now, let's just get it counting down so we can say that if the timer value is less than or equal
to zero, then we want to reset the timer value.
So for now, I'm just going to set our timer value equal to the time to complete question and so that
we can test this in unity and see what it's doing.
Let's add a debug log message at the bottom here, which is just going to print out our timer value.
And finally, to call this method, let's go to our update method and call update timer.
So if we save our script here and jump back into unity.
If we had over to our console so we can see our log messages and we can just clear this warning for
the moment that's going to be cleared up later on.
Next, let's click on our timer in our hierarchy and let's just lower this time to complete question
to something fairly short so we don't have to sit here forever testing it.
So I'm going to set it to five and hit play.
And now in the console, we'll say that it slowly ticks down from five down to zero.
And then once it hit zero, it goes back to five and carries on counting down.
So we've got a nice cyclical timer here just based on our one variable.
So let's come out of play mode and set our variable back to around 30 seconds.
Now we've done testing that timer functionality.
And if we had back into our script, the next thing we want to think about is how we're going to switch
between our time to complete.
Next question and our time to show correct answer.
For this, I'm going to need another variable and I'm going to pop it above the timer value because
I'm actually going to make this one public for now because over in our quiz script, we're going to
want to have access to this variable and we could go through the process of creating getter methods
and things like that.
But for such a small game, I don't think it's going to be much of a problem.
So we're going to have a public ball and we're going to call this is answering question.
And initially we're going to set this to false with that or set up now I think is a good chance for
a challenge.
So your challenge for this lecture will be to change the state of our is answering question when our
timer value reaches zero.
So this will be down in our update timer method.
Then once you've changed the state list, I want you to think about setting the timer value to match
the state that we're in.
So if is answering question is true, when the timer runs out, we want to set that to false and change
the timer value to the time to show correct answer.
Otherwise, we essentially want to do the opposite.
So see if you can get your timer flipping between these two states.
Pause a video now and give that a go.
Okay.
Welcome back.
So let's head down to our update time and method.
And in here, we first of all want to say that if is answering question is true, then if our timer
value is less than or equal to zero.
Then we want our timer value to be equal to the time to show correct answer.
And in here as well we're also going to toggle the state of our is answering question boolean so we're
going to say is answering question equals false.
So if it is true and we've run out of time, we're going to say that the question is now false and we're
going to change over to our showing of the correct answer.
Otherwise, if answering question is false, we can say else.
And then we also again want to ask if the timer value is less than or equal to zero, then is answering
question is going to be set back to true.
So again, we're just flipping the state of our timer and we're going to switch our timer value equal
to the time to complete question.
We don't need this final if statement anymore.
So let's get rid of that.
And if we again save and jump back over into unity.
I said we could change this back to 30, but we aren't done testing yet.
So let's change the time to complete question to five and we'll keep the time to show correct answer
as ten for now.
So if we go ahead and hit play, we should find that it starts counting down from five and then when
it reaches zero, it'll flick over to 10 seconds and this will slowly count down.
And then when this reaches zero, it'll flip back to five.
So we've now got a nice timer that's flipping back between 5 seconds and 10 seconds.
That's pretty much the bones of our timer now working.
And in the next lecture, we're going to start paying a bit more attention to the fill image for our
timer and calculating the fill fraction.
So I'll see you there.