Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated: 1 1 00:00:00,432 --> 00:00:04,222 [MUSIC] 2 2 00:00:04,222 --> 00:00:06,621 In this video we'll be creating our success levels so 3 3 00:00:06,621 --> 00:00:10,139 that when the player reaches the very end of your game there is a scene that loads 4 4 00:00:10,139 --> 00:00:11,384 where they can run around. 5 5 00:00:11,384 --> 00:00:14,061 Some sort of congratulations, winner, winner chicken dinner. 6 6 00:00:14,061 --> 00:00:17,128 Click the main menu, that takes you back to the very first screen. 7 7 00:00:17,128 --> 00:00:19,804 This is our main screen where we've implemented a start button, 8 8 00:00:19,804 --> 00:00:22,150 where you can start the game and then go through the game. 9 9 00:00:22,150 --> 00:00:24,040 So it's all just very functional at the moment. 10 10 00:00:24,040 --> 00:00:27,150 You can make it as pretty and awesome and dressed up as you like, but for 11 11 00:00:27,150 --> 00:00:31,185 now we just want to get that full complete game flow implemented in our game. 12 12 00:00:31,185 --> 00:00:33,535 Let's start by making ourselves a start button. 13 13 00:00:33,535 --> 00:00:36,275 I'm gonna right click, go to UI > Button. 14 14 00:00:36,275 --> 00:00:38,695 That automatically creates a canvas as well. 15 15 00:00:38,695 --> 00:00:42,105 I'm just gonna rename this main menu Canvas. 16 16 00:00:42,105 --> 00:00:45,315 Not critical to do that, but I like to do it just do I know what's going on. 17 17 00:00:45,315 --> 00:00:50,629 And then button, we are going to rename to start button,that is cool. 18 18 00:00:50,629 --> 00:00:52,690 And you can see underneath the start button we have some text. 19 19 00:00:52,690 --> 00:00:56,250 The text we will name start game. 20 20 00:00:56,250 --> 00:00:57,986 Okay so that's all our naming done, 21 21 00:00:57,986 --> 00:01:00,677 although I guess that's labeling as opposed to naming. 22 22 00:01:00,677 --> 00:01:03,967 I'm going to double click the start button itself so it zooms in and 23 23 00:01:03,967 --> 00:01:06,630 reposition that so it's in the middle of the screen. 24 24 00:01:06,630 --> 00:01:10,230 You can see when the line goes blue it's in the middle, and hold down alt, so 25 25 00:01:10,230 --> 00:01:12,870 I'm going to move this a little bit then hold down alt. 26 26 00:01:12,870 --> 00:01:15,740 So it moves both sides, and drag it down a little bit, okay. 27 27 00:01:15,740 --> 00:01:18,160 So we've got the button roughly the size that I want to have it, 28 28 00:01:18,160 --> 00:01:19,790 on top of my game screen there. 29 29 00:01:19,790 --> 00:01:22,160 I'm gonna have the two windows side by side, so 30 30 00:01:22,160 --> 00:01:24,780 I can see how it actually looks in my game screen. 31 31 00:01:24,780 --> 00:01:27,660 Drag this over, you see at the moment that it's not 32 32 00:01:27,660 --> 00:01:30,200 matching with what we have on the left, with what we have on the right. 33 33 00:01:30,200 --> 00:01:34,910 This is, as I move my perspective, I move the scaling of my window. 34 34 00:01:34,910 --> 00:01:36,690 It's making a mess of my button here, 35 35 00:01:36,690 --> 00:01:40,140 so let's clean that up by clicking on the main menu canvas. 36 36 00:01:40,140 --> 00:01:44,240 See the canvas scaler here instead of constant pixel size say scale with 37 37 00:01:44,240 --> 00:01:45,460 screen size. 38 38 00:01:45,460 --> 00:01:49,580 Now as I move my window around, if we had different resolution and different scaling 39 39 00:01:49,580 --> 00:01:52,450 and all that kind of good stuff, the button will stay as we want it. 40 40 00:01:52,450 --> 00:01:54,810 And click on the button, that'll take me down to text. 41 41 00:01:54,810 --> 00:01:57,510 Click on the button, there we go, I'm gonna move these handles. 42 42 00:01:57,510 --> 00:02:00,170 Currently it's anchored just generally in the middle. 43 43 00:02:00,170 --> 00:02:03,540 I'll click on the up, I'm sorry on the top, so 44 44 00:02:03,540 --> 00:02:06,110 center top you can see it's anchored up the center top now. 45 45 00:02:06,110 --> 00:02:08,500 What I want to do is anchor it relative to the rest of the screen. 46 46 00:02:08,500 --> 00:02:10,610 So I need to grab the handles here, 47 47 00:02:10,610 --> 00:02:13,550 pull that down to the bottom left, pull that to the bottom right. 48 48 00:02:13,550 --> 00:02:16,440 So I have a handle on each of the corner of my canvas. 49 49 00:02:16,440 --> 00:02:19,230 That means this will stay relative to screen size, as well. 50 50 00:02:19,230 --> 00:02:23,960 As we move it around, it's going to stay anchored to its position 51 51 00:02:23,960 --> 00:02:27,230 on the outside of the screen. 52 52 00:02:27,230 --> 00:02:28,490 Last tip, click on the Start button. 53 53 00:02:28,490 --> 00:02:29,610 I'm gonna change the color. 54 54 00:02:29,610 --> 00:02:31,570 Well, this is probably the second last step, actually. 55 55 00:02:31,570 --> 00:02:33,050 Make the color a little bit of a yellow. 56 56 00:02:33,050 --> 00:02:35,970 And then the last step, click on Text. 57 57 00:02:35,970 --> 00:02:38,750 And change the font size here, make this 50, nice and 58 58 00:02:38,750 --> 00:02:40,750 big, probably change it to bold. 59 59 00:02:40,750 --> 00:02:43,460 Plenty of scope in there for you to go and change the font, 60 60 00:02:43,460 --> 00:02:48,900 maybe do some text mesh pro and make this look a little bit more fancy. 61 61 00:02:48,900 --> 00:02:50,170 For now that's it. 62 62 00:02:50,170 --> 00:02:51,130 Good for us. 63 63 00:02:51,130 --> 00:02:54,000 Actually I told a fib, there's one last last step. 64 64 00:02:54,000 --> 00:02:55,540 How many last steps are we going to have, Eric? 65 65 00:02:55,540 --> 00:02:59,590 Well one last last step, which is change the highlight color and press color. 66 66 00:02:59,590 --> 00:03:02,400 Highlight color will change to kind of an orangey color, 67 67 00:03:02,400 --> 00:03:03,830 that's when you mouse over it. 68 68 00:03:03,830 --> 00:03:08,040 And then when it is clicked, we'll change it to a darker, 69 69 00:03:08,040 --> 00:03:09,360 kind of brownie color here. 70 70 00:03:09,360 --> 00:03:15,170 So I click play, then mouse over it and we will see what effect that it has. 71 71 00:03:15,170 --> 00:03:17,210 Mouse over, yep and then click. 72 72 00:03:17,210 --> 00:03:19,070 And that's doing all the stuff that I want it to do. 73 73 00:03:19,070 --> 00:03:21,741 And still move my character around independent of that. 74 74 00:03:21,741 --> 00:03:25,890 You could just have the load next out level exit button down here. 75 75 00:03:25,890 --> 00:03:27,060 And have the whole thing blank and 76 76 00:03:27,060 --> 00:03:28,580 let the player figure it out when they come down here. 77 77 00:03:28,580 --> 00:03:31,670 That would be cool as well, having an exciting way to learn how to. 78 78 00:03:31,670 --> 00:03:32,500 Exit a level but 79 79 00:03:32,500 --> 00:03:36,350 for now when it goes through this mechanism of doing stop button. 80 80 00:03:36,350 --> 00:03:41,780 Okay, what we need to do for our button is give it a script and 81 81 00:03:41,780 --> 00:03:45,590 with that script we want to load in the next scene. 82 82 00:03:45,590 --> 00:03:47,170 So I come down to add component. 83 83 00:03:47,170 --> 00:03:52,730 We'll call this menu, yes, and then create and add that. 84 84 00:03:52,730 --> 00:03:54,360 Open up Visual Studio. 85 85 00:03:54,360 --> 00:03:57,730 And this would be a very simple script in here. 86 86 00:03:57,730 --> 00:04:00,879 I need to make sure we're using the namespace, 87 87 00:04:00,879 --> 00:04:07,160 unityengine.scenemanagement. 88 88 00:04:07,160 --> 00:04:08,650 Okay, now we're using that. 89 89 00:04:08,650 --> 00:04:12,240 Going to remove the start and update functions, we don't need those. 90 90 00:04:12,240 --> 00:04:17,660 Create our function, which we'll call StartFirstLevel, I think. 91 91 00:04:17,660 --> 00:04:22,630 StartFirstLevel, and I typed that in first cuz I wanna 92 92 00:04:22,630 --> 00:04:25,210 take a moment just to point out that we're gonna need to make this public. 93 93 00:04:25,210 --> 00:04:29,805 So public Void needs to be public so that from our button, 94 94 00:04:29,805 --> 00:04:36,430 we're in a position to cull this method, so that we can load the next level. 95 95 00:04:36,430 --> 00:04:38,150 That's why we need to have it public. 96 96 00:04:38,150 --> 00:04:40,880 And then what do we need to do in here? 97 97 00:04:40,880 --> 00:04:45,330 Well, we need to say scenemanager.loadscene. 98 98 00:04:45,330 --> 00:04:46,530 And what scene are we loading? 99 99 00:04:46,530 --> 00:04:47,450 We'll load scene one. 100 100 00:04:48,790 --> 00:04:49,840 That looks pretty good. 101 101 00:04:49,840 --> 00:04:55,070 And we click on our selector here, hit the Scene tab. 102 102 00:04:55,070 --> 00:04:57,560 And then we're looking for our start button, 103 103 00:04:57,560 --> 00:05:00,550 which is in the scene, selected the start button. 104 104 00:05:00,550 --> 00:05:04,530 Now we have the start button, which contains the menu script. 105 105 00:05:04,530 --> 00:05:08,770 From there we can click on Menu and find Start First Level. 106 106 00:05:08,770 --> 00:05:10,870 That should be the mechanism for when we click the button, 107 107 00:05:10,870 --> 00:05:14,950 it will run this method and it will take us to the first level. 108 108 00:05:14,950 --> 00:05:16,790 Let's see if that actually works, click play. 109 109 00:05:16,790 --> 00:05:21,650 I ran a little bit, click the button, and 110 110 00:05:21,650 --> 00:05:23,950 then it loads onto the next level, fantastic. 111 111 00:05:25,280 --> 00:05:27,690 Okay, so that's the mechanism of creating a start button. 112 112 00:05:27,690 --> 00:05:31,350 I want to top and tail the game, in other words have something at the front and 113 113 00:05:31,350 --> 00:05:33,760 end by having a success screen as well. 114 114 00:05:33,760 --> 00:05:34,570 That's my challenge for 115 115 00:05:34,570 --> 00:05:39,430 you, create a success level, where we have a final you win screen. 116 116 00:05:39,430 --> 00:05:41,761 Similar to the start menu but with a you win, and 117 117 00:05:41,761 --> 00:05:45,037 then some sort of congratulations or well done this is fantastic. 118 118 00:05:45,037 --> 00:05:49,621 And then a play again button, which will take the player back to the first level. 119 119 00:05:49,621 --> 00:05:52,490 Or you could have it take them back to the main menu. 120 120 00:05:52,490 --> 00:05:55,237 And then from there they can go to play. 121 121 00:05:55,237 --> 00:05:56,679 So maybe I'll do it that way. 122 122 00:05:56,679 --> 00:05:59,954 At the very end it says, finish or success or well done and 123 123 00:05:59,954 --> 00:06:03,190 then have that take the player to the main menu. 124 124 00:06:03,190 --> 00:06:05,870 And as a final step add some flair and share, 125 125 00:06:05,870 --> 00:06:08,510 do something nifty with your final screen. 126 126 00:06:08,510 --> 00:06:11,993 When the player wins do something cool and add some fireworks or 127 127 00:06:11,993 --> 00:06:14,829 the play doing backflips, and share that with us. 128 128 00:06:14,829 --> 00:06:17,070 And when you've done that I will see you back here. 129 129 00:06:19,100 --> 00:06:20,980 Okay, let's quickly go through this together, 130 130 00:06:20,980 --> 00:06:25,325 I'm going to duplicate my main menu, call this success. 131 131 00:06:25,325 --> 00:06:29,360 Make sure that I've gone up into my build settings up Yonda, where are you? 132 132 00:06:29,360 --> 00:06:31,070 File, build settings. 133 133 00:06:31,070 --> 00:06:35,420 And to add Success in here and have it as index number 3. 134 134 00:06:35,420 --> 00:06:37,460 Cool, that's all good. 135 135 00:06:37,460 --> 00:06:39,250 We're currently selected on Main Menu. 136 136 00:06:39,250 --> 00:06:40,860 Jump into Success screen. 137 137 00:06:40,860 --> 00:06:43,890 And do just a little bit of editing, very quick editing here on the, 138 138 00:06:46,800 --> 00:06:49,350 Screen itself, just to show it's a little bit different. 139 139 00:06:49,350 --> 00:06:53,610 So Instead of climbing, we need to click on Foreground, and 140 140 00:06:53,610 --> 00:06:57,070 then on my tile brush, my rule tile. 141 141 00:06:57,070 --> 00:06:59,921 I'll get rid of all this stuff at the top here, 142 142 00:06:59,921 --> 00:07:04,327 make it look like there's some opening that they've reached the end. 143 143 00:07:04,327 --> 00:07:07,401 And some sort of, yeah, some sort of teasing them ladder, 144 144 00:07:07,401 --> 00:07:11,180 that kind of goes nowhere, I think might be a little interesting. 145 145 00:07:11,180 --> 00:07:15,482 Click on the climbing layer, click on the ladder, and then here's a ladder that sort 146 146 00:07:15,482 --> 00:07:18,138 of just Ambiguously goes up to the top of the screen. 147 147 00:07:18,138 --> 00:07:19,909 Okay not the greatest of final screen but 148 148 00:07:19,909 --> 00:07:23,150 one of those things it could be a little bit cool having the player window. 149 149 00:07:23,150 --> 00:07:24,760 What on earth should I be doing here? 150 150 00:07:26,390 --> 00:07:30,300 We'll add something more complex as we make the game in more detail, 151 151 00:07:30,300 --> 00:07:31,775 I think as for what we've got now. 152 152 00:07:31,775 --> 00:07:37,100 Okay so we've just duplicated all the content over instead of our, where is it? 153 153 00:07:37,100 --> 00:07:44,630 Instead of our main menu canvas, I'll rename this to finish canvas or success. 154 154 00:07:44,630 --> 00:07:48,920 Success menu canvas, okay. 155 155 00:07:50,420 --> 00:07:52,391 And then instead of the button being stop, 156 156 00:07:52,391 --> 00:07:54,709 I'm going to have this a replay button, I think. 157 157 00:07:57,087 --> 00:08:01,110 Replay good replay button, and 158 158 00:08:01,110 --> 00:08:07,380 then the text will need to say replay game, good. 159 159 00:08:07,380 --> 00:08:08,430 That looks pretty good. 160 160 00:08:08,430 --> 00:08:10,430 Like I say you can differentiate this a bunch. 161 161 00:08:10,430 --> 00:08:12,540 For now I'm just going through the role of functionality of it to 162 162 00:08:12,540 --> 00:08:13,650 make sure it all works. 163 163 00:08:13,650 --> 00:08:16,870 And then the script is gonna do exactly the same thing. 164 164 00:08:16,870 --> 00:08:18,230 We need to point it back to the start. 165 165 00:08:18,230 --> 00:08:22,910 So that's our end screen, if we're on here, loaded on the success menu. 166 166 00:08:22,910 --> 00:08:25,520 Run around, run around, run around, and then click Replay Game. 167 167 00:08:25,520 --> 00:08:28,990 It takes us back to the first level, it looks a little bit odd, 168 168 00:08:28,990 --> 00:08:31,420 cuz I've started my player in the middle of the first level. 169 169 00:08:31,420 --> 00:08:33,770 But we'd have it start in the proper place in the first level. 170 170 00:08:33,770 --> 00:08:36,370 If we want to have that go back to the load screen, 171 171 00:08:36,370 --> 00:08:38,150 then we would change the button. 172 172 00:08:38,150 --> 00:08:45,810 Instead of it being Replay we would say, main menu, or something along those lines. 173 173 00:08:45,810 --> 00:08:49,190 Change the button to main menu button, 174 174 00:08:49,190 --> 00:08:53,420 and then we need to change, make a change for our script in here. 175 175 00:08:53,420 --> 00:08:56,720 Jumping in the menu, reload, I guess I need to do that, yup. 176 176 00:08:56,720 --> 00:09:01,460 And then we create another method instead of public void, 177 177 00:09:01,460 --> 00:09:06,465 start first level, we're going to say Public void, 178 178 00:09:06,465 --> 00:09:13,360 LoadMainMenu, and that will be a index of zero. 179 179 00:09:14,880 --> 00:09:19,010 Okay, then back over into our, what's this we're on now. 180 180 00:09:19,010 --> 00:09:20,820 Main menu button down here. 181 181 00:09:20,820 --> 00:09:26,070 We need to change out on click, instead of being main menu. 182 182 00:09:26,070 --> 00:09:30,410 Sorry, first startfirstlevel, it needs to be loadmainmenu, there we go. 183 183 00:09:30,410 --> 00:09:32,150 We've saved that and 184 184 00:09:32,150 --> 00:09:36,920 then click play, all going to play, this should take us back to the very start. 185 185 00:09:38,560 --> 00:09:40,220 Click Main Menu, it takes us back to Start Game. 186 186 00:09:40,220 --> 00:09:41,410 Start Game, Run through. 187 187 00:09:41,410 --> 00:09:42,666 Get to the [SOUND]. 188 188 00:09:42,666 --> 00:09:44,190 Okay, that killed me but that's all good. 189 189 00:09:44,190 --> 00:09:45,760 So we've got our flow worked out now. 190 190 00:09:45,760 --> 00:09:48,490 That should be enough functionality for you to be able to do your full flow from 191 191 00:09:48,490 --> 00:09:50,740 Main Menu to Game through all the game scenes. 192 192 00:09:50,740 --> 00:09:51,890 Back to the end, you win. 193 193 00:09:51,890 --> 00:09:53,310 Once you have that success, 194 194 00:09:53,310 --> 00:09:57,030 then you return back to the very start of the screen. 195 195 00:09:57,030 --> 00:09:58,810 I said adding a little bit of flair or 196 196 00:09:58,810 --> 00:10:03,100 a little bit of something in there, some text to let them know they actually won. 197 197 00:10:03,100 --> 00:10:04,740 Let's do that very briefly. 198 198 00:10:04,740 --> 00:10:09,960 So under my Success main menu, I'm gonna right-click, UI, Text. 199 199 00:10:09,960 --> 00:10:15,332 And this text box will say something along the lines of, 200 200 00:10:15,332 --> 00:10:19,915 let's see, winner, winner chicken dinner. 201 201 00:10:19,915 --> 00:10:23,240 For those of you who are familiar with PUBG, you will know what that's all about. 202 202 00:10:23,240 --> 00:10:25,260 We'll make this 30, and 203 203 00:10:25,260 --> 00:10:30,280 we will change the size of that a little bit, go to my t tool here. 204 204 00:10:32,040 --> 00:10:34,500 Move that, move this. 205 205 00:10:34,500 --> 00:10:36,965 Little bit bigger, winner winner chicken dinner. 206 206 00:10:36,965 --> 00:10:41,270 Okay, center that text and I think I will 207 207 00:10:41,270 --> 00:10:45,130 put a line break in between these two, there we go, winner winner chicken dinner. 208 208 00:10:45,130 --> 00:10:47,870 Its a little bit light, lets make it white in color. 209 209 00:10:49,280 --> 00:10:52,120 The color of the text in here white, there we go. 210 210 00:10:52,120 --> 00:10:56,970 Last step I'm just going to reposition my text to be above the menu and 211 211 00:10:56,970 --> 00:11:00,620 my menu to be below my text, there we go. 212 212 00:11:00,620 --> 00:11:03,780 Okay, not super pretty, but is super functional. 213 213 00:11:03,780 --> 00:11:06,920 There we have our final success screen. 214 214 00:11:06,920 --> 00:11:10,910 You've also created a main menu screen which has a start button that 215 215 00:11:10,910 --> 00:11:11,890 launches the game. 216 216 00:11:11,890 --> 00:11:14,680 That's the full flow and I'll see you in the next video for 217 217 00:11:14,680 --> 00:11:20,280 some more chunky aspects of getting our game flowing nicely for the player. 218 218 00:11:20,280 --> 00:11:20,950 See you in there. 21627