As mentioned earlier, we need to create submenus for our buttons to navigate to. Using UMG, there are several ways to create submenus, but the most straightforward way is to create a new Widget Blueprint for each submenu and then bind the Widget Blueprints together.

Since we will need many of the same items in our submenus such as the character names and most of their stats, we can save a lot of time by carefully making a copy of our main pause menu, renaming it, and then editing it to fit whatever submenus we need. Since we have initially saved the main pause menu as Pause, we may want to first rename it so that it is more descriptive. So head back into your Content Browser, locate where you saved your pause menu, and rename it by right-clicking on the pause menu widget and selecting Rename. Rename this file as Pause_Main:

Next, make a duplicate of Pause_Main by right clicking on the file and selecting Duplicate:

Rename this as Pause_Inventory:

We will now be able to design an Inventory screen. Open up your newly created Pause_Inventory Widget Blueprint. You will notice that it is an exact duplicate of Pause_Main. From here, we can edit out what is not needed. First of all, we are not planning to have any items that affect XP, so we can remove XP Text Blocks from our characters:

Also, we will not need to keep a track of gold in our Inventory screen either. So, we can remove gold.

For ease of creation, we will also make the navigation around the main pause screen and its submenus "old school", by using Pause_Main as a central hub to all submenus, such as Pause_Inventory and Pause_Equipment, and only allowing the player to enter the Equipment screen if they are backed out to Pause_Main and they press the Equipment button from there. Based on the idea behind this design, we may also remove the Inventory and Equipment buttons from this screen:

We can, however, keep the Exit button, but based on our ideas behind the screen navigation, we should rename this button and its Text Block to reflect backing out of the screen and going to Pause_Main when pressed. So we can select Button_Exit and rename it as Button_Back:

Then, select the Text Block within the Exit button, rename it as Menu_Back, and change the text to Back:

In the previous chapter, we defined more stats than just HP and MP; we also defined attack power, defense, and luck. While health and magic potions don't typically affect any stats other than HP or MP, you may later on want to create items that are usable and effect things such as luck, defense, or attack power. In preparation of this, we will create placeholders for these three other stats for each character in the same way you created the HP and MP Text Blocks. We will be positioning these stats below the HP and MP stats. Note that, if you run out of room for these stats, you may need to play around with spacing. Also, remember to name all Text Blocks you make with something very descriptive so that you can identify them when the time comes to reference them.

When you are finished adding stats, your Text Blocks should look something like the following screenshot:

We now need a place that will populate our inventory. Since we are unsure about how many items the player in the game will carry, it will be safest to create a Scroll Box that will be populated with our inventory. We will also want to create a Scroll Box that is wide enough in case we have items that have very long names. If you designed your screen like I have, you should have plenty of room for a Scroll Box. To create a Scroll Box, navigate to Palette | Panel | Scroll Box:

Then, drag it into your Canvas Panel under the Hierarchy tab:

For now, rename the Scroll Box as ScrollBox_Inventory. Then, change the position so that it is placed in the middle of the screen while neatly taking up a wide amount space on the screen. I will change my Position X value to 700, Position Y value to 200, Size X value to 600, and Size Y value to 600. When you are finished, your Scroll Box should look something like the following screenshot:

In a later chapter, we will be dynamically inserting items into the Scroll Box and creating logic to apply the effects of the items to each character.

To finish off this screen, you should notify the player about which screen they are currently viewing. So create another Text Block and size the font to something large, such as 48 pixels. Pick an anchor for your Text Block that is at the center-top. This will make it such that your Text Block recognizes the 0 X position as the middle of the screen and the 0 Y position as the top of the screen. So you can now put 0 as the Position X value and pad the Position Y value:

You will notice that the inventory is not quite written at the middle of the screen, so adjust the Position X value until it is. I changed my Position X value to half of the size of the Text Block, which came out to be -135:

At this point, you can save and compile your Inventory screen. We are done for now.