1 00:00:04,680 --> 00:00:11,370 ‫Now that we have our main menu, we can go ahead and work within our game scene. 2 00:00:11,370 --> 00:00:14,070 ‫And this scene we will need all the walls. 3 00:00:14,070 --> 00:00:15,720 ‫We will need the two racquets. 4 00:00:15,720 --> 00:00:19,080 ‫Then we will need the name of the player one and the player two. 5 00:00:19,080 --> 00:00:25,590 ‫And of course, the scores and very important is our ball in the middle, of course, as well. 6 00:00:25,620 --> 00:00:29,900 ‫So let's get started by by adding these elements into our game. 7 00:00:29,910 --> 00:00:35,340 ‫So far we had only the main camera, but we also need is our field. 8 00:00:35,400 --> 00:00:38,970 ‫So I'm going to create a new game object, which I call field. 9 00:00:39,870 --> 00:00:41,880 ‫And within that field we will need balls. 10 00:00:41,880 --> 00:00:45,360 ‫So I'm going to create another game object, which is walls. 11 00:00:45,870 --> 00:00:49,540 ‫So in general, what do we need in order to get started? 12 00:00:49,560 --> 00:00:55,440 ‫As you can see here, we need the player, one player to wall one, wall to wall three and wall four, 13 00:00:55,470 --> 00:01:02,370 ‫then the racket, one racket to the numbers, the ball and the middle line. 14 00:01:04,320 --> 00:01:07,020 ‫So as you can see, there is plenty to add to the game. 15 00:01:07,020 --> 00:01:13,380 ‫And we will start off by creating the walls and I will use cubes for my walls. 16 00:01:13,380 --> 00:01:21,240 ‫So I'm going to create a new 3D object, which is a cube, and that cube will be my wall top. 17 00:01:21,870 --> 00:01:27,000 ‫And as you can see here, we have our wall top here in the left hand side, but it's super small, so 18 00:01:27,000 --> 00:01:30,120 ‫it's really not very relevant right now. 19 00:01:30,330 --> 00:01:36,540 ‫Let's change that by changing the scale, for example, 1400 for our X scale. 20 00:01:37,020 --> 00:01:39,990 ‫And as Y scale, I'm just going to take five. 21 00:01:40,110 --> 00:01:44,070 ‫Now, let's drag it up to 350. 22 00:01:44,250 --> 00:01:45,750 ‫That will be our top wall. 23 00:01:45,750 --> 00:01:48,450 ‫And of course, we need a different material. 24 00:01:48,450 --> 00:01:53,400 ‫So far we only have the default material in there, so we will need a wide material. 25 00:01:53,400 --> 00:02:02,040 ‫So I'm going to create a new material and I'm calling I'm going to call that white and now let's put 26 00:02:02,040 --> 00:02:04,650 ‫some emission on it and make it white. 27 00:02:04,890 --> 00:02:07,350 ‫So now we can drag that into our wall top. 28 00:02:07,350 --> 00:02:09,630 ‫And you can see we have our wall. 29 00:02:09,660 --> 00:02:15,420 ‫Now that we have our top wall, we can duplicate that and call it wall bottom. 30 00:02:17,160 --> 00:02:22,170 ‫And the only thing we need to change is the Y value, which means we have to put it down. 31 00:02:22,170 --> 00:02:26,640 ‫So I'm just going to use -350. 32 00:02:27,120 --> 00:02:28,680 ‫Then of course we need two more walls. 33 00:02:28,680 --> 00:02:37,470 ‫So I'm going to create those wall right and wall left and there. 34 00:02:37,680 --> 00:02:40,290 ‫We don't need to scale up the X value. 35 00:02:40,440 --> 00:02:44,250 ‫So I'm going to use five here, but we need to scale up the Y value. 36 00:02:44,400 --> 00:02:47,670 ‫So a good value here is 670. 37 00:02:47,850 --> 00:02:52,260 ‫And now, of course, we also need to change the Y and the X position. 38 00:02:52,260 --> 00:03:02,940 ‫So the Y position should be zero and the X position is at 700 for the right wall and -700 for the left 39 00:03:02,940 --> 00:03:03,390 ‫wall. 40 00:03:05,100 --> 00:03:07,860 ‫So now let's scale it correctly as well. 41 00:03:08,250 --> 00:03:11,130 ‫So this is going to be five and 670. 42 00:03:11,160 --> 00:03:12,630 ‫How did I get those values? 43 00:03:12,630 --> 00:03:14,460 ‫Well, I just played around with them. 44 00:03:14,460 --> 00:03:16,530 ‫If you want, you can make it. 45 00:03:16,530 --> 00:03:21,900 ‫Or if you if you want, you can even close it here so you can close the little gap that you have here. 46 00:03:21,900 --> 00:03:24,420 ‫But I personally like it like that. 47 00:03:25,140 --> 00:03:27,000 ‫Next, let's create the middle walls. 48 00:03:27,000 --> 00:03:30,930 ‫So I'm just going to call them middle walls. 49 00:03:31,620 --> 00:03:35,520 ‫So create a new game object, create empty within our field. 50 00:03:35,520 --> 00:03:39,450 ‫And I'm just going to call that middle walls. 51 00:03:39,870 --> 00:03:41,910 ‫This will be the dashes in the center. 52 00:03:42,240 --> 00:03:46,740 ‫So let's create those, create a 3D object, which is a cube. 53 00:03:46,740 --> 00:03:53,460 ‫And I'm just going to call that middle wall one and. 54 00:03:55,690 --> 00:03:58,420 ‫What I would like to change here is, of course the scale as well. 55 00:03:58,420 --> 00:04:04,890 ‫So let's scale that to five for the X value and 100 for the Y value. 56 00:04:04,900 --> 00:04:12,130 ‫And now we need to drag in our white material in there as well, and we can now duplicate it. 57 00:04:12,280 --> 00:04:15,880 ‫So let's move it a little bit first before we duplicate it. 58 00:04:15,880 --> 00:04:18,250 ‫So I'm just going to move it up a little bit then. 59 00:04:18,760 --> 00:04:20,830 ‫Let's see, it's at 200. 60 00:04:22,970 --> 00:04:23,690 ‫And 81. 61 00:04:23,690 --> 00:04:28,100 ‫So maybe let's go with 280 for our first ball. 62 00:04:28,130 --> 00:04:31,550 ‫280, then the second one. 63 00:04:33,690 --> 00:04:35,580 ‫We'll be at 140. 64 00:04:37,350 --> 00:04:39,540 ‫And now let's duplicate those even further. 65 00:04:40,530 --> 00:04:42,510 ‫So this one will be at zero. 66 00:04:43,110 --> 00:04:49,680 ‫The next one will be at -140 and the last one at -280. 67 00:04:51,990 --> 00:04:54,540 ‫All right, so now this looks pretty good already. 68 00:04:54,540 --> 00:04:55,500 ‫I'd say so. 69 00:04:55,500 --> 00:04:56,910 ‫We have a good start. 70 00:04:56,910 --> 00:05:02,910 ‫Now we will need the racquets and the ball because the number and the names are part of the hut. 71 00:05:02,910 --> 00:05:05,790 ‫So we are going to create a hut for that later on. 72 00:05:06,030 --> 00:05:09,240 ‫So now let's go ahead with the rackets. 73 00:05:11,030 --> 00:05:14,610 ‫I create a new empty object, and I'm going to call that records. 74 00:05:17,830 --> 00:05:19,510 ‫And those records are cubes as well. 75 00:05:19,510 --> 00:05:26,320 ‫So let's create a cube three DX Object Cube, and I'm going to call it Record Player one. 76 00:05:28,090 --> 00:05:39,670 ‫I scale it to being 20 and for the X value 150 for the Y value and the position I set it to -600. 77 00:05:39,670 --> 00:05:41,320 ‫So it's here at the left hand side. 78 00:05:41,320 --> 00:05:43,390 ‫So now of course it also needs to be white. 79 00:05:43,390 --> 00:05:46,180 ‫So I drag my white material into my record. 80 00:05:46,360 --> 00:05:50,020 ‫Now we can duplicate that for our second record. 81 00:05:50,020 --> 00:05:57,820 ‫So I'm just going to call that record player two and I change the position to being plus 600. 82 00:05:57,820 --> 00:06:03,880 ‫So now we have our field pretty much, and I want the records to be inside the field, so I'm going 83 00:06:03,880 --> 00:06:07,060 ‫to drag that into my field game object. 84 00:06:08,170 --> 00:06:09,850 ‫Now let's save this in real quick. 85 00:06:09,850 --> 00:06:11,740 ‫Now, what we need next is our ball. 86 00:06:11,740 --> 00:06:13,870 ‫So let's create a ball. 87 00:06:15,540 --> 00:06:21,060 ‫Which is a new cube, and I'm going to call that ball. 88 00:06:21,990 --> 00:06:24,770 ‫And that cube needs white material as well. 89 00:06:24,780 --> 00:06:26,280 ‫And let's set that up. 90 00:06:26,400 --> 00:06:31,950 ‫The size for it should be 20 times 20, so 20 for the X value and 24 the Y value. 91 00:06:31,980 --> 00:06:36,650 ‫Now you can see the ball here, but it's not a perfect position for the ball to start at. 92 00:06:36,660 --> 00:06:43,140 ‫I personally think because it's a little bit too centered, it's cutting through the center line. 93 00:06:43,140 --> 00:06:47,760 ‫So let's move it a little bit to the side, maybe to -100. 94 00:06:48,240 --> 00:06:48,990 ‫All right. 95 00:06:48,990 --> 00:06:50,100 ‫So far, so good. 96 00:06:50,100 --> 00:06:51,690 ‫We have our field set up now. 97 00:06:51,690 --> 00:06:53,330 ‫Let's go with the HUD. 98 00:06:53,340 --> 00:06:57,390 ‫So let's create a UI element, which is text. 99 00:06:57,390 --> 00:07:02,010 ‫So let's create text which I call label player one. 100 00:07:07,730 --> 00:07:13,550 ‫I want the label for the player one and the score for the player one to be within one game object. 101 00:07:13,550 --> 00:07:14,660 ‫So it's all tidy. 102 00:07:14,660 --> 00:07:16,860 ‫So everything is connected if it needs to. 103 00:07:16,910 --> 00:07:24,500 ‫So let's call that one player one and drag the label for player one inside of that. 104 00:07:24,680 --> 00:07:27,230 ‫So now let's resize our whole canvas. 105 00:07:27,230 --> 00:07:30,380 ‫So I'm going to use screen space camera. 106 00:07:30,560 --> 00:07:32,420 ‫And of course, we need a camera for that. 107 00:07:32,420 --> 00:07:36,830 ‫So I'm going to use the main camera then as the canvas scaler. 108 00:07:36,830 --> 00:07:43,790 ‫I want to use scale with screen so that depending on how big the screen is, our UI will always be at 109 00:07:43,790 --> 00:07:44,900 ‫the same position. 110 00:07:44,900 --> 00:07:53,180 ‫So I'm going to scale that up to 1600 to times 900, and the screen match mode should be expand so that 111 00:07:53,180 --> 00:07:57,890 ‫our screen expands or our canvas expands based on the screen size. 112 00:07:58,130 --> 00:07:58,460 ‫All right. 113 00:07:58,460 --> 00:08:02,360 ‫Now that we have that, we can go ahead and move things around. 114 00:08:02,360 --> 00:08:08,210 ‫So, for example, our label player, one should be at the left hand, top side. 115 00:08:08,210 --> 00:08:09,770 ‫So let's move it there. 116 00:08:10,100 --> 00:08:16,880 ‫A good position for that would be 125 and 54. 117 00:08:16,880 --> 00:08:21,290 ‫Now it doesn't make sense because the position is not correct for our player one in general. 118 00:08:21,290 --> 00:08:26,330 ‫So let's position that at zero and let's change the height of our player one as well. 119 00:08:26,330 --> 00:08:27,950 ‫So player one canvas. 120 00:08:28,670 --> 00:08:31,970 ‫So this is the canvas player, one part of our HUD. 121 00:08:32,180 --> 00:08:34,760 ‫We change the x position to -350. 122 00:08:36,020 --> 00:08:37,910 ‫So it's a bit further to the left. 123 00:08:38,150 --> 00:08:47,400 ‫I position the y value to 300 and the width should be 700 to high 200. 124 00:08:47,420 --> 00:08:51,710 ‫So now it takes over this whole area here at the left hand side. 125 00:08:51,710 --> 00:08:57,210 ‫So we can have the text for player one here and the number here at this corner. 126 00:08:57,230 --> 00:09:01,850 ‫So these are just values that I played around with in order to get this size for our player. 127 00:09:01,850 --> 00:09:03,980 ‫One canvas object. 128 00:09:04,370 --> 00:09:07,310 ‫So now let's go ahead for our player one. 129 00:09:07,340 --> 00:09:11,000 ‫Text change to width and height variables. 130 00:09:11,000 --> 00:09:14,450 ‫So the width should be 250 and the height should be 80. 131 00:09:14,510 --> 00:09:19,160 ‫So now we can go ahead and change the text to, for example, player one. 132 00:09:21,230 --> 00:09:22,940 ‫Now the font size. 133 00:09:24,440 --> 00:09:29,990 ‫Should be higher, of course, so that we can see anything, because so far we can't see anything and 134 00:09:29,990 --> 00:09:31,790 ‫the next one should be the font. 135 00:09:31,790 --> 00:09:36,140 ‫So we had worked with Monroe already, so now we're going to work with Monroe again. 136 00:09:36,590 --> 00:09:41,630 ‫Of course, we still need to change the color of our text to being white so that we can see anything 137 00:09:43,250 --> 00:09:44,270 ‫and is the font size. 138 00:09:44,270 --> 00:09:49,670 ‫Of course we need to use a smaller value than the height of our text. 139 00:09:51,050 --> 00:09:56,270 ‫Now you might wonder why we still can't see anything that has to do with the plane distance. 140 00:09:56,270 --> 00:10:01,250 ‫So I'm just going to set that up to be one within our canvas game object. 141 00:10:01,520 --> 00:10:06,470 ‫So now that we have our player, you can see it's not at the right position and that has to do with 142 00:10:06,470 --> 00:10:07,220 ‫the anchor. 143 00:10:07,220 --> 00:10:15,110 ‫So far, the preset is to center, center, so center and middle, which means that it's centered within 144 00:10:15,110 --> 00:10:18,230 ‫its parent and the parent is our player one. 145 00:10:18,230 --> 00:10:22,880 ‫So our player one has this rectangle as its size, as you can see. 146 00:10:22,880 --> 00:10:31,190 ‫And within that, for now we use the center middle point and we can change that to middle left. 147 00:10:31,760 --> 00:10:36,710 ‫And if we do that, you can see our position x value here changes. 148 00:10:37,610 --> 00:10:43,550 ‫Now what I want to have is the same value that's 125 in comparison to the left hand side. 149 00:10:43,550 --> 00:10:47,780 ‫So that means the X position has to go to 125. 150 00:10:47,870 --> 00:10:54,590 ‫So now you can see that our player one is positioned just right now that we have that, let's add the 151 00:10:54,590 --> 00:10:55,520 ‫score label to it. 152 00:10:55,520 --> 00:11:01,820 ‫So we need another text and I'm going to change that one to or I'm going to duplicate Labor Player one 153 00:11:02,060 --> 00:11:09,980 ‫and I'm going to call that score player one and now of course we need to change the position of that 154 00:11:09,980 --> 00:11:10,520 ‫one. 155 00:11:12,350 --> 00:11:15,140 ‫So now we want it to be at the bottom right corner. 156 00:11:15,140 --> 00:11:20,000 ‫So the score player one should be transformed to the bottom right corner here. 157 00:11:20,030 --> 00:11:24,320 ‫And of course we need to change the X and Y position then as well. 158 00:11:24,320 --> 00:11:32,000 ‫So for the X position, I'm going to take -100 and for the Y position I go with 50. 159 00:11:33,800 --> 00:11:42,200 ‫Now of course, the text will be zero at the beginning and let's center the text so that it is in the 160 00:11:42,200 --> 00:11:43,820 ‫center of its view. 161 00:11:45,620 --> 00:11:49,440 ‫Now the width and height can be changed as well because we won't need that much width. 162 00:11:49,440 --> 00:11:58,050 ‫So I'm just going to go with 20 and 100 for the width and height, and I'm gonna center the zero in 163 00:11:58,050 --> 00:11:58,770 ‫its view. 164 00:11:58,890 --> 00:12:00,660 ‫So now it's centered, as you can see. 165 00:12:00,660 --> 00:12:07,080 ‫If I center it in its view in terms of height with the alignment, then that means that our number will 166 00:12:07,080 --> 00:12:08,460 ‫be just in the center now. 167 00:12:08,460 --> 00:12:14,610 ‫So the number is centered and it can grow because it has enough space to the left and to the right. 168 00:12:14,730 --> 00:12:17,280 ‫We could even change the font size if we feel like it. 169 00:12:17,280 --> 00:12:19,950 ‫So for example, it would be a good font size here. 170 00:12:19,950 --> 00:12:22,710 ‫I think right now that we have that for our player. 171 00:12:22,710 --> 00:12:26,460 ‫One, we need to duplicate that and do the same thing for player two. 172 00:12:26,460 --> 00:12:31,560 ‫But there will be some minor changes because now the anchor is not set right anymore. 173 00:12:31,560 --> 00:12:38,700 ‫So that one we will be labeled player two and that one will be square player two So let's change the 174 00:12:38,700 --> 00:12:43,590 ‫anchors for both of them and let's move the player to game object in general first. 175 00:12:43,590 --> 00:12:53,220 ‫So that one should be at 350 and now we can go ahead and change the alignment to being right for our 176 00:12:53,220 --> 00:12:53,520 ‫label. 177 00:12:53,520 --> 00:12:57,600 ‫Player two And now of course we also need to change the X position. 178 00:12:57,600 --> 00:13:02,520 ‫So 125 negative should be a good position for our player too. 179 00:13:02,730 --> 00:13:05,400 ‫And now I want the alignment to be to the right. 180 00:13:05,400 --> 00:13:07,830 ‫So now it should be aligned to the right. 181 00:13:08,040 --> 00:13:11,250 ‫As you can see now it aligns perfectly with this corner here. 182 00:13:11,250 --> 00:13:14,400 ‫Let's change the text to player two as well. 183 00:13:14,460 --> 00:13:18,450 ‫And now we only need to change the score for player two. 184 00:13:18,600 --> 00:13:23,580 ‫So the score for Player two now should not go to the bottom, right, but to the bottom left. 185 00:13:24,090 --> 00:13:28,380 ‫And of course, we need to change the X position for it as well. 186 00:13:28,890 --> 00:13:30,630 ‫So now we should be just fine. 187 00:13:30,630 --> 00:13:36,150 ‫I think we have the zero zero, we have our racquets, we have the ball, we have the waltz. 188 00:13:36,150 --> 00:13:39,660 ‫And in terms of looks, the game is pretty much done. 189 00:13:39,660 --> 00:13:44,380 ‫Of course we need to add all the functionality and that's what we are going to do in the next videos. 190 00:13:44,430 --> 00:13:47,280 ‫So please go ahead and try to rebuild that. 191 00:13:47,280 --> 00:13:52,110 ‫You can use different values, of course, as you like and different colors, different fonts, all 192 00:13:52,110 --> 00:13:52,710 ‫of that. 193 00:13:52,830 --> 00:13:55,110 ‫Have fun building the field and the scene. 194 00:13:55,110 --> 00:13:58,080 ‫So let's save the scene and see you in the next video.