Integrate to your own project

This page is a Work in Progress and hasn't been updated since a lot of commits so it might be a bit outdated. I recommend you to see how it's done in the base project for each steps, and just copy how it's done for the base project in you own. Images are hosted on Imgur

Prerequisites

Knowing the basics of Unreal Engine

I assume that if you're here, you already know at least the basics of this incredible engine. However, just to make it clear, you need to have a basic understanding of Unreal Engine before continuing. If you don't, I recommend checking out the Unreal Sensei channel to learn the basics, particularly this video.

Knowing a bit about Common UI

It would be helpful to have some knowledge of CommonUI before continuing. You can do this by watching this livestream. However, if you are already experienced with UE5, you could probably learn on the go by reading this Wiki and browsing through the project files.

Integration

Setting up CommonUI in your project

1. Go to Edit>Plugins and search for CommonUI

   

2. Enable it

   

3. Restart the Engine

   

4. Once restarted, go to Edit>Project Settings and search for "Viewport"

   

5. Change the "Game Viewport Client Class" to "CommonGameViewport"

   

   

6. You will be prompted to restart the editor, so do it by clicking on "Restart Now"

   

Adding the Plugins

1. You can either add them to your engine plugin folder or to your project folder. More details here
2. Enable them all in your project before continuing
3. Close your project

Adding the files to your project

1. Open the local files of my project by clicking on "Show in Explorer" with GitHub Desktop

   

   

2. Go to \content\ and copy the CommonUI folder

   

3. Go to the \content\ folder of your project and paste it

Setup your Project Settings for these new files

1. Open your project again

2. Go to Project Settings>Game>Common Input System

   

3. Change the parameters to be the same as in my project, so as I am writing this:

   1. Set Input Data to "CU_InputData"

      

      

   2. In Platform Input>Windows>Default>Controller Data, add everything so it looks like this

      

      

   3. Enable "Allow Out Of Focus Device Input"

4. Go to Project Settings>Plugins>Common UI Editor

   

5. Again, change the parameters to be the same as in my project, so as I am writing this

   

6. Go to Project Settings>User Interface

   

7. Set "Render Focus Rule" to "Never"

   

8. Go to Project Settings>Maps & Modes

   

9. Set Both Maps to "LVL_Frontend"

   

Adapting your code

1. If you have a custom Player Controller, open it

   

2. Add these nodes

   

3. Go to Content\CommonUI\Widgets

   

4. Open UI_MainMenu

   

5. Go to Graph on the top right

   

6. Set the "Level" variable to the level you want people to access via the main menu

   

   

   

Adding Inputs

1. Open your Character Blueprint

2. Add the inputs you want to open the pause menu with, mine are these

   

3. Add those nodes and connect them to your Inputs Actions

   

4. You are good to go! Enjoy!

The only little problem is that volumes slider in the "Audio" settings won't work. I will make another tutorial on how to make them work later.