WEBVTT 1 00:00:05.666 --> 00:00:09.903 Basics of Games Production Mechanism of Game Contents 5 (Game Engine, View Space) 2 00:00:09.903 --> 00:00:12.170 GCC Academy 3 00:00:27.432 --> 00:00:28.908 Hello, everyone 4 00:00:28.908 --> 00:00:30.799 This is Lee Deukwoo of Game Math 5 00:00:30.799 --> 00:00:33.549 During this time, I'm going to explain about the principle of 6 00:00:33.549 --> 00:00:35.400 game structure 7 00:00:35.400 --> 00:00:37.700 We'll talk about local space and world space 8 00:00:37.700 --> 00:00:41.040 and about how game rendering proceeds 9 00:00:41.040 --> 00:00:44.560 Next, we'll learn about how the resources made for game production 10 00:00:44.560 --> 00:00:46.160 are managed 11 00:00:46.160 --> 00:00:49.000 I'll explain about its process 12 00:00:49.000 --> 00:00:52.279 Next, I'll talk about view space, used for expressing 13 00:00:52.279 --> 00:00:55.000 camera on the game 14 00:00:55.000 --> 00:00:56.720 I'm going to explain about camera on games 15 00:00:56.720 --> 00:01:00.480 and a new space called view space 16 00:01:00.480 --> 00:01:03.480 Finally, we'll learn about how we need to construct a matrix 17 00:01:03.480 --> 00:01:06.641 in order to calculate the view space 18 00:01:06.876 --> 00:01:10.737 Structure and Principle of Game Engine 19 00:01:10.961 --> 00:01:13.639 First, we'll talk about 20 00:01:13.639 --> 00:01:17.680 local space and world space 21 00:01:17.680 --> 00:01:21.120 Earlier, when forming an object 22 00:01:21.120 --> 00:01:23.120 multiple points came together 23 00:01:23.120 --> 00:01:25.160 to create a single object 24 00:01:25.160 --> 00:01:30.023 And in order to draw that object, we had an origin 25 00:01:30.023 --> 00:01:31.720 In terms of a two-dimensional plane 26 00:01:31.720 --> 00:01:34.839 (0, 0, 1) was the standard 27 00:01:34.839 --> 00:01:37.120 and relative locations were chosen 28 00:01:37.120 --> 00:01:39.839 to express the form of an object 29 00:01:39.839 --> 00:01:44.120 When drawing a single object like this 30 00:01:44.120 --> 00:01:47.879 this space proceeding with (0, 0, 1) as the standard 31 00:01:47.879 --> 00:01:51.919 is called local space 32 00:01:51.919 --> 00:01:54.040 But when we make a game 33 00:01:54.040 --> 00:01:56.839 we don't need a single object 34 00:01:56.839 --> 00:02:01.599 We need multiple objects mixed together in a space 35 00:02:01.599 --> 00:02:05.320 These come together to create the stage 36 00:02:05.320 --> 00:02:07.199 And the main character goes into this space 37 00:02:07.199 --> 00:02:09.839 and has to explore around it 38 00:02:09.839 --> 00:02:14.561 Therefore, we need a separate space 39 00:02:14.561 --> 00:02:18.039 where these objects are gathered together 40 00:02:18.039 --> 00:02:21.720 This space used for organizing the game stage 41 00:02:21.720 --> 00:02:24.160 is called world space 42 00:02:24.160 --> 00:02:28.240 So game stage is 43 00:02:28.240 --> 00:02:32.119 where local spaces forming up objects have gathered up 44 00:02:32.119 --> 00:02:36.720 It's a form of central space where they have gathered up 45 00:02:36.720 --> 00:02:38.839 To explain this mathematically 46 00:02:38.839 --> 00:02:42.639 the local spaces get linearly transformed 47 00:02:42.639 --> 00:02:44.600 with the world space as the standard 48 00:02:44.600 --> 00:02:48.559 And with a value for translation, rotation, and scale 49 00:02:48.559 --> 00:02:53.399 they are arranged 50 00:02:53.399 --> 00:02:55.399 Like the picture 51 00:02:55.399 --> 00:02:57.479 when an object has local space 52 00:02:57.479 --> 00:03:01.199 this local space sets the world space as the standard 53 00:03:01.199 --> 00:03:04.279 and places its own local space on top of it 54 00:03:04.279 --> 00:03:05.949 That's how you can view it 55 00:03:07.919 --> 00:03:12.600 In order to place local space on the world space 56 00:03:12.600 --> 00:03:16.039 there would be unique properties of the object 57 00:03:16.039 --> 00:03:19.520 There would be properties such as how far it is 58 00:03:19.520 --> 00:03:21.600 away from the origin of the world 59 00:03:21.600 --> 00:03:25.279 There are various information to distinguish this 60 00:03:25.279 --> 00:03:28.160 But normally, we use 3 types of information 61 00:03:28.160 --> 00:03:32.759 And those are scale, rotation, and location 62 00:03:32.759 --> 00:03:35.679 These were mentioned earlier 63 00:03:35.679 --> 00:03:41.479 when we were talking about matrices related to affine transformation 64 00:03:41.479 --> 00:03:43.559 These, together 65 00:03:43.559 --> 00:03:45.679 are called transform 66 00:03:45.679 --> 00:03:47.729 We'll try inducing matrices 67 00:03:47.729 --> 00:03:50.199 related to this transform 68 00:03:50.199 --> 00:03:53.305 For these three affine transformations 69 00:03:53.305 --> 00:03:55.805 scale transformation is S, rotation is R 70 00:03:55.805 --> 00:03:58.119 and translation is T 71 00:03:58.119 --> 00:04:01.080 The result of applying these three transformations in order 72 00:04:01.080 --> 00:04:04.559 has the following possible number of cases 73 00:04:04.559 --> 00:04:08.199 For matrix, commutative property isn't valid 74 00:04:08.199 --> 00:04:10.559 Therefore, all of these 75 00:04:10.559 --> 00:04:15.759 The result of multiplying these would all be different 76 00:04:15.759 --> 00:04:19.279 Let's say that we apply the translation T 77 00:04:19.279 --> 00:04:22.920 in the middle, as second 78 00:04:22.920 --> 00:04:25.760 If we apply it that way 79 00:04:25.760 --> 00:04:29.799 I'll use the picture to explain the problem that occurs 80 00:04:29.799 --> 00:04:32.149 Let's say that we translated up 81 00:04:32.149 --> 00:04:35.119 by (0, 1) 82 00:04:35.119 --> 00:04:39.480 If we move up (0, 1) after rotating 83 00:04:39.480 --> 00:04:42.600 then the final location would be (0, 1) 84 00:04:42.600 --> 00:04:46.571 But if we translate by (0, 1) first 85 00:04:46.571 --> 00:04:47.600 and then rotate 86 00:04:47.600 --> 00:04:51.600 the final location of the object isn't (0, 1) 87 00:04:51.600 --> 00:04:55.480 Then when I make the command of moving up one unit 88 00:04:55.480 --> 00:04:57.720 an unexpected result comes out 89 00:04:57.720 --> 00:05:01.239 Then in the perspective of the user who commands to make the game 90 00:05:01.239 --> 00:05:03.559 a disharmony would occur 91 00:05:03.559 --> 00:05:06.970 I commanded it to go up 92 00:05:06.970 --> 00:05:10.519 but it seems like it's going the wrong direction 93 00:05:10.519 --> 00:05:12.669 So for the transformation itself, we can apply 94 00:05:12.669 --> 00:05:14.399 both cases, but 95 00:05:14.399 --> 00:05:18.519 when we actually make or play the game 96 00:05:18.519 --> 00:05:21.640 we need to use the form 97 00:05:21.640 --> 00:05:24.090 that performs the set command 98 00:05:24.090 --> 00:05:26.200 in the perspective of a user who doesn't know math 99 00:05:26.200 --> 00:05:29.480 Then this translation part 100 00:05:29.480 --> 00:05:31.880 has to come last 101 00:05:31.880 --> 00:05:34.920 So for the 6 cases above 102 00:05:34.920 --> 00:05:41.160 we would choose the cases where translation occurs last 103 00:05:41.160 --> 00:05:42.498 I've said that matrix 104 00:05:42.498 --> 00:05:45.399 application occurs from right to left 105 00:05:45.399 --> 00:05:49.199 Therefore, T·S·R or T·R·S 106 00:05:49.199 --> 00:05:52.279 are the two cases that we get 107 00:05:52.279 --> 00:05:56.320 Then which one should we choose out of the two transformations? 108 00:05:56.320 --> 00:06:00.640 Let's say that we're increasing the scale for one side 109 00:06:00.640 --> 00:06:04.108 If we increase the scale for one side 110 00:06:04.108 --> 00:06:06.760 and then rotate it 111 00:06:06.760 --> 00:06:11.519 First, when we rotate it first and then scale it 112 00:06:11.519 --> 00:06:18.320 I scaled the original object sideways 113 00:06:18.320 --> 00:06:20.880 then the rectangle has to be stretched out 114 00:06:20.880 --> 00:06:23.980 But here, we get the result of a rhombus 115 00:06:23.980 --> 00:06:26.760 getting stretched out 116 00:06:26.760 --> 00:06:29.440 But if you look at the bottom result 117 00:06:29.440 --> 00:06:33.090 we stretch the object horizontally first 118 00:06:33.090 --> 00:06:35.119 and then the result of rotation 119 00:06:35.119 --> 00:06:39.022 Therefore, among the final 6 cases 120 00:06:39.022 --> 00:06:40.172 the transformation 121 00:06:40.172 --> 00:06:44.622 that we need to choose for the game producer 122 00:06:44.622 --> 00:06:46.160 or the ones playing the game 123 00:06:46.160 --> 00:06:50.880 is TRS, applying the scale first, then applying the rotation 124 00:06:50.880 --> 00:06:53.880 and then applying the translation 125 00:06:53.880 --> 00:06:55.600 That's the order we need to proceed with 126 00:06:55.600 --> 00:06:57.918 Therefore, the following form 127 00:06:57.918 --> 00:06:59.559 is the set order of transformation 128 00:06:59.559 --> 00:07:03.622 If we link TRS together and multiply them together 129 00:07:03.622 --> 00:07:05.880 we would get the same square matrix 130 00:07:05.880 --> 00:07:10.640 This is called a model matrix 131 00:07:10.640 --> 00:07:13.931 When managing these transforms, we 132 00:07:13.931 --> 00:07:17.839 use it in the form of matrix 133 00:07:17.839 --> 00:07:21.839 But in the perspective of actual game producers or game players 134 00:07:21.839 --> 00:07:24.880 even if they don't know what matrix is 135 00:07:24.880 --> 00:07:27.604 they just want to give commands in the form of 136 00:07:27.604 --> 00:07:29.101 go up one unit 137 00:07:29.101 --> 00:07:31.480 or rotate 30 degrees 138 00:07:31.480 --> 00:07:34.415 Therefore, when related to production 139 00:07:34.415 --> 00:07:36.399 the matrix itself isn't used 140 00:07:36.399 --> 00:07:39.608 We just pull out the essential elements 141 00:07:39.608 --> 00:07:42.079 needed for matrix production, and manage them 142 00:07:42.079 --> 00:07:45.559 And those are scale, rotation, and translation 143 00:07:45.559 --> 00:07:49.279 Data related to scale is Vector2 144 00:07:49.279 --> 00:07:51.379 We just need to know the scale of the x axis 145 00:07:51.379 --> 00:07:54.871 and the y axis, just these two things 146 00:07:54.871 --> 00:07:57.160 Therefore, we set it as Vector2 147 00:07:57.160 --> 00:07:59.560 For rotation, since it's a rotation on a plane 148 00:07:59.560 --> 00:08:01.679 we just need the information on angle 149 00:08:01.679 --> 00:08:04.229 For translation as well, Vector2 150 00:08:04.229 --> 00:08:08.000 We just need the information on 151 00:08:08.000 --> 00:08:10.832 how much translation we did on x axis 152 00:08:10.832 --> 00:08:12.519 and translation on y axis 153 00:08:12.519 --> 00:08:15.769 Just by changing these information 154 00:08:15.769 --> 00:08:18.669 they should be able to produce or play the game 155 00:08:18.669 --> 00:08:21.799 That's the environment that should be made 156 00:08:21.799 --> 00:08:25.849 So when we usually work on the game engine 157 00:08:25.849 --> 00:08:28.480 you probably have done this before but 158 00:08:28.480 --> 00:08:31.905 we set these transform settings 159 00:08:31.905 --> 00:08:35.455 These values for the objects and space transformation 160 00:08:35.455 --> 00:08:38.599 can be set up on the interface they provide 161 00:08:38.599 --> 00:08:40.699 For Unity or Unreal Engine as well 162 00:08:40.699 --> 00:08:45.359 transform is provided for all objects 163 00:08:45.359 --> 00:08:47.509 Then how will these inputted information 164 00:08:47.509 --> 00:08:49.440 be used internally? 165 00:08:49.440 --> 00:08:51.917 These are used for creating 166 00:08:51.917 --> 00:08:53.960 the model matrix we mentioned earlier 167 00:08:53.960 --> 00:08:57.789 The scale transformation of affine transformation 168 00:08:57.789 --> 00:08:59.320 proceeds like this 169 00:08:59.320 --> 00:09:01.320 Next, rotation proceeds like this 170 00:09:01.320 --> 00:09:03.840 And translation proceeds like this 171 00:09:03.840 --> 00:09:07.640 Taking each of these s_x, s_y, and θ 172 00:09:07.640 --> 00:09:09.190 and t_x and t_y 173 00:09:09.190 --> 00:09:12.919 When we combine these 3 information and multiply them 174 00:09:12.919 --> 00:09:14.719 we get the following matrix 175 00:09:14.719 --> 00:09:18.269 So we don't perform each multiplication 176 00:09:18.269 --> 00:09:20.599 individually 177 00:09:20.599 --> 00:09:23.949 We just need to insert the data 178 00:09:23.949 --> 00:09:27.799 into this final product of matrix 179 00:09:27.799 --> 00:09:31.440 Then, the final transform gets completed 180 00:09:31.440 --> 00:09:33.040 This is the advantage of 181 00:09:33.040 --> 00:09:35.567 matrix multiplication 182 00:09:38.039 --> 00:09:41.989 Then this time, with this transform as the foundation 183 00:09:41.989 --> 00:09:46.000 we'll look at how game rendering proceeds 184 00:09:46.000 --> 00:09:49.200 For a game to work smoothly 185 00:09:49.200 --> 00:09:52.520 the multiple objects arranged in world space 186 00:09:52.520 --> 00:09:56.020 need a systematic method 187 00:09:56.020 --> 00:09:59.320 to manage them 188 00:09:59.320 --> 00:10:00.840 efficiently 189 00:10:00.840 --> 00:10:05.390 The system that can manage the overall game stage is called 190 00:10:05.390 --> 00:10:08.320 at the developing level, and this is a development term but 191 00:10:08.320 --> 00:10:09.820 it's called a scene 192 00:10:09.820 --> 00:10:12.000 It's also called a level 193 00:10:12.000 --> 00:10:16.100 Objects belonging to this scene 194 00:10:16.100 --> 00:10:20.719 always have the transform information 195 00:10:20.719 --> 00:10:23.999 containing information about 196 00:10:23.999 --> 00:10:26.320 where it's located on the world space 197 00:10:26.320 --> 00:10:32.239 This transform information is managed by the unit of object 198 00:10:32.239 --> 00:10:35.426 And the object having transformation 199 00:10:35.426 --> 00:10:37.039 would also have to be managed separately 200 00:10:37.039 --> 00:10:39.689 These are usually managed as 201 00:10:39.689 --> 00:10:42.559 game objects or actors 202 00:10:42.559 --> 00:10:44.459 Expressing this structure as a picture 203 00:10:44.459 --> 00:10:45.919 can be shown as the following 204 00:10:45.919 --> 00:10:47.669 There's the overall scene 205 00:10:47.669 --> 00:10:49.469 A scene, in a way 206 00:10:49.469 --> 00:10:52.239 is a collection of game objects 207 00:10:52.239 --> 00:10:54.389 This game object must 208 00:10:54.389 --> 00:10:56.189 have a transform 209 00:10:56.189 --> 00:10:59.840 That's the structure it has 210 00:10:59.840 --> 00:11:03.166 Now, a game is ultimately 211 00:11:03.166 --> 00:11:07.280 exported images of videos 212 00:11:07.280 --> 00:11:10.430 In the monitor, different images are 213 00:11:10.430 --> 00:11:18.835 flipped through very quickly 214 00:11:18.835 --> 00:11:24.000 Therefore, it proceeds quickly in the unit of frames 215 00:11:24.000 --> 00:11:26.800 When we input through the keyboard 216 00:11:26.800 --> 00:11:28.850 and move an object 217 00:11:28.850 --> 00:11:31.000 it's not like the object is actually moving 218 00:11:31.000 --> 00:11:33.825 It catches the input value in a very short time frame 219 00:11:33.825 --> 00:11:37.475 and draws out a new frame 220 00:11:37.475 --> 00:11:39.679 That's the way it proceeds 221 00:11:39.679 --> 00:11:44.846 Therefore, we confirm the transform information of game objects belonging to the scene 222 00:11:44.846 --> 00:11:47.080 for each frame 223 00:11:47.080 --> 00:11:50.680 Then when the transform for each object has been decided 224 00:11:50.680 --> 00:11:53.599 there's the mesh information of the object 225 00:11:53.599 --> 00:11:56.049 The mesh is composed of vertices 226 00:11:56.049 --> 00:12:00.119 and these vertices actually compose triangles 227 00:12:00.119 --> 00:12:03.665 The triangle information from the mesh 228 00:12:03.665 --> 00:12:07.206 gets matched to the model matrix 229 00:12:07.206 --> 00:12:09.856 and other matrices that we'll learn about 230 00:12:09.856 --> 00:12:13.159 And then each triangle 231 00:12:13.159 --> 00:12:17.400 gets drawn one by one 232 00:12:17.400 --> 00:12:21.550 Changing the transform of game objects 233 00:12:21.550 --> 00:12:25.200 through input 234 00:12:25.200 --> 00:12:30.080 actually has no relationship to drawing the triangle of the mesh 235 00:12:30.080 --> 00:12:33.417 It simply shows the changed information 236 00:12:33.417 --> 00:12:37.400 about how the game object has moved 237 00:12:37.400 --> 00:12:40.698 Only after these transform information has been confirmed 238 00:12:40.698 --> 00:12:44.298 we can safely transform the vertices 239 00:12:44.298 --> 00:12:46.559 of triangles composing up the mesh 240 00:12:46.559 --> 00:12:49.859 Therefore, it proceeds with two 241 00:12:49.859 --> 00:12:51.080 overall processes 242 00:12:51.080 --> 00:12:53.180 These are called game logic 243 00:12:53.180 --> 00:12:55.479 and rendering logic 244 00:12:55.479 --> 00:12:56.880 I wrote it down here 245 00:12:56.880 --> 00:12:59.708 A game logic is 246 00:12:59.708 --> 00:13:02.991 the process of confirming the transform of the game object 247 00:13:02.991 --> 00:13:06.159 that is not related to rendering 248 00:13:06.159 --> 00:13:10.440 Rendering logic is when this confirmed transform is used as the foundation 249 00:13:10.440 --> 00:13:13.440 to transform the vertices composing the mesh 250 00:13:13.440 --> 00:13:16.719 through matrix multiplication 251 00:13:16.719 --> 00:13:20.901 These changed vertices ultimately make up the triangle 252 00:13:20.901 --> 00:13:25.074 And coloring each of the triangles 253 00:13:25.074 --> 00:13:27.960 is the process of rendering logic 254 00:13:27.960 --> 00:13:30.482 Showing this as a picture 255 00:13:30.482 --> 00:13:33.332 There's an object that has the transform 256 00:13:33.332 --> 00:13:34.919 and the mesh information 257 00:13:34.919 --> 00:13:39.760 But we don't always use these two information the same 258 00:13:39.760 --> 00:13:42.960 First, in game logic, we only use the information 259 00:13:42.960 --> 00:13:44.960 about transform 260 00:13:44.960 --> 00:13:47.110 On top of this confirmed transform 261 00:13:47.110 --> 00:13:50.080 we render the mesh information of the object 262 00:13:50.080 --> 00:13:54.780 The two steps proceed separately 263 00:13:54.780 --> 00:13:57.239 as you should know 264 00:13:57.239 --> 00:14:01.719 Next, we'll learn about game resources 265 00:14:01.719 --> 00:14:07.440 A game composes objects and the stage 266 00:14:07.440 --> 00:14:09.655 Composing the objects for each frame 267 00:14:09.655 --> 00:14:14.440 and rendering them is a core process, but 268 00:14:14.440 --> 00:14:17.090 managing the data used in the game 269 00:14:17.090 --> 00:14:19.400 is also one of its important roles 270 00:14:19.400 --> 00:14:21.611 Therefore, the data used in the game 271 00:14:21.611 --> 00:14:25.200 needs to be managed systematically and efficiently 272 00:14:25.200 --> 00:14:27.750 That way, when users download this later 273 00:14:27.750 --> 00:14:31.080 they will be able to play pleasantly, with small capacity 274 00:14:31.080 --> 00:14:33.130 These data used in games 275 00:14:33.130 --> 00:14:36.919 are called game resources, or game assets 276 00:14:36.919 --> 00:14:40.985 Game resources are a distinct concept from 277 00:14:40.985 --> 00:14:43.679 scene and game object that we talked about earlier 278 00:14:43.679 --> 00:14:47.329 When making a 2D game 279 00:14:47.329 --> 00:14:50.799 let's say that we arrange 100 of the 280 00:14:50.799 --> 00:14:53.799 same tiles, or same pictures 281 00:14:53.799 --> 00:14:57.499 Then if the game object possesses this asset 282 00:14:57.499 --> 00:14:59.799 then the 100 objects 283 00:14:59.799 --> 00:15:03.399 holding the same texture, or same image 284 00:15:03.399 --> 00:15:04.452 all have the asset 285 00:15:04.452 --> 00:15:08.520 Then the size of the scene will greatly increase 286 00:15:08.520 --> 00:15:11.920 Therefore, I wrote this down here too but 287 00:15:11.920 --> 00:15:14.280 when 100 identical monsters are placed on the map 288 00:15:14.280 --> 00:15:18.130 having duplicates in all the game objects 289 00:15:18.130 --> 00:15:21.679 increases the capacity of the game exponentially 290 00:15:21.679 --> 00:15:25.979 Therefore, it's more preferred to manage 291 00:15:25.979 --> 00:15:29.200 identical assets in a single data 292 00:15:29.200 --> 00:15:31.880 That's more efficient 293 00:15:31.880 --> 00:15:34.680 So normally, when managing 294 00:15:34.680 --> 00:15:36.730 the resources of game engines internally 295 00:15:36.730 --> 00:15:38.599 a unique key is given 296 00:15:38.599 --> 00:15:40.479 An identifier is given 297 00:15:40.479 --> 00:15:43.640 The game object only holds the identifier information 298 00:15:43.640 --> 00:15:45.201 Then the game object 299 00:15:45.201 --> 00:15:47.340 doesn't have to possess the asset anymore 300 00:15:47.340 --> 00:15:50.200 Then, the game object capacity will decrease 301 00:15:50.200 --> 00:15:55.399 This monster data that gives the unique key 302 00:15:55.399 --> 00:15:59.149 or the tile data that makes up the background 303 00:15:59.149 --> 00:16:04.479 is managed separately, through database 304 00:16:04.479 --> 00:16:08.159 And these are called resource repository 305 00:16:08.159 --> 00:16:10.709 Inside the resource repository 306 00:16:10.709 --> 00:16:13.119 various types of data get included 307 00:16:13.119 --> 00:16:15.269 Because as mentioned earlier 308 00:16:15.269 --> 00:16:17.039 the model information may go in 309 00:16:17.039 --> 00:16:18.789 Or the image information may go in 310 00:16:18.789 --> 00:16:20.559 The music information may go in 311 00:16:20.559 --> 00:16:24.259 All the shared data used in the game 312 00:16:24.259 --> 00:16:27.599 go into the resource repository 313 00:16:27.599 --> 00:16:30.199 In this resource repository 314 00:16:30.199 --> 00:16:31.799 primary classification occurs based on the type 315 00:16:31.799 --> 00:16:35.679 Next, it gives a unique key for each 316 00:16:35.679 --> 00:16:39.129 Then the game objects 317 00:16:39.129 --> 00:16:42.529 can use this and share various resources 318 00:16:42.529 --> 00:16:44.359 to use them efficiently 319 00:16:44.359 --> 00:16:49.080 So the scene and the resource repository is separated 320 00:16:49.080 --> 00:16:54.479 Only the key information is provided, in order to minimize the size of the scene 321 00:16:54.479 --> 00:16:57.640 and manage the data effectively 322 00:16:57.640 --> 00:16:59.325 That's what you should know 323 00:16:59.958 --> 00:17:03.611 View Space 324 00:17:03.960 --> 00:17:07.160 I'll first explain about the camera 325 00:17:07.160 --> 00:17:10.719 The world space that we looked at earlier 326 00:17:10.719 --> 00:17:14.760 is actually a space constructed to place objects 327 00:17:14.760 --> 00:17:17.160 In the perspective of the one making the game 328 00:17:17.160 --> 00:17:20.520 it's a needed, essential space 329 00:17:20.520 --> 00:17:22.270 Even when composing the game 330 00:17:22.270 --> 00:17:24.800 it's an important space 331 00:17:24.800 --> 00:17:28.000 For the content of games 332 00:17:28.000 --> 00:17:32.760 we're not making the stage 333 00:17:32.760 --> 00:17:36.055 Instead, an avatar that represents the person playing the game 334 00:17:36.055 --> 00:17:39.655 explores the game space 335 00:17:39.655 --> 00:17:41.799 And therefore 336 00:17:41.799 --> 00:17:44.997 everything has to be expressed 337 00:17:44.997 --> 00:17:47.239 in the perspective of the game avatar 338 00:17:47.239 --> 00:17:50.319 Therefore, the camera 339 00:17:50.319 --> 00:17:52.569 The view of the avatar 340 00:17:52.569 --> 00:17:55.760 is the imaginary camera 341 00:17:55.760 --> 00:17:59.660 Everything gets reinterpreted with this view as the standard 342 00:17:59.660 --> 00:18:02.920 and they have to be rendered that way 343 00:18:02.920 --> 00:18:08.713 Therefore, after placing the objects on the world space 344 00:18:08.713 --> 00:18:12.319 the entire world has to be reinterpreted with camera as the standard 345 00:18:12.319 --> 00:18:14.162 If that is not the case 346 00:18:14.162 --> 00:18:16.160 as you can see in the picture 347 00:18:16.160 --> 00:18:18.710 on the left, everything can only be expressed 348 00:18:18.710 --> 00:18:20.860 with the origin as the standard 349 00:18:20.860 --> 00:18:23.119 within this world space 350 00:18:23.119 --> 00:18:26.319 But when the world space is very big 351 00:18:26.319 --> 00:18:31.040 it's impossible to express everything in one screen 352 00:18:31.040 --> 00:18:33.712 But if we use something called a camera 353 00:18:33.712 --> 00:18:36.826 and use this view space, as you can see here 354 00:18:36.826 --> 00:18:40.160 we can freely show a section of the world space 355 00:18:40.160 --> 00:18:42.560 that we want on the screen 356 00:18:42.560 --> 00:18:45.199 That's the advantage that we get 357 00:18:45.199 --> 00:18:47.249 In order to create space like this 358 00:18:47.249 --> 00:18:50.199 we need to know the concept of view space 359 00:18:50.199 --> 00:18:52.949 And we need to check how to 360 00:18:52.949 --> 00:18:54.920 calculate this 361 00:18:54.920 --> 00:18:59.400 View space is ultimately rearranging the world space 362 00:18:59.400 --> 00:19:02.079 with the camera as the origin 363 00:19:02.079 --> 00:19:04.192 A camera is, in a way 364 00:19:04.192 --> 00:19:07.000 an object placed in the world space 365 00:19:07.000 --> 00:19:11.280 We reinterpret the world space with the placed object as the origin 366 00:19:11.280 --> 00:19:14.330 In other words, objects placed in the world space 367 00:19:14.330 --> 00:19:15.980 have to be calculated again 368 00:19:15.980 --> 00:19:19.040 with the camera as the origin 369 00:19:19.040 --> 00:19:20.599 Let's look at an example 370 00:19:20.599 --> 00:19:25.849 Let's say that the camera is located at (-10, -10) 371 00:19:25.849 --> 00:19:28.719 If it's located at (-10, -10) 372 00:19:28.719 --> 00:19:32.569 and if the location of the object with the camera as the origin 373 00:19:32.569 --> 00:19:34.560 is at (10, 10) 374 00:19:34.560 --> 00:19:38.160 Then the location of the object becomes (20, 20) 375 00:19:38.160 --> 00:19:40.959 What that means is that, the camera is right here 376 00:19:40.959 --> 00:19:43.560 It's at (-10, -10) 377 00:19:43.560 --> 00:19:47.359 If we reinterpret the object location in the perspective of camera 378 00:19:47.359 --> 00:19:50.959 we have to set this as the origin again 379 00:19:50.959 --> 00:19:54.909 Then, we're reinterpreting that the object is 380 00:19:54.909 --> 00:19:58.426 (20, 20) away from here 381 00:19:58.426 --> 00:20:02.976 Let's analyze the mechanism why it becomes (20, 20) 382 00:20:02.976 --> 00:20:05.900 The location of the camera in the original world space 383 00:20:05.900 --> 00:20:08.850 was (-10, -10) 384 00:20:08.850 --> 00:20:11.940 And the location of the object was (10, 10) 385 00:20:11.940 --> 00:20:15.992 But this one calculates the location of the camera 386 00:20:15.992 --> 00:20:19.542 in the reverse direction, or reverse matrix 387 00:20:19.542 --> 00:20:22.931 Then the inverse matrix of (-10, -10) 388 00:20:22.931 --> 00:20:26.231 becomes a negative value 389 00:20:26.231 --> 00:20:28.940 and becomes (10, 10) 390 00:20:28.940 --> 00:20:31.723 There, we add the original location of the object 391 00:20:31.723 --> 00:20:34.623 when the world was the standard 392 00:20:34.623 --> 00:20:36.388 Then we add (10, 10) 393 00:20:36.388 --> 00:20:39.939 and it becomes (20, 20) 394 00:20:39.939 --> 00:20:43.289 This is composed of 395 00:20:43.289 --> 00:20:44.540 two steps 396 00:20:44.540 --> 00:20:46.039 First, there's the location of the camera 397 00:20:46.039 --> 00:20:48.739 and the location of the camera becomes the standard 398 00:20:48.739 --> 00:20:50.380 and we set the inverse matrix 399 00:20:50.380 --> 00:20:53.580 Then we can look at the relative distance 400 00:20:53.580 --> 00:20:57.857 between the world origin and the camera origin 401 00:20:57.857 --> 00:20:59.290 If we set the camera as the origin 402 00:20:59.290 --> 00:21:01.607 and ask what the origin of the world is 403 00:21:01.607 --> 00:21:03.580 then it is (10, 10) 404 00:21:03.580 --> 00:21:05.357 And since the other coordinates 405 00:21:05.357 --> 00:21:07.889 are all calculated with the world origin 406 00:21:07.889 --> 00:21:09.860 we just need to add to that 407 00:21:09.860 --> 00:21:13.360 Then we can calculate how far the object is 408 00:21:13.360 --> 00:21:15.260 with the camera as the standard 409 00:21:15.260 --> 00:21:18.980 Those are the two steps it proceeds in 410 00:21:18.980 --> 00:21:21.180 So if we express the above expression 411 00:21:21.180 --> 00:21:23.680 in the perspective of matrix 412 00:21:23.680 --> 00:21:26.160 then we're obtaining the inverse matrix of translation 413 00:21:26.160 --> 00:21:29.260 It's the inverse matrix of the translation value 414 00:21:29.260 --> 00:21:33.400 of the camera transform 415 00:21:33.400 --> 00:21:36.779 And we're adding the value of the object 416 00:21:36.779 --> 00:21:40.480 But ultimately, since that's also a form of translation 417 00:21:40.480 --> 00:21:41.930 this can also be expressed 418 00:21:41.930 --> 00:21:44.360 as multiplication of translation matrix 419 00:21:44.360 --> 00:21:46.610 Therefore, just like the following 420 00:21:46.610 --> 00:21:50.279 we can express it in a two-step matrix 421 00:21:50.279 --> 00:21:55.760 If we just want to calculate the location value away from the camera 422 00:21:55.760 --> 00:21:59.660 then we take the original transform of the object 423 00:21:59.660 --> 00:22:03.260 and add the relative distance 424 00:22:03.260 --> 00:22:06.000 of the camera from the world origin 425 00:22:06.000 --> 00:22:08.900 Once we calculate that through inverse matrix 426 00:22:08.900 --> 00:22:11.713 then we can ultimately calculate how far the object is 427 00:22:11.713 --> 00:22:15.360 from the origin of the camera 428 00:22:15.360 --> 00:22:19.199 That's what this expression is showing 429 00:22:19.199 --> 00:22:23.499 A matrix calculated this way is called a view matrix 430 00:22:23.499 --> 00:22:26.699 Now let's take a look at how we should calculate 431 00:22:26.699 --> 00:22:28.960 the view matrix 432 00:22:28.960 --> 00:22:31.710 The model matrix of game object from earlier 433 00:22:31.710 --> 00:22:35.760 proceeds with the multiplied form of 434 00:22:35.760 --> 00:22:38.679 three affine transformations, TRS 435 00:22:38.679 --> 00:22:42.979 So when we actually render a triangle 436 00:22:42.979 --> 00:22:46.360 one point, vertex, of a mesh 437 00:22:46.360 --> 00:22:50.260 is composed with the local coordinate system as the standard 438 00:22:50.260 --> 00:22:53.910 On this vertex, we multiply TRS 439 00:22:53.910 --> 00:22:57.080 And the final result from multiplying TRS 440 00:22:57.080 --> 00:23:01.530 is the location when 441 00:23:01.530 --> 00:23:04.269 the world is the origin 442 00:23:04.269 --> 00:23:08.148 So we multiply v_world and v_local to TRS matrix 443 00:23:08.148 --> 00:23:11.279 We multiply the model matrix, TRS matrix, to 444 00:23:11.279 --> 00:23:15.240 go through the transformation process, as we've learned earlier 445 00:23:15.240 --> 00:23:18.231 Then if we are to reinterpret 446 00:23:18.231 --> 00:23:20.790 with the camera as the standard 447 00:23:20.790 --> 00:23:24.290 we have to rearrange the ones 448 00:23:24.290 --> 00:23:27.639 that have been arranged with world as the standard 449 00:23:27.639 --> 00:23:31.039 Therefore, we multiply a specific matrix to v_world 450 00:23:31.039 --> 00:23:34.689 and create a new point called v_view 451 00:23:34.689 --> 00:23:36.160 That's the concept 452 00:23:36.160 --> 00:23:39.160 Therefore, with the transform of camera object 453 00:23:39.160 --> 00:23:41.010 Since we place the camera ourselves 454 00:23:41.010 --> 00:23:43.010 we can know where the camera is placed 455 00:23:43.010 --> 00:23:44.919 with the world as the standard 456 00:23:44.919 --> 00:23:47.869 So based on the transform of camera object 457 00:23:47.869 --> 00:23:52.039 we transform the point of the world like the following 458 00:23:52.039 --> 00:23:55.939 When we just look at translation 459 00:23:55.939 --> 00:24:00.139 we multiply the inverse matrix of the transform of camera 460 00:24:00.139 --> 00:24:02.639 to the point that's based on the world 461 00:24:02.639 --> 00:24:05.880 And we create a point on the view space 462 00:24:05.880 --> 00:24:08.630 When this is expanded out 463 00:24:08.630 --> 00:24:11.780 it gives us the result of 464 00:24:11.780 --> 00:24:16.780 multiplying the inverse matrix of camera transform and TRS matrix 465 00:24:16.780 --> 00:24:19.130 in order 466 00:24:19.130 --> 00:24:21.679 to the local space 467 00:24:21.679 --> 00:24:27.858 Matrix like this isn't called the inverse matrix of translation 468 00:24:27.858 --> 00:24:31.440 We just combine it to call it the view matrix 469 00:24:31.440 --> 00:24:33.590 We can expand out a view matrix 470 00:24:33.590 --> 00:24:35.920 in the following way 471 00:24:35.920 --> 00:24:39.170 Up until now, I only explained 472 00:24:39.170 --> 00:24:41.420 about translation, but 473 00:24:41.420 --> 00:24:45.160 functions other than translation can go in 474 00:24:45.160 --> 00:24:46.760 Rotation is 475 00:24:46.760 --> 00:24:48.480 a main example 476 00:24:48.480 --> 00:24:50.531 So although the camera is two-dimensional 477 00:24:50.531 --> 00:24:53.000 it can rotate like this 478 00:24:53.000 --> 00:24:56.320 But we don't need to care about the scale 479 00:24:56.320 --> 00:24:58.970 Just because the camera becomes bigger 480 00:24:58.970 --> 00:25:00.820 doesn't mean the screen gets bigger 481 00:25:00.820 --> 00:25:02.519 They aren't related at all 482 00:25:02.519 --> 00:25:05.069 Although we set the transform on camera 483 00:25:05.069 --> 00:25:07.720 we don't use the information on its scale 484 00:25:07.720 --> 00:25:12.959 We proceed with a fixed scale 485 00:25:12.959 --> 00:25:17.720 If the camera rotates, how will the screen look? 486 00:25:17.720 --> 00:25:20.420 If I rotate the camera like this 487 00:25:20.420 --> 00:25:25.399 then in the perspective of expression 488 00:25:25.399 --> 00:25:29.349 in the perspective of the world, it turns the other way 489 00:25:29.349 --> 00:25:31.880 That's how it's seen to the users 490 00:25:31.880 --> 00:25:34.641 Therefore, same thing for this 491 00:25:34.641 --> 00:25:37.481 when we rotate the camera 492 00:25:37.481 --> 00:25:40.350 we can interpret the screen 493 00:25:40.350 --> 00:25:41.959 to rotate the other way 494 00:25:41.959 --> 00:25:44.320 This is also an inverse matrix 495 00:25:44.320 --> 00:25:47.640 I've said that going the opposite direction is inverse matrix 496 00:25:47.640 --> 00:25:52.690 Therefore, when there's a transform 497 00:25:52.690 --> 00:25:55.279 that sets the camera 498 00:25:55.279 --> 00:25:57.652 reinterpreting the world 499 00:25:57.652 --> 00:26:01.559 with the transform as the standard 500 00:26:01.559 --> 00:26:04.200 is in a way, applying inverse matrix 501 00:26:04.200 --> 00:26:08.150 So we apply the inverse matrix 502 00:26:08.150 --> 00:26:09.600 of TRS 503 00:26:09.600 --> 00:26:11.040 We've said that scale doesn't matter 504 00:26:11.040 --> 00:26:16.000 Then it would be the inverse matrix of TR 505 00:26:16.000 --> 00:26:18.621 In the definition of inverse matrix 506 00:26:18.621 --> 00:26:20.720 we've seen that the inverse matrix of TR 507 00:26:20.720 --> 00:26:25.067 is the same thing as flipping 508 00:26:25.067 --> 00:26:26.720 the inverse matrix of each 509 00:26:26.720 --> 00:26:31.770 This is the same result as 510 00:26:31.770 --> 00:26:35.119 the inverse function of composite function 511 00:26:35.119 --> 00:26:38.480 So when we consider the rotation as well 512 00:26:38.480 --> 00:26:43.403 the view matrix, ultimately 513 00:26:43.403 --> 00:26:46.494 is the result of multiplying 514 00:26:46.494 --> 00:26:50.359 the inverse matrix of rotation and inverse matrix of translation 515 00:26:50.359 --> 00:26:53.059 Inverse matrix of rotation 516 00:26:53.059 --> 00:26:55.920 is a transpose matrix, as we learned before 517 00:26:55.920 --> 00:26:58.270 Since inverse matrix of rotation is a transpose matrix 518 00:26:58.270 --> 00:27:04.040 the sine parts flip over 519 00:27:04.040 --> 00:27:07.940 For the inverse matrix of translation, we add 520 00:27:07.940 --> 00:27:10.000 a negative sign on the translation value 521 00:27:10.000 --> 00:27:14.400 Therefore, multiplying these two matrices 522 00:27:14.400 --> 00:27:15.880 gives us the following result 523 00:27:15.880 --> 00:27:20.799 If you look at this expression, the last third column 524 00:27:20.799 --> 00:27:24.880 has the form of dot product 525 00:27:24.880 --> 00:27:29.239 If we think of each row of rotation matrix as row vectors 526 00:27:29.239 --> 00:27:33.320 then the first row vector becomes cosθ, sinθ, 0 527 00:27:33.320 --> 00:27:37.738 And the second row becomes -sinθ, cosθ, 0 528 00:27:37.738 --> 00:27:40.880 If we think of translation as the column vector 529 00:27:40.880 --> 00:27:45.480 it becomes -t_x, -t_y, 1 530 00:27:45.480 --> 00:27:48.080 Then the third column 531 00:27:48.080 --> 00:27:50.679 where the two have been multiplied together 532 00:27:50.679 --> 00:27:55.129 is the dot product of the first row vector, cosθ, sinθ, 0 533 00:27:55.129 --> 00:27:58.000 and the third column vector 534 00:27:58.000 --> 00:28:06.081 So cosθ × –t_x + sinθ × –t_y 535 00:28:06.081 --> 00:28:07.531 And since this is 0 536 00:28:07.531 --> 00:28:09.519 we get an expression like this 537 00:28:09.519 --> 00:28:12.131 The same goes for the second value 538 00:28:15.190 --> 00:28:17.690 Matrix composed this way 539 00:28:17.690 --> 00:28:19.920 is called a view matrix 540 00:28:19.920 --> 00:28:22.720 I've organized it again in the following part 541 00:28:22.720 --> 00:28:25.220 When we place an object 542 00:28:25.220 --> 00:28:29.040 and in order for the avatar acting as the player 543 00:28:29.040 --> 00:28:31.590 to explore the game world 544 00:28:31.590 --> 00:28:33.690 we need the following 545 00:28:33.690 --> 00:28:35.980 additional processes 546 00:28:35.980 --> 00:28:40.599 First, we create the view matrix from the camera and calculate beforehand 547 00:28:40.599 --> 00:28:44.960 When we design, the camera location would be decided 548 00:28:44.960 --> 00:28:47.776 It could be the location of the player 549 00:28:47.776 --> 00:28:50.239 or it could be ahead of the player 550 00:28:50.239 --> 00:28:53.080 It will vary based on the game plan 551 00:28:53.080 --> 00:28:56.280 Anyways, if camera transform exists on the world 552 00:28:56.280 --> 00:29:01.230 we can obtain θ and translation value 553 00:29:01.230 --> 00:29:04.479 or location value from that transform 554 00:29:04.479 --> 00:29:07.159 Therefore, we can calculate the view matrix beforehand 555 00:29:07.159 --> 00:29:10.000 So we obtain the value beforehand 556 00:29:10.000 --> 00:29:13.250 And then we draw the game objects 557 00:29:13.250 --> 00:29:14.599 belonging to the scene, one by one 558 00:29:14.599 --> 00:29:17.649 If there are 100 game objects in the scene 559 00:29:17.649 --> 00:29:20.039 then we draw out 100, one by one 560 00:29:20.039 --> 00:29:23.089 We've said before that each game object 561 00:29:23.089 --> 00:29:24.440 has its unique transform 562 00:29:24.440 --> 00:29:27.681 Then a unique TRS, or model matrix 563 00:29:27.681 --> 00:29:30.239 will be made for each game object 564 00:29:30.239 --> 00:29:34.839 On that model matrix, we multiply the view matrix we obtained earlier 565 00:29:34.839 --> 00:29:36.840 and create the final matrix 566 00:29:36.840 --> 00:29:39.520 That becomes the final matrix 567 00:29:39.520 --> 00:29:42.282 Then when we multiply this final matrix 568 00:29:42.282 --> 00:29:46.821 with each vertex of the mesh of game objects 569 00:29:46.821 --> 00:29:49.671 then we get the coordinates of a new point 570 00:29:49.671 --> 00:29:52.719 that has been interpreted with view space as the origin 571 00:29:52.719 --> 00:29:54.669 If we use this as the basis 572 00:29:54.669 --> 00:29:57.400 to draw triangles and show them on the screen 573 00:29:57.400 --> 00:30:01.000 then as we mentioned earlier 574 00:30:01.000 --> 00:30:04.719 we can create the form of content 575 00:30:04.719 --> 00:30:06.724 where we can explore the world 576 00:30:10.080 --> 00:30:15.719 With that, we learned about how game contents are made 577 00:30:15.719 --> 00:30:18.526 for two-dimensional 578 00:30:18.526 --> 00:30:19.679 graphics 579 00:30:19.679 --> 00:30:21.880 That's all for today's lecture 580 00:30:21.880 --> 00:30:23.880 Great job for listening to this lesson 581 00:30:23.880 --> 00:30:24.880 Thank you 582 00:30:25.609 --> 00:30:27.359 Game Engine Local space and world space Local Space: Space with (0, 0, 1) as the standard to draw single objects World Space: Space for game stage 583 00:30:27.359 --> 00:30:29.109 Transform: Unique value of object, provides transform information to all objects Managing transform: Scale (Vector2), Rotation (Angle), Translation... 584 00:30:29.109 --> 00:30:30.859 Process of game rendering Scene or level: System that manages the overall game stage Game object or actor: Object that gets the transform 585 00:30:30.859 --> 00:30:32.648 Game logic: Confirming the transform of game object Rendering logic: Rearranging mesh vertices from local space standard to world space standard... 586 00:30:32.648 --> 00:30:35.648 Managing game resources Data used in games need to be managed efficiently Game resource or game asset: Data used in games 587 00:30:35.648 --> 00:30:38.627 Identical asset is managed with one data Resource repository: Storage of game asset information Resource repository only provides key information... 588 00:30:38.627 --> 00:30:39.995 View space Camera Set the view of avatar as an imaginary camera and need to reinterpret the world based on the camera 589 00:30:39.995 --> 00:30:41.304 View space Rearranged world space with camera as the origin Step 1: Calculate the inverse matrix of camera location Step 2: Add the object location... 590 00:30:41.304 --> 00:30:42.683 Calculation of view matrix V = R^(-1) T^(-1) = 591 00:30:42.683 --> 00:30:44.125 [ cosθ sinθ -(t_x cosθ + t_y sinθ) ] [ -sinθ cosθ -(t_x sinθ - t_y cosθ) ] [ 0 0 1] 592 00:30:44.125 --> 00:30:45.666 Logic that renders the final game object of scene Calculate the view matrix beforehand, using location value of θ of the camera transform Go through..