UIBuzz - Software and game development

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, the reason I'm talking about this is 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.

While the single-player beta version has already been released and received some 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 future plans, I've written a detailed blog post. You can find the link in the show notes. But let's get back to the topic at hand: Unreal Engine widgets.

Now, I want to make it clear 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, we use widgets to display and control these UI elements. Think of widgets as overlays that are placed on top of your game scene or level. Now, I've developed a system based on extensive testing and research to find the best approaches.

And today, I'll guide you through my process, which turns out to be surprisingly simple once you grasp the concept.

First, let's talk about creating widgets. In Unreal Engine, you can create a Blueprint widget. Personally, I find Blueprints to be fantastic in Unreal Engine. So, when you create a widget Blueprint, you can add a canvas and start adding various controls to it, 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.

In my case, 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 in 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 simply 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 just 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 just 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." Now, 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 them 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 reach out to me at UIBuzz.com or through my personal website, PeterWitham.com/contact. 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.

By adding them to the widget array and displaying the appropriate one when needed, I've achieved a flexible and efficient solution. The best part is, 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 there are many Unreal Engine experts out there who can share even better techniques. If you'd like to come on the podcast and discuss this topic or have any suggestions, please reach out to me on Twitter @UIBuzz. You can also visit UIBuzz.com or PeterWitham.com/contact.

I'm really 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 you in the next episode.