UMG Basics (How To Create UI) - [UE4 Basics Ep. 5]

hello guys smart polly here and welcome back to the unreal engine basics in this video we are going to be going over umg unreal engine motion graphics which is the ui editor for unreal engine and in this video we will create a simple main menu widget and just go over some of the basic tools best practices and things to know about creating ui and unreal engine so i'm gonna go ahead and just create a new third person project here and name this umg basics and basically if you've never used umg before or if you've never made any ui it's really simple they have these classes if you right click in your content browser and go to user interface they have these widget classes so if we go ahead and create one we're gonna name this main widget open that up uh this is basically the uh widget editor we're gonna be doing most of your work with the user interface so i'm gonna explain a few things here we have a compile save buttons here at the top then on the left here we have the palette so this holds all of the different types of tools that we can use such as buttons progress bars images all that stuff to create our ui we have the hierarchy right here so this is just pretty much like the layers then we have animations so we can create new animations and we have the timeline here to animate it so we can add some really nice animation to our user interface at the top right here we have a screen size fill screen which i'll get to in a second in this little viewport you can pan around by right clicking and zoom in with your scroll button on the right we have the details so when we have a button selected it'll show all the details for that and so this is really just the designer side so if we go to the graph here this is the blueprint aspect of the user interface so this can allow us to add functionality to our buttons into our progress bars and all that stuff so if we go back in the designer tab here i'm going to set the screen size to televisions 1080p and you can see here it says 1080p right here on the bottom left so in the pile say that i'm going to create a basic main menu so we can add a vertical box and then you can see here we can scale this vertical box up move it around by clicking on it and so i'm just going to scale it here to the center of the screen and in that vertical box i'm going to add a button and we can add a text onto that button you can either drag and drop it here or drag and drop it onto the button right here so you're going to see here that in our canvas panel we have vertical box in that vertical box we have the button on that button we have text and so as you click on these things you're going to see the details update so for the details here i want to point out a couple things so the text block this is the name of the actual text block the actual text inside of the text block is set right here so we can set this to play game and the text block right here you can change this to play game text block you don't really have to go and name all these especially for the text block but just know that the text block name is different from the actual content text content so we have the button right here we can change the button name here to play button okay and what i'm going to go ahead and do is just copy that button and paste it three more times and so we can click on the next play button one change this to uh changes to host game button and on the text here we can change this to change the content to host game the next button we can change this button name to options button and the text we can change the content to options the last button here we can change this to quit game button and for the text here we can change this to quit game so it is a very basic main menu buttons we can adjust the padding of each button so how far it's spread apart if we click on the play button right here you're going to see padding we have a few different options we have the size we can have it to fill or auto horizontal alignment so this we can have it aligned to center align to the side the right whatever you really want i'm just going to have it horizontally line fill and the padding like i was saying so we can give a padding of 10 on the left 10 on the right for the top and bottom we can give it a padding of like say 20 and 20. so you're going to see it kind of breaks up put space in between the other buttons so if i actually take down the top back down to 10 the bottom down to 10. we can copy this padding too and go to the hosts game button and paste the padding so we can do that for all the rest of our buttons here to evenly space them out now you can also change the color style and opacity of a button if you click here on the style you're going to see here we have a normal pressed and hovered so if we go into the normal we can either set that button as an image or we can change the tint and color to say red so normally it's going to be red when it's hovered over we can make this say yellow and then when it's pressed we can make it blue and you can also copy that style and paste it for each one just like so okay and so uh one more thing i want to do is take our widget box our vertical box here and we're going to go up to the top here and you're going to see this anchor and you're going to see like this little kind of star shape over here that's basically what this is it's an anchor so the anchor allows us to take our widget and anchor it to our screen we can take our anchor and either we can drag our anchor and center it here and move it around but what i like to do is go over to the anchors right here and click on the center one so it's automatically going to align our anchor to the center because that's where our ui is we can actually take this and move it a little bit more in the center and then you want to take the edges right here and drag it to match the size of your vertical box so this is just telling unreal engine where you want to anchor that ui to and this will automatically improve the scaling so like say if you were playing in a windowed mode or if you're playing on a other resolution then 1080p it's going to make sure to anchor your ui to the middle so that's not off the screen for some reason so just make sure that you always anchor your ui all right so let's go ahead and draw this ui onto our character so how do we do that so if we just go ahead and create a new level a empty level we're going to go ahead and add a cube right here or to scale it up put a player start right here and in the world settings uh we're going to create just a new game mode main menu gm and for the default pawn class we'll just go ahead and right click on our content browser blueprint class character main menu character okay so open that up and in the event graph we're going to off the event begin play create widget the class other which will be our main menu widget and the only player we're just going to get player controller and then off the return valve we can we can add to report i want to do one more thing by dragging off the player controller and set show mouse cursor make sure you check that to true compile and save that and also change uh the main menu character here in the game mode to main menu character there so if we save our map let me just name this main menu map if we hit play you're going to see our main menu here ui is drawn so we hover over you can see the yellow style is updating and when we click it turns blue right now it's not doing anything because we haven't set up the buttons yet and also you can also play right here in a new editor window to give you a better feel of the ui okay so back in our main widget we can also add an image here to our canvas panel click on that image you can set the size to 19 20 by 1080 and you can put the z order to zero click on the vertical box and set the z order one the z order is think about it as like the send to the front or send to the back or like the layer order so for our image you can set this really to whatever you want you can actually import it a background image if you want i'm just going to import this background image right here and just assign it here to the image for our background compile save that okay and you can also make sure that the anchors set to the full screen that way it doesn't scale or anything it doesn't look odd so let's go ahead and add some functionality to our buttons here so off the play game we can scroll down here to the events we have an on clicked basically when we click the play button we can open level third person example map so when we click play it's going to open up the third person example map okay host game you could add a create a session or host a game options draw another widget that has different buttons that control like the screen resolution and also quick game button if we scroll down add on click we can quit game so as for the options we're going to create a new vertical box and scale this up in the vertical box we can add a scroll box and set that to fill okay and in here we can add a horizontal box and in that horizontal box we're going to add a button and a text on that button then we can add a slider and set that slider to fill on our text block we can name the content to quality and then we can name the vertical box here we want to change the vocal box name to options menu set that to is a variable uh very important that you do this and then go back to our vertical box here we're actually going to rename this to main menu vertical box and set that to a variable so when we press the options we're going to add a on clicked we're going to get the main menu vertical box set visibility to hit it and then i want to set the visibility of the options menu to visible okay and actually in the designer we need to go back and add another button into our options menu and that's just going to be a back button so we can add text to it too so let's name this text to back and for the button here we'll add on click and copy over this and we're just going to set the main menu to visible and set this to hidden compile save that and before we hit play one more thing we want to do is make sure the options menu is set to collapse for now that way it's not visible so if we hit play in the c we have our little menu if i click options you're going to see quality we have a little slider here doesn't do anything at the moment we hit back we have our little main menu we can hit play game it's gonna open up the third person game and then if we go back here we can click quick game it's gonna exit out the game so just a very basic user interface there's just many different types of tools that you can use uh some of the most popular ones you're gonna be using obviously text and button uh let me point out a few things i'm gonna see here single child and image uh single child clickable so this is really important because if you're gonna try and add a button and maybe add an image to that button you can't add more than a single child to the ones that say you can only handle a single child so that's important if you're like trying to add a bunch of things to like this one button you can only have one thing added to it so in the hierarchy that's basically how it works so to go around that you're going to add basically overlays they can have multiple children you need scroll boxes size boxes you can also create a widget create a new widget and draw that widget within a widget so if i create a new widget here and i'm going to set the screen size or to the fill size to desired on screen i'm going to delete the canvas panel and add a size box we can define in the size box a width and height override so we can say 300 pixels by 200 pixels maybe we'll make this 500 pixels by 200 and in that we can add actually a border so that border can have in the appearance the brush color we can change this to a black with the opacity of 0.5 so it's a little bit transparent one thing i want to mention and point out is you do not want to change the color content and opacity right here for the brush color you always want to change your appearance right here this is going to change the content within the border so you don't want to ever do that really i'm going to add here a overlay and the overlay is going to allow us to put multiple children within that so for example we'd add a button we're going to add multiple buttons to that overlay now what i'd recommend doing instead of just adding a button would be vertical box within that vertical box we can add a horizontal box probably add two horizontal boxes there for the vertical box you can set that to fill horizontal box we can add a button here we're going to add a text here and at the very bottom here we can add a editable text and we can center the editable uh horizontal box here at the bottom to the very bottom and we set the horizontal box here to fill okay so just a really simple ugly little chat window here the point i was trying to make is that you can add you can basically stack widgets so if you go here back to our main widget we can go to user created and drag in our new widget blueprint the one we just created and you're gonna see it right here on the bottom left so the importance of this and again you want to anchor it to the bottom left the importance of doing this and uh nesting widgets within widgets is the fact that it's going to be a lot more cleaner in your hierarchy because as you can see here there's a bunch of different buttons here i mean you can go ahead and collapse these but still if you have like inventory player window it's going to be a lot just in your left window so if you create separate widgets for those and just drag and drop these are created it's going to make things a lot cleaner and overall for a better workflow that's pretty much it for this tutorial hope you guys enjoyed the video and learned a few things about user interface i suggest just playing around with all the different tools that you can create and try to make just some fun ui just to get a hang of it and that's pretty much it for this video and i'll see you guys in the next one

Channel: Smart Poly

Views: 25,505

Keywords:

Id: xJQybMSaODc

Length: 17min 7sec (1027 seconds)

Published: Tue Sep 22 2020