Common UI Plugin UE5

Go to Edit>plugins>Common UI and check and restart Unreal.

Now go to Edit>project settings>viewport class and change it to CommonGameViewportClient

The input routing system is sent through this viewport using commonUI

Next we are going to create a few folders. One for the maps, where we will create a new level. Blueprints folder and a UI Folder where within that UI folder we will make a Data and Icons folder. Within the data folder right-click and go to Miscellaneous>Data Table>CommonInputActionDataBase

We are going to name it InputActions.

We are going to add a new row into our data table. We are going to name it confirm and a second one named cancel. We also are going to add a few common input names for a possible future use.

Cancel will be escape on the keyboard. Left tab will be Q on the keyboard and Tab Right will be R on the keyboard. Confirm will be enter on the keyboard.

On the gamepad input confirm will be the face button bottom. Cancel Face Buton Right. Left tab is left shoulder and right tab is right shoulder.

Now if you are working with multiple consoles and the consoles gamepad is different you can select gamepad input overrides. If you have the SDK and are using a source build you can select that controller. If for example another controller the A,B button are reversed. You could select the opposite controls for what we have.

We are now going to create a two new blueprints. One for our keyboard controls and one for our gamepad controls. We are going to select the class of CommonInputBaseControllerData.

Let’s start in the gamepad blueprint. In input type let’s select gamepad. Select generic for gamepad name.

Next we are going to setup our input brushes.

Next we are going to create one more blueprint called commonUIInputData

Go to the details panel and select default click action and select our input actions and select confirm and for back action select input actions>cancel

Next let’s go to Project Settings>Input Data and select DemoInputGameData then platform input go down to windows and select pc keyboard,gamepad for controller data.

Next create a new folder called styling under the UI folder. There we will create a border style, button style, and text style blueprints.

Next we are going to add a UserWidget out of the User Interface> Widget

We are going to add a text widget and you would have a full screen like normal.

But if we were to compare it to the text style blueprint the details panel already covers these options.

We customized the text to our liking.

Now we can go back to our widget and change out our text block to a common text block and select in the details panel our text style.

Next head back over to project settings>plugins> common ui editor and set our blueprints that we had created.

Next we are going to create a container for our user interface. We will create a new blueprint called UI_BASE under the CommonActivatableWidget.

NOTE: Minimalize canvas widget usage. Overlay let’s you stack stuff on top of it. Less resource heavy.

We are going to then add a Common Activatable Widget Stack. (A list in order The thing on top is the most important). Set the horizontal and vertical alignments to fit the entire screen.

Create a second Common Activatable Widget Stack called the prompt stack.

We are now going to create a few customizable events. The first called push menu and the second push prompt.

Then we are going to get our menu stack and call push widget and attach it to our push menu. We then connect our Widget Class to our menu event.

We are now going to make a new activatable widget for our main menu.

We also are going to create a new blueprint with a common button base class. When we open it up we will drop an overlay in.

We also can apply our button style to it.

Now we never setup out button style so let’s head back over to it. We can adjust the color of our buttons in there.

NOTE: Selectable = (radio buttons or toggle switches)

Now we’re going to create a custom button size of 250x60 this can be found in the top right corner.

Next we will add common text and center it.

Now we need to create a method for setting button text. Now we will head over to our graph and create a text variable then compile. Make sure to check Instance Editable.

NOTE: Keep localization dashboard in mind for control of text data tables in game.

Then go back to the Designer select the text. Then select is Varaible in the Details panel and change the name to displayedText.

Back to the graph and drag in DisplayedText variable and off of it search for SetText

Then connect together.

Now if you go back to the designer and select your generic button you can edit the text from there

Finally make sure to set the width and height of your button as well in the Details>Layout

Next we are going to open up the main menu and we will repeat a lot of the same steps. We are going to add an overlay and a vertical box. Then add 4 buttons and add a spacer.

Then for the vertical box select fill vertically. Then add some spacers for padding.

We added some bottom padding to our buttons and then named them all in the editor as well. On the vertical box we are going to wrap it with a common border.

We are now going to create a border style. So go into border style blueprint we already created, and you can either add an image or tint. We’re going to use a tint.

Now we are going to make a player controller. So create a player controller blueprint. FrontEndPlayerController. In the blueprint we will create a widget and select UI base and get self as the owning player. We then have to add it to our viewport so it will appear on our screen. Then we will push our Main UI menu.

We then are going to create a GameMode Blueprint where we are going to set our player controller to the playerController. We then are going to set the game mode to be our game mode for the game.

When we press play our UI menu that we created will appear where we placed it on the left side of the screen.

We are now going to focus on convenience we are now going to show how to activate our widget. So we are going to go back into the main menu blueprint and find an event called Event On Activated (this let’s the system know to activate the item on top of the stack.

We are are going to set our focus and get our desired focus target.

We will need to create an overridable function. Search get desired focus target.

We are going to use our new game button.

Now we have our focus set to a button when our game opens up.

We now are going to create a generic yes no prompt for our player. To though this we are going to create another activatable widget and name it UI_GenericPrompt. We are then going to create an overlay and fill it out as seen below.

We now are going to head over to the graph. We then are going to create an event on activated and get the desired focus and set the focus on the widget. We then are going to create a custom event. With an InPrompt (Text), Prompt Owner (UI Main Menu Soft), and a Prompt Index (Integer).

We then are going to create a new variable called the Prompt Index (Integer).

Next go to our YesButton variable and add the On Button Base Clicked. This will create an event.

Then we are going to create another variable called PromptOwner that is going to be a UI Main Menu. Hook up our PromptIndex and PromptOwner.

We are going to then head back to our Main Menu. We are going to create a new custom event called OnPromptConfirm.

If your menu does multiple things using a switch on Int can index what function your a suppossed to use. Attach our quit game option.

Head back over to the Generic Prompt, and set our PromptText to is a variable. Then On Button Base CLicked(YesButton) connect to our On Prompt Confirm and attach our prompt owner and Index and check if the prompt owner is valid

We now head back over to our UI_Base and in our Push Prompt event we are going to add some parameters to it. We then are going to set our prompt info.

Then we are going to copy our push prompt, back over to our front end player controller. Off of our Base Widget we are going to create a variable called UI Base.

We are going to get our UI Base and Push the Prompt and hook everything up.

Then head back over to the Main Menu where we setup our quit button and push the prompt asking if we want to quit and if yes then quit the game.

Now we can do this for the no button. Go to the GenericPrompt add the On Button Base Clicked (NoButton) and tell it to deactivate the widget and we can cancel quitting the game.

Congratulations we have made a UI using common UI!