16. Unreal Engine – how to customize and improve inventory design

This chapter is an extension to 14. Creating UE Inventory connected to server. Note in this chapter I moved it to UE5 so we can see the code is always compatible between both versions.

I will be making it look more ‘pretty’ and MMO like. As mentioned before I typically focus on the comms between server and client and in this chapter I will start showing how the inventory can be connected with other assets and techniques to make it look more aesthetically pleasing.

I will be providing just a ‘high level’ description of what I needed to do in order to achieve this as I expect people will have their own themes that would deviate from what I created.

This is the result so far, a movable inventory window containing item slots and equip-able items.

In order to achieve this look and feel I had to do several things.

1. Get 2D GUI assets
2. Make the window movable
3. Split inventory contents and equipped items
4. Add dynamic character rendered inside the inventory window

Getting the right 2D assets

This can sound simple but it can be challenging to find the right asset to suit your theme.

Luckily UE has a great selection of them but bear in mind most are paid. You can search for GUI which stands for Graphical User Interface for some results:

I’ve personally went with this one: 4k Full Fantasy GUI / UI + over 400 png + 178 widget blueprints. I think it has a cool UI design and just has a great feel to it, kudos to the developer.

You may find free assets such as PNGs available on websites such as https://opengameart.org/ and you may just find it can be a little bit more tricky to integrate them. I.e. some of the UE assets provide you widget templates which have the PNGs integrated in them, making it more ‘out of the box solution’.

Once you’ve got the theme in place, you can start creating container windows that you will start populating with content.

Keep your content separated/refactored to make development easier to follow. i.e. your Inventory widget should not just be 1 big component, keep it separate.

i.e. my core movable inventory essentially contains 3 items, the panel window button, the equipped items widget and the styled inventory contents box.

Making the window movable

I followed this great tutorial on making the window movable:

From the image above, that’s why you can find the inventory exist inside the GridPanel which is inside the CanvasPanelAll component. Don’t forget to style your buttons in the same themes!

You will find that my blueprint code is essentially as described in the video above:

Split inventory and equipped items

As you saw in one of previous images, the inventory system is split into several components, as you can see here:

Fun fact, the inventory component above is actually the same one as from chapter 14, imaged below:

As mentioned in previous post, it contained mainly the comms but not the UI design. So this was adjusted in this chapter by integrating it inside a nice canvas panel.

The inventory was setup using this component:

And the item slots were also redesigned with a nice boundary too

As you may be able to tell, the nested widgets are actually identical to before, but they are wrapped in nicer design components.

Character items widget

This component is UI only at this stage as I have not yet created the backend implementation – this will be the aim of next chapter.

As you can see, its just a collection of Horizontal and Vertical boxes containing other widgets.

The widgets used for the items are as follows:

Its a simple content border component but inside the Event Graph you can define a widget variable which will override an image component inside.

This actually came as a template widget inside the asset I purchased, 4k Full Fantasy GUI / UI + over 400 png + 178 widget blueprints.

Then as you can see, when you create an instance of it in the inventory Widget, you can define the widget with the PNG to be nested inside, like so:

For the Icon widget, you can create a new widget blueprint and make the W Empty Icon as the parent.

Select the root component and just select the icon that you’d like to use

Just repeat this process for all the components that you wish to add and use.

Dynamic character rendered inside the inventory

In order to add the character inside the inventory widget, I followed this tutorial and it worked great:

Also just check the top rated comment:

Ryan, another option for getting rid of the background is to set the scene capture 2d primitive render mode to “use showonly list”, then in construction script set the “show only actors” array to array of “self”. This mixed with the alpha channel opacity masking gives you the same effect without having to put the actor out of the sky sphere.

Kavon Harvey

To add some light to that this is what it means:

Then inside the Construction script add the following:

You will find that I dropped the blueprint representing the character just outside the visible map space and it works perfectly well.

This 3d Capture mesh should be using the same skeletal mesh / blueprints as your character. I will be modifying this in near future along with the actual character used.

And with that, we have a more aesthetically pleasing inventory design!

In the next chapter I will look to make the server implement the equip items functionality and then integrate it with this UI widget.