Edited Transcript

Hey everyone!

Welcome back to another exciting episode of the UI Buzz Podcast.

I'm your host, Peter Witham. You can find me and this awesome podcast at uibuzz.com.

Today, I want to dive deep into the world of widgets in Unreal Engine, specifically Unreal Engine 5. But don't worry. The same principles apply to previous versions, too.

Now, I'm talking about this because I've been busy working on my game, Project Hack. If you're curious, you can check it out at projecthack.net. I've been focusing on building the multiplayer version.

Meanwhile, the single-player beta version has already been released and received valuable feedback. I decided not to release the single-player version officially because I have bigger goals in mind.

If you want to know more about the game's progress and plans, I've written a detailed blog post. You can find the link in the show notes. But let's return to the topic: Unreal Engine widgets.

I want to clarify that I'm not an expert in Unreal Engine, but I'm excited to share what I've learned and what has worked for me. My experience with the Project Hack game serves as a great example. Almost every game has a user interface (UI) element, whether it's a menu, inventory, stats, scores, or health indicators.

In Unreal Engine, widgets display and control these UI elements. Think of widgets as overlays on top of your game scene or level. I've developed a system based on extensive testing and research to find the best approaches.

Today, I'll guide you through my process, which is surprisingly simple once you grasp the concept.

First, let's talk about creating widgets. In Unreal Engine, you can create a Blueprint widget. I find Blueprints to be fantastic in Unreal Engine. So, when you make a widget Blueprint, you can add a canvas and various controls, such as text labels, buttons, and more.

These controls go inside the canvas, forming your widget Blueprint.

However, creating the widget alone won't make it appear on the screen. You need to instantiate it and then add it to the screen.

Since Project Hack heavily relies on UI, I've come up with a system that works well for me.

I assign a HUD class in the world properties of my game. The HUD, or heads-up display, is the perfect place to handle all these UI elements. I create a new Blueprint for the HUD, just like any other Blueprint, and then assign it to the world properties.

Once that's done, I can start adding the necessary code. Now, let me guide you through the process step by step.

At this point, you should have your HUD Blueprint and at least one widget Blueprint. In the HUD Blueprint, I have an event called “Begin Play,” which triggers the initialization process. You can choose any trigger that suits your needs.

In my case, I start by creating a widget. Let's take an example: a widget Blueprint called “WB_MainMenu.” I use the “Create WB MainMenu widget” Blueprint node. This node asks for the class, and I provide “WB_MainMenu.”

Thankfully, Unreal Engine makes it easy to find the desired Blueprint by searching through the list. Additionally, you need to specify the owning player. It's a straightforward process: you get the player controller and connect it to the appropriate input of the node.

That's all you need to do to instantiate the widget, but it won't be displayed on the screen yet.

To handle this, I promote the widget to a variable, allowing me to access it for various purposes later on. I store it as a variable, such as “menu widget.” Instead of adding it directly to the viewport, I prefer to use an array of widgets. This way, I can easily manage multiple widgets.

I go through the same steps for each widget, creating and storing them in the array. You don't have to use an array if you only have one widget, but it's a convenient way to handle multiple widgets and provides flexibility for future developments.

Once I have the array of widgets, I can add them to the viewport using a for loop. This loop allows me to iterate through the array and add each widget to the viewport. By connecting the current element of the array to the target input of the “add to viewport” node, I can add all the widgets to the screen.

If you compile and run the game at this point, the widgets should appear as expected.

Another advantage of using an array is the ability to perform various actions on the widgets. For example, you can easily hide all the widgets except one using a for loop with some logic. This way, you can dynamically display only the widget you need for a specific situation. It's a simple and efficient way to handle widget display.

Of course, there's much more to learn about coding the widgets, interacting with them, and other related topics. If you're interested, let me know. You can contact me. I'd love to hear from you and even create videos on these topics if there's enough interest.

This system has worked wonders for me, especially when dealing with a logging system in my game. I've created various widgets for tasks like creating user accounts, logging in, and resetting passwords.

I've achieved a flexible and efficient solution by adding them to the widget array and displaying the appropriate one when needed. The best part is that you don't need a ton of blueprint code to make it work. Thanks to the loop, you can easily manage widget display.

I hope this explanation has been helpful. I'm sure many Unreal Engine experts can share even better techniques. If you'd like to come on the podcast and discuss this topic or have any suggestions, please get in touch with me on Twitter @UIBuzz.

I'm enjoying my journey with Unreal Engine and the power of Blueprints. They've made UI development much more accessible and intuitive. Perhaps in the future, I'll talk about using Blueprint interfaces to enable widgets to communicate with other parts of your application without direct links.

Let me know if that's something you'd like to explore. That's all for now, folks. If you found this information helpful, I'd greatly appreciate it if you could leave a review and rating for the podcast.

Don't forget to share it with your developer and game dev friends—every bit of support counts. Thanks for listening, and I'll catch up with you in the next episode.