How to Create a UI in Unreal Engine 5? - Widgets Blueprints
I'm going to show you how you can add these widgets, these objects or these resources when you start your game in Unreal Engine 5 and for this you can obviously use it to show some percentage of objects collected, deaths, objects eliminated, what do I know, or the percentage of life in this case I have it as is, you can see a bar that I'm going to use for life, some text and some images referring to something, again it's just a sample then.
Widget Blueprint
For this, the first thing is now here your person character in my case it is this one and here I recommend that you create a folder I called it as ui for the graphical interface right click user interface and the one called here widget blueprint:
Here we give this user widget and here we have it. I have one created here which is this one and it will appear by default as a blank screen here. The first thing you have to do is Search here in the one in this panel by Canvas panel:
And you're going to have this little box that's going to be your space to add your widgets, that is, your components, your texts, your images, and basically anything you can see here, including buttons, which is what I did here. You simply have to look in the sidebar, for example, for the image, drag it here, and this is a matter of browsing a bit. Here you have the options depending on what you're adding.
In another video I show you how you can do the binding to update or reference elements of the widget using a variable. In this case, it would be the text. To organize it, you can use the anch tool that we have here and you can tell it in which position you want your widget to appear, and you can also move it anywhere. I'll also explain this in another video, but it's basically establishing the limits on the elements that tell you where on the screen they're going to appear:
Node Create Widget
So once here you have your page, your canvas, the next thing is to bind this canvas to the viewport, that is, when we start the game, note that when it is not started, nothing appears, it only starts or appears when the game starts. We have to do the following: here you have your character and here in the event being play called create widget; and here in the classes you look for the file that you just created, in my case it is Player Hud:
Nod3 Viewport
Automatically here the node changes to the one you can see here, in my case I already did it so I simply remove it and reconnect it then we create the widget, that is to say here we have the class so to speak and here we have the instance created we have to see what we do with the instances which in this case is to add it to the screen and the screen is viport so here we look for or add to viport again here pending with this since if you place it it may not appear and that would be all:
Now this part of the node is something else that I'm doing and it has nothing to do with this, the important thing is the vi and the widget and that would be practically everything, with this when you start your game you will see your elements on the screen
- Andrés Cruz
Develop with Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter