1 00:00:03,740 --> 00:00:09,260 In this lecture, we're going to be adding the final touches to our quiz canvas by adding a progress 2 00:00:09,260 --> 00:00:12,260 bar to show the player how far they are through our quiz. 3 00:00:13,180 --> 00:00:13,540 Okay. 4 00:00:13,540 --> 00:00:20,230 So to add a new slider to our canvas lets right click on our quiz canvas, head down to UI and then 5 00:00:20,230 --> 00:00:23,170 find the slider option about halfway down. 6 00:00:23,650 --> 00:00:29,410 This is added a very small slider to our canvas, so let's make that a little bit bigger and just move 7 00:00:29,410 --> 00:00:31,150 it to somewhere where we can see it. 8 00:00:31,840 --> 00:00:36,970 And this particular UI element is a little bit more complicated than the other ones we've encountered 9 00:00:36,970 --> 00:00:37,760 so far. 10 00:00:37,780 --> 00:00:40,120 So let's have a look at it and break it down. 11 00:00:40,420 --> 00:00:45,940 First of all, on the root game object, we have this slider component and some of these options may 12 00:00:45,940 --> 00:00:48,600 look familiar from things like the button component. 13 00:00:48,610 --> 00:00:50,590 So we have the intractable toggle. 14 00:00:50,590 --> 00:00:55,960 So whether we can use it or not, we have the transitions so we can change the colors when we click 15 00:00:55,960 --> 00:00:57,280 on it and things like that. 16 00:00:57,280 --> 00:01:02,380 Or if we click on the dropdown, we can do things like Sprite swapping for us, just like our button 17 00:01:02,380 --> 00:01:02,890 component. 18 00:01:02,890 --> 00:01:04,599 We're not going to worry about any of those. 19 00:01:04,599 --> 00:01:07,750 So let's click that to none for now to simplify things down. 20 00:01:08,140 --> 00:01:11,440 We've then got some navigation options, which again we're going to ignore. 21 00:01:11,740 --> 00:01:18,190 We have a fill rect and a handle rect, and these relate to objects that are children of our slider. 22 00:01:18,190 --> 00:01:24,010 So if we look over in the hierarchy and drill down into the children, we'll find the fill object and 23 00:01:24,010 --> 00:01:25,150 the handle object. 24 00:01:25,480 --> 00:01:27,250 Next, we have a direction. 25 00:01:27,250 --> 00:01:31,330 So this at the moment, we'll slide from left to right as we fill it up. 26 00:01:31,690 --> 00:01:34,330 But we could equally change this to one of the other options. 27 00:01:34,330 --> 00:01:39,340 So we might go in the opposite direction, or we might go from top to bottom or bottom to top. 28 00:01:39,820 --> 00:01:42,670 I'm going to leave mine on left to right for now. 29 00:01:43,000 --> 00:01:45,790 We then have a minimum and a maximum value. 30 00:01:45,790 --> 00:01:51,670 So these are the two values that our slider considers home on the left and right of the bar. 31 00:01:51,670 --> 00:01:55,810 So at the moment our slider will go from values 0 to 1. 32 00:01:56,410 --> 00:02:02,500 If we change this to say five, then we'll notice our one is only a fifth of the way through. 33 00:02:02,890 --> 00:02:05,410 Next we have a whole numbers toggle flag. 34 00:02:05,410 --> 00:02:11,380 So at the moment we're in floating point mode, which means we can have values with decimal points after 35 00:02:11,380 --> 00:02:11,770 them. 36 00:02:11,860 --> 00:02:18,640 But if we enable this whole numbers option, our slider will change from a continuous slider to a discrete 37 00:02:18,640 --> 00:02:19,090 slider. 38 00:02:19,090 --> 00:02:21,670 So we will only jump up in whole number increments. 39 00:02:22,000 --> 00:02:27,010 And this is going to be very useful for our game because we're counting how many questions have passed. 40 00:02:27,010 --> 00:02:29,560 So we're only ever going to need whole numbers for this. 41 00:02:29,800 --> 00:02:34,270 And finally, on this component, we have the on value changed event system, which we're not going 42 00:02:34,270 --> 00:02:35,800 to be using for our game. 43 00:02:35,800 --> 00:02:39,790 But this would work very similar to the on click event on our buttons. 44 00:02:39,790 --> 00:02:44,620 So we can run scripts and code based on when the value of the slider gets changed. 45 00:02:44,920 --> 00:02:46,900 So that's the slider component. 46 00:02:46,900 --> 00:02:51,970 And now let's look at some of the children contained within this because there are really three layers 47 00:02:51,970 --> 00:02:53,080 to our slider. 48 00:02:53,080 --> 00:02:57,280 We have the background element, which really is just a simple image component. 49 00:02:57,280 --> 00:03:01,510 So we can do things like changing the color or changing the background sprite. 50 00:03:01,810 --> 00:03:04,660 And underneath that we have the actual fill image. 51 00:03:04,660 --> 00:03:09,550 And just like the background, this is just another image component that sits on top of the background. 52 00:03:09,760 --> 00:03:13,630 So again, we can just go ahead and change the colors to whatever we like. 53 00:03:14,200 --> 00:03:18,610 And finally, we have the handle slide area which contains the handle image. 54 00:03:18,610 --> 00:03:23,140 And again, this is just a normal image component that sits over the top of the other two. 55 00:03:23,140 --> 00:03:25,960 So we can again do things like changing the color. 56 00:03:27,300 --> 00:03:31,600 Now when it comes to using sliders, we don't always want this handle to be present. 57 00:03:31,620 --> 00:03:37,490 It's fine if we're using the slider as an actual slider and need to drag the values up and down to say, 58 00:03:37,740 --> 00:03:40,360 volume levels or things like that in a settings menu. 59 00:03:40,380 --> 00:03:45,000 But sliders are also very good for things like progress bars and health bars. 60 00:03:45,450 --> 00:03:51,810 And because the background fill and handle are really just images, we can quite happily go ahead and 61 00:03:51,810 --> 00:03:57,030 hide them in the inspector and not change any of the functionality of the slider itself. 62 00:03:57,650 --> 00:04:03,410 So since all of the components of a slider are really just images, let's go ahead and set up the slider 63 00:04:03,410 --> 00:04:04,490 for our game. 64 00:04:04,760 --> 00:04:06,980 And that is going to be your challenge. 65 00:04:07,340 --> 00:04:10,780 I want you to set up the progress bar on the quiz canvas. 66 00:04:10,790 --> 00:04:15,950 So think about resizing and positioning your slider wherever you like on the canvas. 67 00:04:15,980 --> 00:04:22,520 Change the background and feel colors or sprites for your slider and set up or disable the handle. 68 00:04:22,550 --> 00:04:25,190 So pause the video now and set that up. 69 00:04:30,580 --> 00:04:31,030 Okay. 70 00:04:31,030 --> 00:04:31,970 Welcome back. 71 00:04:31,990 --> 00:04:37,780 So before I go ahead and position things, I'm going to re enable my pre visualization canvas. 72 00:04:37,780 --> 00:04:43,090 And you can see that I've originally designated our progress bar to sit at the bottom of the canvas. 73 00:04:43,090 --> 00:04:46,420 So let's go ahead and take our slider and reposition it. 74 00:04:46,810 --> 00:04:50,710 I'm going to drag it down and then resize it so it's long and thin. 75 00:04:51,190 --> 00:04:56,170 I can then go ahead and hide our pre visualization canvas and do a final piece of movement. 76 00:04:56,170 --> 00:04:58,480 So I'm just going to raise it up just a tiny bit. 77 00:04:59,260 --> 00:04:59,710 Next. 78 00:04:59,710 --> 00:05:05,140 I don't think this red and purply blue colour scheme is working for me, so I'm going to go on the background. 79 00:05:06,060 --> 00:05:12,060 I'm going to change the background color to white and maybe lower the opacity to around 0.5. 80 00:05:13,410 --> 00:05:19,430 I'm also going to change the source image from the background square image to our neon square image. 81 00:05:19,440 --> 00:05:24,700 And finally, I'm going to change the fill to again use our neon square blue sprite. 82 00:05:24,720 --> 00:05:28,050 But this time I'm just going to tint it to be a lighter blue. 83 00:05:29,850 --> 00:05:35,850 So with our slider all set up on the canvas now let's go ahead and hook it up to our quiz script. 84 00:05:36,360 --> 00:05:40,670 So the first thing we're going to need is a reference to our slider object. 85 00:05:40,680 --> 00:05:46,380 So let's go ahead and add another header for all variables and we'll call this one the progress bar. 86 00:05:47,070 --> 00:05:52,980 And then we're going to need a serialized field of type slider and we'll call this the Progress Bar. 87 00:05:54,450 --> 00:06:00,120 With that set up, we now need to think about how we're going to update our slider and there are many 88 00:06:00,120 --> 00:06:01,290 ways to do this. 89 00:06:01,290 --> 00:06:07,350 But since ours is going to be working in discrete steps, it would make sense to set the sliders maximum 90 00:06:07,350 --> 00:06:10,410 value to the number of questions in our quiz. 91 00:06:10,410 --> 00:06:15,780 And then for every question that we show the player, we can just increment the sliders value by one. 92 00:06:15,780 --> 00:06:23,460 So in start, let's set our progress bars maximum value by writing progress bar max value and we'll 93 00:06:23,460 --> 00:06:26,370 set this to the questions count. 94 00:06:27,270 --> 00:06:32,370 And we're also going to want to set our progress bar dot value to zero. 95 00:06:32,370 --> 00:06:35,700 So that just sets up our starting value for our progress bar. 96 00:06:36,300 --> 00:06:38,520 And then when we go ahead and get a new question. 97 00:06:38,520 --> 00:06:42,750 So let's scroll all the way down to get next question in here. 98 00:06:42,750 --> 00:06:45,900 We're going to want to increment our slider now. 99 00:06:45,900 --> 00:06:50,220 We could go ahead and write a new method for this, but since it's just a single line of code, I think 100 00:06:50,220 --> 00:06:54,000 we can be forgiven for writing it directly in this method. 101 00:06:54,060 --> 00:06:58,230 And we're going to say progress, bar, dot, value plus plus. 102 00:06:58,800 --> 00:07:05,640 Now one last thing I want to do before testing this out is actually to use this progress bar to indicate 103 00:07:05,640 --> 00:07:07,410 when we've reached the end of the game. 104 00:07:07,740 --> 00:07:13,920 So let's head all the way back up to our variables and add one last public variable and this is going 105 00:07:13,920 --> 00:07:20,610 to be a boolean called is complete and this variable is just going to store the state of whether the 106 00:07:20,610 --> 00:07:24,750 quiz is still in progress or whether the player has completed the game. 107 00:07:25,170 --> 00:07:29,430 And to set this flag, we're going to head down to on answers selected. 108 00:07:30,150 --> 00:07:39,450 And in here we're going to say that if the progress bar value is equal to the progress bar max value 109 00:07:40,410 --> 00:07:42,720 then is complete will be true. 110 00:07:43,830 --> 00:07:48,300 And we know this will be the case because our progress bar will be incremented when the question is 111 00:07:48,300 --> 00:07:49,100 shown. 112 00:07:49,110 --> 00:07:55,350 So on the very last question, by the time we've submitted our answer, the progress bar and max value 113 00:07:55,350 --> 00:07:56,380 should match. 114 00:07:56,400 --> 00:08:01,200 So let's go ahead and save that and head back into unity to test our new feature out. 115 00:08:02,210 --> 00:08:05,900 Let's go to our quiz canvas and connect that slider up. 116 00:08:05,930 --> 00:08:08,840 So let's drag down our slider into the progress bar. 117 00:08:10,310 --> 00:08:11,770 Let's go ahead and hit play. 118 00:08:13,490 --> 00:08:18,710 We'll see that our progress bar is around one fifth the way through because we're on our first question. 119 00:08:19,310 --> 00:08:23,930 And as we go ahead and answer our questions and have new ones presented, our slider bar will continue 120 00:08:23,930 --> 00:08:24,760 to go up. 121 00:08:25,460 --> 00:08:28,640 If we just spam through the rest of this quiz very quickly. 122 00:08:29,510 --> 00:08:35,929 Then once we're on our last question well notice the is complete flag isn't checked yet but once we 123 00:08:35,929 --> 00:08:42,230 answer our question, the game is now completed and we're going to use that fact in the next lecture 124 00:08:42,230 --> 00:08:47,900 to display a whole new end screen canvas and reload the level if the player wants to play again. 125 00:08:48,080 --> 00:08:49,490 So I'll see you there.