1 00:00:27.070 --> 00:00:30.670 Hello everyone, I'm Professor Ok Hue Jo from Sangmyung University 2 00:00:30.670 --> 00:00:32.639 using Unreal Engine for implementing immersive content 3 00:00:32.639 --> 00:00:34.820 This time, let's look at input components 4 00:00:34.820 --> 00:00:39.320 followed by user interfaces 5 00:00:39.320 --> 00:00:43.040 When it comes to the concept of UI (User Interface) 6 00:00:43.040 --> 00:00:48.400 what first comes to mind can vary based on your field of expertise and your specific academic background 7 00:00:48.400 --> 00:00:52.320 generally, when thinking about UI 8 00:00:52.320 --> 00:00:55.040 many people often think about icons, layouts, and similar elements 9 00:00:55.040 --> 00:00:58.240 Indeed, about 10 years ago 10 00:00:58.240 --> 00:01:00.119 the concept of UX (User Experience) became widely discussed and emphasized 11 00:01:00.119 --> 00:01:04.760 With the advent of smartphones, it's no longer just about graphic elements 12 00:01:04.760 --> 00:01:08.199 Now, interface designers can create features 13 00:01:08.199 --> 00:01:10.040 where users can even shake their phones 14 00:01:10.040 --> 00:01:13.720 It's not just about clicking anymore; users can now press and hold, then swipe to the side 15 00:01:13.720 --> 00:01:15.599 They can also flip the phone over, and so on 16 00:01:15.599 --> 00:01:19.839 Because of this, designers now need to consider a variety of user experiences 17 00:01:19.839 --> 00:01:23.959 In the field of UI, the concept of UX is now being discussed together 18 00:01:23.959 --> 00:01:27.360 marking a new era 19 00:01:27.400 --> 00:01:33.000 When creating games, a wide variety of UI elements come into play naturally 20 00:01:33.000 --> 00:01:37.879 and designers and developers need to consider these UI aspects 21 00:01:37.879 --> 00:01:42.879 The biggest difference between general design and UI in games is that 22 00:01:42.879 --> 00:01:47.239 Game UI distinction 1: Game UI must not interfere with the player's experience 23 00:01:47.239 --> 00:01:50.199 The UI exists specifically to support and enhance gameplay 24 00:01:50.199 --> 00:01:53.160 You could say that the concept is somewhat different 25 00:01:53.160 --> 00:01:55.879 When creating websites or mobile apps 26 00:01:55.879 --> 00:02:01.000 where the main goal is to display information in a straightforward manner 27 00:02:01.000 --> 00:02:05.680 the emphasis is on making the UI elements themselves clearly visible and accessible 28 00:02:05.680 --> 00:02:08.730 However, in games 29 00:02:08.730 --> 00:02:11.800 the UI that appears should serve to assist gameplay 30 00:02:11.800 --> 00:02:16.520 Of course, design in games can't be haphazard either 31 00:02:16.520 --> 00:02:20.240 However, design isn't necessarily as crucial in this context 32 00:02:20.240 --> 00:02:22.399 Game UI distinction 2: It must aid gameplay 33 00:02:22.399 --> 00:02:25.800 There's no need to make a single icon overly flashy or beautiful 34 00:02:25.800 --> 00:02:27.720 there are certain characteristics that should be considered 35 00:02:27.720 --> 00:02:33.160 In the past, before the advent of game engines 36 00:02:33.160 --> 00:02:38.759 graphic artists used PNG files and sometimes JPEGs, depending on the situation, when creating games 37 00:02:38.759 --> 00:02:42.759 Mostly, they implemented overlays on the screen 38 00:02:42.759 --> 00:02:44.839 to create something like an icon using PNG files 39 00:02:44.839 --> 00:02:47.960 If a graphic artist provides their assets in the form of PNG files from programs 40 00:02:47.960 --> 00:02:51.160 like Photoshop or Illustrator 41 00:02:51.160 --> 00:02:55.880 developers often implemented these assets by aligning them on the screen 42 00:02:55.880 --> 00:02:58.559 according to coordinates provided by the graphic artist 43 00:02:58.559 --> 00:03:00.720 With the popularization of game engines 44 00:03:00.720 --> 00:03:03.320 especially Unreal Engine 45 00:03:03.320 --> 00:03:07.559 convenient UI systems have been integrated 46 00:03:07.559 --> 00:03:09.859 Displaying text on the screen 47 00:03:09.859 --> 00:03:12.080 or when creating VR or AR experiences 48 00:03:12.080 --> 00:03:15.759 UI elements can also be designed to follow the camera 49 00:03:15.759 --> 00:03:18.440 Just like sticking a sticker onto a camera lens 50 00:03:18.440 --> 00:03:21.000 you can make UI elements follow wherever the camera points in VR or AR 51 00:03:21.000 --> 00:03:23.800 In VR or 3D environments 52 00:03:23.800 --> 00:03:27.279 it's possible to have icons precisely positioned on specific elements 53 00:03:27.279 --> 00:03:29.360 The same applies to AR environments as well 54 00:03:29.360 --> 00:03:32.310 After recognizing the floor or any elements 55 00:03:32.310 --> 00:03:33.279 In spatial computing 56 00:03:33.279 --> 00:03:35.160 the environment is recognized 57 00:03:35.160 --> 00:03:40.000 and you an overlay items like interfaces, menus, or other elements 58 00:03:40.000 --> 00:03:42.279 precisely on top of the recognized space in spatial computing 59 00:03:42.279 --> 00:03:44.360 Anyway, these systems are very well-developed and functional 60 00:03:44.360 --> 00:03:48.520 While it's common to create assets externally and bring them into projects 61 00:03:48.520 --> 00:03:53.000 Unreal Engine UI system feature 1: Capable of setting up elements internally without requiring external imports 62 00:03:53.000 --> 00:03:55.839 This can be considered a very important point 63 00:03:55.839 --> 00:03:58.919 To implement UI elements in Unreal Engine 64 00:03:58.919 --> 00:04:01.440 what menu should you use? 65 00:04:01.440 --> 00:04:04.080 There are several menus that are very well developed for this 66 00:04:04.080 --> 00:04:07.320 For example, as we've seen in another session 67 00:04:07.320 --> 00:04:10.679 the menu for animation in Unreal Engine is exceptionally well-designed 68 00:04:10.679 --> 00:04:13.720 and when working on UI, the menus related to UI in Unreal Engine are very well developed 69 00:04:13.720 --> 00:04:16.399 Depending on what you're doing at any given time, these menus are as finely tuned as individual tools 70 00:04:16.399 --> 00:04:19.600 Unreal Engine UI system feature 2: Convenient menu configuration 71 00:04:19.600 --> 00:04:23.399 Among them, the system for creating animations is also exceptionally well-developed 72 00:04:23.399 --> 00:04:26.040 The animation creation tool itself is directly utilized and integrated well within Unreal Engine 73 00:04:26.040 --> 00:04:30.320 If you study menus related to UI and UX concepts like these 74 00:04:30.320 --> 00:04:33.920 you can create a mobile app 75 00:04:33.920 --> 00:04:36.079 using just these elements without complex coding 76 00:04:36.079 --> 00:04:39.119 Thus, you can consider it a very powerful capability 77 00:04:39.119 --> 00:04:40.839 It's also well-designed 78 00:04:40.839 --> 00:04:42.359 to make coding and connections easy 79 00:04:42.359 --> 00:04:44.079 When talking about coding here 80 00:04:44.079 --> 00:04:46.440 you can connect not only through Blueprint but also with C 81 00:04:46.440 --> 00:04:50.679 Unreal Engine UI system feature 3: Compatibility with Blueprints 82 00:04:50.679 --> 00:04:53.679 To implement UI elements in Unreal Engine 83 00:04:53.679 --> 00:04:57.640 you should consider exploring menus specifically designed for UI development 84 00:04:57.640 --> 00:05:00.079 Taking time to learn about this in our session would be beneficial 85 00:05:00.079 --> 00:05:03.200 There are countless UI elements that can be displayed on screen 86 00:05:03.200 --> 00:05:05.839 such as icons, menus, or text 87 00:05:05.839 --> 00:05:07.720 Of course, there are icons 88 00:05:07.720 --> 00:05:10.880 where clicking them opens menus that slide out like drawers 89 00:05:10.880 --> 00:05:12.480 then, among those options, you can choose 90 00:05:12.480 --> 00:05:15.119 and when the mouse cursor is upwards 91 00:05:15.119 --> 00:05:17.160 you can change them, or you can leave them as they are 92 00:05:17.160 --> 00:05:19.920 you can change after clicking or leave them unchanged 93 00:05:19.920 --> 00:05:23.839 There are menus that are displayed throughout the entire game from start to finish 94 00:05:23.839 --> 00:05:27.200 and there are also menus that only appear when you go to specific locations or terrains 95 00:05:28.200 --> 00:05:30.160 Alternatively, there could be menus 96 00:05:30.160 --> 00:05:32.699 that follow along above a character's right hand 97 00:05:32.999 --> 00:05:35.480 These various UI and UX elements 98 00:05:35.480 --> 00:05:39.079 can be carefully considered in Unreal Engine 99 00:05:39.079 --> 00:05:42.399 regarding how they will be displayed on the screen 100 00:05:42.399 --> 00:05:47.359 The topics we'll learn about today can be broadly divided into three main parts 101 00:05:47.359 --> 00:05:51.320 Input components, and then concepts related to action mapping 102 00:05:51.320 --> 00:05:54.320 We'll look into inputs - 103 00:05:54.320 --> 00:05:56.679 how to set them up in Unreal 104 00:05:56.679 --> 00:05:58.760 when you want to trigger something with input 105 00:05:58.760 --> 00:06:01.160 Then we'll move on to UMG (Unreal Motion Graphics) 106 00:06:01.160 --> 00:06:05.279 UMG is related to UI concepts in Unreal Engine 107 00:06:05.279 --> 00:06:08.519 and we'll explore that as well 108 00:06:08.519 --> 00:06:11.600 Then we'll proceed to implementing UI design in Unreal Engine 109 00:06:11.600 --> 00:06:14.920 So, this session will focus on studying how to implement and set up UI elements in Unreal Engine 110 00:06:14.920 --> 00:06:18.679 covering related topics in detail 111 00:06:18.679 --> 00:06:21.640 Plus, input concepts, followed by action mapping concepts 112 00:06:21.640 --> 00:06:25.920 are what we'll explore in this session 113 00:06:26.296 --> 00:06:29.396 Input components and action mapping 114 00:06:30.279 --> 00:06:34.640 Input components are indeed one of the most important aspects to understand 115 00:06:34.640 --> 00:06:37.399 If you've launched Unreal Engine 116 00:06:37.399 --> 00:06:41.440 you'll notice that when you right-click in the Content Browser or Viewport 117 00:06:41.440 --> 00:06:45.359 and select "Blueprint Class" from the menu that appears, there are many types available 118 00:06:45.359 --> 00:06:48.279 These are various types of Blueprints available 119 00:06:48.279 --> 00:06:51.839 including Animation Blueprint, Actor Blueprint, and many others, totaling thousands of options 120 00:06:51.839 --> 00:06:54.959 These nodes come in various forms like this 121 00:06:54.959 --> 00:06:59.000 The colors of these node-connected lines are slightly different 122 00:06:59.000 --> 00:07:01.920 Some nodes have a red title at the top 123 00:07:01.920 --> 00:07:04.000 some have a blue title 124 00:07:04.000 --> 00:07:07.320 and some have a green title, etc. 125 00:07:07.320 --> 00:07:12.600 Anyway, all the coding that connects these nodes is called a blueprint 126 00:07:12.600 --> 00:07:18.239 and the input process also uses this blueprint for the work 127 00:07:18.239 --> 00:07:21.799 However, all the blueprints I'm talking about can, of course, be implemented in C as well 128 00:07:21.799 --> 00:07:24.000 However, since this course is for beginners 129 00:07:24.000 --> 00:07:26.959 I have prepared the entire content using blueprints 130 00:07:26.959 --> 00:07:30.279 First, we need to think about what the input is 131 00:07:30.279 --> 00:07:32.880 The input could be a situation 132 00:07:32.880 --> 00:07:37.119 a keyboard, or a mouse 133 00:07:37.119 --> 00:07:40.040 Of course, nowadays, inputs can include 134 00:07:40.040 --> 00:07:42.399 voice from a microphone 135 00:07:42.399 --> 00:07:45.600 or even where you're looking with your eyes 136 00:07:45.600 --> 00:07:48.239 Generally, in the context of games 137 00:07:48.239 --> 00:07:52.359 inputs refer to things like 138 00:07:52.359 --> 00:07:54.640 joysticks, keyboards, or clicks 139 00:07:54.640 --> 00:07:56.440 Especially with keyboard inputs 140 00:07:56.440 --> 00:07:58.839 there are so many different types of keyboards available 141 00:07:58.839 --> 00:08:02.559 But surely, everyone has played a game at least once 142 00:08:02.559 --> 00:08:05.399 and the most commonly used input buttons in games are 143 00:08:05.399 --> 00:08:10.160 Shift, Spacebar, Ctrl, Alt, and keys like these 144 00:08:10.160 --> 00:08:12.320 They are often used in combinations with each other as well 145 00:08:12.320 --> 00:08:14.760 The right hand is 146 00:08:14.760 --> 00:08:17.279 usually busy with the directional keys when playing games 147 00:08:17.279 --> 00:08:18.640 because you need to move with the mouse 148 00:08:18.640 --> 00:08:21.839 Therefore, there are many games where 149 00:08:21.839 --> 00:08:27.559 the left hand uses keys like A, S, W near the left side of the keyboard 150 00:08:27.559 --> 00:08:29.600 to serve as directional keys 151 00:08:29.600 --> 00:08:31.920 instead of using the arrow keys 152 00:08:31.920 --> 00:08:34.400 because the right hand is occupied with using the mouse 153 00:08:34.400 --> 00:08:36.359 It's all about inputs 154 00:08:36.359 --> 00:08:37.799 Joysticks 155 00:08:37.799 --> 00:08:39.679 depending on which company they're from 156 00:08:39.679 --> 00:08:40.840 can vary significantly 157 00:08:40.840 --> 00:08:43.760 Still, their functionalities are somewhat similar, albeit with slight differences 158 00:08:43.760 --> 00:08:45.479 They usually have two or three large buttons 159 00:08:45.479 --> 00:08:47.159 Then, using such a keyboard setup 160 00:08:47.159 --> 00:08:48.719 you might have keys that act as up, down, left, and right directional keys 161 00:08:48.719 --> 00:08:50.719 With a joystick, you hold it and move it around to control direction 162 00:08:50.719 --> 00:08:52.559 There are joysticks like that 163 00:08:52.559 --> 00:08:54.640 In Unreal Engine, the input component is crucial 164 00:08:54.640 --> 00:08:57.080 for handling user inputs 165 00:08:57.080 --> 00:09:00.000 and there are many related components associated with it 166 00:09:00.000 --> 00:09:04.809 This component accepts inputs from various devices 167 00:09:04.809 --> 00:09:07.909 such as keyboards, mouse, and gamepads 168 00:09:07.909 --> 00:09:09.800 offering a wide range of functionalities 169 00:09:09.800 --> 00:09:11.079 Keyboards, mouse, gamepads 170 00:09:11.079 --> 00:09:14.439 and a variety of joysticks of all sorts are also available 171 00:09:14.439 --> 00:09:17.920 It receives input from these input devices 172 00:09:17.920 --> 00:09:23.730 and converts them into in-game actions or events 173 00:09:23.730 --> 00:09:27.009 It's common for it to be attached to an actor for use 174 00:09:27.009 --> 00:09:30.530 It can typically be applied to player characters or game objects 175 00:09:30.530 --> 00:09:34.320 that need to respond to user inputs 176 00:09:34.719 --> 00:09:38.880 Alright, let's take a look at some of the key functions of the input component 177 00:09:38.880 --> 00:09:42.799 One of the most important features is action mapping 178 00:09:42.799 --> 00:09:44.599 next, there's input binding 179 00:09:44.599 --> 00:09:48.000 Main feature 1 of the input component: Input binding 180 00:09:48.000 --> 00:09:49.559 When it comes to inputs 181 00:09:49.559 --> 00:09:51.280 the mouse is widely used 182 00:09:51.280 --> 00:09:54.440 and there are also various devices like joysticks and gamepads 183 00:09:54.440 --> 00:09:56.280 Of course, the most commonly used input device is 184 00:09:56.280 --> 00:09:58.919 undoubtedly the keyboard 185 00:09:58.919 --> 00:10:02.159 Developers bind or connect specific keys or button inputs 186 00:10:02.159 --> 00:10:04.880 to specific actions 187 00:10:04.880 --> 00:10:07.159 within the game 188 00:10:07.159 --> 00:10:08.880 The feature that allows developers to bind inputs to actions 189 00:10:08.880 --> 00:10:12.000 is precisely called input binding 190 00:10:12.000 --> 00:10:15.960 For example, jumping is present in nearly all games 191 00:10:15.960 --> 00:10:18.159 It's not obviously present in every single type of game 192 00:10:18.159 --> 00:10:20.159 since there are puzzle games and other genres where jumping isn't typically included 193 00:10:20.159 --> 00:10:23.320 In most games where characters move 194 00:10:23.320 --> 00:10:26.520 like walking or running 195 00:10:26.520 --> 00:10:28.089 jumping is also commonly included 196 00:10:28.089 --> 00:10:30.200 The spacebar is commonly used for jumping 197 00:10:30.200 --> 00:10:32.559 and sometimes Shift or Ctrl keys are used as well 198 00:10:32.559 --> 00:10:36.400 In any case, the action of jumping does exist in many games 199 00:10:36.400 --> 00:10:39.599 I need to implement the functionality 200 00:10:39.599 --> 00:10:41.000 where pressing the spacebar makes the character jump 201 00:10:41.000 --> 00:10:42.599 while they're running 202 00:10:42.599 --> 00:10:45.880 Then, jumping is an action or motion in terms of gameplay mechanics 203 00:10:45.880 --> 00:10:48.840 You need to perform this in specific situations 204 00:10:48.840 --> 00:10:50.840 but connect that situation to input values 205 00:10:50.840 --> 00:10:54.280 so that jumping only occurs 206 00:10:54.280 --> 00:10:56.200 when the space value is imported 207 00:10:56.200 --> 00:10:58.880 This is exactly what input binding refers to 208 00:10:58.880 --> 00:11:02.039 It's the functionality of binding the jump action to the spacebar 209 00:11:02.039 --> 00:11:04.080 so that whenever the user presses the spacebar 210 00:11:04.080 --> 00:11:07.400 the character jumps 211 00:11:07.400 --> 00:11:09.280 so, it involves configuring it in the menu setting 212 00:11:09.280 --> 00:11:11.479 possibly integrating with blueprints 213 00:11:11.479 --> 00:11:13.719 but simply connecting it is straightforward 214 00:11:13.719 --> 00:11:15.919 But to implement this 215 00:11:15.919 --> 00:11:18.359 you'd need to study blueprints 216 00:11:18.359 --> 00:11:20.440 form various perspectives to some extent 217 00:11:20.440 --> 00:11:21.440 It's not complicated though 218 00:11:21.440 --> 00:11:23.359 but you need to understand the concepts to implement them effectively 219 00:11:23.359 --> 00:11:26.039 Main feature 2 of the input component: Action mapping and Axis mapping 220 00:11:26.039 --> 00:11:28.520 Single-shot input events 221 00:11:28.520 --> 00:11:30.000 events are not complex 222 00:11:30.000 --> 00:11:32.010 Events in games or content refer to 223 00:11:32.010 --> 00:11:34.969 specific occurrences or situations 224 00:11:34.969 --> 00:11:39.799 There are various events such as 225 00:11:39.799 --> 00:11:41.960 jumping, shooting, starting, crouching, throwing, etc. 226 00:11:41.960 --> 00:11:44.400 This, along with continuous values 227 00:11:44.400 --> 00:11:47.840 the most commonly encountered continuous value in games is 228 00:11:47.840 --> 00:11:50.320 when you continuously press the directional keys in one direction 229 00:11:50.320 --> 00:11:51.880 Continuously pressing the right button 230 00:11:51.880 --> 00:11:53.239 makes the character keep moving to the right 231 00:11:53.239 --> 00:11:55.320 Pressing up continuously makes the character keep moving upward 232 00:11:55.320 --> 00:11:58.359 In 3D graphic games from the perspective of an observer 233 00:11:58.359 --> 00:12:00.960 the most commonly used concept is 234 00:12:00.960 --> 00:12:04.159 usually raycasting 235 00:12:04.159 --> 00:12:06.799 where you use the mouse cursor to pinpoint a specific location 236 00:12:06.799 --> 00:12:09.760 When you click once, the character automatically moves toward that direction 237 00:12:09.760 --> 00:12:11.200 But you have to keep clicking 238 00:12:11.200 --> 00:12:12.239 to move continuously 239 00:12:12.239 --> 00:12:13.799 in different directions 240 00:12:13.999 --> 00:12:15.559 Such continuous values are 241 00:12:15.559 --> 00:12:19.760 most commonly used for actions like movement and camera rotation 242 00:12:19.760 --> 00:12:22.599 This distinction can be clearly made 243 00:12:22.599 --> 00:12:25.479 And this is related to the character's point of view 244 00:12:25.479 --> 00:12:30.280 Whether you're playing an MMORPG where you observe the character from a third-person perspective 245 00:12:30.280 --> 00:12:34.080 or a first-person game where you only see your hands on the screen 246 00:12:34.080 --> 00:12:36.719 you can move around freely by using the mouse 247 00:12:36.719 --> 00:12:39.880 You can look up, down, and around to see various locations 248 00:12:39.880 --> 00:12:42.400 That's also a form of continuous value input 249 00:12:42.400 --> 00:12:44.000 I keep moving with the mouse 250 00:12:44.000 --> 00:12:45.200 and move to different locations 251 00:12:45.200 --> 00:12:46.880 Camera also moves continuously 252 00:12:46.880 --> 00:12:48.640 These are examples of continuous values 253 00:12:48.640 --> 00:12:50.960 A single-shot event would be something like a single jump 254 00:12:50.960 --> 00:12:51.919 a single attack 255 00:12:51.919 --> 00:12:52.719 a single shot 256 00:12:52.719 --> 00:12:55.320 Single-shot events refer to actions like those 257 00:12:55.320 --> 00:13:00.559 The input component supports both of these types of inputs 258 00:13:00.559 --> 00:13:03.599 There are many different input values 259 00:13:03.599 --> 00:13:07.159 such as jumping each time the spacebar is pressed 260 00:13:07.159 --> 00:13:10.110 It supports both single-shot actions and continuous movements 261 00:13:10.160 --> 00:13:12.400 making it capable of handling all types of inputs 262 00:13:12.400 --> 00:13:14.679 To use the input component 263 00:13:14.679 --> 00:13:19.840 Using the input component 1: Setting up input bindings in the project settings 264 00:13:19.840 --> 00:13:28.479 Using the input component 2: Within the Actor class, set up to respond to input bindings and call specific functions accordingly 265 00:13:28.479 --> 00:13:30.840 Right now, I've been focusing mostly on blueprints 266 00:13:30.840 --> 00:13:32.719 but the example code I'm showing you can be considered 267 00:13:32.719 --> 00:13:34.679 C example code 268 00:13:34.679 --> 00:13:36.559 The same functionality can be achieved in blueprints 269 00:13:36.559 --> 00:13:38.760 using simple nodes 270 00:13:38.760 --> 00:13:43.400 In blueprints, there are nodes specifically for handling input-related tasks 271 00:13:43.400 --> 00:13:47.159 Key input and specific mouse click input nodes 272 00:13:47.159 --> 00:13:48.840 When you use these nodes 273 00:13:48.840 --> 00:13:52.440 you can connect them to nodes that play animations 274 00:13:52.440 --> 00:13:55.719 to execute that action 275 00:13:55.719 --> 00:13:57.880 You can connect them in various ways 276 00:13:57.880 --> 00:14:00.039 Anyway, input is very important 277 00:14:00.039 --> 00:14:00.639 Why? 278 00:14:00.639 --> 00:14:04.799 Even if a game costs 50 billion or 100 billion to develop 279 00:14:04.799 --> 00:14:07.679 the first screen you see is usually just the login screen 280 00:14:07.679 --> 00:14:10.119 The game needs ongoing input 281 00:14:10.119 --> 00:14:13.359 and feedback to be playable 282 00:14:13.359 --> 00:14:14.640 Right? 283 00:14:14.640 --> 00:14:18.479 The simple sample script you're currently looking at involves 284 00:14:18.479 --> 00:14:20.559 jumping and forward movement 285 00:14:20.559 --> 00:14:21.760 In the context of game development 286 00:14:21.760 --> 00:14:26.799 this can be considered one of the most commonly used and fundamental parts of a script 287 00:14:27.559 --> 00:14:30.080 You could say it's a sample script 288 00:14:30.080 --> 00:14:33.320 demonstrating how to bind actions like 289 00:14:33.320 --> 00:14:35.679 jumping and forward movement to axes 290 00:14:35.679 --> 00:14:37.880 Jumping is a specific action or event 291 00:14:37.880 --> 00:14:41.119 The crucial aspect is that 292 00:14:41.119 --> 00:14:42.719 jumping action's mechanics are handled elsewhere 293 00:14:42.719 --> 00:14:46.599 'Execute the jumping action when I press this key' 294 00:14:46.599 --> 00:14:49.719 Jumping can also be an animation action 295 00:14:49.719 --> 00:14:52.159 or could also represent something else 296 00:14:52.159 --> 00:14:53.280 There are such possibilities 297 00:14:53.280 --> 00:14:55.280 It's the name of a specific situation or action 298 00:14:55.280 --> 00:14:58.960 Here, "jump" and "move forward," etc. 299 00:14:58.960 --> 00:15:03.320 In Unreal Engine, action mapping involves associating user inputs 300 00:15:03.320 --> 00:15:07.599 such as commonly used keyboard inputs 301 00:15:07.599 --> 00:15:09.440 and then mouse and gamepad inputs 302 00:15:09.440 --> 00:15:12.320 and nowadays, there are also many types of joysticks 303 00:15:12.320 --> 00:15:15.320 Moreover, in cases like VR 304 00:15:15.320 --> 00:15:17.000 people physically enter and move within the environment 305 00:15:17.000 --> 00:15:19.440 There are truly a wide variety of input methods available 306 00:15:19.440 --> 00:15:21.599 Actions defined within the game 307 00:15:21.599 --> 00:15:25.760 Connecting actions like 308 00:15:25.760 --> 00:15:27.559 jumping, shooting, starting conversations, etc., is precisely 309 00:15:27.559 --> 00:15:29.960 what action mapping refers to 310 00:15:29.960 --> 00:15:33.440 In materials, mapping typically refers to applying textures 311 00:15:33.440 --> 00:15:35.119 or other properties to an object 312 00:15:35.119 --> 00:15:36.359 It also refers to applying textures to surfaces 313 00:15:36.359 --> 00:15:38.400 this concept is referred to as mapping 314 00:15:38.400 --> 00:15:40.119 When speaking in Korean 315 00:15:40.119 --> 00:15:41.119 you could say it's a concept of overlaying 316 00:15:41.119 --> 00:15:43.080 or covering something 317 00:15:43.080 --> 00:15:46.679 Understanding action mapping 318 00:15:46.679 --> 00:15:48.440 as overlaying actions 319 00:15:48.440 --> 00:15:51.640 onto specific input values makes sense 320 00:15:51.640 --> 00:15:56.320 Through this 321 00:15:56.320 --> 00:15:58.159 developers can flexibly adapt to a wide range of input devices 322 00:15:58.159 --> 00:16:03.000 and provide players with a better gaming experience 323 00:16:03.000 --> 00:16:08.159 Let's take a look at the key features of action mapping 324 00:16:08.159 --> 00:16:09.400 Action mapping 325 00:16:09.400 --> 00:16:13.200 First, there are a wide variety of platforms for each game 326 00:16:13.200 --> 00:16:14.840 Depending on which platform 327 00:16:14.840 --> 00:16:17.359 a game is primarily developed for 328 00:16:17.359 --> 00:16:19.960 aspects such as interface resolution 329 00:16:19.960 --> 00:16:22.280 number of icons, and even the structure of icons themselves 330 00:16:22.280 --> 00:16:24.039 can vary significantly 331 00:16:24.039 --> 00:16:25.880 Mobile can be a platform as well 332 00:16:25.880 --> 00:16:30.000 VR and AR devices can also be platforms in themselves 333 00:16:30.000 --> 00:16:32.840 New platforms continue to emerge 334 00:16:33.919 --> 00:16:36.640 Depending on the platform 335 00:16:36.640 --> 00:16:39.440 when developing content with game engines 336 00:16:39.440 --> 00:16:41.520 developers typically choose a platform first 337 00:16:41.520 --> 00:16:43.960 and then create a project specifically for that platform 338 00:16:45.110 --> 00:16:48.239 So, game engines are often used in a way that 339 00:16:48.239 --> 00:16:51.039 allows developers to switch platforms after initially developing for mobile 340 00:16:51.039 --> 00:16:53.960 that process typically involves a certain amount of time 341 00:16:53.960 --> 00:16:58.520 and involves switching the engine to a development environment suitable for PC 342 00:16:58.520 --> 00:17:00.799 Similarly, if you develop a project for PC 343 00:17:00.799 --> 00:17:02.599 and then decide to switch the platform to mobile 344 00:17:02.599 --> 00:17:05.479 the engine will automatically adjust all related settings accordingly 345 00:17:05.479 --> 00:17:08.160 Also, due to VR, AR, and other platforms 346 00:17:08.160 --> 00:17:12.599 game engines are used extensively for creating games and other applications 347 00:17:12.599 --> 00:17:17.400 Therefore, developers can implement game logic through actions mapping to implement functionality as desired without being dependent on specific platform input devices 348 00:17:17.400 --> 00:17:24.599 Action mapping feature 1: Platform independence 349 00:17:24.599 --> 00:17:27.199 For example, both PC and console players 350 00:17:27.199 --> 00:17:29.119 can use different buttons 351 00:17:29.119 --> 00:17:32.000 for the same game actions 352 00:17:32.000 --> 00:17:34.640 However, games create this way are quite numerous 353 00:17:34.640 --> 00:17:36.680 In games that share the same actions 354 00:17:36.680 --> 00:17:38.920 players can use different buttons 355 00:17:38.920 --> 00:17:41.920 and it's also possible for two different buttons to trigger the same action 356 00:17:41.920 --> 00:17:44.160 Setting up everything is subjective 357 00:17:44.160 --> 00:17:46.479 but depending on how you set up action mapping 358 00:17:46.479 --> 00:17:48.760 the outcomes can vary significantly 359 00:17:48.760 --> 00:17:53.839 Action mapping feature 2: Resuability and flexibility 360 00:17:53.839 --> 00:17:56.640 Once set, action mapping can be reused 361 00:17:56.640 --> 00:18:00.439 across multiple parts of the game 362 00:18:00.439 --> 00:18:02.680 This reduces code duplication 363 00:18:02.680 --> 00:18:06.599 and provides flexibility 364 00:18:06.599 --> 00:18:10.680 when modifying or adding input configurations later on 365 00:18:10.680 --> 00:18:14.439 Action mapping feature 3: Support for custom input settings 366 00:18:14.439 --> 00:18:16.920 By using action mapping 367 00:18:16.920 --> 00:18:19.640 players can define the key bindings 368 00:18:19.640 --> 00:18:21.959 for in-game actions 369 00:18:21.959 --> 00:18:25.719 according to their preferences and their specific input devices 370 00:18:25.719 --> 00:18:27.880 This feature is very convenient and well-implemented 371 00:18:27.880 --> 00:18:30.280 so, when making this game 372 00:18:30.280 --> 00:18:32.959 let's use the B key instead of the spacebar for jumping 373 00:18:32.959 --> 00:18:35.079 You just need to change this binding 374 00:18:35.079 --> 00:18:37.439 Such features are designed to be extremely convenient 375 00:18:37.439 --> 00:18:39.800 Because of these features 376 00:18:39.800 --> 00:18:42.560 we can say that developing a game using a game engine is advantageous 377 00:18:42.560 --> 00:18:47.079 This method of game development, including action mapping 378 00:18:47.079 --> 00:18:53.560 significantly enhances the game's accessibility and user experience 379 00:18:53.560 --> 00:18:56.400 Let me show you a menu 380 00:18:56.400 --> 00:18:59.780 where you can change the input-related action mappings 381 00:18:59.780 --> 00:19:01.680 that I just mentioned 382 00:19:01.680 --> 00:19:04.160 I have captured this on my screen 383 00:19:04.160 --> 00:19:05.719 but you can open Unreal Engine 384 00:19:05.719 --> 00:19:07.920 and navigate to the menu yourself directly 385 00:19:07.920 --> 00:19:10.400 to see all the menus in detail 386 00:19:10.400 --> 00:19:12.800 once you open it up 387 00:19:12.800 --> 00:19:16.040 You can access it by going into the project settings and editing it 388 00:19:16.040 --> 00:19:17.560 The important thing is that 389 00:19:17.560 --> 00:19:20.839 Unreal Engine itself has a very large file size 390 00:19:20.839 --> 00:19:23.359 Compared to other game engines 391 00:19:23.359 --> 00:19:27.880 like Unity 3D, Unreal Engine requires a significantly larger installation size 392 00:19:28.280 --> 00:19:32.199 However, this includes more assets and resources 393 00:19:32.199 --> 00:19:34.959 readily available for use 394 00:19:34.959 --> 00:19:39.199 Those assets are typically found under the plugins sections in project settings 395 00:19:39.199 --> 00:19:41.719 There are indeed a wide variety of plugins available 396 00:19:41.719 --> 00:19:43.419 including both free and paid ones 397 00:19:44.519 --> 00:19:46.040 that you can click on to use 398 00:19:46.040 --> 00:19:48.520 Even if they're not paid plugins 399 00:19:48.520 --> 00:19:52.640 Unreal Engine itself provides a wide range of plugins 400 00:19:52.640 --> 00:19:55.319 It would be good to explore them in various ways 401 00:19:55.319 --> 00:19:56.880 When you go into that menu 402 00:19:56.880 --> 00:19:58.920 and then into project settings 403 00:19:58.920 --> 00:20:02.560 you'll see a long list on the left side 404 00:20:02.560 --> 00:20:05.160 I'm clicking on the input section 405 00:20:05.160 --> 00:20:08.640 to show you the detailed settings related to input 406 00:20:08.640 --> 00:20:12.680 Apart from that, there are many other lists both above and below it 407 00:20:12.680 --> 00:20:15.520 Take a look at what's in those lists 408 00:20:15.520 --> 00:20:17.199 Clicking on "input" 409 00:20:17.199 --> 00:20:19.520 displays detailed input-related settings on the right side 410 00:20:19.520 --> 00:20:20.810 But right above 411 00:20:20.810 --> 00:20:25.280 you'll see the action mapping that I described earlier 412 00:20:25.280 --> 00:20:29.880 Think of it as adding arrays of concept, and it might make more sense 413 00:20:29.880 --> 00:20:31.800 And importantly 414 00:20:31.800 --> 00:20:35.199 what I'm showing you right now is the project settings menu 415 00:20:35.199 --> 00:20:37.920 If you've started a new project 416 00:20:37.920 --> 00:20:41.599 then you'll need to configure the settings differently again 417 00:20:41.599 --> 00:20:44.079 But if I'm adding 418 00:20:44.079 --> 00:20:46.719 and working on Level 10 in the project I'm currently working on 419 00:20:46.719 --> 00:20:48.079 the project settings relate to walking 420 00:20:48.079 --> 00:20:50.959 won't change 421 00:20:50.959 --> 00:20:53.280 Since it's project-specific settings 422 00:20:53.280 --> 00:20:55.000 that point is indeed very important to consider 423 00:20:55.000 --> 00:20:57.040 Keep that point in mind 424 00:20:57.040 --> 00:20:58.479 Alright, coming back to action mapping 425 00:20:58.479 --> 00:21:01.040 initially there's nothing there 426 00:21:01.040 --> 00:21:04.040 But when you click to add arrays 427 00:21:04.040 --> 00:21:06.560 and set which keys to use there 428 00:21:06.560 --> 00:21:09.479 For example, a list will appear there 429 00:21:09.479 --> 00:21:11.000 The gamepad options will appear 430 00:21:11.000 --> 00:21:15.959 keyboard, mouse, motion, touch, gestures, and more all appear there 431 00:21:15.959 --> 00:21:17.199 If you open the keyboard section 432 00:21:17.199 --> 00:21:19.800 you'll see all the keys that are available listed there 433 00:21:19.800 --> 00:21:21.680 The spacebar will be among those listed 434 00:21:21.680 --> 00:21:23.800 On the gamepad, various buttons like 435 00:21:23.800 --> 00:21:28.079 mouse left-click, right-click, and others will be displayed as well 436 00:21:28.079 --> 00:21:33.520 So, at this point, you input what actions each of these controls will perform 437 00:21:33.520 --> 00:21:34.800 It could be assigned to perform actions like jumping 438 00:21:34.800 --> 00:21:37.079 or any other action you choose 439 00:21:37.079 --> 00:21:42.280 Setting up those actions here is what we refer to as action mapping 440 00:21:42.280 --> 00:21:46.520 The definition of those actions needs to be specified elsewhere 441 00:21:46.520 --> 00:21:49.640 Setting them up correctly here is crucial 442 00:21:49.640 --> 00:21:51.000 However, when creating animations 443 00:21:51.000 --> 00:21:53.000 unless they're interactive animations 444 00:21:53.000 --> 00:21:55.000 you won't typically need to look at this menu for that 445 00:21:55.000 --> 00:21:56.280 This menu is used 446 00:21:56.280 --> 00:21:58.880 when creating interactive content for games 447 00:21:58.880 --> 00:22:00.800 where you define what happens when you press a key on the keyboard 448 00:22:00.800 --> 00:22:03.199 or a button on a gamepad 449 00:22:03.199 --> 00:22:04.920 In any case, when assigning input values 450 00:22:04.920 --> 00:22:08.680 and when creating content that needs to show some kind of result 451 00:22:08.680 --> 00:22:10.319 you'll end up looking at this menu 452 00:22:10.319 --> 00:22:13.199 It would be helpful to remember that 453 00:22:13.199 --> 00:22:14.719 How to set up action mapping 454 00:22:14.719 --> 00:22:19.000 I showed you the interface earlier with a screenshot 455 00:22:19.000 --> 00:22:22.560 What you're hearing now is an explanation 456 00:22:22.560 --> 00:22:25.160 but I recommend trying it out firsthand in Unreal Engine to truly understand 457 00:22:25.160 --> 00:22:29.479 I meant exploring the menus related to action mapping rather than just listening to explanations about them 458 00:22:29.479 --> 00:22:32.079 To set up action mapping, open your project 459 00:22:32.079 --> 00:22:34.239 in Edit, Project, Setting 460 00:22:34.239 --> 00:22:37.359 Input, in the Korean version, it would be "Insert" 461 00:22:37.359 --> 00:22:40.119 It's important to first navigate to the section 462 00:22:40.119 --> 00:22:44.280 When you expand the action mapping section, many menus will appear 463 00:22:44.280 --> 00:22:46.079 At first, there won't be anything in the list 464 00:22:46.079 --> 00:22:49.719 You can expand the action mapping section 465 00:22:49.719 --> 00:22:53.280 press the plus button to add an action 466 00:22:53.280 --> 00:22:57.439 and then choose which key or button to assign it to 467 00:22:57.439 --> 00:23:02.079 It you look at this, this part could arguably be considered the most important 468 00:23:02.079 --> 00:23:04.239 Then you can add a new action mapping 469 00:23:04.239 --> 00:23:07.239 You just continue adding more in the "Add Action Mapping" section 470 00:23:07.239 --> 00:23:11.000 So, you select keys or buttons from the dropdown menu to assign 471 00:23:11.000 --> 00:23:13.199 this action, this key, that action, that key 472 00:23:13.199 --> 00:23:15.079 this action, left mouse button 473 00:23:15.079 --> 00:23:16.400 that action, right mouse button 474 00:23:16.400 --> 00:23:18.479 You can do it like this 475 00:23:18.479 --> 00:23:21.640 You can apply action mapping to that game logic 476 00:23:21.640 --> 00:23:24.599 So now we're going to do this in blueprint 477 00:23:24.599 --> 00:23:27.239 When you press just the spacebar 478 00:23:27.239 --> 00:23:30.719 the action called 'jump' will be executed 479 00:23:30.719 --> 00:23:32.359 so, I can customize 480 00:23:32.359 --> 00:23:36.079 the action names as I like 481 00:23:36.079 --> 00:23:39.239 So, we'll de developing it concretely in blueprint 482 00:23:39.239 --> 00:23:43.760 to integrate in specific situations 483 00:23:43.760 --> 00:23:47.539 The concept of UMG, Unreal Engine UI design and implementations 484 00:23:47.839 --> 00:23:52.160 Next, let's take a look at the concept of UMG 485 00:23:52.160 --> 00:23:57.079 UMG stands for Unreal Motion Graphics UI designer 486 00:23:57.079 --> 00:24:01.079 Next, you could say that it's a tool for 487 00:24:01.079 --> 00:24:02.719 creating UI in the Unreal Engine 488 00:24:02.719 --> 00:24:06.520 Inside the large engine called Unreal, there's a tool called UMG 489 00:24:06.520 --> 00:24:10.760 and you can think of using that tool to design UI 490 00:24:10.760 --> 00:24:13.760 This kind of system is found in many other programs as well 491 00:24:13.760 --> 00:24:16.479 Especially in Unity, there is a concept called 'Canvas' 492 00:24:16.479 --> 00:24:18.479 where you place UI elements inside it 493 00:24:18.479 --> 00:24:21.920 like placing an invisible frame in a 3D space 494 00:24:21.920 --> 00:24:24.400 and designing UI elements within it 495 00:24:24.400 --> 00:24:27.040 I think those who have experience attaching UI in Unity 496 00:24:27.040 --> 00:24:30.439 will find it relatively easier to learn 497 00:24:30.439 --> 00:24:32.889 However, the concept of UMG in Unreal Engine is well structed 498 00:24:32.889 --> 00:24:35.779 to easily integrate coding, various interactions 499 00:24:35.779 --> 00:24:38.719 especially connecting with Blueprints 500 00:24:38.719 --> 00:24:39.969 Whether you're designing a first-person game 501 00:24:39.969 --> 00:24:44.040 an MMORPG, a simulation game 502 00:24:44.040 --> 00:24:46.239 or a side-view game 503 00:24:46.239 --> 00:24:48.039 you can create UI very conveniently 504 00:24:48.039 --> 00:24:52.040 by carefully considering the camera concept and designing it the way you want 505 00:24:52.040 --> 00:24:55.119 It's used to create various UI elements 506 00:24:55.119 --> 00:24:56.880 such as the game's HUD, menus 507 00:24:56.880 --> 00:25:00.319 inventory systems 508 00:25:00.319 --> 00:25:02.400 and other interactive UI elements within the game 509 00:25:02.400 --> 00:25:05.239 In various genres 510 00:25:05.239 --> 00:25:09.079 there are games where I observe the character from a third-person perspective 511 00:25:09.079 --> 00:25:11.479 The character doesn't appear prominently on the screen 512 00:25:11.479 --> 00:25:15.680 In most games I play, especially MMORPGs 513 00:25:15.680 --> 00:25:18.040 I often refer to "leveling up" my character 514 00:25:18.040 --> 00:25:19.839 I need to see the entire body of my character 515 00:25:19.839 --> 00:25:21.640 Games where 516 00:25:21.640 --> 00:25:24.280 I observe from an observer's perspective 517 00:25:24.280 --> 00:25:26.520 checking what weapon I have and where I'm injured 518 00:25:26.520 --> 00:25:28.520 keep me very busy 519 00:25:28.520 --> 00:25:31.880 In those games, especially MMORPGs 520 00:25:31.880 --> 00:25:34.680 there are usually a lot of icons on the screen 521 00:25:34.680 --> 00:25:37.280 There are icons above, below, horizontally, and vertically 522 00:25:37.280 --> 00:25:41.520 and when there are a lot of them, you can sometimes fold and expand them like drawers 523 00:25:41.520 --> 00:25:43.640 Those elements are very important 524 00:25:43.640 --> 00:25:47.079 In first-person shooting games, you only see your hands on the screen 525 00:25:47.079 --> 00:25:50.880 In that case, nothing should obstruct my line of sight 526 00:25:50.880 --> 00:25:53.239 The characteristics of first-person shooting games include minimal UI elements because 527 00:25:53.239 --> 00:25:57.439 they focus on a realistic, immersive perspective where you see in-depth, perspective-rich visuals directly in front of your eyes 528 00:25:57.439 --> 00:26:02.359 rather than a wide, comprehensive view 529 00:26:02.359 --> 00:26:05.359 They typically show essential information like remaining ammunition, health status, and crucial items you possess 530 00:26:05.359 --> 00:26:08.680 keeping the UI minimal and focused 531 00:26:08.680 --> 00:26:11.560 They also usually display a full compass, map, and only essential icons 532 00:26:11.560 --> 00:26:13.239 keeping the interface uncluttered 533 00:26:13.239 --> 00:26:17.160 Depending on the content I'm creating 534 00:26:17.160 --> 00:26:19.680 the UI design can vary significantly 535 00:26:19.680 --> 00:26:23.920 You could say that such systems are very well implemented in Unreal Engine 536 00:26:23.920 --> 00:26:25.880 So, the user interface menu is also one of the menus that 537 00:26:25.880 --> 00:26:32.719 appears when you right-click 538 00:26:32.719 --> 00:26:37.079 In the Widget Blueprint, you can see the word "Blueprint" included 539 00:26:37.079 --> 00:26:38.179 Here in the Widget 540 00:26:38.179 --> 00:26:42.359 I think you've probably heard the word "widget" quite a lot 541 00:26:42.359 --> 00:26:47.640 If you use an Android phone, you've probably seen the menu called "Widgets" quite often 542 00:26:47.640 --> 00:26:49.490 So, if you use Naver 543 00:26:49.490 --> 00:26:51.239 you can place a small window on your phone's home screen 544 00:26:51.239 --> 00:26:55.479 to quickly search for what you want 545 00:26:55.479 --> 00:26:57.719 Widgets are widely used using that concept 546 00:26:57.719 --> 00:27:01.560 In Window computers, you can also implement a system 547 00:27:01.560 --> 00:27:04.680 where you can place widgets on the desktop screen 548 00:27:04.680 --> 00:27:07.599 to access desired computer system-related 549 00:27:07.599 --> 00:27:10.119 programs and information 550 00:27:10.119 --> 00:27:13.640 Here in Unreal Engine, when we talk about Widget Blueprints and widgets 551 00:27:13.640 --> 00:27:16.199 it refers to the concept of placing elements on the screen 552 00:27:16.199 --> 00:27:19.520 similar to displaying elements on a screen or interface 553 00:27:19.520 --> 00:27:24.599 However, it's not just important to display simple things 554 00:27:24.599 --> 00:27:28.040 like text, pretty PNG files, icons, and menus 555 00:27:28.040 --> 00:27:31.479 when making a game, the most important aspect of connecting UI is 556 00:27:31.479 --> 00:27:33.359 what you're linking together 557 00:27:33.359 --> 00:27:37.239 Whether you're connecting it to interactions or integrating it with the game's systems 558 00:27:37.239 --> 00:27:40.319 it's important to show things like 559 00:27:40.319 --> 00:27:43.000 how many times you've been attacked by an opponent's monster 560 00:27:43.000 --> 00:27:45.239 and how much energy you have left 561 00:27:45.239 --> 00:27:48.800 Then, you can connect these aspects 562 00:27:48.800 --> 00:27:51.760 using Blueprint coding or link them to existing variables and such 563 00:27:51.760 --> 00:27:56.000 This system is very well-developed for doing these kinds of tasks 564 00:27:56.000 --> 00:28:00.160 Creating Widget Blueprints yourself would also be beneficial to try out 565 00:28:00.160 --> 00:28:04.280 You have various UI elements available in a left-hand list here 566 00:28:04.280 --> 00:28:07.520 You can also double-click or click and drag to bring those UI elements into your workspace 567 00:28:08.220 --> 00:28:10.319 I've displayed them on screen here 568 00:28:10.319 --> 00:28:14.680 Think of it as a virtual sketchbook that actually appears on the screen 569 00:28:14.680 --> 00:28:18.359 You can see the details of each UI elements here 570 00:28:18.359 --> 00:28:21.880 in the right-hand details panel 571 00:28:21.880 --> 00:28:25.959 The default buttons exist in colors like white and light gray 572 00:28:25.959 --> 00:28:28.719 You can also change the button colors 573 00:28:28.719 --> 00:28:31.400 and if you don't add a lot of default designs 574 00:28:31.400 --> 00:28:33.719 buttons or menus will just be in a rectangular shape 575 00:28:33.719 --> 00:28:39.239 However, you can change the appearance of these buttons by connecting them to PNG files 576 00:28:39.239 --> 00:28:42.000 and you can add some effects to those PNG files 577 00:28:42.000 --> 00:28:46.000 like a raised texture or shadows, to enhance their appearance 578 00:28:46.000 --> 00:28:49.239 UMG feature 1: Visual design 579 00:28:49.239 --> 00:28:53.280 Using UMG's visual design tool 580 00:28:53.280 --> 00:28:57.599 you can place UI elements by simply dragging and dropping 581 00:28:57.599 --> 00:29:01.280 avoiding complex coding processes 582 00:29:01.280 --> 00:29:04.040 It's all laid out on the left, with buttons and more 583 00:29:04.040 --> 00:29:08.199 There's a menu section with various options, including buttons and menus where you can input text 584 00:29:08.199 --> 00:29:10.000 There are also options for simply clicking 585 00:29:10.000 --> 00:29:14.079 or where clicking opens up three or four menus like drawers 586 00:29:14.079 --> 00:29:16.400 which collapse again when clicked 587 00:29:16.400 --> 00:29:19.599 You can simply display images like company logos on the UI 588 00:29:19.599 --> 00:29:21.280 You can indeed just display them 589 00:29:21.280 --> 00:29:25.560 On the left, there's a range of materials and you can simply place them wherever you want 590 00:29:25.560 --> 00:29:28.000 adjust the size as needed 591 00:29:28.000 --> 00:29:32.280 and enter the size directly in the detail menu of the button 592 00:29:32.280 --> 00:29:35.280 You can apply various styles and customize them in many different ways 593 00:29:35.280 --> 00:29:40.439 But this concept of arranging things the way I want on the screen 594 00:29:40.439 --> 00:29:43.800 like a picture frame 595 00:29:43.800 --> 00:29:46.199 is really well-developed in this system 596 00:29:46.199 --> 00:29:50.040 Before this existed, we probably had to add each element one by one through scripting and coding 597 00:29:50.040 --> 00:29:52.199 Just by considering the coordinates 598 00:29:52.199 --> 00:29:57.000 this system has now become an essential element in game development 599 00:29:57.000 --> 00:30:00.000 and it significantly speeds up the development process 600 00:30:00.000 --> 00:30:03.680 The fact that designers and developers can now easily work together 601 00:30:03.680 --> 00:30:06.719 is probably the most important aspect 602 00:30:06.719 --> 00:30:11.000 In the past, when such a system didn't exist 603 00:30:11.000 --> 00:30:14.400 the concept of icons envisioned by designers was very different from that of developers 604 00:30:14.400 --> 00:30:18.119 So after placing the elements, situations would arise 605 00:30:18.119 --> 00:30:20.040 where they had to give feedback and argue 606 00:30:20.040 --> 00:30:23.560 When developing with Unreal, designers can immediately place elements 607 00:30:23.560 --> 00:30:25.110 to see if they work or not 608 00:30:25.110 --> 00:30:27.160 and can access the project simultaneously 609 00:30:27.160 --> 00:30:29.560 These things have become much more seamless 610 00:30:29.560 --> 00:30:31.000 UMG feature 2: Data binding 611 00:30:31.000 --> 00:30:33.800 This UMG supports data binding 612 00:30:33.800 --> 00:30:39.119 We can synchronize UI elements with game data in real-time 613 00:30:39.119 --> 00:30:41.479 For example, there could be a player's health bar 614 00:30:41.479 --> 00:30:43.239 that shows how much HP they have left 615 00:30:43.239 --> 00:30:48.280 Setting up the health bar to reflect the actual health value of the player 616 00:30:48.280 --> 00:30:51.560 is what we call data binding 617 00:30:51.560 --> 00:30:54.710 You could think of it as somewhat similar to action binding 618 00:30:54.710 --> 00:30:57.560 or motion binding concepts 619 00:30:57.560 --> 00:31:00.839 It's the concept of connecting or linking 620 00:31:00.839 --> 00:31:04.000 UMG feature 3: Animation and effects 621 00:31:04.000 --> 00:31:07.800 The concept of animations and effects for UMG UI elements 622 00:31:07.800 --> 00:31:08.650 For example, like this 623 00:31:08.650 --> 00:31:12.880 The button could remain in the same state from when it first appears until it disappears 624 00:31:12.880 --> 00:31:15.719 It could shrink and then expand slightly when clicked 625 00:31:15.719 --> 00:31:17.640 bulge or become more pronounced when clicked 626 00:31:17.640 --> 00:31:19.160 change color 627 00:31:19.160 --> 00:31:22.040 have a sparkling effect emanating from the button 628 00:31:22.040 --> 00:31:23.240 there could be various other effects as well, right? 629 00:31:23.240 --> 00:31:25.479 You could also add sound to it 630 00:31:25.479 --> 00:31:27.760 With all these possibilities available 631 00:31:27.760 --> 00:31:32.439 you can create dynamic UIs that enhance the user experience 632 00:31:32.439 --> 00:31:34.560 However, this also varies significantly depending on the genre 633 00:31:34.560 --> 00:31:37.560 If it's an adventure game for children 634 00:31:37.560 --> 00:31:40.800 the UI elements would indeed be very cute and include a lot of effects 635 00:31:40.800 --> 00:31:44.599 In MMORPG games, the main purpose is often to display a lot of icons 636 00:31:44.599 --> 00:31:48.079 so they typically don't include many animation effects or special effects 637 00:31:48.079 --> 00:31:51.439 You can achieve smooth transitions like half of a menu opening or closing 638 00:31:51.439 --> 00:31:54.520 when a button is pressed right here 639 00:31:54.520 --> 00:31:57.319 UMG feature 4: Multi-platform support 640 00:31:57.319 --> 00:31:59.280 The usage typically involves creating widgets intially 641 00:31:59.280 --> 00:32:00.880 adding UI elements 642 00:32:00.880 --> 00:32:02.359 configuring them 643 00:32:02.359 --> 00:32:04.119 implementing events and logics 644 00:32:04.119 --> 00:32:07.199 and then displaying the UI in the game 645 00:32:07.199 --> 00:32:09.520 However, Unreal Engine includes UMG within its editor 646 00:32:09.520 --> 00:32:11.880 and working within this environment is 647 00:32:11.880 --> 00:32:13.760 crucial 648 00:32:13.760 --> 00:32:15.680 The biggest advantage is being able to intuitively place lements 649 00:32:15.680 --> 00:32:17.800 playtest them 650 00:32:17.800 --> 00:32:18.680 and quickly swap them out if they don't work 651 00:32:18.680 --> 00:32:20.920 all within the editor 652 00:32:20.920 --> 00:32:24.119 You can decide that just an image would be better than a slider 653 00:32:24.119 --> 00:32:26.359 playtest it immediately and quickly make changes 654 00:32:26.359 --> 00:32:30.000 It's a really convenient system 655 00:32:30.000 --> 00:32:32.400 If you find that the default button doesn't look nice 656 00:32:32.400 --> 00:32:34.599 you can easily replace it with a PNG file instead 657 00:32:34.599 --> 00:32:37.119 Swapping out the button with a PNG file instead of default one is 658 00:32:37.119 --> 00:32:41.239 also very easy to do 659 00:32:41.239 --> 00:32:44.079 Moreover, for example, there are pre-made samples available 660 00:32:44.079 --> 00:32:45.760 for UI elements like drawers 661 00:32:45.760 --> 00:32:47.199 that open when clicked 662 00:32:47.199 --> 00:32:49.439 You can simply use them as they are 663 00:32:49.439 --> 00:32:52.319 There are also features for audio visualization included 664 00:32:52.319 --> 00:32:54.810 There are a wide variety of menus available 665 00:32:54.810 --> 00:32:58.319 and many of them are already visually appealing enough to use as-is 666 00:32:58.319 --> 00:33:02.959 You can modify them slightly to suit your design preferences 667 00:33:02.959 --> 00:33:07.199 I mentioned there's a large list on the left side 668 00:33:07.199 --> 00:33:11.040 Let's take a look at some of the major components included 669 00:33:11.040 --> 00:33:15.239 In general, there are components like sliders or borders 670 00:33:15.239 --> 00:33:17.000 Border refers to a border or outline 671 00:33:17.000 --> 00:33:20.160 Buttons are indeed used very extensively 672 00:33:20.160 --> 00:33:23.520 Even if you're not making a game, if you're creating a mobile app 673 00:33:23.520 --> 00:33:25.719 you'll still use buttons extensively 674 00:33:25.719 --> 00:33:27.640 You can connect images, checkboxes 675 00:33:27.640 --> 00:33:30.560 and link them to various scenarios or values 676 00:33:30.560 --> 00:33:33.319 when check or unchecked 677 00:33:33.319 --> 00:33:37.359 Fro example, you could connect a character to equip an item when checked 678 00:33:37.359 --> 00:33:40.240 and unequal it when unchecked 679 00:33:40.240 --> 00:33:42.079 among other possibilities 680 00:33:42.079 --> 00:33:44.319 There are various options available 681 00:33:44.319 --> 00:33:45.640 such as text elements, progress bars, and many others 682 00:33:45.640 --> 00:33:48.800 When we think of UI, there are countless elements that come to mind 683 00:33:48.800 --> 00:33:51.280 You can think of it as encompassing nearly all the forms of menus 684 00:33:51.280 --> 00:33:53.640 you can see on a smartphone 685 00:33:53.640 --> 00:33:55.959 For inputs like text boxes 686 00:33:55.959 --> 00:33:57.560 it depends on whether it's for single-line or multi-line text 687 00:33:57.560 --> 00:34:00.119 For entering an ID, typically a single-line text box is used 688 00:34:00.119 --> 00:34:02.359 using two lines for an ID wouldn't be necessary 689 00:34:02.359 --> 00:34:06.000 Depending on the situation and what you're creating 690 00:34:06.000 --> 00:34:08.159 there might be times when multi-line inputs are necessary 691 00:34:08.159 --> 00:34:10.360 There are options related to input 692 00:34:10.360 --> 00:34:12.120 such as whether it's editable or not 693 00:34:12.120 --> 00:34:13.919 combo boxes, spin boxes 694 00:34:13.919 --> 00:34:16.320 user-generated Auto Button Toggle 695 00:34:16.320 --> 00:34:18.199 etc. 696 00:34:18.199 --> 00:34:20.000 There are various options like text boxes 697 00:34:20.000 --> 00:34:21.719 and you can click and drag 698 00:34:21.719 --> 00:34:23.080 to arrange them 699 00:34:23.080 --> 00:34:25.679 however you like 700 00:34:25.679 --> 00:34:28.879 Alright, so now let's talk bout how you create it yourself 701 00:34:28.879 --> 00:34:30.719 There's blueprint, of course 702 00:34:30.719 --> 00:34:34.639 but you can also implement UI 703 00:34:34.639 --> 00:34:36.800 using Editor Utility Widgets in the Unreal Engine 704 00:34:36.800 --> 00:34:38.479 This is also slightly different 705 00:34:38.479 --> 00:34:39.879 We'll take a look at this as well 706 00:34:39.879 --> 00:34:42.239 Anyway, it's a widget concept 707 00:34:42.239 --> 00:34:46.000 As for this one, you can focus mainly on the settings 708 00:34:46.000 --> 00:34:48.800 When creating an actual game 709 00:34:48.800 --> 00:34:51.199 you need to approach it with widget blueprints 710 00:34:51.199 --> 00:34:54.520 It would be good to keep in mind that 711 00:34:54.520 --> 00:34:55.800 these are somewhat similar but different concepts 712 00:34:55.800 --> 00:34:59.080 Here, it would be best to focus only on the design concept 713 00:34:59.080 --> 00:35:02.360 In Unreal Engine, the Editor Utility Widget is 714 00:35:02.360 --> 00:35:05.000 a powerful feature that allows developers and designers 715 00:35:05.000 --> 00:35:09.959 to create custom utilities for use within the editor 716 00:35:09.959 --> 00:35:12.520 Through this 717 00:35:12.520 --> 00:35:13.719 users can automate repetitive tasks 718 00:35:13.719 --> 00:35:18.199 and create custom interfaces to extend editor functionality 719 00:35:18.199 --> 00:35:20.399 If someone is proficient enough 720 00:35:20.399 --> 00:35:22.760 to use custom interfaces 721 00:35:22.760 --> 00:35:25.040 they are likely very skilled in Unreal Engine 722 00:35:25.040 --> 00:35:28.959 Editor Utility Widgets are interfaces that 723 00:35:28.959 --> 00:35:31.600 you can visually design to look nice 724 00:35:31.600 --> 00:35:33.520 based on Blueprints 725 00:35:33.520 --> 00:35:35.800 without needing complex scripts or code 726 00:35:35.800 --> 00:35:37.120 Editor Utility Widgets can be described as 727 00:35:37.120 --> 00:35:40.159 tools that allow you to customize 728 00:35:40.159 --> 00:35:44.199 the editor environment visually 729 00:35:44.199 --> 00:35:49.360 Anyway, you can think of it as similar to designing interfaces 730 00:35:49.360 --> 00:35:52.840 Let's look at some key use cases of Editor Utility Widgets 731 00:35:52.840 --> 00:35:55.320 If earlier we were talking about UI concepts 732 00:35:55.320 --> 00:35:59.479 now we're discussing something more closely related to user experience 733 00:35:59.479 --> 00:36:03.080 and creating something unique and personal 734 00:36:03.080 --> 00:36:06.080 in terms of UI design 735 00:36:06.080 --> 00:36:08.399 Use case for Editor Utility Widgets 1: Task automation 736 00:36:08.399 --> 00:36:10.080 It can be used to automate repetitive tasks 737 00:36:10.080 --> 00:36:13.159 such as placing or modifying assets 738 00:36:13.159 --> 00:36:15.600 For example 739 00:36:15.600 --> 00:36:17.959 you can create your own menu in Editor Utility Widgets 740 00:36:17.959 --> 00:36:20.600 to adjust all lights in the scene 741 00:36:20.600 --> 00:36:23.199 according to specific rules 742 00:36:23.199 --> 00:36:26.840 or to batch rename asset names 743 00:36:26.840 --> 00:36:30.959 So, for designing the UI, you should think about it within the widget blueprint 744 00:36:30.959 --> 00:36:34.679 What I'm saying now is that with UI, you can create it the way you want 745 00:36:34.679 --> 00:36:37.159 with a few buttons or whatever you like 746 00:36:37.159 --> 00:36:41.199 This is a widget for creating my own menu 747 00:36:41.199 --> 00:36:43.879 so it's somewhat different 748 00:36:43.879 --> 00:36:47.080 Use case for Editor Utility Widgets 2: Extending editor functionality 749 00:36:47.080 --> 00:36:49.879 Use case for Editor Utility Widgets 3: Project management tools 750 00:36:49.879 --> 00:36:53.530 For version control, task tracking, and test management 751 00:36:53.530 --> 00:36:56.560 you can develop your own utilities tailored for these purposes using Editor Utility Widgets 752 00:36:56.560 --> 00:36:59.800 You can implement them with buttons or even sliders 753 00:36:59.800 --> 00:37:02.080 You can think of it as 754 00:37:02.080 --> 00:37:04.159 creating your own custom menu 755 00:37:04.159 --> 00:37:06.679 The sequence is: create an Editor Widget Blueprint 756 00:37:06.679 --> 00:37:09.000 then design the UI, implement the logic 757 00:37:09.000 --> 00:37:11.600 and finally use it within the editor 758 00:37:11.600 --> 00:37:15.280 You select in the Editor Utility Widget 759 00:37:15.280 --> 00:37:19.000 Alright, the concept is similar to Blueprints 760 00:37:19.000 --> 00:37:21.520 but with Editor Utility Widgets 761 00:37:21.520 --> 00:37:24.520 you connect and use your own menu 762 00:37:24.520 --> 00:37:28.639 within the editor 763 00:37:28.639 --> 00:37:31.560 Okay, Unreal Engine Ui design looks like this 764 00:37:31.560 --> 00:37:35.800 Here, you can place and create the things you want 765 00:37:35.800 --> 00:37:38.280 You can use UI design itself 766 00:37:38.280 --> 00:37:40.919 but also consider the UI concepts 767 00:37:40.919 --> 00:37:43.439 when creating utility widgets 768 00:37:43.439 --> 00:37:46.800 Alright, that was all about utility widgets 769 00:37:46.800 --> 00:37:51.199 Now, I'll provide a bit more explanation about general UI concepts 770 00:37:51.199 --> 00:37:56.080 If you look on the left, you'll see the speed and gear of the car displayed below 771 00:37:56.080 --> 00:38:00.360 This is how you implement it on the widget interface 772 00:38:00.360 --> 00:38:03.040 Then in the actual game 773 00:38:03.040 --> 00:38:06.040 you would see the real car, sky, ground 774 00:38:06.040 --> 00:38:10.159 and these UI elements on the left 775 00:38:10.159 --> 00:38:15.120 We've covered Unreal Engine UI design implementation up to this point 776 00:38:16.397 --> 00:38:18.347 Input components and action mapping What is the input component? Responsible for receiving input from various devices such as keyboards, mouse, gamepads and translating them into the game actions or events within the game 777 00:38:18.347 --> 00:38:19.647 Main features of the input component Input binding Action mapping and axis mapping 778 00:38:19.647 --> 00:38:21.297 Using input component Setting up input bindings in project settings Configuring an actor class to respond to input bindings by calling specific functions 779 00:38:21.297 --> 00:38:23.747 Action mapping The process of linking user inputs (keys on the keyboard, mouse buttons, gamepad buttons, etc.) to predefined actions within a game (jumping, shooting, starting a conversation, etc.) 780 00:38:23.747 --> 00:38:26.147 Characteristics of action mapping Platform independence Reusability and flexibility Support for custom input configurations 781 00:38:26.147 --> 00:38:27.847 UMG Unreal Motion Graphics UI Designer A tool used in Unreal Engine for creating user interfaces (UI) 782 00:38:27.847 --> 00:38:29.147 It's used to create various UI elements such as the game's HUD (Heads-Up Display), menus, inventory systems, and interactive UI elements within the game 783 00:38:29.147 --> 00:38:30.947 Features of UMG Visual design Data binding Animation and effects Multi-platform support