How to Add Steam Multiplayer – Unreal Engine Blueprint

1. 1.00 Introduction: In this course, you will learn how to add Steam multiplayer to any game project using blueprints in Unreal Engine Five. The course covers everything you need to know from start to finish, including how to install the Steam Advanced sessions. Plug in how to create the main menu for online games. How to create the Create Sera menu to host servers online. How to create the server browser and display online servers. How to add a Servo Filter option to filter for language Servo Name land and more. How to create, search and join online game servers. And finally, how to package the project for friends and family to play together. By the end of this course, you'll gain the skills and confidence to seamlessly integrate steam into any of your Unreal Engine Five projects. And remember that I will be here to provide support for you throughout your learning journey and I look forward to see you soon. 2. 1.01 VS, .NET Core, .NET Framework & DirectX: Before we get started, you have to download a couple of things for it to work. The first thing you need to download is something called Dotnet Core. If you write that in Google and search for it, you can see from Microsoft the first website saying download Net. Inside of here you have a button for this one, DoesDk, you have to download the latest one that you see on your screen. You might watch this in the future, doesn't matter, you just have to download the latest one. Now, when you have done Core, you also have to download the.net Framework. If you click on it and you just download again the latest one that you see on your screen. Go ahead and download the Net Framework. Then you have to download direct X. So go ahead and download direct X, select the language, and hit Download. The final thing you have to download is Visual Studio 2022. Go ahead and click on it. For Visual Studio you just have to select the Community 2022. And go ahead and download that as well. Now for Visual Studio 2022, you have to install some specific things. It's very important that you pay attention here clicking on Modify for my installer, so you can see what I have installed and you can install the same things inside of here. What I want you to install is the one called.net Desktop Development. Download, the one called Desktop Development with Plus Plus. Universal Windows platform development, mobile development with Plus Plus. Also the game development with Plus Plus. The last thing, I don't think you need it, but I have it. Linux and embedded development with C Plus Plus. Also, make sure in the individual component. And it's better if I click on this Sap so you can see it and I go to the bottom. We have the Windows SDK. I have the Windows Ten SDK. Very important to download that as well. You can even download the same version as me if you can see it on my screen. You can also download the Windows 11 SDK. Two SDK is very important to have. Then just go ahead and install a visual studio 2022. Let's close this down and come back to me once you have that finished. 3. 1.02 Converting the project to C++: Let's go ahead and launch the engine In this course, I am using the latest engine, 5.3 Now, if you're watching this course and you have a new version, it doesn't matter. It's still the same process. So you can go ahead and watch it as well. I'm just going to launch Unreal Engine 5.3 In this window, you can either create a new project by clicking on games and you can select a template to work from. Now I already have a project. I'm going to my recent projects, and here I can see them. I can't really see my recent project that I want to work on. I'm going to click on Browse. The one I'm going to work on is called Counterstrike. I'm going to select this project here and hit Open. Since my project is made with Unreal Engine 5.2 and not 5.3 I'm just going to click open a copy of it so it doesn't delete my old copy just in case something goes wrong. Now for this course, again, I'm using the Counterstrike Project and it is a course that I have released. If you wish to take this course, you can of course, go to the website Game Instruct.com Inside of here you can take the course. I also have a lot of other courses. I have an asset marketplace where you can purchase game ready assets. I have private tutoring and so on. You can go ahead and visit this. Let me just close this down. Now, it opened my project here, I'm going to set the scalability to Epic. Can also do that in the settings up here. Scalability, I usually do it on Epic. Now we are ready to work with this. In this lesson, we are going to convert the project to C plus plus. Even though we are working with blueprint, we're not going to work with C plus plus, but we have to convert it to a C plus plus project before the steam plugin can work. Let's go ahead and do that very easy. Let's click on. Before I do that actually let me just go to Tools and go to Bug. And we just reflector, I'm going to UI because I am recording from a four K monitor and it might look small on the recording. Now let's click on Tools. Go ahead and click on new C plus plus file, then click on Next. Just click on Create class. It's not really too important to give it a name, now it's converting the project into a C plus plus project. When this is finished, technically it is a project. Now just go ahead and hit okay here. And it asks you if you'd like to edit the code. Now go ahead and click on No. Now we are ready. Let's go ahead and close this project, and let's move on to the next lesson. 4. 1.03 Adding Steam Advanced Sessions Plugin: Let's now go ahead and add the steam sessions plug in. To do this, I want you to go to Google and search for Si Steam. When you search for this, you see the first one on Github called Sense Steam, and this guy has the plug in here. Go ahead and click on code up here and download. Now, I already downloaded this file, and I can see it here, the steam master. I'm going to open up my file. Open up here, click on logins. Open up the advanced steam sessions. Plug in. These are the two files that you advanced sessions and the advanced steam sessions. So let me just go ahead and minimize the browser. You can go ahead and find your project file that you're working with. This is, again, the counterstrike project that I'm working in here. What I want you to do is I want you to right click, go ahead and create a new folder and call it plug ins. Open up the plugins folder. I want you to drag the advanced sessions into here, and also the Advanced Steam sessions. You have these two folders inside of the plugins folder. This is all that we needed to do, now we have the plug in inside of our project. 5. 1.04 Building in Visual Studio: Before we can continue and open up the project, we have to build in visual studio. Also, before we do this, let's delete some of the folders so it doesn't give us any errors. If you have the VS folder, go ahead and select that and select the derived data cache folder. Now if there are some folders you don't have, it is fine, we're going to delete those anyway. Go ahead and select the intermediate folder as well. Saved folder VS config and also thislNfile. Don't delete the project file, It's your project, but this one Delete. This one is L and file and delete on your keyboard and it's going to delete all of those. These are the folders that we are left with. If you have a folder called binaries, you can also delete that folder as well. If you don't have it, that is fine. Now what we need to do is we need to write, click on the project file, go ahead and click Show More. We need to click on the Generate Visual Studio project files. When you do this, it's going to generate here. Now this is why it was so important to download the Visual Studio.core.net framework. This is because we have to generate this SLN file. If you get some eras while doing this, please read when it is generating. It will give you an era. If it has and it will describe to you why there is an era. Try to read it, see if you can Google it and fix it. If you can't, you can of course, also write to me, I will help you out. We have a great community here on Discord, so you can of course, use this Discord link to join us. We are a lot of people sitting here helping each other. We are about 1,000 or 2000 right now. Let's go ahead and open up the SLN file. So if I double click this file, it will open up a visual studio. And when it opens up a visual studio, go ahead and click on Games folder and right click your game, and you can click on Build. Now we are going to build a project. It might take some time, sometimes it takes 5 minutes, sometimes it takes ten, sometimes 1 minute. We just have to wait for it to build. You can see here it says three out of 17. I'm just going to pause this video until this has finished building. Now it has finished building. It is important to see that it has succeeded and you have zero errors down here. This is successful. Let's close it down, and let's move on to the next lesson. 6. 1.05 Enabling Steam Advanced Sessions Plugin: Now we are ready to open up the project once again. Let's open up your project file. Inside of the project, we need to make sure that the Steam plugin is installed correctly, clicking on Window or Edit, rather, and clicking on Plugins inside of here. Let's click on this Advanced Sessions Plug in that you see here. We see that the advanced sessions and advanced Steam sessions are both enabled. I also want you to go down and click on online platform. And if you scroll down, just make sure that the online subsystem is enabled as well. Now we can see all of this is enabled. I now can close my project once again, and let's go to the next lesson. 7. 1.06 Editing the DefaultEngine.ini file: As the final thing, before everything should work, we have to add some code inside of the default engine file. If you just go to Google and search for something like Steam online subsystem, or online subsystem, Unreal Engine, you see this from Unreal Engine called Online Subsystem Steam. If you open it up inside of here, they have some code that we need to add. Scroll down, you have something here in the finished settings Default engine, I go ahead and copy all of this. You don't really need to understand this code. Just right click Copy It. And then I want you to go back to your project folder here. I want you to open the config file and then open Default Engine. And go ahead and open this up. Now inside of here, scroll down and at the bottom, go ahead and click control V to page this in. The only important thing inside of here right now is this Steam App Developer ID. Now this 480 is a test ID that you can use so you can basically implement Steam without uploading your game to Steam. Steam has made a test app ID for us that we can use while developing. However, if you've already uploaded your Steam or your game to Steam, you have to change this 480 app ID to your own game app ID. So here I am logged into Partner dot Steam Games.com Again, I have a course about this page. If you go to Game instruct.com if you want to learn how to upload your game to Steam, I have that, but I just want to show you that here you can see your app ID. Just go ahead and take this number if you have uploaded it to Steam and add it to here, and it will work on your own game. But for now, we don't really have to upload it to steam if you are not ready yet. So this idea of 480 will work just fine. Just remember to go ahead and click on Save. So it is saved. Let's close it down. And now let's open up the project. So I'm going to double look here. When we are inside of the project, we have to make sure that steam is running. You have to run it as a standalone game. If you don't do this, it is not going to work. Also, you also have to run steam. Make sure that steam is running on your computer. I'm just checking mine, it is not. So I'm going to open steam and also log into your account, make sure steam is up and running. Before you do this, I am locked into steam. I'm going to click here and click on Standalone Game, and it is going to open the game when it opens the game. You can see down here to the bottom right, that steam is running. And this way we know that Steam has been implemented and the plugin is working. Now we are ready to move on to the next lesson. 8. 1.07 Creating the Main Menu Map: To get started, let's go ahead and create the main menu map. I already have a folder called maps. You can go ahead and create it. You can always right click here, create a new folder and call it maps inside of here. Let's right click make a new level. I'm just going to give it a prefix of map and call it Main Menu. Go ahead and double click on this. Go ahead and save the selected. Now we are inside the main menu map. Nothing is here right now, but what we want to do is hit Edit, and click on Project Settings, and inside of here click on Maps and Modes. We want to change the Editors start up map to be the main menu and also the game defaults. Change it to main menu. Now every time the player starts the game, they spawn into the main menu. And this is also what we want. Let's go ahead and close this. Save Everything, and let's move on to the next lesson. 9. 1.08 Main Menu Game Mode & Player Controller: Before we can get started, we have to create a player controller and a game mode. Let's do that. I already have a folder called blueprints. Now you don't really have to pay attention to all of this. This is from my game. If you're new here, just pay attention to the new things we create. Also, if you have a blank project, not really too important for all of this, let's right click and make a new folder. I'm going to call it Main menu. We're going to work inside of here. Let's right click, go to Blueprint class. Inside of here, we want to create a player controller inside of here. This is where Create or the menu, the UI stuff and so on. So let's go ahead and create this. And I'm going to call it EC for player controller as a prefix. And then I'm going to call it Main Menu. Let's right click again. Create a blueprint class. Here we can create the game mode. And let's call it GM game mode as a prefix and call it Main Menu. Now we have those, open up the game mode. Inside of here we have to assign the player controller. If you go to the class defaults here for the player controller class, let's click here and change it to the Player controller we created. Go ahead and hit Compile, and let's close this down. Over and Edit Project Settings. Go back to Maps and Modes. Inside of here, we also have to change the default game mode here to our main menu. Now we open up the main menu, game mode. Whenever we open up the game, if you click on the small arrow down here, just make sure that the place controller class is our PC main menu that we created. Let's close it. And the final thing we need to do as well check in the world settings. You don't have the world setting stab open. You can always click on Window up here and open up the world settings. But inside of here in the game mode override. Make sure that you have your GM Main Menu selected as well. So go ahead and click on File and Save Everything. And now the game mode and player controller is implemented. 10. 2.01 Introduction to Widget Blueprints: We are now ready to design the main menu. But before we do this, let's take a look at the widget blueprints. Now if you already know what a widget blueprint is and how to navigate inside of there, you can skip to the next lesson. But if you're new here, let's go ahead here in the UI folder. If you don't have one in your project, just right click here in the content folder, Make a new folder called UI. It's always nice to stay organized. Let's get into this folder. Again, don't mind all of this UI. This is from my Counterstrike project that we already did in my other course. But let's right click here, make a new folder. Let's call it Main menu. We're going to just work inside of here. Let's right click now and make a new user interface and create a wide blueprint. Make it here. Actually you can call it WB, Main menu. I'm going to create it later. For now, I'm just going to show you what a widget blueprint is. Let's open it up. Inside of here you see a graph here and you can hold right click on your mouse to navigate around here. To the left you have a palette, and here you have the buttons, you have the text, and so on. So you have a couple of elements that you can use to design the UI. Down here in the hierarchy, you can see what you have added to your UI. For example, you can click on this image, click and drag it out here. Here you can see the image which is white because we don't have anything into it. But you can also see it got added to the hierarchy down here. Usually when we create UI, we always start with a canvas. If you search for a canvas, click and drag it into here. And now you have this canvas here in the canvas. You can now click and drag the image. You can click and drag the text into here. Or you can click and drag it down here on the canvas as well. That will also add it and you can always click on it and move it around. You can click on it and resize it as you wish. You can try to practice inside of here. It's always nice to, for example, if you haven't seen the progress part before, you can also drag it in. You can resize it if you want, you can click on it here in the details panel. This is where you see details about the elements you are clicking on. So for example, if I click on the progress bar, I can see elements such as the position in the X and Y. And you can click and drag the mouse to adjust it. Or you can write a number, for example, 1,000 You can adjust the size in the X and Y. You can also play with the percent, because remember this is a progress bar. You can click and rike here or set a number, for example, 0.2 You also here in the style you can stylize it. Right now we don't have much, you can't add anything to it, but you can add your own background image, your own fill image, and so on. The same with the text, if you click on the text, you can edit the font type. You can edit the size of the text, and you can edit even the color. You can give it an outline down here, or you can write six, for example. And now it gives it an outline. You can try to design or just play around with all of this. You can see you have a couple of elements. For example, editable text box. This is a text box and you can give it, for example, default value for example. And you can see now something is written inside of this text box. You can see, you can try to play around with all of this. This is how you work inside of a widget, blueprint. And you can zoom in. And out here, up here to the top left, you can see how much you zoomed out, how much you zoomed in as well. One to one is what it looks like right now. Here in the graph, we have two sections. We have the designer where you design the UI. You also have the graph where you program the UI. For example, you program. What does this progress part do? For example, in this counter strike game we created, the progress bar is used to set the player's health. The health drops when you get damaged. This is done in the graph where you code the progress bar. Here is mainly where you design. Okay, try to play around here. And this is for animations down here. We are going to get into it later. For now, I'm just going to right click and hide this tab or just close it. Actually close tab. It's not in our way for now. Yeah, just play around here. I'm just going to close it for now. And I'm going to delete it. And let's move on to the next lesson. 11. 2.02 Importing a Custom Font: Before we continue, I want you to download a custom fund because we don't have funds inside of here and I like using custom ones. The one I'm using, I already have one from creating the, kind of, strike course. I already downloaded the rubic fund, but now I'm going to show you how you can do it. If you search for Google funds, I usually like to use that, you can also search for here. You can also find really cool funds. There's a lot of them, so you can try to look around here and I'm just going to use a Google Fund. I think they have really cool funds that you can use inside of here. What I am using is Rubic. If you want to use the same one, you can search for Rubic. You can use this Rubic one here and you can click on it again. You can find any fund you want. Just go ahead and try to find any fund here in the funds. You can look around and take a look at all of them. But for the Rubic one, you can click on one of the funds. You can even test it out. For example, if you're right, main menu down here, you can reduce the size. Just take a look at what it will look like and visualize it. If you like it, go ahead and click Download Family up here and also open up this static. Now I got all of these files, this static font. You can go ahead and use whatever you like here. Usually I don't like the light fonts because they look too tiny inside of Unreal Engine and you can almost not see them in game. I usually like to go from maybe medium, not even regular, from medium. And then I take the semibold, maybe the extra bold, bold and black, Those I would use. You have to extract them first onto your desktop, because this is a file. Click and drag them into a desktop or your downloads folder, whatever you wish. For example, like this into the Downloads folder. Whenever you do this, go to the Downloads folder here. You can now use them, take all of them, and open up the engine inside of here. Let me just minimize this engine in the engine. If you can make a folder called funds inside of the UI folder, right click. Make a new folder called Funds inside of funds. Click and drag them into here. Whenever you drag them into here, it's going to ask you, do you want me to create funds for you? Just go ahead and press yes. When you do that, all of these will appear for you. So when you have custom funds, we can now use them inside of the UI instead of the boring default fund. And now let's move on to the next lesson and design the main menu. 12. 2.03 Designing the Main Menu: All right, now we are ready to design the main menu. And before you do this, I have included some course materials for you. I've given you some UI designs. You can go ahead and go to the UI folder here. I've given you buttons, icons, and images. If you click on your folder inside of here just before the main menu, don't go inside of the main menu folder out here, you can make a folder called buttons. Again, you can right click, make a new folder called buttons and also images. For now we're not going to use icons for now just buttons, images and make those folders go into the buttons folder. Now go ahead and go into this buttons folder. Now, I've already imported it, this is from my course. But what you can do, select the first one, hold Shift, select the last one. So you select all of them, and then you can click and drag them into here, and this will import them. Now, very important, if you have it in a Sip file, you have to extract them first, again to your downloads or desktop for example. And then you can drag them into here. Never do it inside of a Sip folder, because it will give you this icon here and you can't do it. Remember to extract them first and then then drag them into here. Do the same thing for the images, collect everything, and drag them into the images folder. And I've already done, so I have all of this. Let's go ahead and design. Let's go to the main menu folder. Let's right click go to User Interface and create a widget blueprint here. Let's call it Main Menu. Let's go into the main menu Widgets. Now, inside of here, before we do anything, we always start with a canvas panel. When we design a menu in Unreal Engine, we go ahead and drag this down here to the hierarchy, and you will add a canvas panel. Okay, so before we start here in the screen size very important. Click here, go to laptops, and set it to a, to a generic laptop. This is important because now we have set this UI to be designed for a laptop. And by doing so, we ensure that the UI is not too small or too large for the laptop. And we can scale it up accordingly on large monitors. Now I'm using a four K monitor. It's going to look good once I design it for a laptop. And then I scale it up to my monitor. The way we scale it up is if you click down here on this small button, and then inside of here you can see this is the scaling of the UI. Right now I have a four K monitor. So if I hold the mouse over it, it says that it is scaling my UI by 1.6 times. You might be more. Because actually, over here, if you click on this one to the right, yours will probably say eight by default. Then you can see if it is eight. If I click on these two to fit them to the screen, it is eight. It's going to scale it by about 3.8 times of how I design it. However, when I played with it, when I made my game, I think 3.8 times was too much. It scaled my UI and it was very big on my four K monitor screen, it was too much. I'd like to put it on 2.5 in the scale. Then. Let us just continue from here. Now I can see it scales by 1.6 times. Let us close this down now. And now it is scaling correctly. To design the main menu, what I want you to do is I want you to create something like this. If I open up, I'd like to show you what we're trying to do so it is clear. We're trying to do this with three buttons in the middle and the name up here. Let's start with this one. You can see the buttons are aligned vertically. We need something called a vertical box. Search for a vertical box, and here it is. Drag here. And here it is. You add it here, let's drag it into the view. And I just made my UI larga, so you can see what I'm doing here for the vertical box. Drag it in to align it now to the middle. You have to change the anchor point to the middle of the screen. Then if you write 00 in the position y and x and y, you can see that it aligns to the top left corner. This is because you have to play now with the alignment. You can see if you click and drag your mouse, this is 0.5 If it aligns in the middle in the x and one if it aligns to the right side, we want it to the center is 0.5 The same with the y. If you want it in the center is 0.5 it goes 0-1 and it is 0.5 If you want it in the middle, 0.5 by 0.5 and the position in the x and y is 0.0 Now it is in the center. Now when you want to add a button with text on it, you have to add an overlay. An overlay is where you can overlay the text on the button. If you search for a button, go ahead and drag it into the overlay, and then you can search for text. Then you can also drag this one on top of the overlay. Now you have overlaid the text on the button. You have it in reverse order. You can always click and drag it on top of each other. And now you can see the text is behind the button. You can click on the button and put it above. Now for the button, I want it to fill the whole space here. I want it to fill horizontally, as well as vertically. Now it's filling the whole overlay. Let's say if you want it to fill the whole thing. You can see this is the vertical box. This is the size of it and this is the overlay you want it to fill. The whole vertical box. You can click on the overlay and click Fill. Over here, the button will fill the whole thing. Now, let us just do that for now for the button. I want to click it and align it in the middle on the button horizontally and vertically. Now the button is too large for the vertical box. I'm going to click on it and just resize it for now to be something like this. All right, let us just design the button first. Clicking on the button, I can go to style inside of here. I can change the normal style of it here for the images, remember, we imported a lot of buttons and images. Now for the buttons, you can either lick up here and find the button and see which one you want to use. You can go to your folder down here, see which one you want to use, and then you can click and drag it into here. This is just what I'm going to do for now. I want to use this button square blue, I'm going to click and drag it into here. Now it looks a bit weird. This is because if you actually double click the square here, this is what I designed in Photoshop. It's a very small button. You might ask, how is this going to be a large button here? This is because engine is really clever. It's going to take the corners, then it's going to make the middle parts here longer and longer. You can actually make it into a button. The way you do this is inside of, in the drawers, you have to change it from rounded box to box instead. Then the margin is 0.5 which is the maximum here. When you do this, you can see it takes the corners only, and then it lengthens the middle. So it looks like a long button. Now for the color, it's a bit off because the tint is gray. If you click on it and you make the tint white like this, it doesn't have any tint. Click okay, here you have the button now to make it a bit larger. Again, remember since you click on the overlay and click Fill, you can click on the vertical box and you can resize the button as you wish. Like this, let's actually continue here. If you click on the button, you have to do the pressed state and hovered state as well, but to make it easier for you, you can right click and copy the normal one. You can right click and paste it on top of the hoard. What you can do also a short cut. If you hold shift, you can also see the shortcut. If you right click here, it says copy hold shift and press the right mouse button. Shift right mouse, and then shift left shift, left mouse. This is how you paste it in. Now for the hoard and the pressed, I want to change the imaged, the pressed one. Now you have an normal state, a hover state, and a pressed state. Okay, that was it. Let's compile and save everything now let's see if we need to do anything. Clicking on the text. Now let's change the text. We download this rubic one for the text, I'm going to change it to rub semi bold, maybe for the size. I think 24 is too large. Let me change it to something like 18. Let me give it an outline. If I click on the Outline settings over here in the front Outline settings, I'm going to set the outline to two. Now for the color, I'm going to click, let me see the outline color is down here. So clicking on the Color zooming in, I'm going to take this color picker and I'm going to pick the darkest color on the button, it has like this fitting outline. I'm going to show you how you can give the outline a cool effect. And you can do that by also adding shadows. I'm going to copy this color. Shift right click and then a shift left Click here to paste it on the shadow color. For the shadow color, I'm going to write zero shadow of set in the x and I'm going to write two in the y. It gives it like this poll background and it looks like the text has been lifted from the button, which looks cool in my opinion. Now we need to push it a bit upwards because it looks like it's not in the middle in the button Clicking here, going up in the padding. Padding, by the way, is where you can push the text left and right, up and down. Now I'm going to push it from the bottom or setting it to four, something like this. I think now it looks like in the middle. Sometimes I like to disable the dashed lines, so we can see what it looks like clicking on the dashed lines up here. I like to see it. Without any dash lines, you can see what it looks like. I think this is looking great. What we can do is we can click on this text. We can just call it Create Sera. This is the first button we're going to create. It's Create Sera. What we can do is we can click on this overlay. We can click control D to duplicate control D again to duplicate another one. Let's make it larger. Let's click on the vertical box, make it larger. I need to give it some space between the buttons. Let's do that. Let's click on the Overlay Hold Control. And click on all of the overlays here. So we have all of them selected. We can do the edits at once. We don't have to do it again and again. Here again, the spacing is in the padding, Just what we did with the text over here. Let's give it to the top. Let's give it six in the padding to the bottom. Let's give it six in the padding as well. There is a bit of space inside of here. Now let's make this size a bit better. Clicking on the vertical box, I'm going to rec it to something like this. Whatever you wish for, try to do it to your liking. There isn't really a rule here. And then click on the vertical box, and then you can recite this direction as well. I think something like this is cool, that what we can do now is click on the vertical box. Again, position x and y needs to be zero, for it to be centered just like this. Now let us change the color of these buttons To do this first let's actually just change the text to say joint server, the last one to say quit. Now you can of course, have it in the same color, but I'm just going to show you how to change colors as well. I'm going to minimize this a bit here In the buttons again, I'm going to select the purple. Now, clicking on this joint server button, clicking on the normal, I get into here. And now you have changed color. Remember to do that as well in the hovered and pressed, so I'm going to hold shift right click, then shift left click on these. Remember to select the hovered state and the pressed state. For the last one, I'm going to use the red button, copy paste it on the other ones, Change it into the hoverd and the pressed state. Now we have this. Let's change the outline as well. Click on here, click on the Outline Color, clicking Color Picker, and selecting the darkest color. I'm going to click back, hold shift, right click, hold shift, left click to paste it. And doing the same thing down here, click here, color, select the dark color. And then I'm going to shift right click, shift left click to paste it. The final thing we need to do is add the name up here, because I wanted to say welcome and then your name. Let's do that now. To do it up here, we don't really need to add it inside of the vertical box. It's an element by its own. Up here I want to overlay an image or a text on top of a background, a text on top of an image. First we need an overlay. Can drag it into the canvas panel. Let's see where it is. It's up here. Usually up here. When we add it, let's add an image into the overlay. And then let's add some text. Actually, instead of adding a text from here, I can just copy one of them so we don't have to design it again. I'm going to paste it on top of the overlay. Now for the image, I wanted to fill the whole thing. Fill it horizontally and vertically to this overlay. Let's click on this overlay. Let's change the anchor point to be to the top middle. Again, if you write 00 on the x and y, you can see it goes to this corner. So you have to play with the alignment again. And it's 0.5 here. And let's click now on the image. Let's change the brush of the image, the image itself. Now I'm going to go to Images. And I'm going to, let me just import this panel, gray click and drag it into here again, just like before. Let's change it to a box. Let's change the margin to 0.5 Now let us click on the text. For the text, I'm going to click here. Take the color, pick, select this color. Let me just click on the color and make it da, something like this. Playing around with it a bit, I think I'll use this color here. You can copy it if you wish. I'm going to copy this down here to the shadow color as well. And then now let's zoom out. Let me just give it some space from the canvas panel because you can see it is on top of the edge here. I click on the overlay and I gave it space here in the Y, just some space. I think I'll write something like 40 on the edge here. Clicking on the overlay, you can, again, resize it to whatever you wish for as well as the text. I think it's too much on the top because remember for the buttons, we added a padding. Click on it. I'm going to say something like two. There might be a buck because you can see if I actually write a long name, you can see that it writes like this. Let's actually fix it. Clicking on the text, I'm going to center it to the middle in the justification. Also clicking on this image, or actually on the Ovallay. I'm going to click on Size to Content. Turn out looks like this. Instead of giving them a size here in the image size, what we can do, since we are sizing it to the content, we can click on the text here in the padding. If you pat it to the left enough, you can give it some space. If you pat it, for example, something like and something like 50 to the right as well, you can give it some space to the left and right. The same thing for the top and the same thing for the bottom as well. Even if you write a long text or fit some more, you can see it resizes to whatever the text is. We don't get it to buck out for the left and right. I'm actually going to write 40 instead, I think it's too much. With 50 for this one, I'm going to write 22 to the top and 21 to the bottom here. I think this is looking great. This is what it looks like and what it could say. For example, hello in. Now we're going to program this because this name here in, for example, this is going to display, depending on what the name is on steam. For this one I'm just going to say hello, Steam. And we can change it later and see what it says. Let us go out and compile, and let's save everything. And now we are finished with the UI. Almost the final thing I want to tell you is if you click on the text here, and if you go down to Visibility on what it is is right now if you try to click the button here, the text is going to block your mouse and you can't click the button. Don't want that. Let's select this text. Hold control. Click on the other texts as well, all of them for the visibility. Change it to not hit Testable. What this means is the mouse is going to ignore the text. And you can actually hover the button on top of this text, and also click the button on top of this text. This is the thing that we want. Okay, this was it. Go ahead and compile and save everything. And now let us close it down and move on. 13. 2.04 Player Name UI Animation: Let's now go ahead and work with animation. If you open up the, made me a new, once again inside of here, what I want to do is I want to animate this name part. Where I want this UI to slowly hover down and up it is the overlay that we need to animate. Where we can see here in the position Y. I wanted to do something like this here, and we need to animate it. I'm going to set it back to 40 here in the y. Let's open up the animation tab. And you can do it down here. If you click on it, I'm going to click in Layout, so I can see it up all the time here. I'm going to click on the Plus for the animation. Let's call it Player Name. Let's click on it. Now you have to click on the Overlay. Let me just rename it so you can see it. I'm going to rename it V for Overlay, and call it Player Name. And go ahead and compile Now for this here, click on the Overlay. For the Player name, click on the track here, and then you can see it whenever you have selected it here, click on it, click on the plus, then select Transform. The transform is basically where you can edit the, the position, the rotation, the scale, and so on. And we want to edit the translation, the position of it in the x and y, okay, Here in the graph, Let's put it, these are seconds. If I put it, for example, 1.5 second here, I can play with this here, maybe drag it down. I think 15 is enough. You can see now on zero it is like this. If you drag it to 1.5 second, it will be down here. I want it to go up again. After 1.5 seconds again, I want it to be zero once again. Now if I click on Space View, the animation, here it is. If I click on Space again, you can view it again. We're just going to make it loop. You just need one frame like this and we're just going to make it loop forever. Okay? If you wanted to not have a smooth animation, you can always come here, select everything right click, and make it linear. When you do this, it doesn't smooth the points out here. It moves in a linear fashion like this. You see it's not smoothing when it goes up and down. If you want to be smooth, right click and select cubic auto and it will smoothen out an okay. I'll just go with this and we are actually finished. If I go to the graph, now here is the coding. Let's delete this one and delete this one. Let's delete everything I can show you how to make it. If you right click here in the graph and you search for construct. Event construct is simply what should happen when I click Play up here. When I do this, this is an event in blueprint and you need events to run code. Let's play the animation. You can see the animation here. Player name that we created a click and drag it into here. Now drag from here and right play. And you can see this function called lay animation select connected here. Now the amount of loops, I'm going to set it to zero and this means that it will loop infinite amount of times q and compile. Instead of clicking Play as a standalone game, I'm actually going to select New View Editor Window because it's a lot faster to open here. We can of course not see the UI yet, but the animation is working. I can tell you that, however, you cannot see it yet because we haven't added the UI, the main menu to the screen, why we can't see it. And this is what we're going to work on in the next couple of lessons. Let us actually go ahead and do this. 14. 2.05 Creating the Enumeration: To begin with, what I want you to do is create something called an enumeration. We can use that later to program how we show or display the UI to the Viewpoard. Let's go to blueprints inside of here. I want you to right click, make a new folder called Enums. I already have one from programming the course inside of this folder. Don't pay attention to all of this. We don't really need it for this course. Let's right click make a new blueprint enumeration. Go ahead and select one. Let's call it, I'm going to call it something like main menu widgets. What an enumeration is. If you open it up, it is basically just a list of items you can add to the list by clicking up here. And you can add whatever you want. If I click a couple of times and I add items, for example, it can be a list of anything. Enumerations are just lists. It can be a list of groceries, list of point types in your game, list of weapon types. In this case, what we're using it for is a list of what widgets do you have in your main menu. For example, the main menu itself. And then I have the Create Sera menu. And then I have the Serva browser where I can see the servers. I don't really think we have more, but if you have a larger game, you have the settings menu, you have the money. So if you have like micro transactions, money shop, and so on. But we don't really have that for now. I just have the main menu, Create server and Serva browser. Let's save this list here. Now it is ready. You can also see the other ones from my game. For example, the weapon type I have weapon types unarmed pistol and rifle. Again, it can be a list of anything you can think of. Enumeration is basically just a list movement states. For example, here I have a list of my movement states in the game. I can run, walk, and crouch, and so on. And in this case, what we're trying to do here is also my game game, widgets. Inside of my game, I have the main UI, the team selection UI, my Cross. In our case, we are using it for the main menu. We have the main menu, Create Server, and the server browser. Now that we have that ready, we are ready to use it in the next lessons. 15. 2.06 Show & Hide Widget Function: Okay, so this one is going to be a bit more complex, but I'm going to show you the best method to show and hide UI inside of vulnerable engine, so you can use that in all of your project. Again, it's going to be a bit more complex to comprehend if you are totally new. But just pay attention. Try to watch here and I am sure you can learn it as well. Let's go to blueprints. Now let's go to the main menu folder inside of here. Remember we made the mode, we made the play controller earlier, and usually for UI we created inside of the player controller. This is why we created it. Let's open up the player controller. And inside of here, let's open up the full blueprint editor in the player controller. Let's just delete everything in the graph and inside of the event graph. Let's now get started. What I want you to do is I want you to write, click, and make a new custom event called this one, Show, hide widgets. This event is going to show and hide our widget. Now we need the widget here in the input, I'm going to add a variable, and this is the enumeration that we created earlier. Now what I called it in the enums folder, I called it main menu widgets. Here in the variable type, you can search for main menu widgets, whatever you called it, go a and select it. I'm just going to call it widget. Basically what I'd like to show you what function we basically want to use. It's better to understand from the beginning. Let's right click here and search for something called create. Widget is the function that we're going to use. If you click here and select, for example, the main menu widget we created. We are trying to create this main menu widget and add it to the screen. This is simply what we're trying to do now. We're doing it in a clever way which can be dynamically scaled to all of the future UI you create. This is a very clever function down here, we want to show and hide widget. Let's add another variable. Let's add a bullion, which is just the variable that is either true or false. Here, let's call it show. If you call this event, if I just rightly can say, show hide widget. And I call this event here. Here you can see what it looks like when I use it somewhere else. Now I can check which widget I want to use, for example, the Create Serva. Then I can choose if I want to show it. If I don't, I want to close it. This is why it's called show hide widget. I show it if I tick here, and I hide it if I don't tick here. Now we can choose which one we want to effect. For example, do you want to show the main menu? Or do you want to close the main menu? This is how we use it up here. Let's break from here and make a branch. If ho is true, we want to do something. If how is false, we want to do something else. I want to here create two functions. Let's click on the plus for this function. These are the custom functions we are going to create. The first one is going to be called, I like to write as a prefix for my functions. Let's call this one widget. Let's make another one called hide widget. Let's go back to the event graph, and let's drag those into here. Show widget and hide widget. Now, which widgit are we going to show? This one that we plug in later When we call the function. However, we need to have an input here, so we can tell it it's this widget here. Let's click on the show widget one. Let's add an input. Let's change this one again to the main menu widget. This is the enumeration. Let's select it and call it widget. The same one for the hide widget. Which widget do you want to hide? It's this one. I'm going to click here, make an input, and then call it widget. Now we can click and drag this into those inputs we created. Now it's going to go in here and we can do something with it. This is basically the flow. The flow is somewhere in the code we can show or hide the widget. Let's say for example, later on we want it to hide the main menu. We can write, click, and say show hide widget. You can call this event up here. Then we can say for the main menu, I want to hi. This is what it looks like, because I haven't ticked this. What it's going to do is going to say this is false. If it is false, it's going to hide the widget. Which widget are we talking about? We're talking about the main menu. Because this is what you told it, the main menu going to go through here. Going to go through here, inside of this function. And now we can do some code in here for the show widget. I want to break from here and say switch on enumeration. What switch on enumeration is you can do something depending on which selection you did inside of this enumeration. For example, if you select the main menu over here, it's in the show widget. Play the code for the main menu, and it's going to ignore all of them down here. Let's say for the main menu, I ticked here the true. This means I want to show the main menu. We need again, to use this widget. This is what we're trying to use. Let's delete it up here. Let's go to the show widget. And here for the main menu, I can drag and say create widget. Let's select it. Which widget do I want to create? The main menu we created, then I can just right click and promote this to a variable. So I can save it into here and call it Main menu. Now even though we created the variable, it's still not displayed to the screen. This is because we have to drag from here and say Add to Viewport. We're going to add it to the Viewport, and now it should work. If I compile and I click on play, you can see still not working. This is because in blueprint, if you already know we have to call this event, it's not going to run by itself. The engine doesn't know that you want to run this event. What we're going to do is in the event or even construct. Now we are in the play controller. It is play the event. This is an event that says what should happen. When I begin playing the game, I want to show the main menu dragon from here calling the show hide widget event here. And I'm going to select Main menu. And I want to show the main menu. What it's going to do is it's going to go through here. The widget is main menu going to plug it into here and it is set to show is true. It's going to show the widget, the selection here was main menu. It's going to create all of this and add it to the viewport. Now if you click on play, now you can see it is added to the viewport. You can also see the animation is working for the name and everything is looking nice. You can hover over the buttons, you can click on them to see if you have done it correctly, and everything is nice. That was your first UI that you added. And really nice, you have achieved a lot, because this was actually the difficult part. Now the final part is hide widget. Let's go into here again, right from here, and say switch on enumeration. Whenever we select hide here instead of show, then what I want to do is in the hide, I want to take this variable I created for the main menu. I'm going to right click and convert this to a validated get. What this does is we're making sure that this variable is valid before we do anything, before we remove it from the screen. Because it doesn't make sense to remove this from the screen if it is not valid. Because it's not, let's take this and say remove from parent. This is how we remove it from the viewport. Whenever this variable is valid, we want to remove it from the screen. We also want to do the same thing in the show widget, instead of just creating it all the time. This will be a mistake, because whenever I go to the create server and I go back to the main menu, it's actually going to create the main menu again. And I don't want to do that all the time. I'm going to take this variable I created over here. I'm going to write click and convert this to a validated get. Then I'm going to connect it here. If it is valid, I don't want to create it. If it is not valid, I want to create this widget because it has not been created yet. If it is valid, I just want to add it to the viewport. This is a lot better to do. We're checking if this is valid. If it is not, go ahead and create it and then add it to the viewport. If it is already valid, just go ahead and add it to the viewport. Let us compile and save everything, and now we are finished with this complex function and event. Now I'm just going to explain it very, very quickly. If we select, for example, create serva. We select show, going to have select Serva here. And it's going to say show is true. So it's going to play this function up here. And we already know that selection is gate Serva. So it's going to play the code in the create Serva and we're going to create the same thing later on. You can create it yourself if you want. This is actually the same method as this. And remember also to add it in the Hyde as well, but we're going to do it in the later lesson. Let's compile for now, save everything and let us move on. Now let's just select again Main menu. So it plays, we can make sure everything is working. And let's move on to the next lesson. 16. 2.07 Blueprint Communication - Casting: All right, now let us continue. Let's open up the UI we we were working with earlier. And it was the main menu UI inside of here. Let's go to the graph. What I want to do now is I want to here in the designer, whenever I press the button for the Create Sera, I want to open the Create Sera widget to do this. First, up here in the button, let's call it, for example, button server, we know what we're working with. Let's set it to variable. If it is not variable here in the graph, you cannot see it and you cannot do any code with it. If you set it to variable and you go to the graph, you can see, now you can see the button. You can click on the event here on clicked. What should happen when you click the button? This is what we want. We want to show the widget which we haven't created yet, but it's not really too important for now. Let's go back to the graph. Now I want to show my create sera widget. Remember right now in the last lesson, we created inside of the main menu player controller, we created this show hide widget. I need to use this function here, this event here. I need to call it from the main menu. When I press the create server button, I want to show the widget. Now we are inside of something called a blueprint communication. Because now the blueprint here, the main menu, is communicating with the player controller, two blueprints are communicating with each other. To do this, we have to use something called Casting the player controller. What I need to say first is I need to write click and say get player controller. Then I can select this function here, then I can drag from here. Now this is the default play controller in Naral engine. Now I have to tell it I want to specifically use my custom play controller and this is what cost. Two means, cast two and then I write the name of the play controller. Pc main menu. This is the one now we basically told it, get the default play controller, then I want to specifically use my custom play controller. Now when we do casting here from this pin, I can use whatever is inside of the play controller. If I create a new variable, for example, and I call it hello, let's say it is a transform type variable and I compile. Now if I go inside of here and drag and say hello. Now I can see this transform variable. I can use whatever is inside of the player controller. Let me just delete this variable for now. I can use this show hide widget I can drag from here and say show hide widget. And now I can use it to display the create server like this. Now, there is a problem with this method. The cast, if you already know, casting creates had references and Unreal Engine. And what that means is Unreal Engine has to load all of the hard references when it opens up the game. And this is why sometimes in games, if it is, for example, created in Naral engine, it takes, let's say 10 seconds, 15 seconds to open up the main menu. This is because it has to load all of the hard references before it can load the main menu. We try to avoid doing casting as much as possible. There are periods of times where we have to use casting, but a lot of times we can avoid it. And in this case we can avoid it as well. We can avoid it was something called blueprint interfaces. Let's go ahead in the next lesson and take a look at what a blueprint interface is. 17. 2.08 Blueprint Communication - Interfaces: To avoid hosting and avoid the hide referencing, let's go ahead and create a blueprint interface. Let's close this down in the blueprint folder again, let's right click make a new folder and call it interfaces. I already made it here an interface folder because I used it in my Counterstrike project and I already made a couple of them. Let's right click inside of here and let's go to Blueprint And create a blueprint interface for this one. I'm just going to call it, let's call it whatever we are trying to reference to. We're trying to reference to the player control because we want to use the, the event inside of the player controller. Let me just call it main Menu controller. Let's open up the blueprint interface. The function we want to use. Now inside of a blueprint interface, you can't really do much. You can't move this function, you can't direct from here, you can't do anything inside of here. The only thing you can do is create a new function for the new function. Let's say it control reference. This is basically what you're trying to do. Now here in the output, let's go ahead and create a variable. And the variable type here is whatever you are trying to reference to. I'm trying to reference to the player controller. I'm going to search for PC. For Player controller, I called it Main menu Play Control. This one C main menu, select Object Reference. Go ahead and call it here. Let us compile. And now we are finished inside of here. Easy. Let's close it down. Let's go back to the blueprints. Open up the main menu folder and open up the main menu player controller. Now we have to add the interface we just created. Let's go to the class settings. Let's go to implemented interfaces. Let me search for main menu player controller that I just created. And go ahead and add it. Now pay attention when you add it, you'll see a new bar here appearing. If I add it, you can see this interface bar appearing. And I can open up the player controller function. This is the function we just created. Now you have to define what this variable is that you created. What we can do is we can drag and say self. And go ahead and select this self reference. What this means, player control variable that you created. You have to define it. Because if you hold Alt and click here to disconnect it. If you don't define it, honorable engine is going to give you an error and it's going to tell you, I don't know what you mean by this empty player controller variable. The reason why we said a self reference because self means whatever blueprint you are in right now. Right now, remember we are in the Player controller main menu. What we're saying is this player controller variable is our main player controller. Let's compile now. I'm going to explain the whole thing for you at the end. Let's just continue. What we can do now is we can go back to, let's minimize this. Go to the UI, Go back to the main menu. Let's open up the graph again. Instead of casting, let's delete this and now get play controller, just like before. Then instead of saying cost two, we can now say play controller reference. This is what we called it. Now this one. Don't get confused. This is from the counterstrike main game map. This one is what we created, the menu controller interface. You can also see it's an interface function because it says message in the end and you can click on it. And this is also what this icon means. It means it comes from a blueprint interface. And go ahead and connect it here. And now from this we can actually just connect it here. Or if you want to delete it and do it again, you can drag from here and say show hide widget, and you can go out and select it like this. And now you can see you avoid doing casting and you avoid hide referencing. Just to make it a bit better, I'm going to click control X to clip this out from here, and I'm going to add it to the event construct. If I push this away, I hold Alt and click here to disconnect control V to paste this one. Go ahead and connect it. Right click here, promote this play controller into a variable and call it play controller. Go ahead and connect it back here, the animation. Now for this play controller, we make it a lot cleaner by just taking this play controller variable. From here, we can just say show hide widget. And we can use this function instead of doing all of this all the time in every single instance down here. And just take the variable now and we can call the event a lot cleaner. Now we are finished with this, I'm going to explain the whole process to you before we continue. If it was a bit difficult to understand, I know interface is a difficult subject for beginners, let's just take a quick look. What we did was basically going to the blueprint folder. We made a interface folder and we created our main menu interface by right clicking blueprint, blueprint interface inside of this blueprint interface, get player controller reference. What we're trying to do is get the player controllers reference here for the main menu. Because the event that we need to use is inside of here. We need to reference to it. I here in the blueprint interface, I created this for the output. You need to create a variable. And the variable type is whatever you are trying to reference to. We're trying to reference to a Player Controller. Remember to select PC Main Menu. This is what I called my Player Controller. Now you have to add this interface into the Player Controller. I click on it, you go to Settings, I add my interface. This tab will pop up. This is the function you created here. Inside of the interface. You go inside of here, and then you have to define the splat controller. Remember, this variable is what you created down here. You have to define it because if I now disconnect it and I try to use it, it will give me an error. And it will say access non. Access non means that this variable is empty and I don't know what to do with it. This is basically a real engine telling you you have to take the self reference because now we're telling it this Player Controller reference is this Player Controller we are in right now. This is what self means when we do this. Now we can go to the main menu UI. We can have a reference to the player controller by Ting, the default play controller. And then we're saying we want to use our own player controller, which is this one. Now we have it here and we promoted to a variable. Now we can use the variable to call this event here in the event graph from the player controller. And this is what we're doing here. Let's go over in the next lesson and program the main menu. 18. 2.09 Programming the Main Menu: All right, welcome back. Now we are ready to program the main menu. Whenever we click on the Create Sera button, what we want to do is we want to hide the main menu. This is correct, he main menu. Then we want to show the Create Sera UI. I'm going to drag this down from here. Show Hide Widget once again, go ahead and connect it. Then I want to show the Create Server. Let's double click on it, just like this. And what you can do is you can select them and press Q on your keyboard. This will straighten things out. And now nothing really is going to happen here in the create server. Because remember inside of the player controller, if you click on the show widget function you made. We still haven't made anything here for the create server and show server browser. However, it's going to hide the main menu, so we know it's working. If it does that, this was for the Create server. Let's click on Play. You can see I can't press, my mouse disappeared whenever I clicked in the game. Let's go to the controller and let's go to Class Defaults. Let's click on this one called show mouse cursor. It's up all the time. Let's compile. Let's click on play. Now I can see my mouse all the time. I click on Create Serva, you can see my main menu disappears. And I'm actually showing the Serva browser, or Create Serva, which we haven't created yet. Now this is working. Let's continue. Let's go to the next button. For the next button, I'm going to call it button join Serva, sending it to a variable so I can code with it. And going to the graph, click on the button, click on the clicked, Let's just copy all of that so we don't have to write it again for the first one. Again, hide the main menu, but show the Sera browser. This is the joint server for the last one, let's click on the button button. It go ahead and make it is variable. Now in the graph let's click on is clicked here. For the quit, we have a simple function called quit game and select it. This was it specific player. I'm just going to say player controller. Select Player controller. And this is the player we want to quit the game and compile. Let us now click on Play. And this is it. Whenever we click quit the game, whenever I click Join Serva, it's going to the Serva browser which we haven't created yet. Everything is correct. Now what you can do is now you can put them together, make it look better. You can also select some of them. Click on C on your keyboard to create a comment. For example, you can say, Joinva Logic. You can try to make comments. You can even change the color of the comment, whatever you wish for. Try to stay as organized as possible. I'll do that later. So for now I'm just going to put them together and save everything. And let's move on to the next one. 19. 2.10 Programming the Steam Name: Let's now go ahead and make sure that the name is also working. Because here in the main menu, we added this one. Hello Steam. But the game has to know what you're called on Steam. So let's go back here. Go to the UI. Open up once again, the main menu UI inside of here. Let's click on this text. I'm just going to call it text layer name. We can set it to as variable, so we can code with it here in the graph. What we want to do is after we play this animation or actually before we play the animation, let's do it as fast as possible. Here after the player controller reference. Let's click Alt and click here. We disconnect it. What we want to do is let's take this player name and drag it in and say Set text. This is basically what we're trying to do. Let's select the function, set text, and let us connect it. Now instead of just blocking the name in and I'm going to show you actually before we do something else, let's right click and get controller and get the player controller. Then from this you can drag and say get player name can use this one. And it is from the advanced sessions as you see get play a name and you can basically just connect it here. Whenever you click Play, now you can see it gives me the name, this name here. And there's no animation because I forgot to connect it here. So let's click play again. The name is correct. This is my desktop because I'm running it through this one here. But if I run it as a standalone game, again, a standalone game is going to take a bit more time to open. This is why I usually play in the other mode right now. But now you can see when I open it, actually in my team, you can see steam is running. It says I'm called Jinks. And this is because this is what my name is on steam. Now it actually knows what I'm called. Let me switch back to the pie here. It's a lot faster to open. You can see it only says my name and it doesn't say hello. When you want static text mixed with dynamic text, you have to use something called the format text. Let us strike from here and say format text selected here. Then select what you want to write. I want to write hello and then my name here, I want to write hello. My name is dynamic. What you do is for dynamic text, you set a curly bracket, let's just call it Play a name. And then you have a closed curly bracket. You open it and close it. When you do that, it's going to give you an input here for a variable. What you can do, let's delete this one to string. So we can take this now and plug it into here. Now it's going to work. And let us just make it look better like this. When you click on play. Now you can see here, it says hello and then your name over here. Now that is working as well, and we can now move on to the next lesson. 20. 2.11 Designing the Main Menu Background: What I want to do in this lesson, I want to design a background for the main menu. Because as you can see here, it's dark in the background, which is fine. You can have it like this. But I want to add a background now if you don't want to do this, just go ahead and the lesson is not important. But if you want to learn how to make a background as well for your main menu, you can go ahead and do that. I'm going to do it for three D now. This is a lot easier for those who have followed my course on Game instruct.com This course here, Counterstrike course. I'm just going to use the main map that we created in this course. This is the first person shooter course made with blueprint only. It was a lot of fun doing it as well. But mainly what I'm going to do is I'm going to copy all of this. And I'm going to use it as the main menu over here. If you have done this course, what I want you to do is just click here, Control A to select it all. Control C to copy. Then let's go back to the main menu. Click here and control V to paste everything. Let's delete things we don't really need. We don't need all of these weapons. So let's go ahead and it's going to make this a bit larger. For now, let's select the weapon folder. I think we, we can't delete the folder, we have to select everything in it. Select this old shift. Click on the last one, delete, and I'm going to delete the folder as well, deleting the spectator camera. And I'm going to delete all of the spawn points, we don't need them. Delete the folder as well and see if we need. The sound is fine. The sound is fine. Okay, we have all of this now. The reflection capture, I'm actually going to delete as well. It doesn't give me this message that I have to rebuild sphere reflection capture. I'm going to delete that one as well. Don't really need it Now let's save everything. Okay, now this is the main map. If we click on play, looks a bit more interesting. Now you can see it changes wherever I am here with the camera. Let's actually add a camera. I'm going to add a camera maybe over here like this, so it looks a bit interesting. I want you to click up here. Click on the Create Camera here, and select the cinematic camera. Now let's right click the cinematic camera. Ta, up here in the outliner, and then select Eyelid. Now we are inside of the camera. Now when I move, I'm actually moving the camera. But I want you to do here in the cinematic camera ect, I want you to change the film back. I'm going to change it to SLA, I'm going to change the lens settings to change to a 50 millimeter. That gives us like a blurry background. Let's add a character inside of here. I'm just going to use my character we actually had before we made animations here. Remember if you made the course, I'm just going to search for an idle animation. By the way, you can add anything you want inside of this. View. Here doesn't really matter, it's just the background. Now for the scale, it was 1.6 because the characters were a bit too small Here, we can change the view to maybe something like this. I have something here in the foreground, something interesting. I'm going to lower the camera speed up here. I don't move this quickly and I'm just going to adjust. Now what I usually do is I click on Window and Viewpoint and open a second viewport here. On my second monitor, I can actually go here and move my era and rotate it without affecting the camera. What I want you to do here first, for the camera, try to find a nice view that you like. Click on 11 to maximize the viewport to a nice view. I'm just going to move this away. Try to find a nice view of the camera. Whenever you do so, go ahead and right click the camera here. Let's here transform and then lock movement. Now you can't move the camera by mistake because now it is locked for the camera as well. I'm going to remove constraint aspect ratio, here it is. This is now what it looks like, looks great. Now what I want you to do in the second viewpoint, you can always now drag this guy in here and rotate him like this. Maybe whatever you think looks good for you. I think something like this is good for me. I adjusted the movement of it here, the location and the rotation, and so on. I changed the lens setting to a 85 millimeter so I have more blur. Now to make it focus, you have to go here to the Focus settings and then click on Draw Debo Focus Plane. Then just change the number, make it lower until you see a purple plane like this one. And then just make sure it is on the character or whatever you are trying to focus on. Whenever it's on something, you know, it's not blurry. I'm going to remove the debug plane now, and this is what it looks like. Now when I'm satisfied, I am going to leave this camera by clicking up here. Stop piloting the actor, I am outside of it. Now that the background has been created, let's go ahead and make sure that we spawn into this view. Let me just go up here. The level blueprint. And what the level blueprint is, is just code specifically for this level. It will not carry over to other levels inside of here. What I want you to do is I want you to select the camera here in the Outliner. And then I want you to right click, go ahead and create a reference to this camera. I want you to right click and search for view targets. You can just remove this. We have to use this one called Set Target with Blend. Go ahead and select that one. Let's go ahead and connect it now for the target. Let's say it Controller. Let's go down. And now, the reason why I have all of this now is because I remove this. If I just take it again, remember to tick it again, you will get the relevant functions only. Select this one. Get play controller once again. By the way, before we couldn't find this because you actually have to, you have to say get controller. Then from this one you can drag and say Set View Target with Blend. And then you can see it without doing this. If you do it without grabbing from this one, you have to remove the context sensitive here. The new view target is our camera. It should work just nice. I just click on play now, and I just have my view at random place. I click Play. You can see we are now inside of this background. Let's now jump over in the next lesson, and I'll teach you how to add sounds to these buttons. 21. 2.12 Adding Button SFX: In this lesson, I'm going to quickly teach you how to create button clicks and so on. So we have sounds for your buttons. Let's go ahead in the content folder. Let's right click and go ahead and make a new folder. I already did this. I have a folder called audio. Just go ahead and make one inside of here. You can make a folder called sound effects. Now I already have a lot of them because I created this game. But let me just do it out here for you so I can see it. Now what I've included for you in this course materials folder are sound effects. Go ahead and open it up and you will see some button sound effects. Go ahead and rag them to here rob them. And then you see these are created. What I want you to do is right click on the button, hover, for example, and then you can create a que. Do the same thing for the button press, right click, and create a que. You can call it whatever you want. I usually call them in the beginning for sound. Also, this one I'm going to call in the beginning for sound. Here it is. Now when you click on Play, you can hear them. If you want to reduce the sound, you can always click here, double click on them. And then in the volume multiplier, you can reduce the sound if they are too high. Already made those. I'm going to delete them because I already have them inside of here, The button hoover, and the sound is 0.15 for me. For the button press, I made it 0.4 A modulator basically makes the click not sound the same every time you click. If you want to make one, if I just delete this one here, this is what it looks like for you. You can always drag and search for modulator and select it and then connect it here. And now you have one. What I usually do in the pitch minimum and maximum, I write 0.91 0.1 and you can test it out. Now whenever you click Play, it should sound different. Every time you click Play, let's listen to it. They don't sound completely the same. I think it gives it like a unique effect. Let's save everything. And what you can do now is you can close all of it down. You can go back to your UI and open up your main menu. Inside of here, let's click on one of the buttons. And go down here. You can see pressed sound. Go ahead and select your sound. I'm just going to search for button. Here is the button. This one is the pressed button press and the other one is button hover. This one works. Now, if you want to change multiple buttons at once, you can always click one. Hold control, select the second button as well. You can always do it faster this way. The first one is pressed and the second one is hover. Click on Compile. Now when I click on Play, you can see they have sound. And when I click on one of them, they have a sound as well. Everything is working perfectly. And let's move on. 22. 3.01 Creating the Create Server Widget: Now we are ready to create the Create Serva widgit. Let's go ahead here in the UI, open up the main menu, and let's right click, go to User Interface, and let's create a widget blueprint. Now for this one, we're going to call it Create Serva. For now, we don't really need to do anything inside of here. But remember we need to go to blueprints. Open up the main menu and go to the playout control for the main menu. Because inside of here, if you remember, we created the show hide widget. In the show widget. Let's go in here. Now, just like the main menu, you can do it yourself for the Create Serva if you want some practice. If you don't remember, let's go ahead and do it together. Let's right click here. You create widgets. Go ahead and selected. Let's select our Create Serva widget we just created. Right click. Promote this to a variable and call it create sera. Let's strike from here and say add to view, Just like this. Now, just like before, I'm going to take this variable, I'm going to right click and convert it to a validated get because we don't really need to create the Widgit every single time we open create sera widgit, we just want to create it whenever it's not valid the first time, the second time you open it, it's going to be valid. We just want to add it to the Viewpoardt before remember to connect it to the create sera here and just make some space for it. Now we are ready to go to the Hyde widgit function. Go ahead and open this up. Drag the create sera widgit out here. Right click, convert to validated, get connected. Remember again, removing from parent means that you remove it from the viewport. Remove from parents just like this. Put them together, make some space here. Always nice to say organized. Go ahead and save everything. Now it should work. If you click on Play and click Create Serve, nothing happens. This is because our widget is empty. Also, let's make sure that we coded it correctly. If I go to the main menu here, I just want to remember if I actually did it correctly. You can basically just click on the button. You can scroll down and you can click on this here that we created earlier. This button click. We hit the main menu and we show the Create sera. It should work. Now if I open up the create sera, we just need to add something inside of here so we can actually see if it is working. If I just search for image and I drag it in, let's just change the tint to something better for the eyes so we don't get blinded. Complose this down. Now if I click on Play and try it out. Now click on Create Sera. I get this widget and it's actually working. We get inside of here. Now let's click on it here. Let's delete the image. For now, compile, save everything. Let's move on to the next lesson where we designed this widget. 23. 3.02 Designing the Create Server Widget: All right, welcome back here. In this lesson, we're going to design the create server widget. Now this one is going to be a long one, maybe just stay focused, stay interested. Hopefully, sometimes UI can be very daunting. Let's just go ahead and do it. The thing I want to design, I just want to show you what we're going to do because it's always nice to see what we're going to do. It is this UI here, Create server. We have the server name, We have the map, amount of slots for the server, the language for the server. For example, if it's English, German and so on. The privacy if it is public or land server. And then we have the Create button and the back button. This is what we're trying to do. Always nice to see it because before you start doing the design, always visualize what you're trying to do. And it's a lot easier to use horizontal boxes, vertical boxes, and so on. Let's just go ahead and take a look at it for the screen size. I just want to make sure that I'm designing it for generic laptops. Let's compile now the first thing, again, for UI, we have to remember to add a canvas panel before we do anything. Since I have a background and some things on top of it, I want to start. Let's start with a vertical box first, because this is basically what it is. Let's start first with an overlay. An overlay is basically something overlaid on top of each other. First, I want a background image. Let's go ahead and drag this into the overlay. Now you can see the image is only here. So I click on the overlay and I fill this overlay here. Also for the image, I fill it horizontally and vertically. Just like this for the image. Let's see here. Let's go to the UI and go to the images that we imported. I think I'm going to use this panel here. I can just drag this panel blue into here, just like before. I'm going to change this into a box and change this to a margin of 0.5 so it is not blurry like this now. It already looks a lot better. I'm not going to be worried about the size of this for now, it doesn't really matter. But what I'm going to do is anchor it to the middle. Clicking on the vertical box, anchor it to the middle with the alignment of 0.50 0.5 So it is in the middle. Also, remember position 00 in the x and y, so it is perfectly in the middle like this. Let's continue here. Now we have this overlay. Inside of the overlay, remember we have all of these elements here. All of these elements are vertically aligned. Let's go ahead and add a vertical box inside of this overlay. Now in this overlay, in the overlay we have a vertical box. As you can see here, it's very small. What I want to do to not make it small is again, we align it horizontally and vertically. It fills the whole thing. I just want to push it away from the edges. What I'm going to do, I'm going to give you some padding because now when we add some text, for example, you can see if I add text to the vertical box, it adds here to the edge. And I don't want that clicking on the vertical box, I am going to here to the left. Maybe give it something like 50, something like this. To the top, I'm going to give it 35 pixels. 50 units to here, and 35 to bottom as well. Something like this. It is here in the middle when I add elements to it. Now for this text, I'm going to click on it and I'm going to align it in the middle horizontally. Also, down here for the justification, I'm going to set it to the middle. Now for this one I'm just going to say create Servo. Let's actually go ahead and copy from the main menu, because we don't really need to create everything from scratch. I'm going to copy this actually from the main menu, Control C, and then control V on top of this vertical box. I'm going to delete this one here. What I'm going to do is make it 22 in the size so it's a lot larger, looking something like this, because it's a title. As for the shadow, I think it's fine. Everything is looking good. Now, let us go ahead and continue. Now we need a text and an input box so we can write the Seroname again. I'm going to click here and copy this and paste it on top of the vertical box. I'm going to click on this text For the size of this one, I'm going to make it 18. I'm going to make the shadow of set one instead of two. Let's add a space, so we have space between these two. Search for a spacer, Rag it and edit between those two texts. For the space in the y. I'm just going to write 25 so we have some space here. Now, clicking on this text, I want you to align it to the left instead. Again, the justification. Make sure it's left. This one, make sure it's in the middle. Now let's go ahead and add an input box. If you search for text, you see this one called text box. Let's go ahead and add it to the vertical box. It's down here. Now for this one, I'm going to click on it. Let's go ahead and design it. Background image normal. Let's now go down here in the UI and see what we can use for it. If I go to images, I think I'll use this one input bar blue in the images. For this one. Going to the create sera over here, I'm going to click and drag it into here for the margin, for the box, I'm going to say 0.5 just like before. I am going to copy this background image. Hold shift right click, and then hold shift left click on both of them here. Let's go ahead and change the ten is fine. Actually, let's change this one. If you want the hover to be another color, you can always do this one input bar hovered in the focused. You can do this one focused that I have created. Whenever you hover the mouse over it, it should do something. If I click on Plate Create, test it out, you can see it changes the color, so you have some effect. When you click on it, it's focused. It looks like this, right? Looking good already. Now, let's go ahead and give it some padding because it's way too small. And also, let's actually give it a text up here so we can see what it looks like with the text as well. For example, I can say my server, now this is what it looks like. Obviously, it doesn't look too good. We have to change it. Let's actually change the text. Before we stylize this, I'm going to the front for this one. I'm going to use rubic medium for the text size. I think 16 should be just fine for the text color. I'm going to remove this inherit and make it just white here like this. I don't think we need to do any more stuff. Let's change the padding up here. Now, for the padding, again, it's left, right, top down. Now for the top down, I think I'll add 20 by 20 like this for the left and right. I'll add a bit less, maybe 16 by 16. It looks something like this one here can always make it smaller, log up to whatever you want to. But I think this is looking good already. Let's just try out in game and see what it looks like. If I click here, I can write Looking Good. And if I write a long text, this is what it looks like. Looking great already. Let's give it some space from up here. The padding is already four actually on the bottom. Let's just say five. I just want to give it one more padding so we have some space between these two. Now we are ready to do the next one, which is the map. Let's go ahead and just copy this text here. Control C, Control V on the vertical box. I'm going to call this one map. Let's add a spacer once again between these two. I'm going to control D to duplicate this spacer. Drag it down over this text. We have some space up here. I'm just going to make it less. I'm going to make it 20 instead. Now comes the harder part, because now we're going to use a combo box, which is a drop down menu. But it's a bit harder to stylize this one. Let's just go ahead and do this, but it's going to be a bit harder than the buttons and the input. Now, for this one, we have to give it some default options for the maps. You can do whatever you want. I'm just add some counterstrike maps. We have two. We have a map called Inferno, we have a map called Mirage, and we have a map called Office. I have this two. And then you have to give it a selected option. Default, selected. Let's do Inferno. This is the selected one. Now you have to click on Compile before it shows you anything. Remember to press and compile or the padding. I don't know yet because let's actually go down in this style and let's stylize it first before we do some padding in the style combo button button style, then normal. Let's start with this one. You can see there's a lot of options to do here. It's a bit more complex. Let's start with the normal one here. Let's go down here to Buttons. And I'm going to use this one called Button Square blue. It's always nice to use a square for these because there's a background you can't remove. If it is rounded like there is a small background that appears, it will be a lot easier for you to use a square one. Let's go ahead and do that. Let's drag this into here. Let's do this here in the draw as I'm going to set it as box just like before with the margin of 0.5 The tint be white. We use our own normal button look now for the padding. Let's give it some padding up here in the content padding, I think I'll do this one for the left and right, maybe I'm going to give it six by six. Let's compile and see what it looks like for the top and down. Let's try 16 by 16 and see what it looks like. This is what it looks like. Now I have to give it a bit more on the bottom because it looks like this pushing it more to the bottom. I'm going to remove some of the top as well, instead of 16, maybe. I'll write 12 here. Pile. I think this is looking good. Now what we can do here, let's stylize the text so we can see what it looks like. Before we do that, let's actually copy this. Let's copy this normal to the hoverd. Em pressed. Let's click here. Now for the Hoverd Empress, we don't really, I don't have more buttons. Let's actually just use the same one for all of them here. Now for the fun, let's go ahead and change the fund. Before we do anything, the fund is down here. Let's change this one. I'm going to change it just like before. To rubic medium. The size is 16 and the color is white Like this. We might need a bit more padding because it's too close. But first, let's go ahead and change this arrow. If I go down and find the arrow, this is the menu padding, you can see it's a bit more confusing. To change this one down arrow image, go ahead and click this. Let's change it now. I already have one in the images. We have an arrow here, so you can click and drag this in, it fits the color for this arrow. I'm going to click on the image size and make it a bit larger. I'm going to make it 14 by 14 and compiling. I'm also going to give it a bit Pdding here because it's too close left and right. I am going to give it 12 by 12 for the top and down. Let's give you something by four by four. Let's compile. This is what it looks like, looking a lot better than before. Now what we need to do is change the menu itself because you can see a five click on play and click on this menu. We have some dark background and the text is also wrong. It's dark as well. Let's go ahead and change that. Click on it. Now for the dark text, let's go back and find where it is. It is inside of the maybe item style, item style. If you go inside of here we have, let's make it larger so I can actually see what it says. We have the even background brush and we have the parent row background brush and odd row background brush. Let's go ahead and click on them. The oddro, for example, I want you to change the draw as a box instead, then 0.5 in the margin. The tint here, instead of being white, You can see it when I did this. Now if I click on Play, the background is going to be white. For this one, for the odd one. Instead of doing white, let's click on it. Click on the color picker and select the background for the border itself, going to color it with the same color. If I click on play now you can see it down the bottom. It's going to use the same color here, which is what we want. Don't worry about what it looks like so far, we're going to change that now. I just want to copy this setting and paste it to even row brush and parent background row brush like this. Let's click on Play. See what it looks like now. It looks a lot better than before. Let's now add or change the text color to white for the selected color. I'm also going to change white because we're going to see the selected one through these here. You can see the selected one is blue like this. I want to change that into this color here. I think it fits a lot better for the active hovered brush. I'm going to select the color down here. Actually, I'm just going to actually, no, not this color because it's the color here. What I want to do is want to click here, pick the color picker. And pick this color down here. It's the dark color, the same one for the active brush. I'm going to copy this tint and paste it down here. I click on Play. This is what it looks like, looks a lot better. I'm going to remove this orange line going up here. For this line, I'm just going to use the same color as down here. Okay, good. Now it looks a bit better, but as you can see, it's actually not looking too good. Like the square looks very weird. Let's go ahead and fix that. The way we fix this, if we go up here and we have something called a menudo brush. If you click down on this one, I know this video is getting too long. But I just want to do this the proper way here. In the Met brush, I need you to change it. Let's just go back in the buttons and change it to this one we used before. Go ahead and drag it in now. The margin for this one, I'm going to give it a 0.5 And also for the menu boarding heading here for the left, I'm going to give it 12, then 28 to the top. Now, I tested it before, and I think it looked good. 12 to the left and right, and 28. 32 here. I can just compile and you can see what it looks like. If I click on play now you can see what it looks like. Now, we patted it like this, now we are seeing it like here. Now, for the hover color, I think I'll change that hova color as I can see here, because I don't want it to be dark. It looks a lot better than before. Let's go ahead and fix the hover color. If I go down here, let's actually use the Daca color. I think that will look better. I'm going to copy it from up here. This is where we used it here for the margin. Let's actually just copy the color for now. I don't really need anything else for the hovert. I'm going to paste it here. This one as well. I'm going to change to box 0.5 pasting the tint, and for the even row as well. I'm going to paste it down here, Compile, click on play. Now this is what it looks like. I think it looks a lot better. Now, here in the menu row heading, I'm going to give it here to the left, 12.12 to the right, four to the top and down. And I'm going to compile and click on Play. What this does is it gives it some space between these elements. Now in the menu row padding, we give some space to the elements. So you can see they are a bit further away from each other. I think we are finished. But before we do this, I want to give it a bit more space to this text here. Instead of 612 here, I'm going to give maybe plus four on the bottom, plus four to the top. Let's go ah, and compile and see what it looks like. Just like this, actually a B plus four again and plus four again compile to the left and right. I'm give it some more. Let's try plus four plus four here. Compile it looks like. I think it looks a bit better. Let's give it a bit more. Let's give it 12 by 12. Compile, okay? I think this looks a lot better. Let's go ahead and work with this one. Let's click on Play and make sure we don't have any box with this by another one. Everything is looking good now. Okay, this is what we're going to use now. We need one for the maps, this is a lot easier because now we're going to copy paste just like before. Remember we have those in a horizontal box. Let's go ahead and search for horizontal. Go ahead and paste it into the vertical box. Now instead of this horizontal, I'm going to drag in, we have to drag in these two. But before we can do that, let's just wrap them into a vertical box. We don't mess up their vertical alignment here. Let's go ahead and click on here. Drag it into the vertical box. For this vertical box, I'm going to click Control D. We duplicate it, since we wanted to fill the whole area, let's click on the first one. Actually, let's click on the horizontal box. Make sure it is like this. For the vertical box, click on fill. For the vertical box two, click on fill as well. Let's duplicate this spacer and paste it between those. Let me just write one in the Y, but in the X we have to give it some space. Now for the X, I'm just going to give it a space of 25. Let's change this text to slots. Amount of slots for the server over here. Let's give it some default options. Let's say two players, four players, eight players. Maybe 16 players. Let's give it one more. Let's say 32 players. Now the default selected option would be maybe like four players and compile. And you will see it here. Let's go ahead now and duplicate this horizontal box, clicking on control D to duplicate it again, I'm going to add a spacer between them, duplicating this spacer. Adding it down here. For the next one here, we're going to say language. For the last one, we're going to say privacy. Now, for the language, just choose whatever you want. For example, English would be the main one. Also, for the selected option, I'm going to say English. This is the default option. The second one could be German, the third one could be Chinese. The last one could be something like French. You can always give it as many languages as you want, but this is fine for now. For the privacy, I just want two options. I want public or if it is a land server, go ahead and compile. And of course we have to select a default option which is public. I'm going to remove these options that we don't need. Go ahead and compile. Here it is looking great. Let's click on Play. Just testing it out to see if everything is as it's supposed to. Everything is looking good. Now for the last part, the buttons, let's go ahead and duplicate it from the main menu. I'm going to duplicate one of them. For example, this one duplicate the overlay control C and go to the Create server. And again, in the vertical box control V, I'm going to control V once again, because we need two buttons. And clicking on the vertical box, let's make it larger so we can see what we're doing. Clicking on the vertical box, the first one, it's looking a bit weird as you can see here. Now for the padding, I'm just going to say zero, the overlay. And the second overlay padding, I'm going to say zero. You can see they are on top of each other. This is because I actually pasted the second overlay inside of the first overlay. I'm going to drag it out to the vertical box, and now they are on top of each other. The reason why this button is pressing this other button down is because the first one is a fill, the second overlay is not a fill. Let's go ahead and click on Fill. So they fill as much space like equally. Now let's also add a spacer between them. But before we do that, let's add a spacer up here, duplicating this spacer. It, on top of these two overlays, we have some space here for these two overlays. I'm just going to select both of them up here for the padding to the top and down. Let's actually give it a six here and compile. Let's change the text for the first one, we're going to say Create Serva. For the second one we are going to say back because we need a button to go back to the main menu for this one, I'm going to change the color to T square teal again. You can always copy this. Paste it on here and here. And then you can change the first one to hoard and the second one to prestres. Now the second one for the back, I'm going to change this into a gray one square, gray, copy paste on all of them like this. I need to copy this one for the normal one, I don't know why I didn't update. Let's compile this. Let's change the second one to how one this is pressed and this one Howard. Okay. Again, change the colors here as well, the outline color. Click on it. Colic. I'm going to select the darkest outline color. Click on it. Again, copy Pasted to the shadow color. Back here, click on it. Click Color Pick, Pick the darkest color poppy, the color, and paste it to the shadow as well. Now it is looking good. Now you can try to resize the vertical box as you wish. Because you can see when you resize the vertical box, you also resize the buttons. Just resize it to what, when you think the buttons look good. And I think like this, then you can resize it in this direction as well, whatever you think is looking good. I'm just going with something like this. Here we give some to these drop down menus as well. Okay, what you can do is click on the vertical box and center it, position y0x and Y zero. You can go ahead and click on Compile. Now clicking on the first button, make sure you have some sounds as well pressed Sound Overt Sound and the other one as well. Remember, for both of these texts, make sure that the visibility is said to not hit testable, so it doesn't block our mouse clicks. I believe we didn't forget anything. Let's save it all. Click on play. Let's test it out. Now I'm here. I can write my ser name. I can click on them here, whatever. Back server here. I see the back press is not working. Just to fix this, click here. And I can see it is there. But maybe something went wrong just switching here. Maybe something is wrong with the button itself. Like the art itself, I think something is wrong with the art itself and not really this one that we did everything correct. Okay, let's save everything now. Let's continue to the next lesson, where we begin programming this great server widget. 24. 3.03 Getting the Server Name & Selected Map: Now for this menu that we created, let's go ahead and start coding it. For the first thing, I want to get the server name that we create here. Let's first click on this input box. We have to give it a text here, because in the graph we can't really use it. We don't add it as a variable here, setting it to is variable. Just give it a name here. I'm going to call it input for an input box, I'm going to call it server name and compile. Now inside of the graph you can see it. I'm just going to delete all of them here, clicking on the input box. And then you can click on here to make an event on text changed. Now this is whatever the player is inputting inside of here. I'm just going to take this and say to string. Go ahead and select it. Now if you don't know what a string is and a text is, these are basically text variables. If I click on plus, on the variable here and select the type of string, and I make a new one and select the type of text. You can see here if I compile a string, is just some text right here. The text variable is also a sentence. Here I can write both of is a text. What is really the difference? The difference is a text can be translated to other languages. For example, if you want to translate your game into German or whatever language you want, Japanese, Russian, whatever you want, you have to use a text variable. If you use a string, you cannot translate your game. However, a string uses less memory. It's always better to use a string if the text you are writing is not going to be translated, just a description here. But if you want to know a lot more about it, just go ahead again to Game instruct.com I have a lot of courses on this you can take a look at for this one. First, let's drag from here or just right click and promote this to a variable. I'm going to call it server name. Whatever the player is writing here, I'm going to plug it into this variable. We store this information. The reason I made it into a string first, and not just right click here and made this into a variable is because a string you can modify it a lot more. You drag from here and right string, you can see you can split the text. You can check if it starts with something. You can just do a lot with it. You can trim it, make it upper case, lower case. In the future, we are going to check if the player is writing square words in the server name. And we can always tell the player, you cannot create a server if you have written this word in your server name. We prevent players from writing the word, for example, or anything bad. And we can actually do that by using a string and we can check it. Also, we can check if the player has actually written anything and it is not empty. Because if it's empty, they shouldn't be able to create the Serva, we are doing checks with this one. Now let's just continue. The next thing is we're going to check for the map here, whatever they have chosen clicking on it. I'm going to call it CB for combo box. Let us just call this one map or game map. Whatever you want to call it is variable. Let's take it here. Not take it out. Actually click on it and click on Selection Change. Now for this variable, this is the selected item that they have selected. Again, they can select all of these items you have listed here. Now what I want to do, just to make it a bit better, I want to have the game maps inside of an enumeration. Again, remember, an enumeration is wherever you made this text or this list here. So let's go ahead and make a new list. Let's go back to blueprints. Let's open up the enos folder. Remember, we made a main menu widget list. Again, an enumeration is just a list. Let's go to blueprints, make an enumeration. Let's call this one game maps. I'm just going to list all of the game maps we can play. Clicking up here a couple of times. First one was just two, the second one was Inferno, the third one was Mirage, and the last one is Office. Okay, go out and save this enumeration. Now what we can do inside of here is we can drag from here and say switch on string. Switch on string is we can basically tell what code to play if you just click on plus, let's just do it. So you can see it if I add some pins here, for example, three of them. I click up here for the first one, again, I'm going to write the map names here, Two, Inferno, and Mirage, if I can write it correctly. The last one is office. We have these maps now. Depending on what switch is, just like what I told you before here, we actually did it inside of the show hide. If I go back, we did it here, switch on enumeration. This time we are switching on a string. If the player has selected two and you have to write them exactly as how you wrote them inside of here, so it can recognize them. If the player selects, for example, Inferno going to just play this code here. What we're going to do is we're going to set the enumeration selection. Now for setting the map, it's better to do it inside of the game instance and not inside of here, because we need to use it to create the server. Let's go back here. Let's work with the game instance and take a look at what it is here. Let's right click in the blueprint folder. Go to blueprint class. There's not really something called a game instance here. You have to click on all classes and you have to search for game instance. Now what a game instance is, it is an instance that runs in the game all the time. If you join the sera, if you shut down the Serva, if you are in the main menu or if you are in game, it is always running. It never shuts down or deletes anything. Whenever you have your game running, this will run all the time and you can only have one game instance in the game. What we're doing here is in the game instance, you usually do the code for creating a Serva. By doing so, you make sure that you don't delete all of the information whenever you create the lobby or you change lobby or you leave the lobby and so on. So we make sure that the information is done correctly without interruption because again, the game instance will never shut down. Let's go ahead and create one. Let's go and click it here, select, call it GI for game instance, I'm going to call it the name of the game which is Counter Strike. Basically, we only have one game instance. The whole game we create didn't open it up inside of here. What I want to do is simply just create a variable for now. I'm going to call it selected game map. I'm going to use it later for my map, so don't worry about it. But for the variable type, I want to select game maps, the enumeration that we created, Go ahead and compile now what we can do in the create server here, let's just get a reference to the game mode or game instance, because we need the variable here. Remember, just like before, we need to create a blueprint interface to get the reference again, for the blueprint interface, you can try to do it yourself for practice. If you don't remember, let's go ahead and do it really quickly. Here, right click, make a blueprint, blueprint interface. Let's call it game instance because this is what we are trying to reference to. Let's call this function get game instance reference. Let's go ahead and add an input or an output here and search for whatever we are trying to reference to. I'm trying to reference to my game instance. Let's call it game instance and compile. Now let's go back to the game instance last settings. Let's go ahead and add this interface we just created called Game Instance compile. And now you see the function you just created. Just like before. We have to define this variable. Since we are in the game instance, I'm going to write self as a reference so it knows that this variable is this game instance and compile. Now let's go back to the Create Serva. Now we can use it. Let's just create this variable in the begin, play event. Let's right click here. Since we are in UI, it's not called begin play, it's called event construct. Let's go and click it. Now I have to say Get Game instance, and it's this one under game Game instance. Now we have the default game instance, but I have to tell it we need to use our own game instance. Now we can use this one. Get game instance reference we just created here. Quite connected. Now let's right click promote this S variable. And I'm just going to call this variable game instance. But now we have the game instance variable. What we can do down here, we can take this game instance and direct from here. And now we can choose this selected game map variable we created. I actually don't want to get it. I want to set it. I want to direct from here and say set selected game map here. Now when it is dust two, we are setting it to dust two. I'm just going to copy this a couple of times here so I can use it. You can connect this to these. They have targets for the Inferno. We're going to change it to Inferno, the Mirage, we're going to turn it to Mirage, and for the Office, we're going to turn it to Office ahead and drag them upwards. Now depending on which option they select from the drop down menu, it's going to set the variable that comes from the game instance to either two Inferno, Mirage in Office. And then we can use it later on when we host or create the game. We have this information inside of here. Let's go ahead and save everything. Let's move on to the next one. 25. 3.04 Getting the Slots, Language & Privacy: Let's now go ahead and continue. Let's go back to the great server widgit inside of here. I'm going to go to the graph once again. Now what we want to do is get the amount of slots. Let's go back to the graph. And here the amount of slots is basically this one. They'll let us rename it and call it B combo box, just like we did for the other ones. For this one I'm going to call it amount of slots. Also rename the other ones now that we are edit. The next one is B language or Servo language, you can call it as well so we know what it is. The last one is CB privacy. Now we have all of them select all of them, make them to variable, So we can see them now inside of the graph. Let's continue. Let's click first on the amount of slots. Again, click on this event. Now for the selected item, I'm going to convert it to an integer, which is a numeric value. Text to numeric value. Now with this integer I'm going to write Click Promoted to a variable and call it amount of slots. So go ahead and connect this one. And by the way, before I forget, let me just go to the widget. Reflect once again, make the UI larger. It's a bit easier for you to see. Now, we promoted this integer variable into the variable here, amount of slots. And this is simply, it's here. Let's go over to the language now. Clicking on the language, Going down, clicking on selection, changed. Now the language I'm just going to right here, promote this one to a variable and call it Serva language. That was it for the language. Now the last one is the privacy. Clicking on the privacy, again on selection changed. Now for the privacy, it can either be that the player has said it to be a public server or a land server. With this, since we only have two options, I'm going to make a bullion variable called use line. As you see usually for bullions I added in the front because when you drag it out, you can see you cannot see the B. This is useful for when you search up here. If you just write B, then all the bullions will appear. Now for this use line depends on what the player has selected. Let's drag from this one and say switch on string here, and now switch on string. Now remember for the string you can either choose public or len. I'm going to make ear click on it at two pins, one called public and one called Len. Now for this one, let's break two of them out. If it is chosen to be public, this one is going to be false because we don't want to use len. If len is selected, we're going to set this variable to be true. We can use this one later on. Now we are technically finished. But what we can do now, because there will be a buck if we don't do this. And as you can see here, if I click on Play, and when I create a Serva, and I don't select anything here, these will never get set. If I click Play, I create Serva. I just go ahead and click Create Serva. If I do that without changing any values, remember we only set these variables when they are changed on selection changed. If the player does not change anything, all of these variables will be empty. So let's go ahead and set a default value so we don't bug out the game. The first thing I want to do, so let's go back and take a look now for the servonym. Later on we are going to make it a bit better. For now, it can be empty, it doesn't matter. The next one is the map. Let's set the map default value. Taking this game map right here, say get selected option. Now from this one, I want to set the game map just like what we did down here, if we can find it. This one here, we set the game map depending on this. Now instead of copying all of this, you can see if we copy paste all of this, it doesn't really look too good. What we can do is I'm just going to click control Z. What we can do if there is a code that you have to copy paste in other parts of the engine or your game, then it's better to right click on them and collapse them to a function. Let's call this function Set Selected map down here in the variable name. We can call it selected like this. Now we can use it up here. Drag out the function we made, go oat and connect it. And connect this one. It's a lot easier to use if you double colic the function, you can just make it look a bit better. Get out of the function here, back to the main graph. I think this is a lot better. Next thing we need to do is we need to set the default for the amount of slots for this variable we created down here. Let's go up here. Take the amount of slots, get selected option. Now we can take this amount of slots. We can set it and just drag it into here. And it automatically convert this string into an integer for you. Now this has been set by default as well. The next thing we want to set is the language as we have here. Let us again get the server language, get selected option. Let us take this server language, and let's set it just like this. Now the next thing we have is the privacy. Now for this one, we don't really need to set it up here because it will be false by default, which means it will be public by default. We don't really need to come up here and set this like here because it's already false by default, we don't need to do anything here. As for the server name, it is also empty by default. Let me just click here and remove this Sera. Here it is empty and compile again. The server is empty by default. We don't really need to have it up here in the event construct. Now I can see I made a mistake, because these actually need to be up here. Instead, I'm going to copy paste them up here instead. And that is my mistake down here is the correct one. Because they need to start from the event construct, which is basically the begin play for UI. And just like that, now we have all of them. You can try to put them together. It is not messy like this, everything should be just fine now. Now we are finished with everything here. Let's compile and jump over to the next lesson. 26. 3.05 Programming the Back Button: Let's now take a look at the back button. Let's go over to the designer. Click on it, go down, and here, click now. Before I do that, let me change the name so I know what I'm doing here. This is the button back. And then click on the click event. When we click it, just like before, I'm just going to minimize this. I'm going to go down to the UI, go to the main menu, open up the main menu. And I'm just going to copy this that we did before. I'm going to paste it here. Now it's going to be gray for the player controller because we haven't defined the player control lines out of here. Let's actually do that up here after the game instance. I'm just going to move all of this like this old and click here to disconnect it. I'm going to right click and set player controller select it. And drag and say get player controller reference. And it is the one from the main menu interface we created. Go and select that one God and connect it. Now let's right click, promote this to a variable called player controller. Now we can connect the rest of the things. Now we have the player controller variable. And you can see now it is normal because now we have defined it. When we click on back, I want to close the create sera don't show. Then I want to show the main menu like this. Click on Play, now Create Sera. I go back, you can see it is now working just fine. Now we have some box here. I can see it says Access. Trying to read the property game instance, if I click on here. Let's debug this together. Now we have this issue. It says access none. When it says access none, it means it does not get any information. What does it not get any information from? From the game instance? From this one. It says, this one is empty, which is weird because we defined it already. This is in the create server. If I go back to the event construct, you can see the game instance has been defined already. Maybe I forgot a self reference. If I go back to the game instance, if I just close all of this, I go back to the blueprints, the game instance. Here I take a look at the interfaces. But we already made the self reference. Now the final thing, the era, could be from here, is because I forgot to change it in the project setting. If I go to Edit, go to Project Settings, instead of here, go to Maps and Modes. Here it is. I forgot to change it in the game instance class. The game instance we want to use is our own one and not the default Unreal Engine one. I counter strike, then I can try to play now and see if I get an era creer back and so on. I can close it now and I don't have any errors. Everything is working fine. Let's jump over to the next lesson. 27. 3.06 Create Advanced Session: It is now time to work with the Create Advanced sessions. Let's now in this lesson, go to the game instance. Here we want to create the session. What we want to use is the right click and search for Create advanced session. This one from the Steam plug in, it is this one. This might look confusing at first because there are so many things, but it's actually really easy to use. Let's try to use it together here. First, I want to right click and make a new custom event. For this custom event, I'm going to call it Serva. This is the purpose of this event. Let's go ahead and connect this one with it. Now for the play controller, I'm going to drag and say get controller. And we're just going to use this one for the extra settings. Extra settings simply saves some settings for us that we can use later whenever we want to show the Serva on the servo browser. If I drag from here and say you can see make array, what is it means you break things? If I, for example say get act transform for example, and I just remove this and I click here, you can see I can drag from here and I can say break transform. I can break it into a location, rotation, and scale. This is what a transform is. Also, you can see that if I click on something in my world, and I take a look at the transform, it consists of a location, rotation, and scale. I can drag from here and say break. And I can break that into the transform, into the three values or the other way around. If I go this way and not this way. If I go this way, I can't say break because I'm not breaking. Basically, I am making a array, is what we did in this instance. Let me just right click and take this context sensitive again, so I only get relevant functions when I search. Now when we make the array, we can drag and then make again, what I want to make here is make a literal session property string. Because I want to save the server name, whatever the player writes. I want to save that because later on I need to use it to display the sera with the correct server name. For the key, I'm going to say server name. Now for the real server name, this is where the player types. I don't want to set a value here, because this is the player who sets the value. I'm just going to drag it into the event here, so it creates a variable automatically for me. I'm going to call it server name. All right, so now we have this one finished. The next thing, I also want to save the amount of players. If you forget what you need to do, you can always go back to the UI Made menu, open up the Create server. Inside of here, you can take a look at what values you need. The next thing is, for example, the amount of players. Now we don't really need a plug in because the map, remember in the create server what we did is if I go to the set selected map function, we simply this selected game map enumeration variable, whenever the player selects the map, we actually have this value here in the selected game map. Instead of giving this a plug in into here, what we can do is we can save this information for later when we create this server. Let's just brag from this one and say make literal string again. Go ahead and choose that one. Let's drag this into here and it will automatically convert your enumeration to a string. I'm just going to call this one server map like this. Now we have that information as well. Next thing is the amount of players that can connect. And I'm going to drag this into here, and I'm going to call it amount of slots like this. The next thing is the used line. I'm going to drag this into here. We can just let it be called use land. That is fine. Let's see what we forgot. If I go back to the Create server, we have the map, we have the slots. We're missing the language right now. For the language. I want to save that as well. If I create a pin I drag from here and I make literal again string. I'm call this one, let me just drag the plaque control up here instead. For this one I'm going to call it Serva Language. For the language, again, the player chooses it. I'm just going to plug it up here and I'm going to drag it above the used line and call it Serva language compiled. Now we're saving the language as well, the privacy we are because we have this used line. We don't really have more information if you want to now. You can just make things look a bit cleaner by able clicking on these lines here. You can click, for example, this one. Press que on your keyboard to make it straight and so on. So I'm going to just look a bit better. All right with that. Finished. Now we basically finished all of this part here. The other things is fine, we can allow int, of course. You can also, again, have an option for that if you wish. You can always add extra options if you want to allow invites or not. You can have a check box if you want extra settings. You can always plug them into here and let the player decide as well. But for now, when we have created the server over here, what we want to do is we want to create the sera. We want to join the map I drag from here. And let's say open level by object reference. Now you can select which level do you need to open. Now I don't have this many levels, so I'm just going to use my map main as the default one. Remember, the player selected game maps, we have to select which game map we want to spawn in. Let's drag this selected game map and drag from here and say switch on game Map here. Then you can just plug it into here. What we can do now is for the two, we can open up the two map, the Inferno. We can up the Inferno map and so on. Now, I don't have this many maps in my project. I'm just going to copy paste this times and open maybe the same map. And I can just print a message to the screen and see if I have opened the correct map. Now I want to show you a way that you can optimize this code so you don't have to do it this way. I'm going to delete all of those. And what you can do is you can use a select node. If you drag from here and search for Select, go ahead and take the select node for this here in the index. Go ahead and drag your enumeration down here. Now it tells you, if I just connect all of this here to the on success, Remember, you have to connect the on success and not this one. Because we want to join the Sera whenever it successfully creates the servera. Now it's going to select the map, depending on what the option is that is selected here in the selected game map. If it is set to Inferno, it's going to select this Inferno value and we have to tell it which map for the Inferno one. I'm just going to select map Main for all of them. Also, what you can do if you wish to, you can just select random maps. I can just open up this showcase map and open up this weapon showcase map. Let's actually open these random maps that I have. Also the military doc showcase level or whatever. All of these. Now it is going to work. Now you can see the code is a lot cleaner than using the switch on enumeration, which makes us copy paste this open level. We can just do it with one by using the select node. And I'm just going to delete all of this up here. And now we are basically finished. This was it for the create sera. We now have all the options that we need to create the sera. Let's go over to the next lesson and program the Create Servera button. 28. 3.07 Programming the Create Server Button: We are now back here in the Create Serva UI. And let's go over to the graph here. Let's go to the event graph. And now let us code the Create Serva button number. I don't believe we created a variable for it. Let's click on the button, call it button, Create Serva. I can spell Serva, and it is variable. Now let's click on it and press the unclicked event. When I click on it, I just want to host the Serva. What I want to do is I want to take the game instance variable, we already have that brag from here, and say create Serva. Let's run the create event that we created in the previous lesson. For the servoname, I'm just going to drag in this servoyme variable we created. As well as the amount of slots. The same thing for the Sera language and the same thing for the use line. We are finished here. This should work. Now if I click on Play, I create Serva. I select the name, for example. Here I select a map, whatever I want to. Let's set it to public. If I click on Create, now it should create the servera. See, now I am inside of whatever showcase I created. Now it is showing me the main menu map or main menu UI. Because we don't have default K modes selected. We have our main menu. But if I just open up my own map that I coded, if I just see here what I selected, if I open up Inferno, that should work correctly. If I click on Plano, and I will just wait for it once again. Once it opens, this time I'm going to select Inferno because I have the correct model for it and go and create Serva. I'm just going to let it be on Inferno and then I'm going to create the Serva. Now it should be inside of here, you can see it works correctly. Now I'm actually inside of my game, I can play as a counter terrorist and now I am actually playing correctly. Everything is working as it is supposed to. This create servo is now working. The next thing we need to work on is the Servo browser and so on. But before we do that, I want to show you how you can add a UI animation to this UI to make it a bit more interesting. If you're not interested in creating UI animation, you can always skip to the next lesson. But if you are interested, let's jump over. 29. 3.08 Adding Create Server UI Animation: Okay, let's go ahead and create some animation for the UI To make it a bit more interesting. What I want to do is if I click on play, I want the UI here to appear on the screen and then also disappear when I click on back. Let's go ahead and do that. Let's add some animation down here in the animation step, if you don't see it, if it looks like this for you, you can always click down here. And then in layout to have it up here, add an animation. For the new animation, I'm going to call it, let's click on it. Now we want to animate the whole thing just to make it easier. By the way, you can make it super complex with the animation and it will look good. But just to make it a bit more quicker for this course, I'm going to animate this overlay I, I'm just going to call it overlay here V. Let's just call it Create Serva. Let's click on Track and select Create Serva. By the way, you have to have it selected before it appears. Up here. Click down here, transform here. In the transform, you can now play with the translations where it is on the screen For the y. I'm going to increase it and move it down here off the screen. Maybe 1,500 like this, let's say 0.65 I want this to be up on the screen, but a bit higher than what it normally is. Maybe 150 minus 150. Then after 1 second, going to say zero, the animation now is off screen. And it appears on the screen, goes up a bit further than usual, and then it goes to the screen like this. Just a very simple effect. Again, I said you make it more complex because you can animate every single button and text if you wish to. But for now, we just have this animation here. Whenever we played in reverse, it's going to go back. This is when you play the Back button. Okay, now we have this finished. Let's compile and save everything. What we can do now in the graph, let's go over here and code it. Whenever we open up the create Serva here, when we start in the event construct, let's move all of this. I'm going to play the animation. Let's in the animation tab, take the create Servo anim and say Play Animation. Go ahead and choose that connected. Now for the play animation number of loops. I just want it to play one time. If you have a loop, you want to play for an indefinite amount of time, right? Zero. Let's click control Z. One is fine for me. That looks good. Let me just move all of this closer. Now, whenever we click on the back button down here, I want to play the animation. Let's just move all of this away. Take the animation once again animation. And let us connect it. Now inside of here, the amount of flupes is one. But in the play mode I'm going to play it in reverse now instead of just removing it, because now you can see we actually have a bug. If I go back to playing it in the new editor mode, I create a sera and I go back, now you can see it's not playing the animation. And this is because we're removing it from the screen instantly after we start the animation. Instead of doing this, let's just copy this over here and say get end time. We're getting the end time and we're going to add a delay. Add a delay by the amount of time it takes to play this animation. And let me move all of this away connected. Now let's compile and click on Play. And test it out by Serva. It appears by click, Come back. It removes like this. Awesome. Now we have a cool looking animation in our game as well. If you want to play it a bit faster, you can always change the playback speed. I'm going to change it to 1.1 instead of just one. It's a little bit faster and you can try to tweak this whatever you like. Okay, I think everything looks good. So let's save everything and let's move on to the next one. 30. 4.01 Creating the Server Browser Widget: Let us now go ahead and create the Serva browser widgets. Let's right look in the main menu UI. Now I'm going to go a bit faster than usual, because now we have experience in this. Let's create the UI. Let's call this one Serva browser. Before we do anything, let's go to the player Main menu. Open up the player controller here. Let's add it to the widget we created earlier. If I open up the show widget once again, I right click and say create widgets. Go ahead and create the server browser here that we just created. Promote it to a variable and call it Sera browser. I just need to spell it correctly. Okay, like this. Let's drag from this and say Add to Viewport. Let's strike the server browser, right click and convert it to a validated gets if it's not valid, we're going to create it if it is valid. We're just going to go ahead and add it to the viewport. Let's drag this server browser down here as well. Again, put them together, make it look nice. Now let's jump over to the hide widget. Drag the sera browser, convert to a validated get. Then again, remove from erens. This way we can remove it from the screen if we need to. Again, moving them together, look nice. Compile and save. Now we have created this. Let's make sure that everything is working. Let's make sure, let's go back to the main menu. Take a look at the Servo browser, actually at the Servo browser. Let's take a look at the main menu. Whenever I click on the joint sera, it closes the main menu and it opens up the Servo browser. The code we have done already in the main menu. Let me just add an image here to make sure it is open. When we click on it, just add an image here. Let's change the tint so we don't get blinded again from this. If I click on Play, Join Servo, it's going to open it here. And I did not compile this. It did blind me. Let me just delete this for now. It is working perfectly. Let's save everything, and let's move on to the next one, where we design the Servo browser. 31. 4.02 Designing the Server Browser Widget: All right, for designing the server browser. Let's open it up for this one. I'm just, again, going to show you what we're going to do. You have it visually and it's a lot easier to comprehend. This is what we're trying to do. We're trying to have a top bar here where we can search for a server. We can choose the language, the land server, we can hide full servers and we can also refresh the servers. Then we have the servers down here in a list. And that is simply it. I can see we are missing a back button as well for this one. So we can always go ahead and add a back button up here, or maybe down here. It doesn't matter, we're going to figure it out. But this is what we're trying to design. Let me just drag this to the side and let's get started again. We need a canvas panel to get started here. Then we have a vertical box because we have two elements on top of each other. First, we need an overlay, because I need a background image for my UI. We're going to drag this and anchor the vertical box to the middle alignment. 0.50 0.5 and the position 20.0 Now this vertical box is in the middle. Now for this overlay, let's actually just make the vertical box a bit larger and change the position to zero. Once again, we have some space to work with. Now for this overlay, I need to add an image because I need a background or my UI for this one, let's add one of the backgrounds. If I go to the images, I'm just going to add what we used previously, this panel blue. I'm going to add it. I'm going to click on this overlay. Everything is fine in the overlay, so I'm going to click on the image, and I'm going to align it horizontally and vertically. Now it is looking blurred because again, we need to go to the raw as two box and rise 0.5 in the margin. This will make it look a lot better. Now, we can always change the size of this one, this overlay here. But instead of doing so, let's add content to it. And this background image will adjust and look great here. I want to add a horizontal box, because I need to add all of my elements into it. Now, adding a horizontal box with this horizontal box, I'm going to align it to the middle vertically. But I'm going to align it all the way to the other side horizontally. So it takes all of this place. Let's add some elements to it. So it looks better if I just go back to the UI and main menu and I just copy the text here from the main menu. Because I don't really need to recreate the control C. Go back here in the horizontal box control V to paste it. Now for this text, I'm going to change the size to 16 instead. As for the spacing over here, I'm going to add a spacer before I add the input bard. Adding a spacer up here for the space, I'm going to give it 15 in the x. Then I'm going to go back to the gate I that we created. And I'm just going to copy this one, go back control V into the horizontal box. We have it inside of here. Now for this box, you can see it fills the whole screen or the whole background image. What we can do now is we can always click on the horizontal box. In the padding, let's try to give it some padding to the left, I'm going to give it a painting of 30, and to the right I'm going to give it a padding of 30 as well. To the top, I'm going to give it a padding of 20 to the bottom 20 as well. We have some space to work with here for this text. I can see it is a bit lifted and this is because we have copied it and it has a padding. I'm going to write zero in the padding. It doesn't have anything. Now, I think the height of this input bar is a bit too high. I'm just going to reduce the size. Remember in the padding down here, you can always change it from 20 to maybe something like 12. I think it looks a bit better now for the size of it. We don't really have to worry about it for now. We can just click Fill Up here. Now it's going to fill the whole area. But again, this is because we need to add more elements. And it's going to be a lot smaller. Again, I'm going to add a spacer. Duplicate this control D, base it down here. I'm going to set the size to 35. Then I'm going to copy this text. Drop it down. Let's call this, the next one is the language language. Now let's go back to the create sera. I'm going to copy the language box here, control back control V. You can see there's a lot of copy pasting here for this spacer. I'm going to copy it as well. Past it down here. Now we have this one ready again for this language. Again, click on Fill. It fills just like this bar here. Let us now copy this text again. Past it down here. For this one, let us call it. Only servers, it's only going to show the land servers. Let's add this spacer down here. The next thing we need to add is the checkbox which we haven't created before. Let's search for Checkbox Racket into here, into the horizontal box. Now for this checkbox, if I just zoom in so you can actually see it for this checkbox, let's click on the style for the style. By default it is unchecked. Unchecked image. Let us just take a look at our buttons here. Buttons. Now I have made this one for you, called check box. Click, and drag it into here like this. And the same thing before we do that, actually, before we copy it over, let's take a look at the size. Now for the size, I'm going with 40 by 40. The size of the checkbox is a bit larger for the color. You can see it is a bit dark. It doesn't look like this one. It's much darker here. Clicking on it, I'm going to change the foreground color instead of inherit, remove this, make it white like this. Click, okay, now it is the true color. So go ahead and hold shift and right click, and then hold shift and left click to paste it on all of these. Now it should be correct. Now let me just copy style for the unchecked image on top of the hoverd. And pressed for the hoverd, I'm going to change it to hovered for the pressed one. I'm going to change it to press this should be correctly. Let's minimize all of this now. We also have the checked image. Let's go ahead and take a look. And it is here. If I just brag that in again, I'm going to change the size of it to 40 by 40, then I'm going to copy it to the other two. Change the second one to the selected hoard, the last one to the selected press. Now we have all of them. You can always test it out by clicking on a Play and Joint server. And then you can try to take a look at this one and see if it is performing correctly and if everything is good. Let's go back. Let's add a spacer over here as well. I'm going to copy this. Click here, control V to paste it, and you paste this spacer. Now let's do the same thing over here. I'm going to copy this spacer. Paste it over here. And then let's copy, actually you can see it past the spacer on top of this check box. This is why I usually sometimes click on this here horizontal box and pasting to make sure it's paste it correctly. For this text, let's paste it as well. Let's call this text de fall servers. Let's copy the spacer once again, copy the checkbox past. Let's copy the larger spacer here, past. Now, here we are going to have the refresh button. Let us go back to the main menu. I'm going to copy this one, control C. I'm going to go back to the server, browser control V. Now we have it. Let's call this text fresh. Everything is looking nice, just like this. Now let's make it a bit bigger. I'm going to click on these, so I can see the dashed lines. So I can see my bottle here. And I'm just going to make it a bit bigger like this. Not filling the whole screen, but just giving it some space as well. So something like this here for this button, I can see it's tiny. And this is also because for this overlay for the button, we have some padding. I'm going to write zero in the padding, so it gets a bit larger. And now it looks a lot better for this padding or for the spacing over here. I'm going to give it a spacing of 50 instead. So there is a bit more space for the size of this input box. Again, I'm going to make it a bit more small, eight by eight in the top and bottom. So it becomes smaller, but as you can see, it's actually filling vertically. So I'm going to click this middle one. Now it's got too small, so I'm going to increase this again to 12 by 12. And that is a bit too small, so we have to increase it a lot more. Maybe 20 by 20, and that is a lot better, 20 by 20. But the alignment is here, aligned in the middle. Okay, now we are finished with this part up here. What I want you to do now is down here. Now this was the first overlay. We already have this vertical box. I'm going to add an overlay again on top of this vertical box. Now it's beneath this top part. I'm also going to add a spacer, so we space these two for the spacer. I'm going to give it a value of 15, clicking on it, value of 15 in the Y for this overlay. Again, add an image here for the image I'm going to use again, the panel blue. If I go to images, find the panel blue, drag it in again, for this image, I want to fill the whole thing. Now for this overlay, instead of only filling this part, I'm going to click on this overlay and fill the rest of the UI for this image. Again, I'm going to set it to box 0.5 so it looks better. And here it is. Inside of this overlay, what we need is we need a vertical box at Edit. Inside of this vertical box, we need a box at a scroll box as well. For this vertical box, make it fill vertically and horizontally. For the scroll box, everything is good. We don't need to change anything now for the adding here for the vertical box because I don't want to add elements to the border of this background. For the padding left and right, I'm going to give it 35 by 35 and top, I'll give it 28 by 28. We have some space and whenever we add content, we add it inside of here and not on top of there. Okay, before the scroll box, we need a horizontal box because we need to add some text doing that. And then I am going to add a spacer. I said the space later on. For now, let's just design it up here. I'm going to copy this text. Go down to my horizontal box. Click on control V to paste it. Now for this one, it's going to say server name. Then I'm going to click Control V again a couple of times. I copy this text here a couple of times. The first one is called server name. Then we need the map. We need the players, amount of players that are inside of the server. The last one is called how much it likes, now, how it should be. We don't really know right now because I need to align these text, whatever the server is here, like how large it is, and so on. So we can't really design the spacing between those right now. Let's just stop here, save everything, make sure everything works. Before you close this, we can join, you can write things here, you can change the language, you can ticktick them. You can also click on the refresh, and everything is looking great now for the sizing and everything else. We can continue on later. But for now, we need to design the server itself before we can finish the part Down here. Let's close everything for now. And let's jump over to the next lesson. 32. 4.03 Designing the Server Card Widget: The final UI we are going to design is looking something like this. Here we have the language and we have the server name, and we have the map. How many players is in the sera? And also the ping for the sera. The reason why we design the server card by itself and not inside of the server browser is because this is a can. It contains dynamic values, just like if you create a shop. So let's say you have an RPG game and you have like an item shop, the self, the item shop, you can design it. However, the individual cards for the items are actually designed by themselves because we don't really need to copy paste every single Cod then there's a lot of copy pasting and it's not really good, it's a lot of work. What we can do is we can create one item Cod. Then we can just change the value dynamically and copy pasted through code here. In this case, we are creating a server. The server we are creating dynamically, we are going to add it depending on what the player has added as values. Then it's going to be added down here. Let's go ahead and design this one. Let me just over, let's close all of this for now. Let's right click, make a new budge, blueprint. Let's call this one Serva. Now let's open it up inside of here. Let's again search for canvas panel. Let's add it. Now for this, I'm going to change desired on screen, screen size, make sure it is again, for laptops, we are designing this. Now what I want to design in here, first we need a background and we need the button. I'm just going to back to the main menu. Go ahead and copy this first. Button control C, control V. Now for this overlay, I'm going to change the anchor point to be in the middle. Then the alignment, 0.50 0.5 and position Y, X and y00. Now as for the size of it, we can always decide that later because you can change the size of the overlay like this. Again, you have to make a 00, again, the X and Y. But for now, let's not worry about the size. Let's just change the content. What I want first is the flag, because I want to show what language the server is in taking an image. I'm just going to add icons here. The image is before the text, and it's going to be here in the middle, vertically. Before I do that, you can see they are on top of each other because we have not added a horizontal box, searching for a horizontal box, adding it down here, adding the image to it and also the text to it. Now as for the horizontal box, I am going to align it in the middle and then fill it horizontally for the text I'm going to align to the middle. Remove all the padding that it has. So running zero here, compile Now for this icon. We don't have any icons yet. Now this is for my game, but for the flags, because we need the languages, I want you to go into your course materials that I gave you. Inside of this course materials, go to the UI and we have icons inside of here. I just want you to take these, drag them into the game, and here we have them. Now for those, I'm going to write click Edit Selection in Property Matrix. Usually it's always good in the level details. To change the texture group to UI, it reads correctly and the buttons or the UI looks good in the compression as well. For the compression I'm going to change it to user interface two D. Now you only need to write click and edit via property matrix. If you're editing multiple items at once. Else you can just, if you only have one item, you can double click on it, open it up, and then you can change the compression settings to whatever we did right now and the texture group as well. Okay, now you have that. Let's go back the UI we're designing inside of here. Let's click on the image. Let me just click here and search for icon. Let's just add one of the icons. It doesn't really matter. Again, this is dynamic values, we're going to change those later. Now for the horizontal box, just to make it look a bit better. Now let's click on the overlay. Just make it a bit larger so we have some space to work with. And hit zero in the X here for the horizontal box to the left and right. I don't want it to be here on the edge. I'm going to give it some padding to the left, 25, right 25, something like this. For the size y. For the Y, I'm going to give it a size of 104, maybe something like this. Maybe that is too large. We can always make it a bit smaller and we can test it later. But for now, this is fine. Let's set the position to zero. Now, the first one is create server. Let's add a spacer between the flag and the text. The spacer for this one is 15 and the x. Now this is the server. Let's call it a server name here. I'm just going to say, for example, server. We can, for example, say Inferno only because this is what we're playing. Let's say Chinese because it's a Chinese server. Let's say it was called something like this, realistically. Now, after that, we need the type of map we are playing. I can just control this to duplicate. And I can say, for example, we are playing two from a strike. And let's duplicate the spacer as well. Add it down here. Now the problem with adding a spacer here, let's just make this overlay a bit larger. I'm just going to give it a bit more space and then reposition it in the X. Now the problem is with adding a spacer here now is if we write a longer Servoname, push this away. I don't want to do that because inside of the server browser, we have these set in a fixed position. If this is getting pushed away, it's not going to align with the map title here. The way we do this, instead of a spacer, we click on the text. Instead, you give it a minimum desired width over here. Go ahead and increase the minimum desired width to something you like. You can see it's not changing yet because it's longer than that. But if you get to a certain value, it begins to push the other text away. For this one, I'm going to give it a value of 685. I tested it a bit, and the other value here, I'm going to give 225. You just have to give it a value where you're making sure that this width is larger than what the server name is. Else is going to buck out. Now we have this. The next thing is we're going to duplicate this text and we're going to write the amount of players. The amount of players for example, could be 100 players connected and 100 players as the maximum inside of the server. Or this one. I'm going to make the width a bit smaller because we don't really need all of this. Maybe 115, the final thing, let's duplicate this one and call it. Now I'm going to add a spacer because the minimum is not giving me enough space. So I am going to add a spacer up here. I'm going to add the spacers to the horizontal box. Put it over here for this spacer, I'm going to give something like 150. Now for this ping, I'm going to write, for example, something like this. Ms, this is a very laggy server. For the minimum designed with. I'm just going to let it be to 115. That is fine for me. Now let us compile, and now let's add this to the server browser so we can actually see what it looks like. Let's search up here for WB. And you can search for the server code. And you can click and drag it on top of the scroll box. If you click and drag it into the scroll box, this is what it will look like. Now if you click on the dash lines to remove them, I want to fill it. You can see it has some empty space to the sides here and here. We have to make it a bit longer for it to fit. If I go up here to the overlay and take a look at the overlay size, let's try something like 1,650 Compile and take a look. Now this is what it looks like now. Before I add more space to it, I also know there will be a scroll bar. If I click on the scroll box, I go down and click Always Show scroll box, it will be here. Now for the size, I'm just going to increase it further, 1,690, maybe compile and take a look again. Now it fills the whole thing. And we have space for the scroll part. We can always make it a bit smaller if we need to. Now what we can do, you can see we have a bit more space to work with. So I can click on this one and it can make it larger one, this one as well. We can try to make all of these larger if we want to. Clicking on this text, I am going to make it larger here in the minimum design width. I don't really need the other ones to be larger. Maybe the map one can be 250 else the other one, this one, the server name is the most important one. Just make sure you don't push it too far out. Something like this. 965 here, that is looking good for the flag. I think it's a bit to push down, so I'm going to click on the flag and give it a padding. On the bottom of two is pushed up a bit. Also for the whole horizontal box, what we can do is we can click on the horizontal box at the bottom, give it a padding of four. It's pushed up slightly like this. We can also make it a bit larger. Click on the overlay. I'm going to make this slightly larger. Not much. Something like this here. I think it looks great. Now for the text, I'm going to make it a bit smaller. Selecting all of the text and the size should be something like 16. Instead, everything is looking nice. Let's compile clicking on the overlay, making sure the position is 00 and the x and y. Then going back to the server browser. And now we can take a look at what it looks like. It looks a lot better if I control D to duplicate the servers. This is what it will look like. Now we need some padding on the top and bottom for the buttons because it doesn't really look good. Let's go back to the server card and click on a button. I'm going to top and bottom, give it a padding of five to five. Again, I'm going to make the button slightly larger because now it's a bit smaller. Just making the button larger like this position zero in the y. Again, compile, go back, and now this is what it looks like, now it looks a lot better. Now we can actually align those up here for the horizontal box. I'm going to push this serverame. It's above this one. I'm going to give it a padding to the right, to the left, actually 75, something like this. Now it looks a lot better to the right here. Instead of going all the way here, I'm going to give it a padding of 20 after the server name again, we can just change the desired width, just make it larger and push away all of the other texts until it is on top of here. I'm just going to zoom in, make sure it is lined correctly, 965 like this. Click on the map, now change the minimum desired width, make it larger players, one is above the other, 1250. Clicking on the players again make it log p is above the ping 265. This one doesn't really need one. You can add if you want. It has some width, it doesn't bug out, maybe just 95. Now you can see it is looking a lot better. Let's add a spacer between the title and the servers. Let's see if we actually added the spacer. We did not. I'm going to search for Spacer. It is over here in the overlays, so I click on it. We have this horizontal box. In the scroll box, we need to add a spacer between those. And in the Y here, it's going to be maybe something like ten. Even smaller, we can make it smaller. Instead of ten, we can make it six. Now we can compile now, it's looking really good. Before we do anything, let's also change the scroll bar because it doesn't really look good right now. Also, when you duplicate a lot of the servers, you can see it is going off the screen and the scroll box is not working. This is because on the scroll box, you have to click here and set the size to fill. When you set it to fill, you can see now it is actually working. If I click on the lowest part here, server, you can see it is actually rolling correctly. That is working. Remember to set it to fill. Now let's fix the scroll box. If I click on the scroll box and I take a look at the bar style here for the normal thumb image, I'm going to take a look at what I have. If I go to the images, I'll take this one progress bar fill yellow. I'm going to click and drag this, this image here. I don't think I have a better image. Maybe this one, but I think this one is better. I'm going to use that one as a box 0.5 in the margin. Then I'm going to puppy paste this in. The overt and the drag. For the drag, I don't have a separate image, I'm just going to change the color to a bit. Daca, when we droll box for the scrollbar thickness, I'm going to increase this one to something like 32. Also for the padding, we need to give it a bit of a padding so it doesn't overlap. If I open this up, I can write six to the left, the right. We don't really need to, so I'm just going to write zero here. Or the top is two. For the bottom is two is fine as well. Now you can see it is overlapping with our servers as well. We have to fix that. Let's go back to the server card and we have to make it a bit smaller here. Let's take a look here. We need to make it a bit smaller. You can see also on the other side. But instead of making it smaller, what we can do is we can click on this vertical box. And we can just increase the size here. Increasing the size of the vertical box will work as well. As you can see if you enable the dash lines, you are still within the screen. Try to make it look good as best as possible. And I think something like this here also for the size in the X and Y or in the Y or rather, can make it a bit larger as well, it looks better. Maybe we can display something like this here, or we stop like this, because sometimes I stop in the middle, the player can actually see there are more servers down here. You can scroll through the position. Again, I'm going to set it to zero by zero. And here we have the server browser together with the server here, which we will change the values of dynamically. Now everything is designed and working correctly. Let's click on Play and click on Joint Sera. You can click on the server. Everything is working fine. We have the sound, the sound here as well. We can tick those. This one is working. This one we can write in. Everything is working as it is expected to. This is what it looks like, by the way, in my four K monitor, And this is what it looks like on the laptop. You can see on the laptop, it almost fills the whole screen. However, for my four K monitor, it is looking like this. Again, you can always scale it more by clicking down here. And then you can play with this scaling settings and make it look larger on my screen as well. Now if you wish to, you can always make a back button. Let's actually do that really quickly. If I just copy this button here, I just copy it. Control C, I click here, I'm back here. Control V, inside of this horizontal box. I'm going to drag it over here. I'm just going to say back even better sometimes for the back button, you can always have a like an icon so it doesn't take space for this back. I'm going to make a spacer again, control over here. The control V down here. And I'm just going to drag it over here. Now we have space between those as well. Now for this button here, instead of making it this large so it doesn't take too much space, you can always click on auto on the overlay instead of fill. And then with the text, you can give it some padding to the left and right so it doesn't look this tiny. The left, I'm going to give it a padding of let's say 15 and right 15, Give it some more. Let's give it 25, 25, even a bit more. 30 by 30, something like this. You can even make it a bit larger, Let's actually make it a bit larger. It's not difficult to press 35 by 35, something like this. Now you can see the back button as well is working, and you can make it another color if you wish to. You can always change the colors of these. So the back button, you can go ahead and change it, for example, again to the one used before. It was the green one, Something like this, if you wish to, But I'm just going to have it all the same color. I think it looks good. Now we have a back button as well. Okay, everything is working correctly. Let's jump over to the next lesson. 33. 4.04 Adding the Server to the List: Now we are ready to do the programming for the UI, since we are finished with the design. So let's jump right into it. Let's open up the Sera browser inside of here. Before I do anything, I actually want to click on this one. Hide full servers. I'm going to change it. I think for me it's better to do hide empty servers because I think it's better if I just hide the empty servers or no one is playing. I think that is better also for these servers. Let's go ahead and delete all of them because now we are going to add them. We only have the scroll box down here. Okay, everything is looking good. Now let's click on the Refresh button. Let's call this button Refresh. Now let's go to the bottom of it and click Now. Let's just delete all of this for now. With the clicked for the Refresh button, we want to find sessions. Let's strike from here and search. I find Session Advanced, Advanced Session here. Find Sessions Advanced. Go ahead and select that one for the player controller. Let's strike once again and play controller. Go ahead and select it for the max results. This is how many servers you are going to find and I'm just going to find nine servers. Just go ahead and search for that many servers using land. We are going to add that later. For now, don't really worry about this one. We're going to search for all types of servers. You can see, you can search between client servers which players have created, or dedicated servers which runs on another PC. Search just for all servers. For the filters, this one is actually not working. I also researched about this because I was trying to use it and it's actually not working. We are going to use another node called to search for filter. You can see this one filter session results. We're going to use that one instead. Everything else seems to be fine. I'm just going to continue here. Whenever we find the results for the servers, what we want to do is we want to drag from here and say for each loop we're going to make a loop Now instead of connecting it up here, I'm going to disconnect it from here and connect it down to the success. Instead, whenever we find servers, these are the servers that we found. Now we're going to look through all the servers that we found. For each of them, for each of the servers we want create widgets. We want to create the server card because every time we find a server, we want to create a server cord and we want to add that server card into here. Let's go back for the server card. We need to add this session. This is the session we just found. This is the server we want to join. Let's go to the server card. Now, open up the server card, it's out of here. I want to in the graph make a new variable and call this one found session in the type search for blueprint session results, clicking on it compile. Now over here I want to plug this into the variable, so we store it as a variable. Inside of here we have some information you have to make it into an instance Editable and expose on spawn. And go ahead and compile. What that does is it makes it appear here. If you click on File now and refresh all nodes, you can see it appears down here, so you can drag and drop it in. Now you actually have some information for that session inside of this variable, which you can use later. Because remember in the server code, we have this button here where we join the server whenever we click on the cord, whenever we click on the card. In the future, we can join this server because now we have the information of it for each server we find. Let's go ahead and create a server code. Let's add that server code to the server list. For the scroll box, I'm going to call it scroll box SB and then server list. Go ahead and make it a variable. Let's now drag it into here. Drag from here and say add child. Now we're going to add this cord into it. Before we do so remember you also have to remove the old servers if you refresh and it fine servers if you click refresh again you have to remove the old ones. To do so let's go back here. Before we do the fine session rag in the server list once again and then clear children. We're going to clear the old servers from the list and then we're going to start searching again for new servers. This should work already. Now if I click on Play, let me actually make two players here. And I go to play as listen server. And I click on play appears on my second screen. Now on my screen here, I'm just going to make a random server clicking on Create. And I'm going to try to join it here. If I click on Refresh, I should wait a little bit here because it takes some time to find servers. And once it has refreshed, it should appear over here and I should be able to see it. I can see it here. You can see the name is wrong, all of this information is wrong. This is because we haven't really coded the information for the server code. But I can see my server. This is the server that I created here. If I click on it, nothing happens because we haven't coded the joint session yet, but we know it is working now. And now it says only local control laws can be assigned to widgets. And let's see what's happening here. Over here, it's telling us that only local player controls can create this here. And this is because, by the way, it's not going to happen for you, for your game. Because I'm playing as two players and remember the main menu is in single player. This is because I'm trying to run to play as listen servers at the same computer in a single player main menu. This is why this is happening if you want to fix it as well so you don't get that buck all the time. You can always right click here and search for local player controller and take in this one called Is Local Player Controller. Let's go ahead and add it down here before we do anything with the UI so it doesn't give us that era. Again, taking in the branch and go ahead and connect it. If it is a local player controller, go ahead and do all of the UI stuff. If it is not, let's not do anything. You can always go ahead and click on Play. Try again to create a server like this, trying to join and so on. It should give us the era, if it like before, but we have fixed it now. So it should actually not give us the era. But you can see we don't have an era for going back and forth in the menus. All right, so that was it. We are able to find sessions, but we are going to make it more complex during the lessons. Now let's jump over to the next lesson. 34. 4.05 Adding a Refreshing Servers Indicator: The problem I have with this right now is whenever I refresh, I don't get an indicator to know if I'm actually refreshing the servers or what I'm wining for. The player will be a bit confused. Because imagine I click Refresh now, and it's empty here and I don't know what's happening. I have to know that it's actually refreshing the servers. Let's close this down and let's create this. Now this is very, very simple. We just need to add some texts for the player to know it is refreshing if I just copy one of the text. This one for example, Control C. I'm going down, let's see, we have the horizontal box. Vertical box, and we have the overlay here. I'm actually going to paste it on this overlay control V here. We are going to say refreshing servers, please. We're going to say refreshing servers, please wait, I'm going to duplicate this one because when we don't find servers, I'm just going to hide the first one. So I can see the second one. This one is going to say no servers found. This is when we search, but there's actually no servers. Now we have these two. This one and this one. You can just hide one of them if you wish to, so it doesn't look weird. Clicking on the first one, I'm going to call refreshing servers. The second one I'm going to call a text. No servers, I don't click on both of them and make them two is variable. Now let's go to the graph here. When we search for a session, let's take the refreshing servers text. Let's drag it and say visibility set visibility. Now we are going to show it to the screen and we're going to show it as testable. Again, we don't interact with it with the mouse. Once it has found sessions here, we should drag it and say set visibility to hidden because now we have found servers and we don't need to see this anymore. However, if we don't find any servers, we should take this and say set visibility to hit testable. Because now we want to show that we haven't found any servers. How do we know that this is? Because if the results are zero, if you take this array, say length, if the length of this array, let's say if it is greater than zero, then we found session. We can drag here and say branch connected. Now we're saying if the length of this array results here, it is greater than zero. This means we have found a server. Then we can go ahead and do all of this. However, if we didn't find a server, if it is empty, we need to display this one where we didn't find a server. Now remember, this one needs to be hidden as well. Whenever we start, I'm just going away. Paste it here, Let's set it to hidden and connected. Now this one we are going to remove anyway, even if it is zero or nuts. After we refresh here on success, let's go ahead and hide this. I'm just going to connect it down here again. Let's just push things away. There is space. Push this down like this. Just go ahead and double click on the notes here to make re reroutes and make everything look good. All right, that should do it. If we compile and click Play just to see what we are doing here, let me just create a server. On the screen here, I create one, Let's join server. You can see, we can see it right away. I actually have to do something about it. Clicking on the first one, we just want to hide this. No servers found. By default, we should go down and set the visibility to hidden. No server, this one is hidden. Now for this one, it should refresh the servers right away when I connect to the server browser. I shouldn't just wait to press the refresh button, because it's annoying that you have to press the refresh button the first time you join the server browser. What we can do is can add this code to the event construct. Again, this is just like a begin, play event. The event construct again, instead of just copying this whole thing, I'm just going to select all of it. All of the code here, Let's collapse into a function. Now you will notice that you can't collapse into a function. You'll see here if I right click and collapse to function, you can see that you can't collapse to a function. This is because when you have timed events, when you see this clock on the function, you can't collapse a function like this into an event. Instead, let's right click and collapse it into a macro. The difference between a function and a macro is the macro, you can actually make multiple execution pins. Let's just change the name for now. Let's call it if Find Sessions. Now inside of this macro, let's just add it here inside of a macro. The difference between a function and macro is in the function, I can do something and I can drag this function out here and work with it. However, a macro, you can do the same, but you can actually have multiple execution pins. I can have multiple execution pins. And I can do more things here with the execution pins. This is the unique trait about a macro, but for now, let's just delete it instead of the macro. Let me just put things here. It is clean in the output. We can just make an output here when you just want an output without here. But you can do, the secret is just writing then. If you write then then the text will disappear. Let's just connect. Everything looks great. Let's delete this new function I made. Now for the fine session, we can drag it in and connect it to the event construct. I click Play and I click on joint server. It should do this now it should say no servers found because I actually didn't create any server yet waiting. Now it says no servers found. If I click refresh again, because now I actually created a server. Now it should display my server. It should hide all of the text I here. Now it should appear. Here we go. If I click refresh again, it should appear once again. Everything is working correctly as it's supposed to. Now the player knows that the servers are being refreshed. And let's move on. 35. 4.06 Show Sessions Result Function: All right, so what I want to do is here, in the fine sessions, I want to separate the fine sessions from when you filter. Right click search for filter and we have this one called filter session results. This one I want to make in a separate function instead of just continuing it and doing it here. Because when we filter, when we click on Play and join server, filter for land servers. When we filter for languages, imagine when you click on one of them and you have to refresh all of the servers again, I don't want to do that. For example, let's say we are an English, we're changing it to German. Imagine if we do that, then we have to find sessions again and it had to find all of the sessions again. It deletes the old sessions. I don't want to do that. I want it to filter from the sessions we already found. Instead of doing the filter inside of here, let's do it in a separate function. I'm going to create a new function here and call this one, show session results. Let's strike from here and say filter session results. Go ahead and use this function. Now we can filter for the servers we want to filter for. Now here we need a session result. Let's go back to define session. We need this input here. Now all of this code here that we have, we can actually add it to the filter because we don't need it inside of here, the length as well. I'm just going to select all of this and then control X to clip it out and go to the show session results. I'm just going to paste it in down here so we don't lose this information. Now for the fine sessions here, what I'm going to do is I'm going to simply delete this one. Right click here, promote this to a variable. Let's call this one session results. Go ahead and connect it after this one. And double click to make a rear route node, make it clean. After I found the session results, let's go ahead and show the session results. Because now we are going to filter for it. We need an input for this. I'm going to click on this function. Make an input for the type. Again, search for blueprint session results, make it into an array. If you click over here, you can make it into an array. Now let's call it Found Sessions. And let's connect this together here. Now whenever it refreshes, we're going to find the session results, we're going to store them into an array. And then we're going to plug them into this function, which purpose is to filter or whatever we're filtering for. Whatever we tell it to filter for, it's going to do that. Now that we're finished here, let's go into this one. Now what we can do is we can take this and connect it into the session results, just like that. Now instead of doing this, I actually realized we can just make one pin less because we can just take this one and we can plug it in and I can actually delete this from out here and compile because out here in the fine sessions, we don't really need it to connect it here. Click all, and click here. We don't really need an input because we are using it as a separate variable out here. We don't really need an input here to plug it in. So we can have one input less because we can just use this variable that is better looking. Now we need to add some filters to it so it doesn't give us this error. We can filter in the next lesson. For now, let's just skip the filtering. But what we can do is we can just reconnect this code, whatever we filter for. Again, try to see if the length of it is above zero. If the of it is not above zero, then we need to show that no servers has been found when you are filtering. And let us just make it look better here. Over here again for loop we can just connect this sessions result instead and delete this one up here. Now this one should work nicely, just like before. If we compile now you can see we get an error because we haven't added any filters. Instead of doing anything more in this lesson, let's jump over to the next lesson and add a filter here. 36. 4.07 Filtering for Server Language: All right, so this is where we left off. Let's go to the van graph now. And now we have to filter for the Sera language. If you click up here, go down to the bottom and select this one on selection changed, now the selected item is the language. So I'm just going to right click here, promote this to a variable, and call this one server language. This is the server language we want to filter. You can call the variable whatever you want, doesn't really matter. Now, filtering to this, I'm going to add the function that we made here. So adding this function, we're going to set this into a variable. And then we're going to not really refresh the servers, but we're going to filter the servers inside of here. What we can do is we can push all of this away so we have some space. Let's drag from here and say we are making an array just like before. Let's here make, you have this one called literal session search property. Now again, drag from here and say make once again. And we want to filter a string. Because we have a string, we have a server language, do that. Now you have to add the key you added before. If you don't remember what you did, you can always go back to the blueprints. Open up the game instance. Inside of here, we filtered for the server language. You can go out and copy this key. You can go back to the server browser. Is this key down here? Now, trying to find server languages which fit to whatever you're trying to filter for. Now you can drag this into here. For example, if this one is saying Chinese, it's going to look for all the servers that had the Chinese language to them when they were created. That is how this is going to work. If I compile now, we should not get any errors anymore. Now we can make this a bit better because if I go to the designer of the server browser, you can see we have the English language. However, we don't, where we show all of the servers, I want that because I want to see all of the servers, the English, German, Chinese, and French, all at once. I don't want to only see English. Let's click on plus Answer, or write all here in the index. I'm just going to drag it above all of them. It's up here. The select option, I'm actually going to set it to all. Instead, go ahead and compile and it should say all Now, by default now for the all language, it's not really a language. We don't want to filter for anything if the player has set it to all. Because we want to show everything. If you try to imagine how can you actually do this. In situations like this, it's best to use a select node if we want to filter or not. Depending on if this is this value or that value dragging from the filters, I'm going to search for the select node. Once again, we are going to select depending on if this filter to serve a language string is equal to all or not. I'm going to drag, if you write three equals string, this is equal, exactly, the string is exactly equal to all. We can drag it into here. Now what we're saying, if the string here is exactly equal to the value, if that is true, we don't want to filter. This is going to be empty. However, if it is false, meaning we actually selected a language, we want to connect this to the false. We are now filtering for a language because we have selected one. Let me just this here like this, and everything is looking good. Now, before we try the game, let's click on the filter to serve a language. And remember we have to set this by default to all. You have to select this variable and write all by default, because this is what it is by default. Now let's click on Play. Here on my second monitor, I'm going to create a server, just a random one. And let's call it, or let's select Chinese, for example, and create the server. Now over here in the joint server, let's try to wait for the server and see if we can find it. And when we find it, let's see if the filtering now is working. Now we find the server and it's Chinese. I can see it. If I changes to English, it says, no server is found. But now we have a bug because we need to actually remove it. Clear children, we forgot to clear the children. But you can see when I select all I can see the Chinese server. I select Chinese, I can see it as well, it's actually working. However, we need to clear the children as well. Inside of here. If I take the server list, I can say clear children, we remove the old ones or we add the new ones like this. Now, it should work just fine. I'm just going to skip ahead until I find the server. All right, here we are once again. And I have refreshed and I found my server once again. If I change the language to German, see no servers found. I change to English. Nothing is here. I changed to Chinese, I can see my server, I changed to French. I cannot change it to all I can see my server. Once again, the filtering for the language is working perfectly awesome. Now, we can close this down. Now, before I end this lesson, let's add a bullion so we don't buck the game because right now you can show, you can filter here using this session results. Even though because technically you can just click on Joint Sera and you can start filtering right before you actually find or finish refreshing the servers and this will bug your game. To prevent this, we can do this by a simple variable. If you click on the plus up here. If you call this variable, let's call it is refreshing server list. Let's drag from here. Let's drag in this pull in. And if we drag, and we pull in and select this one, pull in. Now what we're saying, we are not refreshing the servi list. Make a branch, then go ahead and do the filtering. However, if we are actually filtering, we don't want to do anything because else we're going to buck the game. This is refreshing servi list. We have to set it to true whenever we are filter or finding sessions in the final session, whenever we start finding the session, I'm going to drag this in and set it to true. We are refreshing the Servist over here whenever we are finished. The refreshing, I want to drag it in right before we filter here. I want to say that is refreshing. Servist is now false because we're not refreshing anymore. So now it's going to go inside of here and it's going to do its thing. If we compile play and I join, I try to do this, you see it's not bugging because it's still refreshing the servers. And it's going to automatically do this filtering because when it is finished going to filter and it's automatically going to read this filter to serve a language value which is maybe set to Chinese at that time. And then everything is going to work just fine. Okay, that was it for now. Let's jump over to the next lesson. 37. 4.08 Filtering to LAN Servers Only: Now we are going to filter for the line servers. If I go back and I take this check box and I'm going to call this check for example, you can give it whatever prefix you want. Let's call this one only line servers and compile, set it two is variable. Now let's go back to the graph and here for the box, let's click on this event on state change, we get a bull in here is checked. We can see if the checkbox is checked or not. Let's just click this one. Promote this to a variable. Let's call this one, Only land servers. Okay? If it is checked, then we only want to show the land servers. If it is not checked, then only land servers is false. Okay, let's go over and see what we can do with this one. Now, in defined sessions, we have this plug in here or this input where we can add on land servers. However, for finding sessions I actually want to find all the sessions and then when I find all the sessions I want to filter the land servers from them. Instead of adding it here, let's add it to our filter. Let's go over to the show session results function that we created inside of here. Here in the filtering now we are already filtering for the serveral language. What we can do now, just like before, we can make a new input here, break from it, and search again for make literal session property. Search property. Let me just drag this above here, actually, so I don't see this and I can drag all of this down. We have more space. Will click on this one, now it is cleaner. We want to do down here again, breech, make. Now you have a bullion value because now you have a bullion. Let's take the bullying over here. Now let's drag this only land servers into the bullion. Now, for the key, we haven't really added the key because remember these keys come from the game instance here. We didn't really add a key for using land servers or not. Let us add one. Let's click on the plus. Let's strike from here and say make a literal session property bullion. We already have this use land value. We can just drag this into here and double click once again to make a rear route node. Now we are using this one. We can call this one whatever we want. For example, you can call it use land and go out and compile. Now we have this. If use land is true here, then this one is going to be true. What we can do here, then we can change this key to use land as well. Now it's going to take a look at what this use land value is when we are filtering. If only land servers is true, then then we're only going to find land servers over here. Now we also want to find land servers here in this input because now it doesn't really matter if the filter server language which is equal to all, if it is false or not. We also want to search for land servers down here as well. Because remember this select node we made because we wanted to see if the server language was set to all or not. We had these two inputs now, but for the land servers, we don't really care what language you are searching for. This one instead of only being input here, what we can do is drag and say make array once again. We also have to connect it here because if you don't remember if the server language is set to all, we're looking at all languages, then we are going to bug when we try to find for land servers because this one will be empty and nothing is going on. We have to connect this down here as well. I hope it's not too confusing. All right, now before we test everything, let's go back to the event graph. Let's also remember to refresh the filtering when we set this state to true and false whenever we tick this tick box. Let's make sure we also refresh here. Use this function. Now let's test out the game. I'm going to create a sera here. On my second monitor, I'm going to create a sera. And we can just select land, and I'm going to make it French, then Create. Now on here, let's join a server now, let's wait for it. What it should say now is no servers found because it is actually a land server and it's not a public server. Now you can see here it says no servers found, but when I click on only land servers, it should find the server and it does that here. However, we have a bug down here with the no servers found. We need to fix this. But as you can see, when I add it and remove it, the server server filtering is actually working with the servers not found this text here. We can just control C and control down here because whenever it's displayed the first time, whenever it doesn't find anything, whenever it doesn't find anything, it is not going to be hidden whenever it finds later on. Because we have never specified here that it should be hidden by default. So let us just connect it here and set it to hidden whenever we search again, and that problem should be fixed. Now we are filtering for line servers as well. Let's jump over to the next lesson and check for the empty servers. 38. 4.09 Hiding Empty Servers: Right. Welcome back. Now we are going to Hide the empty servers. To do this, this is very simple. Now we can click on Hide Empty Servers. Check Box again. Let's rename it to Check. Let's call it Hide Empty Servers. Now let's make it a variable with this one. Let's go down to the bottom once again and click on check. Changed here. Let's right click and promote this to a variable and call this one Hide Empty Servers. Now this poll in what we have to do is we can go to the fine sessions macro. We have this one saying non empty servers only. So we can drag this into here, hide empty servers and connect it. Whenever we have a hide empty servers true, this means we don't want to see empty servers, then this one should be true, non empty servers only. That is actually it. So what we can do now is go down here, click on this macro at it, and then we have to refresh the sessions again. Because we have to find sessions again where there are none empty servers only. That should work just fine. Now we can compile and jump over to the next lesson. 39. 4.10 Filtering for Server Name: All right, so the final thing here, we want to filter for the servo name as well. So clicking on this box, let's rename it to Input server name. Now, I already did this and setting it to variable. Now what we can do here in the graph, let's click on it and click on Text change, so we get this event. Now, for this text, we're going to set it to string, so set it to a string and right click and promote it to a variable. And let's call this one filter to server name. Our filtering to this servoname that we write here. Again, remember to run this function because we have to run the filter whenever we change this value, open it up. Now, for the servoname, you might be tempted to add it down here. But the problem with this one down here is, you can see it tries to compare this string, for example, for the serve language is equal to. So this serve language here, whenever it's equal to something, it's going to filter. For the servo name, for example, if the player over here and the servo name just writes H E. Instead of writing hello, for example, the player writes H E. It should still find the server. But it would not because it's trying to see if the string you're searching for is equal to the name of the server, and it would not be the case. So all of this is we can't really use all of these here equals not equals greater than and so on, so we can't use this part of the filter. So instead, we can actually go over here, and let's do it over here instead. So now what we can do is we can take this filter to serve name. Now, before we loop here, let's check if this filter to serve name is empty or not. So checking if the player actually wrote anything. So dragging from here and searching for empty and selecting this function. So is this filter to servanam string? Is it empty? And I can just make a branch here. If it is empty, this means the player has written nothing. And when the player doesn't write anything, we can just go ahead and loop however we did it before, so nothing changed. However, if the player now types something in the box, we have to do something down here. Now, not really down here but down here in the falls. So with this, we can just copy paste this code over here, and we can now connect it. Before we add all the servers to the list here, we can just drag this away. And we can drag this and say, get extra settings. Now, this function here, we're actually going to use it in the server code eta. So this one, we're going to connect for now. So getting the extra settings, Again, the extra settings. Remember, these are from the game instance. You can see here, we called it extra settings. So we're getting the servame from here. This is what we're trying to do. We're getting this value that was blocked into here. So going to the server browser, once again, from the G settings, get extra settings. We can again drag and say, Get and now we want to get a string because we want to get the servaname. So now here, let's search for server name. Remember, this key is the key that you wrote here, and I wrote it and called servam so you can copy this into here, and then now we have this servo name. So what can we do with it? We can try to compare it. And the good thing about a string, this is why here in the event graph, I made it to a string. This is why I didn't make it into a text variable because a string, you can modify it in so many ways. So if you just search for string, because you have all of these functions you can use to actually use something with the string. And the one I want to use is the one called Contains. If you go up here, you have this one called Contains. If you click on it, now you're searching in this string. And while you're searching in the string, you're trying to see if it contains some of the letters that the player wrote here from the filter to servanam if that is the case, so let's just make a branch here and go ahead and connect it here in the found. And let's go over and connect this part down here. So now, it's trying to find if it can find a server that contains this server name that the player has written, and if it can be found, we are going to add it to the list. If it cannot be found, we're not going to do anything. So this should do it. Now, let's double click on this one and make a rear route node and make it look better. Now, let's go ahead and see if it works. So I'm going to click on play now. And now I'm just going to create a server here on my second screen, click on create sera. Now I'm going to call it something real here. I'm just going to call it something like Chinese Chinese only server best one ever, and then selecting Mirage and then setting it to Chinese and setting the slots to something like 16 and make it public and go ahead and create the serv. Okay, so now over here, let's go ahead and try to join the serva and whenever we find it, let's try to see if all of the filters work. So specifically this great serva because we have tested the other ones. So now let's try to filter for the name. Now, for the name, we can't really see it here because we haven't created the serva card here, so we haven't customized this yet, but we called it Chinese only. So I just search for Chinese, that should find it. However, if I just add something extra, so it's not Chinese anymore, you can see it doesn't find it anymore. If I delete it, we get the server back, and we made it best one ever. This is what I called it. So if I just search for best one ever, it's still going to appear. However, if I just write something, for example, like best one, and then maybe something like K out here, it's not going to appear. So the filtering for the server here and the search bar is working. However, we still need to code is, so it actually shows us the correct information. Now, this one is working. All right. So now that this is finished, let's move over to the server card and code that information in. 40. 4.11 Getting the Extra Settings for Server Card: Okay. All right. Now, let's get started inside of here. So let's go to the UI again main menu. And this time, we're going to go and work here inside of the Servo Cd. So let's open it up and let's click on the first text. Now, let's just change all of them now that we are it. So the first one, I'm going to call text Servanam. The next one, we can go ahead and call text game map. The third one, we can call text amount of slots or amount of players. You can also call them players. I think that is better. And the last one we can call text This one, the flag here, the icon, I'm just going to call it image language. And clicking on all of them, we can select all of them and set them to iss variable, so we can code them later on. Now, for this lesson, we are going to get the extra settings. And remember, the extra settings are the ones that we created inside of the game instance. So we're getting all of this information now. Let's go inside of here. Let me just delete all of it in the server card. Let me create a new function called get Extra settings. Okay, so inside of here, what we want to do is we want to take this found session that we had. Remember, we inputed this information inside of here when we found the session results. And we can drag from here and say, get extra settings. So again, this is what we have been doing, if I go back and remind you here in the servo browser. Remember, this is what we did. In the servo browser, we got the extra settings and the property string. So this is basically the same thing we're doing here. So getting the extra settings, drag from here and say, get. Now, we're getting the property string. First one we're going to get is the server name. So if you just write server name, and by the way, the key again is from the game instance. So whatever you wrote here as the key for the server name, you have to use it here, else, it's not going to work. I'm going to drag here and make a return node, and with this return node, I can drag this information into here, so it makes a variable for me, and I can use it later. And this variable I'm going to call Servam. So now we have the server's name. And let's drag from here again and say, get now I'm going to get another string. Go ahead and connect it here. The next one I want to get Let's get the server language first. So I'm going to get the server language, and let's connect it. Now the next thing, again, right from here, get property string, once again, go ahead and connect it. Now, this one is going to be the ServA map because I need that as well. Go ahead and write that here. Connected. Now, we don't really need more because now we have the I go back to the designer. We now have the language, the servo name, and we have the map. And these two we can do without getting any information from here. So you can just drag this, lock them in. So the first one is the Serva language. So let's call it serv language. And the other one is the server map or the game map, whatever you want to call it. And again, you can double click them to make reroute notes. All right. And that was it. So now we have created the extra settings. And later on here in the event graph, we can drag it in and we can use all of this information to set the servers information. 41. 4.12 Updating the Server Card Info: Let's now get started with updating the server card information. Let's right click, and I'm going to make an event construct, once again, having this event. Remember here in the server browser, whenever we find sessions, we create this server card, whenever we create the server card, this event construct is going to play right away when we add or whenever we create this server card, we're going to update it with the information that we need. And let's drag in this, get extra settings that we created and plug it in. Now let's start from the beginning. The first thing we want to edit is the language. This one, I'm going to drag it in. The thing we want to do is set brush. You have this one set brush from Texture. Now we need the icons for them, and I have given them to you the cost materials. If you haven't imported them yet, just go into your material into the icons folder and just drag them into an icons folder here and here as you can see them. By the way, if you want to make the UI look better, you can always again click on each of them. Set the texture group to UI compression settings to user interface two D. This is what it should be for your UI. Now let's close it and we have the flag. Let's go back to the sera cod. Inside of here, you have to set it to the flag depending on the sera language. Now what I'm going to do is I'm going to show you a smart method to do this. If your credit variable you call this one server languages. Now for this one, I am going to change it into a string. Now we're going to change this one instead of an array. So far we have been using a single variable and an array variable. This, I'm going to make a map. Variable. A map what it is. It consists of two variables as you can see here. The first one being string because this is what you have selected. Second one, I'm going to just search for texture and select this one called texture two D. And go ahead and select an object reference. A texture two D is simply just an image here. What this is doing now if you compile, you can see it down here. If I click on the plus, now you can see these two variables, the string and the texture. Now the string, we can do whatever we want. For example, I can say for English, I want the English flag. We can take this American flag and post it in. Now let's click on the plus again. And let's say for German language, I want the German flag. Go ahead and plug it in as well. Because the plus, once again for let's say Chinese language, I want the Chinese flag as the final one. For the French, for the French language, I want the French flag. Before I do anything, again, I have to remember, you set this UI scale to 1.25 You can actually see this is what I've done so far creating this map. And we can assign a texture to the strings. Now a very smart method we can do is we can drag this map into here. And we can drag, if you don't know what you can do with a map, you can always go to Utilities. Click on Map, and these are the functions you can use with a map. You can add a value, you can clear the map, clear all of the values. You can see if it contains something specific. You can find something specific, and you can check the length of it and so on. But what we want to do is we want to find something. We want to find the language for the sera the serva has, for example, chosen Chinese. We're going to find this inside of this map. Whenever we find it, we're going to find the texture, we're going to look for Chinese. And then we're going to get the flag icon for it. This flag icon, we're going to plug it into here. And then plug this into here. We found the flag icon. We're going to change the image language to the corresponding flag. Now this is done. Now let's go ahead and continue. This is the servoame. Let's take this servoame. Say here, set text. This is simply what we're trying to do. We're trying to set the text for the servo name. The text we want to set to is the servoame here. I'm just going to drag and drop it and it's going to convert my string variable into a text variable for me. Now this is correct, let's continue. The next thing is the game map, going back, dragging it out here saying set and I'm going to set the text for Add and connect it again for the server. Whoops, this is the Servo name. Actually need to do it opposite for this one here, so I don't do a mistake. The Servo Map is actually over here. Let's connect that. Now this is done as well. Now for the amount of players, let's go back now, the amount of players, go ahead and set text once again. Now when you have two dynamic values, so you can see we need the amount of players in the server, but we also need the maximum players that can be inside of a server. When we have two dynamic values like this and we only have one text block, we need to use something called a format text I drag from here and say Formats select this one, format text. Now what we can do inside of here is we can start with a curly bracket. Then we can write, for example, amount of players. Then you have to remember to close the curly bracket and press Inter. When you do that, you can see you get an input for this. Now let me just write slash because I have this slash here. Then I have to get the maximum amount of slots. Amount of slots. I'm going again here after the slash, open up the curly bracket and write amount of slots. Then we can make the close bracket once again when we hit Inter, we get the second input. You can see now that we get inputs for variables. The way we get the amount of players and amount of slots is if we can take this session and you can just search for player, you can see here, get current players. You can drag again players get current players, Plug it into here. And get players. Max players. Yeah, plug it into the amount of slots and go ahead and connect it. Compile everything, and let us now continue. The last thing is the ping. Clicking on it again, drag it, set text, Go ahead and set the text. Now for the ping, we can get that from here as well. If you can drag or copy paste it and search for ping ping in MS. And go ahead and connect that value inside of here. Now instead of just connecting it, you can see here I have the value and I have MS at the end. Again, you have to use a format text. So I'm just going to drag and say format text and selected. Now open up a curl bracket saying Ping for example. You can close the curl bracket and then I'm going to write MS at the end because I want the MS text at the end. I'm going to hit Enter. And now you can plug in the ping value. Right now, this should fix everything we have said, everything. Now let's see if everything is working. Now if I click on Play once again and I create a server, Let's create one called, for example, Fun sera. Please join. Let's set it to Mirage, set it to German, and set it to public 32 slots. And I'm going to hit Create. I'm going to join the server and see if I can find the server here. Now you can see we created the server. The ping is also displayed, the map and says on Sera, please join. And it has the German flag as well, and everything is working as it's supposed to. The final thing we need to do is when you click on this button, we need to join the session. Let's do that in the next lesson. 42. 4.13 Joining the Session: We are back here in the server code and the final thing we need to do is join the session. If I go back to the designer and I click on the button, it's this button here that we click. I'm going to change the name for it to Join server, for example, or joint session compile. And now let's go over here. Click on the on click events. Now when we click on the button, we want to use this one called Session. Choose this one, the player controller once again get player controller and use it here. Now for the session we want to join, it's simply this found session that we have. And that should be good. Now we can save everything. And that was it for this one. And let's move on. 43. 4.14 Server Browser Back Button: Now we are almost finished. Let's code the back button here. Click on it. I'm going to change the name of it to button back and setting it to its variable. Go down, set the click here. Let's just go back to, for example, we have done this before. Let's open up the main menu. Let's just take up the main menu here, copy paste this code that we created. Go back to the server card, or a server card, server browser, and paste it here. Go ahead and connect it. Now we don't have the player controller variable. Let's just add it here in the event construct before we search for servers. I'm again, we can just copy paste it. Actually, if we go back to the main menu, we can copy paste this code that we created. Paste it over here. And that should be fixed. Go ahead and connect this here. Connect this here. Let's right click when you see it's gray. This is because we haven't created the variable yet. Let's right click and create this variable. Now it is created and it should work down here as well. Now when we click on the back button, we want to hide the Servo browser. And we want to show the main menu and compile. Now if you wish, you can also go ahead and create animation for this. Just like what we did for the Create Serva. Just a quick way to do it is we can just quickly do it together. Actually, if you click on this vertical box, let's do it for this vertical box. I'm just going to call it Sera browser down here in the animation, Click on the plus call, click on it, make a new track for the Sera browser. Remember, you have to have it selected. Go ahead and click on the plus. Click on the plus again, down here, select the transform. Now what we can do is we can just copy paste the old one. If I go to the create sera, I open it up here in the animation tab. I'm just going to copy this transform. I'm just going to select this like this here, control C. If I go to the Sera browser, I can just click here, control V. Now it says it can't paste. I'll try to do it again. I can just copy this translation and see if I can paste it. Control here, control V here. And that worked, I just had to copy from here instead. Now that worked, you can see if I do this, it already did the animation. You can copy paste animations. And it's a lot easier for you as well. If I go to the graph here, before I do the fine session, I can just play the animation. Now here for the animation, let's drag it in and let's say play animation. And do that, we want it to look one time forward. That is fine for the speed. Again, I'm going to set it to 1.1 so it's a bit quicker than normal. Now if you click the back button. However, just like before, I want to break this away, break in the animation once again and say Play animation and go ahead and connect it. Now we're going to play it again, 1.1 speed. However, this time we're going to play it in reverse. We can break this once again and say get time. Then we can add a delay just like before. This is the same as what we did with the Crete Sera. So adding a delay and then let's connect it now. After the delay, we want to switch this screen like this, of course. You can also add the animation for the main menu as well, but you get the idea. Let's try to click on Play. Join Serva, and this is what it looks like. Five flick on Back. This is what it looks like. Okay, we have animations for that as well. It's looking great. Let's jump over in the next lesson and see if we have any issues, or bucks with the system that we have created for now. Let's jump over to the next lesson. 44. 4.15 Testing the Final Result: Right here we are back again in the hopefully final one. Let's go ahead and test the game. Now I want you to do is set it to a number of players, two, and then play as a listen server. Let's try to play it inside of this window before we package it and we test it on another computer. So go ahead and create a server. I'm just going to create a server with this small screen. Just create a random server. Now I am going to attempt to join that server. Now it's going to refresh. Let's also test all of this up here. Once the server is up. Now as you can see the server a bug. Because now when I click on here, you can see it cannot join the session. I can also see the amount of players is zero. There is something wrong. If I close it down, I think I know where it is because I forgot something. Because when you want to debug something like this, basically what I would look for is I would look at the UI here in the Create server. I would see if it creates the server correctly. Here you have all of the information. You have the server name, amount of slots we have, the amount of slots set correctly. You will have to check that, yes, we set it. When we change the value here in the create server, this into the maximum player, the public connects. The problem is if you had a bug here and the public connections would be zero, then no one could join. But I can see that we already set the amount of slots and everything is working here, checking the join. If we click on the serve, a code and where we made the joint session, everything is correct, the joint session is here. You can also check if this session is valid by dragging from here and searching for valid. I already did this. I checked if this was valid. The way you do this is if you just print a message to the screen. Just here on success connected connect this one here. If you try to play and then join the server, it should say that true, the session here is valid. Nothing is wrong with the session, so something else is wrong. Now, I took 5 minutes to take a look at what it was because I couldn't see what was wrong. But the thing is, we forgot something here in the blueprint. We actually did it before, I believe. But when we change things, we forgot to write it. When you create the server and you choose the map here, when you open the level, you have to click on this arrow to see this option. And you actually have to listen, because you have to listen to this, because we are creating a client server. So you have to have this listen before it can work. Now if I click on Play again, I create a random server on my second screen, whatever it is, just a random one. Let's go back here. Create. Let's join a server. Now let's wait for it. Now it should display with the correct amount of players and we shouldn't have any problems joining the server as well. Let's wait for it. Here it is. I can see now the amount of players. If I click on it, it should join the server. And it does join the server. Now everything is working correctly. Okay. Now this is working correctly. What I'm going to do now is I'm going to open four players. If you have a slow computer, just be careful you can crash because it is a lot to open that many servers. And I'm also going to set the engine scalability to low, so I can actually run a lot of them. Also, if you want to optimize it, you can always go to project settings, you can search for smooth, you have something here called smooth frame rate. And you can tick that on and then select what the maximum FPS should be. Your computer doesn't run, the maximum, can do that. Actually, that was a problem in farm tail. When I released it, I was not aware of this. And it ran at like 600 FPS or whatever and it burns People's GPUs. Just set a maximum frames per second. We don't need more than 200 in this game. Let's now try to open four of them. Let's click Play. Now I have four of them. I'm just going to create random servers and I'll be back with you. All right, so now I have created the servers. I'm going to click on Joint Server. And by the way, the refresh list here is going to go a lot faster once you package it into Steam. So this is just taking long because we are searching for our own games. As you can see here, I made a couple of servers. I actually made three, but one of them is land server. Now we can check if these filters are working over here in the create server. Let's see if it works. If I search for jinks, it finds the server. If I tries to search for deathmatch, if I just wrote deathmatch, you can see it already finds the server. Now this search is very clever because it searches also inside of the sentences. For example, if I just write server or R, it should find both of them because both of them has ER in them. Finds both of them VR here, they both have it. If I write something wrong, it will not find them here in the languages. If I search for English, it's only going to show me this one. German, this one Chinese we don't have one. And French we don't have one. All of them. We are back here now, hiding the empty servers. It's going to refresh the list once again because now it's trying to find servers which are not empty, which is basically all of them. It should display all of them once again. Here they are. Now if I only show the land servers, you can see my land server that I actually created as well, with two players only here it says Join Land server here. If I remove it, I can see my public servers. Let's go ahead and join the land server. If I click on this one, it should join the server. And it shows me this main menu again, because it's just a fake map that I just joined. It's not my counter strike map, but now you can see everything is working. Let's go to the next lesson, actually, and package this project so you can actually send it to your friends or add it to steam if you wish to. For now, go ahead and save everything, and let's jump over to the next lesson. 45. 4.16 Packaging the Project: All right, here we are back again. I'm just going to change the scalability to Epic once again. And now we are ready to package the project. Now you are going to get different eras depending on what project you used, because it really depends on your project now. But to package your project, go ahead and you can do it inside of here. But before you do it, what I like to do is I like to go to window and show the output log. Now inside of the output log, you'll be able to see all the eras you have for your game before I do this. Now for this game, something you can fix. If you have done this counterstrike game again, you can do this game here on Game Instruct.com This is where I release my courses. And this is my personal website. And you can always find courses inside of there, including shooters, multiplayer two D games in Unreal and so on. But for now, I want you to open, if you've done this project, just open this. Let's go to player, open up the animation, open up the animation blueprint inside of here. I want you to click on the movement state. Then I want, in the default settings, I want you to click on the plus and set default state to running, which is something we actually missed. So go ahead and compile this. Let's close it now to package the project. Go ahead and let's first save everything. Let's make sure again, you have your output locks open. Now, let us right click, clear the locks. This is what I'd like to do first, right? Clear up the logs. Then go ahead and click up here, Go to Windows and Package, and then Package Project. Now you have to select where you want to package the project. Now I already have a folder on my desktop called packages. You can just do it inside of here if you wish to go ahead and select folder. Now it's going to package the project. What I usually look for here in the output log is Er, our errors and warnings. If you click up here and you remove the messages like this, you can see all of the errors and warnings. Only now we don't have any right now. I'm actually just going to click on the messages to see what it's doing over here. Sometimes it takes 1 minute, sometimes it takes 5 minutes. You just have to wait for it until it packages the project. Again, it depends on what project you're using. Because some projects will have errors which are project specific. You'll have to try to fix those errors. Of course, you can write and I can try to help you out with packaging your project. Now sometimes you get errors whenever you work with libraries as I've done in this project. But if you get an error inside of here where it says Unknown structure, you'll have to click on one of the functions and then click on File, Refresh all notes. Then you have to click on the second one, File, refresh all notes. You'll have to do that for all of the functions you have if you have a function library. So just be aware of that one, right? As you can see here now the build is successful and it is finished. And I can always remove the messages so I can see what my warnings are here. It's something about the animation and it's not really something too important sometimes be aware that these errors, sometimes if you clear them and try to package it the second time, they're going to be fixed automatically. So just be aware of that as well. Try to package the second time. Here's some animation things. Remove duplicates doesn't really matter right now. That is not important. Now I have packaged my project and I can see my project here in the packages. Now inside of here, I want you to just select all the files, right click. Go to Winrar, for example. Add it to an archive. I just want to Sip it here. Make it a Sip folder. I just want to call this one, for example, whatever counter strike or my game, whatever you want. Click okay and wait for it to make it into a Sip folder. Now what I want you to do is this p file, you can give it to your friends, now you can upload it to Google Drive or upload it to a USP. I'm going to do that. I'm going to extract it on my second computer. I have all of those files on my second computer. Then I am going to try this game, playing it from my laptop with this PC as well. I'm going to try and do that. All right, now I am back. I have added it to my laptop and created a server. So what I want you to do is click up here, set the number of players to one, and then set the Net mode to play standalone. This is because now we are going to steam to test the game. Again, you have to have steam open, so make sure your steam is on, make sure you're locked in, number of players is one. Net mode is a standalone. Then up here, go ahead and click Play. As a standalone game, you have to do that to test it on Steam, so just make sure to do that now. It's going to open up here, let's see if it finds the server from the computer. It says, hello jinks. This is my steam. And let's go ahead and click on Joint servers. It should search a lot faster than before. And you can see here, it says, join me please from laptop. And this is from my laptop. Now, this ping being 9,999 it has something to do with the firewall and something else as well. I'll write this here inside of my blog, on my website, so you can always check that out if you want a fix for that one as well. I'll have some debug issues that you can go through. And yeah, you can take a look at that whenever you want. But instead of here, you can see the players is eight. Everything is working. I can search for the server. If I write something wrong, it disappears. If I write, for example, join, I can see it. I write, it removes the searching is working. Now I can search for English servers, German servers, other languages. Or go back to all I can show only land servers and it's going to disappear because this is a public server, not a land server. I'm going to click on Hide Empty servers, it's going to refresh once again, there are no empty servers. Basically should display the server. I click on Refresh once again. I can remove this once again and everything is working just fine. I can click on it and it should join the server. Here you see a Join the server. Now I can select, for example, Counter Terrorist, and that's how you add steam multiplayer to your project. Go ahead and save everything. Thank you so much for watching again. You can always go to Game Instru.com and I will release a lot more courses on multiplayer on Steam, on two D games in Unreal Engine. Anything you really wish for. So you can always come to my Discord server, in the community server, and you can always write your wishes for which courses you want to see if you need any help. I am also available to help you out as well. The community is really nice and you can also talk about a lot of other game development stuff. It doesn't have to be issues. Thank you so much for watching. Thank you for supporting and I hope to see you in my next course. Thank you.