WEBVTT 00:00.110 --> 00:00.560 Hello guys. 00:00.560 --> 00:01.550 Welcome to the video. 00:01.550 --> 00:04.250 So in this one we're going to make main menu. 00:04.250 --> 00:05.570 And we're going to start with simple. 00:05.570 --> 00:08.750 We're going to make a scene with an animated background. 00:08.750 --> 00:11.120 And later on I'm going to show you how to add buttons. 00:11.120 --> 00:17.900 So as you might know everything we have in here, it is uh, packed into a scene and here we have the 00:17.900 --> 00:18.680 scene itself. 00:18.680 --> 00:21.290 It is saved with name of simple scene. 00:22.670 --> 00:24.050 You also can make a new one. 00:24.050 --> 00:25.370 Let's go to create. 00:26.720 --> 00:27.470 Scene. 00:27.470 --> 00:30.770 Scene, and let's call it main menu. 00:32.040 --> 00:36.630 Now if you go inside of main menu, you'll see project is empty. 00:36.660 --> 00:38.490 It doesn't mean you lost everything. 00:38.520 --> 00:41.970 It just means you switched the scene and everything is here. 00:41.970 --> 00:44.640 Just saved under the different scene setup. 00:44.670 --> 00:46.860 Now we need to go back to main menu scene. 00:46.860 --> 00:52.440 And here we need to do setup that we'll use to start the game, to continue the game or to work with 00:52.440 --> 00:52.980 settings. 00:52.980 --> 00:56.760 And I want to begin by creating animated background. 00:56.940 --> 01:02.130 Let's just make some platform over here so we can see something in the game window, because as of now, 01:02.130 --> 01:04.320 it's not as pretty as I would like it to have. 01:04.800 --> 01:06.510 We're going to go to Tile Palette. 01:07.660 --> 01:09.850 Or actually, we need to make new, uh. 01:11.830 --> 01:13.600 Tile map rectangular. 01:15.040 --> 01:18.040 I'm going to call it ground, although it's not that important. 01:18.040 --> 01:24.280 And here we just need to take the platform we want to have in the main menu and draw it like so. 01:25.910 --> 01:28.820 Okay, I think I want to zoom out the camera just a bit. 01:28.820 --> 01:32.300 So I'm going to select the camera and I'm going to do size eight. 01:33.850 --> 01:38.710 Okay, now let me take this again and draw something like this. 01:38.860 --> 01:40.600 Later on we're going to extend it to the right. 01:40.600 --> 01:44.290 But as of now let's just work with this and give me a second. 01:48.760 --> 01:50.620 Yeah, probably something like this will do. 01:50.860 --> 01:51.460 Fine. 01:51.460 --> 01:55.480 Now we need a background and we're going to do animated background. 01:55.480 --> 01:58.510 We're going to do that with the help of a 3D object. 01:59.460 --> 02:03.870 And we just need to go over here and draw one set of a background. 02:03.870 --> 02:08.220 Just so we have a reference for the setup we are about to do now. 02:08.700 --> 02:10.260 So I'm going to place it here. 02:10.260 --> 02:13.080 And now we need to make 3D object. 02:13.080 --> 02:17.760 Then we're going to put a texture on this 3D object with the image of a background. 02:17.760 --> 02:21.630 And then we're going to just repeat that image on the 3D model. 02:21.630 --> 02:26.460 And because of that it's going to look like it's just spinning like it's moving endlessly. 02:26.460 --> 02:29.190 Okay I know it sounds confusing, but let's just do it. 02:29.220 --> 02:30.660 It is very easy to do. 02:30.930 --> 02:34.770 Uh, let's make 3D object quad. 02:37.770 --> 02:41.220 And we need to make it much the size of a background over here. 02:41.220 --> 02:43.590 So I'm going to place it somewhere in the middle. 02:46.230 --> 02:48.540 And I'm going to try to increase the scale. 02:51.370 --> 02:54.460 Okay, so it's something like four. 02:54.790 --> 02:55.840 Nice. 02:56.560 --> 02:58.630 Now we can see two problems here. 02:58.630 --> 03:04.750 One of them, it is in front of the platform and we want it to be a background to make it, uh, stand 03:04.750 --> 03:05.860 behind the platform. 03:05.860 --> 03:12.970 We need to switch to 3D view over here, and we need to select camera to see where camera looks. 03:13.030 --> 03:14.440 Camera looks there. 03:14.440 --> 03:18.940 So we want this object be behind the platform. 03:19.060 --> 03:24.130 For that we can just take the quad and move it on the z axis like so. 03:24.460 --> 03:26.260 Now we can switch back to 2D. 03:26.500 --> 03:28.690 And now it is behind the platform. 03:28.690 --> 03:30.520 We just moved it in a 3D space. 03:30.520 --> 03:33.880 So we have background ground and camera. 03:34.420 --> 03:35.020 Nice. 03:35.020 --> 03:36.190 Let's go back to 2D. 03:37.640 --> 03:40.310 And second problem is the color. 03:40.310 --> 03:42.500 We don't want to have color just like that. 03:42.500 --> 03:45.140 We want it to have texture that we use for backgrounds. 03:45.140 --> 03:49.760 So we're gonna go ahead to asset material. 03:50.520 --> 03:51.330 And over here. 03:51.330 --> 03:53.910 We need to make new material. 03:55.190 --> 03:57.710 I'm going to call it just background for now. 03:58.190 --> 03:59.330 That is enough. 03:59.330 --> 04:02.150 And I think this is the extra we don't need it. 04:02.150 --> 04:04.040 So I'm going to I don't know why I have it. 04:04.040 --> 04:05.030 Let's delete it. 04:05.900 --> 04:06.650 Nice. 04:06.650 --> 04:08.930 Now let's go to the quad game object. 04:08.930 --> 04:11.720 Let's name it as background. 04:12.870 --> 04:14.970 And let's drag material over here. 04:15.420 --> 04:16.350 Very cool. 04:16.350 --> 04:17.640 Now we have material. 04:18.740 --> 04:24.680 And if we want, we can, for example, change color for it or do anything else we want with it. 04:24.680 --> 04:30.230 What we want to do is to change material type to unlit texture. 04:30.650 --> 04:35.150 Now it is just white, but it's only because it does not have any texture over here. 04:35.540 --> 04:40.970 We need to go to graphics background and let's practice with the yellow one. 04:40.970 --> 04:44.840 So I'm going to just drag yellow to this field over here. 04:46.100 --> 04:49.070 Now it's basically repeating the background we have. 04:49.070 --> 04:53.420 But not only that, now we can use this material to animate background. 04:53.660 --> 05:00.950 Uh, if we use offset over here, if we increase it, then you'll see that this image is going to move 05:00.950 --> 05:02.390 away like that. 05:03.170 --> 05:08.870 Unfortunately for us, if we move it, it looks weird, but it's only because we did not change. 05:09.500 --> 05:17.120 Rap mode over here because we define how image will wrap the 3D model if we use it as a texture, and 05:17.120 --> 05:19.580 we wanted to change to repeat. 05:20.710 --> 05:22.180 Let's hit apply. 05:22.360 --> 05:27.970 And now if you go back to background and change offset, you can see image is repeating itself and it 05:27.970 --> 05:29.710 looks like it's moving around. 05:29.710 --> 05:30.220 Yeah. 05:31.350 --> 05:32.430 Very cool. 05:34.690 --> 05:37.630 Now let's make a script that will move it around. 05:37.630 --> 05:42.280 And then I'm going to show you how to use it with different colors and also how to make it bigger. 05:42.280 --> 05:44.590 So it will take entire space of the screen. 05:45.600 --> 05:50.790 Let's go to scripts and let's make Monobehaviour script. 05:52.070 --> 05:54.110 Animated background. 06:01.290 --> 06:02.940 As you've seen just now. 06:05.220 --> 06:07.110 Let me do close all by this. 06:08.440 --> 06:13.300 As you've seen just now, I'm using material and I'm changing parameters of the material. 06:13.300 --> 06:16.870 So our goal is to get access to this material. 06:16.870 --> 06:23.020 And we can do that through the mesh renderer because mesh renderer has material over here. 06:23.020 --> 06:28.300 So what we need to do in this script is to get component of a mesh renderer, and then get access to 06:28.300 --> 06:29.920 the property of a material. 06:30.100 --> 06:31.570 Let's go back to script. 06:34.040 --> 06:37.100 And over here I'm going to do private mesh renderer. 06:39.070 --> 06:39.820 Mesh. 06:39.820 --> 06:44.320 Then we're going to open a wake and do mesh equals to get component of a mesh renderer. 06:44.920 --> 06:48.610 And also we want to have some sort of serialized field. 06:50.170 --> 06:53.830 Private vector two movement direction. 06:54.450 --> 06:58.110 Then in the update let's open update. 06:58.110 --> 07:06.300 We want to do mesh main um I mean material main texture offset because we changed offset and we're going 07:06.300 --> 07:09.000 to add value to the offset all the time. 07:09.000 --> 07:12.930 So we're going to do plus equals movement direction. 07:12.930 --> 07:15.150 And we want it to be frame rate independent. 07:15.150 --> 07:18.870 And that's why we're going to multiply this by time dot delta time okay. 07:18.870 --> 07:20.100 Now let's save this. 07:20.100 --> 07:21.570 Let's go back to unity. 07:23.780 --> 07:28.070 I'm going to put script on the GameObject and we have movement direction over here. 07:28.070 --> 07:29.840 And let's just go to play mode. 07:31.510 --> 07:33.430 So now nothing is happening. 07:33.670 --> 07:40.720 But if we go over here and give some value on the Y, for example, you're going to see how background 07:40.720 --> 07:41.470 is moving. 07:41.920 --> 07:46.510 We can make value bigger so it's faster, but we don't need it that fast actually. 07:46.780 --> 07:47.140 Yeah. 07:47.140 --> 07:49.930 Let's use 0.5 maybe. 07:50.510 --> 07:52.010 Because of the texture itself. 07:52.010 --> 07:56.780 It looks like it's moving down and left, but actually it's just moving on the Y. 07:58.590 --> 08:01.620 We can easily check that by changing texture over here. 08:01.950 --> 08:06.600 Let's go to Graphics background and let's choose any other texture. 08:06.600 --> 08:10.830 We just need to select them all and change wrap mode to repeat. 08:10.860 --> 08:12.060 Let's do apply. 08:12.480 --> 08:18.240 And now if you put any other texture this one for example, it looks like it's moving from top to bottom 08:18.240 --> 08:18.540 right. 08:18.570 --> 08:19.230 Very good. 08:19.230 --> 08:24.210 Now before we make background bigger, let's use all of the colors on the background so you can easily 08:24.210 --> 08:27.030 switch between them without going to graphics folder. 08:27.270 --> 08:29.100 Let's go to Animated background. 08:29.550 --> 08:34.860 And at the top I want to make public enum background type. 08:34.860 --> 08:37.350 And here we need all colors we have. 08:37.980 --> 08:41.520 I'm just going to go to Asset Graphics background. 08:43.240 --> 08:43.750 Like that. 08:43.750 --> 08:45.190 And I'm going to type blue. 08:47.740 --> 08:48.280 And yellow. 08:48.790 --> 08:49.390 Nice. 08:49.390 --> 08:50.800 All of the colors we have. 08:50.800 --> 08:52.270 Now let's save this. 08:52.270 --> 08:56.020 Let's go here and let's make a header for color. 08:56.020 --> 09:01.660 Then I'm going to make serialize field private uh background type background type. 09:01.660 --> 09:04.660 And we want to have array of textures. 09:04.660 --> 09:06.880 So we can choose a texture that we want. 09:06.940 --> 09:12.220 I'm going to do private texture 2D textures just like that. 09:12.220 --> 09:20.470 Then let's make a method private void update um background texture. 09:20.560 --> 09:24.910 And inside we're going to do mesh material. 09:25.150 --> 09:27.970 Main texture equals to textures. 09:27.970 --> 09:32.440 And for the index of the texture by the way should be an array like that. 09:32.440 --> 09:37.600 And for the index of the texture we're going to use background type.int. 09:37.600 --> 09:41.980 So we convert uh enum to the integer just like we did before. 09:41.980 --> 09:46.780 And we give it as a value to choose the texture we want, and we assign it to the main texture over 09:46.780 --> 09:47.230 here. 09:47.230 --> 09:50.350 Now we can do this in the awake just when we start the game. 09:50.350 --> 09:52.030 Update the background texture. 09:52.720 --> 09:55.810 And also we can go here and make context. 09:55.810 --> 09:56.590 Menu. 09:58.290 --> 10:05.970 Update background in case we want to change something in the editor, or maybe just in the play mode 10:05.970 --> 10:06.540 itself. 10:07.220 --> 10:07.910 Nice. 10:07.910 --> 10:10.010 Now let's go back to unity. 10:11.350 --> 10:12.850 Let's take this background. 10:12.880 --> 10:15.640 Open textures and let's assign them one by one. 10:16.180 --> 10:19.840 One green, pink, purple and yellow. 10:19.840 --> 10:24.040 Just make sure it is in the same order as you have here in the enum. 10:24.590 --> 10:25.400 All right. 10:25.400 --> 10:27.110 And we can choose any color you want. 10:27.110 --> 10:30.680 For example, I want to try green and you can go to play mode. 10:31.900 --> 10:34.240 And it will change the texture to green. 10:34.270 --> 10:35.230 Nice. 10:35.260 --> 10:40.510 We also have default offset uh, at 13.81. 10:40.510 --> 10:41.380 Let's remove it. 10:41.380 --> 10:42.610 Let's make it zero. 10:42.610 --> 10:45.220 And let's go back to game mode and see this. 10:46.770 --> 10:47.940 Okay, it works. 10:47.940 --> 10:50.670 And if you want, you can give it some movement over here. 10:50.970 --> 10:51.750 Very nice. 10:51.750 --> 10:53.550 Now let's make the background bigger. 10:53.550 --> 10:54.750 How can we do this? 10:54.750 --> 11:01.980 Well, we know that this game object is four times bigger than just a tile we have over here. 11:02.070 --> 11:09.330 So if I wanted to make much bigger, probably I can just use scale not of four but of 40 like that. 11:10.190 --> 11:15.470 Now it is much bigger, but the issue is that texture is stretched on the entire game object. 11:15.470 --> 11:23.810 What we can do is go to material over here and change tiling from 1 to 10 by ten. 11:24.350 --> 11:27.410 And now it's going to be just nice and pretty, just like we need. 11:28.100 --> 11:32.270 Now let me go ahead and erase what we have over here. 11:33.410 --> 11:34.610 Gonna switch this off. 11:36.320 --> 11:37.580 Arrays this. 11:38.630 --> 11:41.240 And I want to change the background to something else. 11:41.480 --> 11:42.410 Green is fine. 11:42.410 --> 11:49.100 Let me click Update Background or we cannot do it because we don't have a component of a mesh, so we 11:49.100 --> 11:50.660 cannot do it in the editor. 11:51.200 --> 11:52.880 Okay okay okay. 11:53.150 --> 11:54.080 Let me. 11:54.860 --> 11:55.940 Let me do this. 11:55.940 --> 12:02.780 If mesh equals to null then get component of mesh renderer like that. 12:02.780 --> 12:09.650 No, no mesh equals to get component of a mesh renderer okay, this should work in the editor. 12:09.650 --> 12:10.970 Let's try again. 12:16.110 --> 12:17.160 Update background. 12:17.160 --> 12:18.480 Yeah, works for us. 12:18.480 --> 12:20.310 Okay, nice. 12:20.310 --> 12:23.370 Now let's set Y speed 2.1. 12:23.370 --> 12:27.000 I want it to be really slow and let's go to play mode. 12:27.000 --> 12:28.890 And we have animated background. 12:28.890 --> 12:29.850 We have nice menu. 12:29.850 --> 12:31.800 Now we can proceed with the development. 12:31.800 --> 12:36.300 I have a couple of more nice ideas that we can use to make menu pretty. 12:36.780 --> 12:38.130 I'll see you in the next video.