In this tutorial, we’ll create the backend functionality for the player’s inventory menu as part of the In-World Hologram UI series.

You can explore the rest of the series here.

Showcase Overview

This tutorial focuses on setting up the backend for the inventory menu.

For this purpose we will do the following things:

Here’s what we’ll achieve:

1. Add an in-world view fixed to the player’s camera to display the inventory menu.
2. Change the camera’s position when the inventory menu opens for better focus.
3. Implement functionality to open and close the inventory menu.
4. Hide or reveal the in-world screen from the previous tutorial when toggling the inventory menu.
5. Handle input events for the inventory menu.

Creating the plane for the inventory UI

To show the inventory of the player we need to setup another view responsible for this. We will use the same approach as we did in the previous tutorial but with slight differences related to the input as we want this view to receive input.

We will create a new CohtmlPlane class that we will name - PlayerMenuPlane following this guide.

After we created the class we will set different things for the StaticMesh and the Cohtml component:

1. URL to coui://uiresources/HologramUI/player-inventory.html because we will use the player-inventory.html page for implementing the UI.
2. Receive Input to be checked as we want this plane to receive keyboard and mouse input.

3. Collision Presets to OverlapAllDynamic in order to we make it possible for Gameface to handle properly the input. If there this option is set to No collision for example the raycast agorythm that Gameface uses will not transfer in input to that plane. You can read more here about how the input is handeled with Gameface in Unreal.

Adding in-world view inside the third person character blueprint

After we have the plane it is time to add it into the third person blueprint.

1. Open the BP_ThirdPersonCharacter blueprint and navigate to the Viewport panel.
2. Navigate to the Components panel and add new child actor to the BP_ThirdPersonCharacter/Capsule Component with the name MenuPlaneActor.

3. Select the MenuPlaneActor and from the details panel select the Child Actor Class to be PlayerMenuPlane. Like that you can add in world UI inside a character blueprint class.
4. Drag and drop the MenuPlaneActor to the Viewport and position it in front of the character.

Adding different cameras for the different views

While we are still in the third person character blueprint we will add additional cameras for the player and the inventory. When the player opens or closes the inventory, then the camera view will be toggled between the inventory menu or the character.

To do this we will use the same approach as we did with the MenuPlaneActor:

1. Add a new Child Actor with the name MenuCamera, set the Child Actor Class to be CameraActor, position it to look at the MenuPlaneActor.

2. Add a new Child Actor Class with the name FollowCameraActor, set the Child Actor Class to be CameraActor and position it to the same position as the FollowCamera is.

Initialize the relevant variables

When we are ready with the whole setup in the editor it is time to proceed with the implementation of the game logic in our level blueprint. We are going to start by initializing some new variables that we will use later in our implementation. We will do that in the InitVariables method we created earlier and initialize the following new variables:

1. Player Actor with type BP Third Person Character. We will use it to access the cameras inside the player actor and change the active one when the inventory menu is opened/closed.
2. Player Menu Actor with type Player Menu Plane. That will enable us to access the plane that we created earlies for showing the inventory in world. We need that for later implementation of changing its Actor Hidden In Game property while the game is running so when the inventory is closed to not receive any input events.
3. Player Menu with type Gameface Component. This is the Gameface view for the inventory. We will need it runtime so we can trigger different events to the UI from the game and vice verca.

So the final implementation of our InitVariables method is the following:

Here we do couple of new things:

1. We are getting all the actors of class BP Third Person Character to find and set the Player Actor variable.
2. From the Player Actor we are getting the Menu Plane Actor and then from it we are getting its Child Actor that is the Player Menu Plane. In order to set it to Player Menu Actor variable we need to cast it.
3. From the Player Menu Actor we can get the Cohtml that is the Gameface Component and set it to the Player Menu variable.

Making the inventory menu view hidden on start

To make the inventory menu view hidden when the game starts we will use the Set Actor Hidden in Game method that accepts the Player Menu Actor as a target. We will do this immediately after all the variables are initialized in the level blueprint. We will check the New Hidden option that will hide the inventory in world element in the game.

Refocusing the input method

To make it possible to focus the inventory menu view when it is opened and enable input events on it we need to create a function for this purpose. The method will accepts the Input Actor that we set in the first part of the tutorial series and a boolean variable if the UI should be focused or not.

Changing the active camera

When the player opens/closes the inventory menu we want to change the active camera to the MenuCamera or FollowCameraActor that we created earlier in the BP_ThirdPersonCharacter blueprint class. For this purpose we will create new method for making this procedure. We will name it Change Camera To and will receive a single String argument that tells the method which camera is the active one. The values of this argument could be either Player or Menu.

• If it receives Player the active camera will be the main following character camera.
• If it receives Menu the active camera will be the one that focuses the inventory menu.

