Unreal Engine 5 - How to set a clock

1. 00 Introduction: Hello, everybody. My name is Francisco Gollini. And together, we will create this little incredible amazing beautiful game about a clock that turns around its hands virtually forever. Just let's press the spacebar on the keyboard and our clock will start. And guess what? When the second hand completes a turn, the minute hand will make a step ahead. And we have as well, a beautiful interface that shows us the timing numbers. So we will see how to import this clock inside a real from Maya, and we will set inside the level in a real azurlight camera to have a decent point of view, and we will create the user interface and of course the input mapping that says to ARL that when we press the space bar, the clock the stuff. So I know that you are really excited at the perspective to create such a great game. So let's jump just now to the first less. 2. 01 Import: So, where does all begins? A begins from Maya where we have our trend model. But if you use a different software, that's not an issue because what counts, it's the word flow that we will follow. So we have a beautiful clock inside Maya. It is constituted by hierarchy. It is composite by different objects like the base, the center, the tree hands, and a little ticket that is placed on the top. So to export it, we select the root of the hierarchy. And let's go on File game exporter. And in this window, let's go on the Model tab. And here, let's enable the embed media. So we will export together with the model, the material supply to the surface as well. Let's choose the Pat, the name of the file, and then let's click on the Export button. And the model we will export it in FBX format. Like this one. And let's import it inside a real. So let's take a real. We have already a scene with the clock inside, but let's see how to import it in this space. Let's go on content drover, and let's take a folder. I created here this temp folder where to put the clock. And the wrong way to import the model is to drag the FBX inside a real like this. This is the import window that will open. In this way, when we make an import, the pieces are important separated, we don't have the blueprint representing the clock with all the pieces together. So let's delete these elements. Delete. Let's import the clock in a different way that is file import into level. This command is more suitable for hierarchies. Import into level. Let's take the clock, open. Area asks where to put the clock that will be imported. Let's say tempo we will have this import window that shows us the hierarchy existing for the clock. So let's import the clock and we will have all the elements separated like before, but more, we have the blueprint representing the whole clock. We all the pieces, and we have here on the left, all the components in the same hierarchy of the original clock. Now, when we use the input into level, the clock is placed directly inside the label. Here we have a copy. But if we select this copy that is named FBX sin clock we are unable to move it because inside the blueprint that we have it better that has been created after the imparting. We have to set the root of the hierarchy with the parameter movability movable. Let's compile and save. Let's check that seven compile is put on always. Okay. Let's come back on the level, and now if we take the object, we are able to move it around. Okay, but we don't need this copy inside the scene. Let's delete it. And let's delete the clock imported as well, because inside this project, we have already imparted the clock, and it is located here in this actor folder, where we have the blueprint. And we have a better preview in this way, in this case, probably because it was imported with a previous version of AA. Now we have updated it and something has changed. But anyway, it is just a preview. When we organize the assets inside the project, it's advisable to create an actor's folder where to put the blueprints and a meshes folder where to put all the geometries that compose the blueprint and the materials as well that the important as bring along with the geometries. These pieces are the geometries and balls, the colored balls are the materials. Now we are happy because inside the scene, we have a clock that is component by all the stuff that we need to make it work. And it is represented by the blueprint, this actor that we have here, and that has been created automatically after in part. In the next lesson, we will see how to set inside the scene, the source light, and the camera to take a desert part of you. 3. 02 LightsCamera: Okay, here we are. In this scene we already have a light source. It is a directional light. To create it, it's enough to go here on the creation tab, lights and directional light. And we have this light. We can move it and place everywhere we want. But the position isn't important because what counts is the orientation, this light. That affect the seed. Because this type of source produces a series of parallel light rays that go illuminating all the seed. But let's delete this light because we have already set this one. So this is the lighting. Of course, this light as a series of parameter that we can find here on the detail panel, and we can set the color, the light, the intensity, and so on. Okay. What about the camera? In this scene, it is already set a camera. Here it is. This one. And if we select it, we can have here a preview of the scene. To create a camera, we can go here on the creation tab and the cinematic section. And here we have the cinema camera actor. If we create it, when the camera is selected, we will have its preview here on this box on the lower right corner. But we have idea have created this camera and set as we like, so we can delete this one. Okay. Now, when we press play, the camera, it isn't used at the beginning. If we do it now, it is used because it has been set by a blueprint. Let's see how to say to the system to use the camera that we have present inside the scene, to be used when we go on play Mode. To do so, we can create a blueprint inside the level itself. Here on the content drawer, if we go on the level folder, we have already created these level 01 asset that represent the scene that we see here. Now, each level can have a blueprint embedded in itself. Let's go on this category, call it Word blueprint. And here we can find the open level blueprint. And we have this print. We have an even began play that starts an execution signal when the game starts. And we have set here a get player controller to get the player controller. The player controller in this game, it has been already created here on this fold management. And we have this player controller, call it PC General to create it right click, go on Blueprint class and here, you can find the player controller. If you create it, you have this player controller, and this player controller has been set inside the game mode. This blueprint next to it, called GM General. To create it, right click Blueprint class and go on game mode base. And here it is, let's delete. Okay, the player controller has to be set inside the game mode. But we don't need to open it because if we go inside our letter, and let's go on reward settings, here we have set on game mode override, the GM general, the game model that we have created. And inside it below, we find its parameter. And here on player controller, we have set the PC general, the player controller that we have here. Okay, so the system is set. So inside the level blueprint, we can take this get player controller that points directly to the PC controller that we are set inside the mode. Okay. And we need as well, the camera clock, the camera that we have created inside the scene. How can we bring this node inside the blueprint taking the object from the scene? Well, it's quite simple. Let's detach this window, the blueprint here. A moment. And so we have the scene here, and here we have on the right the list of the object things at the scene. Let's take the camera clock and drag it inside the blueprint. And we have the camera clock note. Okay, but let's delete it because we have already inside. And this node has a subtitle from persistent level. It means that this node references to an object present inside the C. Okay. But the main node that we need is this one, the set target with blend that we can create easily by pressing Tab and writing set you target and at this point, we should see already the node, but if we don't, let's disable this context sensitive, and we will find finally the set you target with blend. What does this knot do? Simply, it takes the point of view given by the player controller, target and overdt with the point of view that is taken from the camera that is connected to this new view target. Okay, we can let the other parameters as they are, and we're done because if we go inside our level, of course, let's make a compile. And make sure to have enabled the compile option by going on the three dots, seven compile and put the dot on always. Now it is disabled for some reason, probably because it was already saved. Okay, fine. Just to be sure we can click on the disc here to save the blueprint. But if we don't have an asterisk here, that's the name, it means that the blueprint is already seven. Okay, let's go on the level. Now when we go on play mode, we have the point of view that we have been set with the camera. 4. 03 UserInterface: Okay, let's see how the interface works. If we go on play mode and we press play on the keyboard, time starts and the interface counts it. When the seconds reach the 60 value, they will be reset, and the minutes instead will be increased by one. So let's see how this system works. Let's go here on the UI folder when we will find the assets used to build the interface. We have a fonts folder containing the fonts that we have used. It's enough to drag a font inside this folder to get it and to create a container that will be used for the fonts. And we have an icon folder containing the icons used inside the interface, and of course, we have a UI widget to create it right click User Interface and Widget blueprint. In this window, let's click on user widget and will be created the widget for the interface. But let's delete this one. We have already one set here. Let's open it. UI clock. Okay, widget is divided into two sections that we can find here on the top right corner, the designer section and the graph section. The design section when we define the design of the interface. So we need to create a Canvas panel where we can put other elements like image, the icon, and text for the hour, and the two dots as separator, minutes separator, seconds, and so on. Okay, so we have graphically created our user interface. But how do we see it on our screen when we go on playmode? We need to set another code inside the player controller blueprint. So let's open it. On content over, let's go on management folder. And here we find a PC general that is the player controller using in this game. Let's open it. And we have this blueprint that does different types of things. We will talk about the inputs later, but now let's focus on this part of the blueprint where we have a begin plate that sends a single execution signal. We have the sequence that make a split, and on the second part, we go on the on this note they create Widget. To create this note, it's enough to go on create widget. Here it is. And when we have this node on this menu, we can find the widget that we have created inside the project. Here in the project we have on the UI folder, the UI clock widget. So in this menu, we can find it here, UI clock. And so we have set the creation widget the created widget nod on the widget that we have already inside the project. So this node create widget for the system, but to display it on the screen, we need another node that is called a to view port that is directly connected to the create widget and has a target the widget itself. In this way, we display the user interface on the screen. When we go play mode. That is when we go on our level and we press play we see the interface here on the screen. This is the only purpose of the create widget and the add to view per nodes. But now let's come back to complete the definition of our user interface widget. So the interface is quite simple. It's just an icon with some text next to it. But let's see how it's made the graph section where we define how the interface works and the situation becomes a little more interesting. With these blueprints. Okay, first of all, we created just a custom event called start time that set a variable a Boolean variable true. The variable start is created here. Start on the right on the left. And the custom event to create it just press tab and write custom events at the custom evens and just choose the name. The custom evens, as it is, it doesn't do anything. It needs to be colored from some other blueprints to work. So it is just as we that turn on the variable start. How do we use this variable? Well, we have here the second section this one quite long, where at the beginning, we have a classic even tick that send an each frame while the play mode is on. All the signal that tick sends are filtered by this branch that check if the start variable is true or false. If it is true, we go on or if it is false, all is blocked. Then we set a delay to let pass a signal tick each 0.2 seconds. And next, we increase the 10 seconds variable. Beware, this variable, 10 seconds is defint here on the left as an integer, and it is incremented by this plus plus node. The plus plus node increment by one the value contained in the variable, but automatically, it make a set on that variable. So we don't need to put after the plus plus a set node to memorize the new value inside the variable that we have chosen at the beginning, the new value is allocated automatically on the inside variable. Okay, while the time seconds is increased, we check constantly if it becomes higher than 60 because we know 1 minute is made by 60 seconds. We make this check with a branch here. And if we hammer reaches 60 seconds, we go on and set the value of the t seconds inside the text. Otherwise, we do the same thing, but we reset the t seconds value to one. Now, this node, the set text is quite tricky because when we create this node and go on tab and let's write set text. Let's uncheck the context sensitive. We have a different type of set text, and it's quite difficult to find it among all these possibilities. So the right node that we need is set text, bracket text. This is the node that we are searching for. Okay, when we create it, we have the node that is the same as this one that we have already set. So let's delete it. What does it need this nod? I need the variable, they represent the text that we receive the value. So this variable is named seconds, and we can find it here on the left. But this variable, it hasn't been created directly on the left, as the other variable 10 seconds start on 10 minutes as well. But it is derived from the desaner section. If we go here on the Sanner and we take here on the left the text that we named seconds that is represented by this box. We notice that this variable is written in bold while other type of texts like the separators are written in a normal style. This bold is given by this check that is on the right that is variable. It means that this text element that is visible graphical inside the designer, it is as well as variable that will be passed inside the graph section. And automatically when the check is variable is on, we have the variable seconds that is linked to the text element that we have seen inside the designer. So we pass the second variable representing the text to the set text node as target. And in text, we have to put value that is the string that we want to write inside the text. And we pass it with this connection. Let's connect the time seconds, the value of the seconds that we used until now directly inside the in text. If we make the direct connection, automatically, it will be created this nod to text that is a transition node that is used to transform the integer value coming from the time seconds variable in a string value that is passed inside the text. And so this is the mechanics behind the seconds that go on when the time flows. Let's make a step forward and let's store the value inside the text for the seconds inside another variable name seconds that is located inside the game instance Blueprint. What is it the game instance? We can find here on the content drawer. Inside the management. Next, the player control and the game mode, we created as well a game instance general node. We can find it here, right click Blueprint class. And right here on all classes, the game is ans. If we find here the game is ans. Okay, but let's delete it out it is done. The game stats now. If we open it, it is empty, simply. And they have just this variable here seconds definite in its variable list. The game instance is used to store values that are maintained between a level and another. So when we change level in a game, we can save the value, the points, the score, and other variables that have been collected in the previous level. We create this game instant just to be sure that we don't lose values while we go on with the game. We wouldn't have needed this one in this game because this game is made just from one level, and we never changed the level. But it's a good habit to create a games. Let's come back inside our user interface. And so the second value the value from the second from the time seconds variable is passed to the seconds variable inside the gaming stance. To do so, let's make a get Gai stance node at cast to the gamey stance. In this case, the GI general that we have created. And then let's take from the game instance a set of variable that points on the second variable. And inside it, let's put to the value coming from the ten second variable here. Okay. But I repeat in this case, it's just a useless saving of this value. We don't need it. So we can skip it and pass to the minute section. Here we have the seconds that are coming from the 10 seconds variable that is compared to the 60 value by a branch node. If the seconds haven't reached yet the 60 value, then we do nothing. But if the seconds are reached 60 as value, the branch goes on the true path and we increase by one the variable that we have created and we are named time minutes and we can find here on the left. And as before, we have here a set text nod that takes the minutes variable text and assign to it the time minutes value. The variable minutes here, is a variable linked to the Minus text that we can find the designer section. In fact, here we have here the Minus text that is bold because it is enable this checkbox is variable. And so automatically, the Minus text that we have here has been transformed in a minutes variable that we can find in the grass section and we can use here. In this way, when we go on play mode and we press space bar, we will see later it works the space bar. We have the seconds that starts increasing, and when they reach the 60 value, the value is set to one, and the minutes are increased by one. And so on and so on. The value for the hours hasn't been set inside the blueprint because we guess that it's hard to play a single session in this game for more than an hour. So we are set just the seconds and the minutes. But if you want to set the hours as well, we can proceed as we have already seen for the seconds and the minutes. Okay, so let the time flows and let's jump to the next lesson. 5. 04 Inputs: We know that when we press the space bar on the keyboard, our clock starts. In this way, how it is possible, we need to set an input inside the player controller again. So let's go here and let's take on the management folder the PC general that is the player controller using in this project. And we have this blueprint where we have already seen how to define the display of the user interface on the screen. Okay. But we use the player controller to define the input as well. How do we do it? Well, we have the E and begin play that is split by the sequence, and a branch goes on the display of the interface, and the other one goes on this node, add the mapping context that is targeted with enhanced input local player system. To create this node, we can create an add mapping context. Add mapping context, it is. And the target here will be the enhanced input to local prey subsystem. Here it is. It has no parameters. It identify the target just as an input. Let's delete this one. We need to define a mapping context by choosing it in this menu that contains, in this case, just this single one input mapping clock. And where easy to locate it? Well, we have created it manually inside the project here. Let's go on content drawer, input folder, and we found here the input mapping clock. And beside it, the IUI start. IA is for input touch on, and it is created manually as well. To create this node, we had to right click and go on the sub menu input. You are not able to see it because the screen here is cropped below, but there is a sub menu named input. And inside it, we will find the input mapping context and the input touch on elements. We have to create both of them. And so we get these two elements. Let's open first the input touch on that we are naming the UI start. And it is made in this way. We have these parameters, and the only one that we are interested in at the moment, it's the value type that it will be set on digital bull that is identify an input as boolean value. That's all. We could choose a float for real numbers a two d vector or a three divector but we are just interested in input of hachon type. So let's identify the Bleon value as input. Okay, let's close it. And let's go up the input mapping. Where we need to identify the inputon that we created before here on the mappings. When we press the plus on mappings, it creates a new slot here where we can choose the input touchon that we created inside the project. Okay, but let's delete it inside this lot. We have the inputs that we can choose from the different types of devices, keyboard, mouse, gamepad, and so on. Okay, we are interested in keyboard. If we open keyboard, we will find here all the keys on the keyboard and the space bar as well, but we could write space and we will jump on the space bar right away. Okay, so we have set the space bar as input, and that's all. This means that we have created an input linked to the space bar on the keyboard. So let's close it. And let's jump again on the player controller, what we need to define mapping context on the input mapping clock. Okay. Okay? But it isn't finished yet because we need as well, go down and define here, a custom event linked to the space bar. Okay, to create it, let's go here on the list of nodes, and let's write just the name of the input touch on that we have created. That is IA you and I start. And we will find our custom event based on this inputon. Okay, but let's delete it because we have already a custom event inputaon in this printer. And where do we connect to this node? We started, we connected to the custom event start time that if we remember, it is the custom event that we had created inside the blueprint of the user interface widget. If we take again the user interface widget on the graph, We have, if we remember, at the beginning, this custom events start time that set the start boolean variable on true that is used here to turn on this branch on the true value and so to trigger all the bullprint that goes on counting the passing time. This is the role of the player controller in our project. Let's jump on the next lesson when we will see finally how to move the clock handles. 6. 05 Clock Animation: Okay, it's time to move the clock handles. How do we do it? Well, we need to take the actor blueprint representing the clock. So let's open it and we'll find this clock, in the view per section, it shows the geometry. But in the even graph, we have the blueprint that manage the hands animation. How it is done this blueprint. Let's see. At the beginning, we have an eventi that sends an execution signal each frame while the play mode is on. And each frame we make a cast to the game instance blueprint. The Gistance is the blueprint that we have created here, the GI general that let's remember, it contains just a variable number seconds that is updated by the widget of the user interface. If we go inside the user interface, if we remember, inside it, we set this section here. Where the seconds are stored inside, the game stands here. So while the time passes, the seconds are stored inside this variable, and we can fetch this value by making a cast in another blueprint like the blue printer representing the clock. So we make a cast on the GI and we make a get or the variable seconds. Okay, so the seconds that we pass to the user interface are passed as well to the clock. And what do we do with these seconds? Well, we multiply each seconds by six because this value will be the rotation degrees that will be passed to the move component two nod. The move component two is a nod that apply transformation to a component like a translation, rotation. In this case, we are interested to the rotation, but the most important thing is to identify the component on which to act. So on the component input we have to connect the component we are interested in, in this case, the hand seconds to take this node just drag. The components that are listed here on the hierarchy of the actor, and we get the node. Okay, but let's delete it. We can find these components here as well in this list components. And it's the same thing. If we take the hand seconds here and drag inside the blueprint, get hand seconds, we get the same nod. Okay, but let's read it. So we apply six degrees rotation to the hand seconds. Each time a second passes, and so the second hand turns around. And what about the minutes? Well, we have a similar blueprint for the minutes in this section. But before applying the rotation to the minute and, we have set a branch that check if I passed 60 seconds before. In fact, we have here the seconds that are stored inside the game instance that are incremented each seconds and they are controlled here. To see if our passed 60 seconds and if they are, the branch give us the output through. And this happens only when the variable seconds it's equal to 60. But what happens if it's more than 60? This control wouldn't work anymore. Well, if you remember inside the user interface blueprint, we have set the seconds inside the gaming stance but we have here a reset on the seconds to the value one. And when this happens, well, when we have the seconds that are more than 60 as value. So each time the variable seconds has a value of 61, it is reset to one. And so we can start again 1-60 to count in the seconds and inside the blueprint actor of the clock, we each time have this control that works. So when the seconds reach 60 as value, the branch become through, and we go here on this node, do once that let pass an execution signal only once. And we take these variable minutes that we have created just here. Inside the blueprint of the clock, and we increment it by one. Let's remember that this nod plus plus increment by one, the variable and start the new value inside the variable as well. So the minutes is incremented by one, and it's multiplied by six, and this value is passes to the rotation of the minute hand. In fact, we have here, again, a new um ponto that takes as targeted the hand minutes Uh, it should be named minu tanda, okay? Let's light it as it is now. And so we apply a rotation to the minu tan with a delay of 1 second just because we want to rotate the minu tan just when the second hand passes the midday the mid day position. Okay. And so when we have applied the rotation, we can start again and they do once. By res acting it. And it will work only when the branch will become true again. That is when we have again, the seconds that has a value of 60 and so on. So in this way, we are able to turn around the minute hand as well, together with the second hand and beware inside the gaming sans stored only the seconds variable while the minute variable. This one is created only inside this blueprint, the blueprint of the clock actor. So it is intred inside the game instance. It's a different way to handle this variable. So finally, let's go inside our level. Let's press the game mode. And when we press on the keyboard, the space bar, the clock works and the second hand makes a beautiful round. And when it reaches the midday position, the minute hand makes a rotation of six degrees. And so we can watch the time passing for as long as we like. Thank you for having followed these short but intense course. We will see again for new, incredible unimaginable adventures.