Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated: 1 1 00:00:00,000 --> 00:00:03,941 [MUSIC] 2 2 00:00:03,941 --> 00:00:06,359 Hey in this video I'm going to start with a challenge, 3 3 00:00:06,359 --> 00:00:09,000 I want you to create an options screen that looks like this. 4 4 00:00:09,000 --> 00:00:12,150 Sometimes a designer will hand you a piece of paper or a image and 5 5 00:00:12,150 --> 00:00:13,260 say make me one of these. 6 6 00:00:13,260 --> 00:00:17,870 So you need to have a heading, need to have a couple of text fields, 7 7 00:00:17,870 --> 00:00:18,550 couple of buttons. 8 8 00:00:18,550 --> 00:00:23,660 This button is the default button this is the back button and then sliders so 9 9 00:00:23,660 --> 00:00:27,560 that the player can be sliding the volume up and down and 10 10 00:00:27,560 --> 00:00:29,060 sliding the difficulty up and down. 11 11 00:00:29,060 --> 00:00:31,070 So go ahead and make this screen. 12 12 00:00:31,070 --> 00:00:35,170 Also for bonus points, implement that the Back button takes you back to the Start 13 13 00:00:35,170 --> 00:00:36,970 menu or the Start screen. 14 14 00:00:36,970 --> 00:00:38,060 And on the Start screen, 15 15 00:00:38,060 --> 00:00:42,010 you have an Options button that takes you to the Options screen. 16 16 00:00:42,010 --> 00:00:44,410 So there it is, there's your challenge, jump in and take that on now, and 17 17 00:00:44,410 --> 00:00:45,860 I'll see you back here when you're done. 18 18 00:00:45,860 --> 00:00:50,624 I'm gonna start by finding my Start Screen and duplicating that, 19 19 00:00:50,624 --> 00:00:54,038 renaming my Start Screen to be Options Screen. 20 20 00:00:56,382 --> 00:00:59,380 Then open up Options Screen, yes, it's opened up. 21 21 00:00:59,380 --> 00:01:01,240 Find the Canvas, find the Image. 22 22 00:01:01,240 --> 00:01:05,640 I'm gonna change my image, I've gone and downloaded one of the other glitch images. 23 23 00:01:05,640 --> 00:01:10,860 Let me just find Images folder here, yes, drag that image in. 24 24 00:01:10,860 --> 00:01:13,140 It's kind of a cool mushroom vendor guy. 25 25 00:01:13,140 --> 00:01:15,180 It looks pretty cool, I quite like that one. 26 26 00:01:15,180 --> 00:01:17,990 And then here we are, Glitch_Meal, I'm just gonna rename this to being 27 27 00:01:17,990 --> 00:01:23,790 Options Screen Image, so it's very clear what's going on. 28 28 00:01:23,790 --> 00:01:30,130 Find my image Game object and then drag in Options Screen Image. 29 29 00:01:30,130 --> 00:01:32,270 There we go, one cool change, wonderful. 30 30 00:01:32,270 --> 00:01:35,460 Okay, now let's find our Start Text, it's no longer Start Text, 31 31 00:01:35,460 --> 00:01:40,460 it's gonna be Options Heading, I'll call it Options Heading. 32 32 00:01:40,460 --> 00:01:44,469 Great, change it to an orangey color I think? 33 33 00:01:45,880 --> 00:01:46,950 There we go, just to be clear. 34 34 00:01:46,950 --> 00:01:48,870 Click on W, move it over. 35 35 00:01:48,870 --> 00:01:52,910 Probably left align cuz I'm gonna have it over the left side of my screen. 36 36 00:01:52,910 --> 00:01:53,824 There we go. 37 37 00:01:53,824 --> 00:01:58,512 I'm gonna make it a little bit bigger cuz it's a heading, 140, nice and big. 38 38 00:01:58,512 --> 00:02:02,350 Okay, instead of saying Start Game, it should say, Options. 39 39 00:02:02,350 --> 00:02:06,020 And grab the quick text, change that to be the back, 40 40 00:02:06,020 --> 00:02:10,090 button and from quick, it's gonna say back. 41 41 00:02:10,090 --> 00:02:11,420 It's probably not quick text, is it? 42 42 00:02:11,420 --> 00:02:14,160 It's probably quick button, but okay, no problem. 43 43 00:02:14,160 --> 00:02:16,430 And back down here make this bigger as well. 44 44 00:02:16,430 --> 00:02:20,490 I'll make it say 125, see how that looks. 45 45 00:02:20,490 --> 00:02:24,110 I'll weight this one 140 as well, just to be really clear, that's how we get back. 46 46 00:02:25,410 --> 00:02:28,230 And then one more button that we need, click on back button, 47 47 00:02:28,230 --> 00:02:32,150 duplicate this, rename it to be default button. 48 48 00:02:33,300 --> 00:02:36,830 The text I'm gonna change to be Default and 49 49 00:02:36,830 --> 00:02:40,090 then click, move it on over a little bit. 50 50 00:02:40,090 --> 00:02:41,820 So it's in the middle of the screen. 51 51 00:02:41,820 --> 00:02:44,600 It's gonna be a little bit in conflict with this whole Glitch heading here, but 52 52 00:02:44,600 --> 00:02:46,090 I'm ignoring that for now. 53 53 00:02:46,090 --> 00:02:48,970 Not very good design, but we're working with the images that we've got, so 54 54 00:02:48,970 --> 00:02:51,420 Default, Back, and Options. 55 55 00:02:51,420 --> 00:02:56,640 Now we need some text, so click on Options heading, duplicate that. 56 56 00:02:56,640 --> 00:02:59,180 Highlight this, change it to. 57 57 00:02:59,180 --> 00:03:01,026 Volume is gonna be the first one. 58 58 00:03:01,026 --> 00:03:03,508 Volume, drag it down a little bit. 59 59 00:03:03,508 --> 00:03:07,015 [SOUND] Change the color to something that doesn't say, 60 60 00:03:07,015 --> 00:03:10,082 I'm a button and doesn't say, I'm a heading. 61 61 00:03:10,082 --> 00:03:13,340 Change it to this bluey kinda thing, I think. 62 62 00:03:13,340 --> 00:03:15,200 Make the size smaller, down to 80. 63 63 00:03:15,200 --> 00:03:15,830 How's that? 64 64 00:03:15,830 --> 00:03:17,600 80, probably a little bit too small. 65 65 00:03:17,600 --> 00:03:19,090 100, okay. 66 66 00:03:19,090 --> 00:03:22,350 100 Options, I'm probably gonna change this color. 67 67 00:03:22,350 --> 00:03:24,210 Looking at it now, I don't think it quite works, but 68 68 00:03:24,210 --> 00:03:26,390 wait until we've got everything else lined up first. 69 69 00:03:26,390 --> 00:03:29,070 So change this to be, say, Volume. 70 70 00:03:29,070 --> 00:03:30,820 At the very top, Volume, that's fine. 71 71 00:03:30,820 --> 00:03:36,000 Volume, I will call it Volume Text to differentiate that it is text and 72 72 00:03:36,000 --> 00:03:37,540 not the slider we'll have in a minute. 73 73 00:03:37,540 --> 00:03:39,540 So Duplicate that as well. 74 74 00:03:39,540 --> 00:03:46,200 This will be called Difficulty Text, the text will be called Difficulty. 75 75 00:03:47,500 --> 00:03:49,160 Okay, slide that down a little bit. 76 76 00:03:49,160 --> 00:03:52,180 Okay, that's most of it stubbed out, now we need our sliders. 77 77 00:03:52,180 --> 00:03:59,220 So underneath Canvas, I'm gonna right-click UI, find a Slider. 78 78 00:03:59,220 --> 00:04:03,370 Excellent it's nice and tiny at the moment, let's scale it up. 79 79 00:04:03,370 --> 00:04:07,913 Clicking on my R tool, [SOUND] make it nice and bigger. 80 80 00:04:07,913 --> 00:04:11,158 Okay, that's around a bit so it looks like it's a 5. 81 81 00:04:11,158 --> 00:04:16,120 5, 5, 5, nice and huge, probably don't need it quite that big, 82 82 00:04:16,120 --> 00:04:19,100 but we'll start there and make it a bit smaller if need be. 83 83 00:04:19,100 --> 00:04:21,230 So there's our Volume. 84 84 00:04:21,230 --> 00:04:24,230 Okay, quite massive, kind of bumping into the guy's face. 85 85 00:04:24,230 --> 00:04:27,000 But we'll get it all stubbed in first, and then we'll finesse it in a moment. 86 86 00:04:27,000 --> 00:04:32,240 So instead of slider, this needs to be Volume Slider, excellent. 87 87 00:04:32,240 --> 00:04:35,520 And then we will duplicate that, actually you know what, 88 88 00:04:35,520 --> 00:04:36,340 I'll change it up a little bit. 89 89 00:04:36,340 --> 00:04:40,160 First I'm going to the handle slide area. 90 90 00:04:40,160 --> 00:04:42,080 We're gonna change, we've done this before, the image, 91 91 00:04:42,080 --> 00:04:45,280 instead of using the knob, I'm gonna find the star. 92 92 00:04:45,280 --> 00:04:48,980 There you are, have a little star on there that we can slide up and down. 93 93 00:04:48,980 --> 00:04:50,410 Okay there we go to our star slider. 94 94 00:04:50,410 --> 00:04:54,280 Now let's click on the volume slider, duplicate that, and 95 95 00:04:54,280 --> 00:04:57,060 change this to be Difficulty Slider. 96 96 00:04:58,440 --> 00:05:01,350 And I encourage you to do your own finessing here. 97 97 00:05:01,350 --> 00:05:02,390 Change it up. 98 98 00:05:02,390 --> 00:05:04,310 Create something that you think looks nifty. 99 99 00:05:04,310 --> 00:05:05,490 We've gone through this before. 100 100 00:05:05,490 --> 00:05:07,590 Animated sliders, they're really good. 101 101 00:05:07,590 --> 00:05:09,330 So I think it is a little bit too big. 102 102 00:05:09,330 --> 00:05:11,500 Go back to Volume Slider, change it to 4. 103 103 00:05:11,500 --> 00:05:15,290 I think it's gonna fit on the page a little bit better. 104 104 00:05:15,290 --> 00:05:18,845 Okay, good, good move it a little bit to the left, 105 105 00:05:18,845 --> 00:05:23,172 there we go and we'll do the same with our difficulty slider. 106 106 00:05:23,172 --> 00:05:26,113 Just change the scale from 5 down to 4. 107 107 00:05:31,009 --> 00:05:35,063 Now I'm going to change up the color, I'm going to click on the Volume slider, 108 108 00:05:35,063 --> 00:05:36,393 just put it in the middle so 109 109 00:05:36,393 --> 00:05:39,380 I can see what happens on my left into the right of the star. 110 110 00:05:39,380 --> 00:05:41,970 Let's have a look at the background here. 111 111 00:05:41,970 --> 00:05:44,900 If I change the background to be say a red. 112 112 00:05:44,900 --> 00:05:47,910 That kind of says I'm not here yet, that's okay. 113 113 00:05:47,910 --> 00:05:49,930 I can make it a darkish red. 114 114 00:05:49,930 --> 00:05:52,440 And then we'll see if we can find the fill area. 115 115 00:05:52,440 --> 00:05:55,190 Click on fill underneath fill area. 116 116 00:05:55,190 --> 00:05:57,650 The color here will make the same color as the text. 117 117 00:05:57,650 --> 00:06:00,140 So this bluish kind of color. 118 118 00:06:00,140 --> 00:06:03,310 Okay, so that way, as we're sliding, click on Volume Slider, 119 119 00:06:03,310 --> 00:06:07,910 as we're sliding it's kinda going from I'm filled up with blue, 120 120 00:06:07,910 --> 00:06:11,550 versus I'm not filled up with that last little bit of the red there, okay, 121 121 00:06:11,550 --> 00:06:14,040 to give a visual indication to the player. 122 122 00:06:14,040 --> 00:06:17,020 And then Difficulty, yeah, we'll do the same for Difficulty, as well. 123 123 00:06:17,020 --> 00:06:21,190 So let me go and Find my Background here, click on the red, highlight 124 124 00:06:21,190 --> 00:06:26,190 the hexadecimal code and then go over into the difficulty slider background, 125 125 00:06:26,190 --> 00:06:28,750 click on the color, paste in the hexadecimal. 126 126 00:06:29,840 --> 00:06:32,770 Now we want to slide our slider along a little bit so 127 127 00:06:32,770 --> 00:06:34,300 we can see that it's working. 128 128 00:06:34,300 --> 00:06:37,830 Click on the Fill for 129 129 00:06:37,830 --> 00:06:42,740 the fill area for the other one, for the Volume slider, copy that. 130 130 00:06:42,740 --> 00:06:48,150 And then to paste that into the Fill underneath Fill Area for 131 131 00:06:48,150 --> 00:06:49,770 the Difficulty slider. 132 132 00:06:49,770 --> 00:06:51,540 I know that's a lot of bouncing around. 133 133 00:06:51,540 --> 00:06:55,230 Okay, Save that up, now we need to get the functionality for the Back button. 134 134 00:06:55,230 --> 00:06:57,950 We won't have Defaults just yet, but for the Back button. 135 135 00:06:57,950 --> 00:07:01,010 Okay, let's just check, yes, we have Level Loader in the screen. 136 136 00:07:01,010 --> 00:07:01,870 We will now go and 137 137 00:07:01,870 --> 00:07:05,960 click on the Back Button which already had functionality I think of the Quick Button. 138 138 00:07:05,960 --> 00:07:06,640 Yes it did. 139 139 00:07:06,640 --> 00:07:14,020 So I'll change the Quick Button to be LevelLoader LoadMainMenu, okay. 140 140 00:07:14,020 --> 00:07:18,029 And then Default, we don't want Default to accidentally break the game, so 141 141 00:07:18,029 --> 00:07:22,222 for now I'm going to give it No Function, just to say that when you click on that, 142 142 00:07:22,222 --> 00:07:23,224 nothing happens. 143 143 00:07:26,090 --> 00:07:30,169 So let's save this up, go back into our Start menu, 144 144 00:07:30,169 --> 00:07:34,173 Start Scene, [SOUND], Start Screen, there it is. 145 145 00:07:34,173 --> 00:07:37,630 And we need to add an extra button within here, which is Options. 146 146 00:07:37,630 --> 00:07:39,470 So open up our Canvas. 147 147 00:07:39,470 --> 00:07:44,080 Click on start game which is not start text but start button. 148 148 00:07:44,080 --> 00:07:47,510 I'm gonna change this while I'm here, start button, and it's not quick text but 149 149 00:07:47,510 --> 00:07:48,600 it is quick button. 150 150 00:07:48,600 --> 00:07:52,410 How about naming button up, Ben would be very proud, 151 151 00:07:52,410 --> 00:07:55,260 he's very into having things named. 152 152 00:07:55,260 --> 00:07:56,950 Exactly the way it should be. 153 153 00:07:56,950 --> 00:08:00,230 So thank you to Ben for instilling that in us. 154 154 00:08:00,230 --> 00:08:04,980 Click on Start Button, duplicate, drag that down a little bit. 155 155 00:08:04,980 --> 00:08:09,500 Instead of Start Game, we are going to call this the Options Button. 156 156 00:08:11,680 --> 00:08:15,030 And then in the text we have Options. 157 157 00:08:15,030 --> 00:08:17,720 Okay, start game, options and quit. 158 158 00:08:17,720 --> 00:08:19,930 Our three things in there, let's scroll down. 159 159 00:08:19,930 --> 00:08:25,170 Now we haven't added this to our build index so file, build settings, 160 160 00:08:25,170 --> 00:08:27,210 let's find our options screen. 161 161 00:08:27,210 --> 00:08:33,890 I'm going to put that, let's see, we wanna go straight from splash screen 162 162 00:08:33,890 --> 00:08:37,290 to start screen, start screen to level one it's kind of the flow that we're doing. 163 163 00:08:37,290 --> 00:08:42,790 So put this as the second to last, at some point we'll have a, 164 164 00:08:42,790 --> 00:08:45,960 you win the entire game screen, which would be after all of our levels. 165 165 00:08:45,960 --> 00:08:48,300 But at the moment we'll put our options screen just there for me. 166 166 00:08:48,300 --> 00:08:52,810 It's build index four Close that up, we need to give ourselves some functionality, 167 167 00:08:52,810 --> 00:08:55,870 so open up your level loader script. 168 168 00:08:55,870 --> 00:08:58,570 I don't think we've got that at the moment, start screen, lose screen, 169 169 00:08:58,570 --> 00:08:59,600 no we don't. 170 170 00:08:59,600 --> 00:09:04,662 So I'm gonna highlight my LoadMainMenu, copy that. 171 171 00:09:04,662 --> 00:09:09,610 So I'm in LevelLoader, I found LoadMainMenu method, 172 172 00:09:09,610 --> 00:09:14,874 and I'm hollowing that, copying pasting underneath it, 173 173 00:09:14,874 --> 00:09:20,034 and we're going to create ourselves a new public method, 174 174 00:09:20,034 --> 00:09:24,584 public void LoadOptionsScreen we'll call this. 175 175 00:09:24,584 --> 00:09:28,310 And timeScale nope, we don't want to be messing around with that 176 176 00:09:28,310 --> 00:09:33,000 SceneManager.LoadScene, back over into Unity to make sure we copy it exactly. 177 177 00:09:33,000 --> 00:09:37,030 We've called Options Screen, so I'll highlight that, copy that, 178 178 00:09:37,030 --> 00:09:41,395 back over into our script, paste that as our string reference. 179 179 00:09:41,395 --> 00:09:43,718 [SOUND] We don't like string references, but 180 180 00:09:43,718 --> 00:09:46,293 sometimes we use them because we need to use them. 181 181 00:09:46,293 --> 00:09:50,870 LoadOptionsScreen, now we can go into the Options Button. 182 182 00:09:50,870 --> 00:09:53,300 Click on the Options Button, scroll all the way down the bottom. 183 183 00:09:53,300 --> 00:09:58,090 Instead of LoadNextScene, we're gonna change that to be LevelLoader and 184 184 00:09:58,090 --> 00:10:00,230 LoadOptionsScreen. 185 185 00:10:00,230 --> 00:10:05,230 Great, Save, click on Play, check that it all works. 186 186 00:10:05,230 --> 00:10:07,460 Click on options takes us into our options screen. 187 187 00:10:07,460 --> 00:10:08,970 We can twiddle our sliders. 188 188 00:10:08,970 --> 00:10:10,900 Well, that actually doesn't look too bad, does it? 189 189 00:10:10,900 --> 00:10:14,650 And clicking Defaults does nothing yet, click on Back, Back into the start screen. 190 190 00:10:14,650 --> 00:10:16,980 Back boom boom, just check Start Game works. 191 191 00:10:16,980 --> 00:10:20,480 So it does, excellent, mission accomplished, success, great work. 192 192 00:10:20,480 --> 00:10:23,390 In our next video we'll start hooking up some functionality 193 193 00:10:23,390 --> 00:10:26,490 in our Options screen so we can get it doing some cool stuff. 194 194 00:10:26,490 --> 00:10:28,350 Okay, great work and I'll see you in the next video. 19097