To change the camera we will be using Set View Target with Blend method that accepts either the child actor of FollowCameraActor or Menu Camera. The child actor in fact is a Camera Actor as we set it earlier.

We will also set 0.5ms for the blend time so we have smoot animation when changing the cameras.

Also, here make sure to check the Lock Outgoing option so the animation of changing active cameras starts from the last position. This will prevent snapping animation when you open and close the inventory menu really fast and the transition animation has not ended.

Calling this method will end up in the following result:

Opening the inventory menu view

Now lets implement the logic of opening the inventory menu. We need to do the following, when the user opens the inventory menu:

1. We will add an event when the P button is pressed in the game and proceed with the other steps.
2. We will check if the tooltip is visible. If the tooltip is not visible (the player is not close to the trigger box) then pressing the P button should not continue with the other steps of opening the inventory menu.
3. If the tooltip is visible we can procees further. We will disable the input game mode that means the player won’t be able to move its character and will be able just to interact with the UI. For this purpose we will use the Set Input Mode UI Only method that will do this job. Later we will enable again the input game mode when the menu is closed.
4. The next step is to change the visibility of the inventory menu view so the UI is shown in the game. We will do this with the Set Actor Hidden In Game accepting the Player Menu Actor target. The New Hidden argument should not be checked so we make the actor visible.
5. After we changed visibility of the inventory view element we can trigger event to the in world screen we created in the previous tutorial and is on the top of the trigger box so it will become closed with transition animation. We will do that by using the method accessible from the Gameface Plugin - Trigger JSEvent that accepts In World Screen variable as a target and Name of the event - playerMenuOpened.

This step will result in the following:

6. To enable the input events on the inventory menu view that is inside the world we will use two methods - Refocus that we have created and the SetViewFocus that will focus the inventory menu view. You can read more about the SetViewFocus in our documentation here . Both methods will accept Input Actor as Input Actor argument for the Refocus method and Target for SetViewFocus. Also, you need to check the Focus argument of the Refocus method because if it is checked the input for the inventory menu will be enabled. SetViewFocus also accepts the Player Menu Gameface component as New Focused View.
7. After we make the inventory view visible and enable input events for it we can hide the tooltip and change the active camera to the menu. We will do this by Update Tip Visible State and Change Camera To methods. Also we will delay the next step with 0.5 ms so we ensure the camera animation has ended and we can proceed with the open animations of the menu in the UI.

So far all the steps will result into this:

8. To start the open animations of the inventory menu UI we will use Trigger JSEvent method with target Player Menu and event name - openMenu. This will notify the UI that the inventory menu has been opened on game command and the UI will start all the opening animation that we will implement in the next tutorial.

The final implementation in the level blueprint about opening the inventory menu is the following one:

Closing the inventory menu view

For closing the menu we will do something similar as opening it but in reverse order. However, the change here is that we will wait for event from the UI in the game for pessing the P button as we already disabled the game mode and all the input has been retargeted to the UI. The event that will be triggered from the UI to the game will be called - closeMenu.

To do that first we need to wait for bindings via Bind Event to Ready for Bindings with target the Player Menu that is the Gameface Component for the inventory view. When the bindings are ready we can register the event in the game that will be triggered in the UI. This operation we will do after Event BeginPlay event and after we waited for binding events for the Gameface HUD.

After registering such an event, we need to perform the same actions as we did for opening the menu, but in reverse order:

1. Add a delay of 1s to wait the close animations of the inventory menu UI to end.
2. Change the camera to the player via Change Camera To method with Camera argument - Player.
3. Set the Player Menu Actor to be hidden via Set Actor Hidden In Game method and checked New Hidden option.
4. Trigger event to the in world message screen that the inventory menu has been closed so the message become visible again. We will do that via calling Trigger JSEvent with target In World Screen and event name - playerMenuClosed. We already implemented the logic in the UI for that event and you can check it here.
5. Refocus the UI via calling Refocus with Focus argument disabled so the UI should not receive input anymore.
6. Add 0.5ms delay so we make sure that the open animation of the in world message screen ended and we can proceed with showing the tooltip.
7. Update the tooltip state to visible as the player’s character will be in the trigger box boundaries when the inventory menu is closed. This is done by calling Update Tip Visible State method with Visible argument enabled.
8. Set the input mode to the game only so we give back the control to the character in the game as the player won’t interact anymore with the inventory menu UI. This is done by calling the Set Input Mode Game Only method.

The final scheme in the level blueprint after the OnCloseMenu custom event is the following:

And the whole scheme when Event BeginPlay is triggered is the following one:

With that setup the result should be the following one:

What is next?

In the last tutorial we will descibe how to implement the UI of the inventory menu.