Unreal Engine: Character UI

Name: Unreal Engine: Character UI
Rating: 4.7 (521 reviews)

Learn to create an interactive and editable Character UI like in God of War, Final Fantasy, The Witcher, or Madden!

Created byGreg Wondra

Last updated 11/2025

English

What you'll learn

How to download, install, and setup a project in the Unreal Engine
How to create menus using Unreal Engine widget blueprints
How to create variables, functions, and write blueprint scripts
How to layout a character menu screen
How to make a character menu screen interactive
How to bind data from a data table (spreadsheet) to elements in our character menu screen
How to create a game save, load a game save, and overwrite a game save
How to make character data editable and save updated data
How to toggle playable characters
Unreal Engine UI
Game HUD
UMG (Unreal Motion Graphics)
Progress Bars
Inventory UI
Interaction Systems
Widget Blueprints
Dynamic Menus
Game Design
Unreal Engine 5
Unreal Engine

Course content

14 sections • 80 lectures • 14h 44m total length

Project Primer4:43
In this video you'll get a sneak peak of what we're about to create. Additionally we'll briefly cover what you'll be learning in this course and how the course is structured.

THIS LESSON TEACHES HOW TO...
Navigate the Course
Download & Install8:23
In this video we'll cover where you can go to download the Epic Games Launcher. Once the Epic Games Launcher is downloaded and installed, we can then go through the Epic Games Launcher to download Unreal Engine. (Yes, yes you do download and install one thing - the Epic Games Launcher - in order to download another - the Unreal Engine)

THIS LESSON TEACHES HOW TO...
Download and Install the Epic Games Launcher & Unreal Engine
Project Creation4:38
In this video we'll create our Unreal Engine Project. During this process, we'll decide what type of project we'd like to make, what template we'd like to start from, and what assets we'd like to include to get us started.

THIS LESSON TEACHES HOW TO...
Create a Project

ASSETS ADDED / CREATED / EDITED...
Project: CharacterUI
Add Content Packs8:55
In this video we'll add some FREE content packs into our project that we'll make use of down the road. While these packs are NOT necessary to complete the project (you CAN use your own assets), they will aid greatly in ensuring you've got access to all you need going forward (also, these are some high quality assets....FROM Epic Games!).

THIS LESSON TEACHES HOW TO...
Add Content Packs from the Epic Games Marketplace

ASSETS ADDED / CREATED / EDITED...
Content Pack: Paragon: Muriel
Content Pack: Paragon: Revenant
Content Pack: Paragon: Sevarog

Import Assets12:00
In this video we're going to import a bunch of assets we'll be making use of throughout this course. NOTE: You don't HAVE to use these assets....you can certainly take the concepts taught in this course and design your OWN layout. But it's HIGHLY recommended that you do import these assets.

THIS LESSON TEACHES HOW TO...
Import Assets
Do Bulk Edit Assets
Create & Color Content Browser Folders
Move Assets into Content Browser Folders
Access Editor Preferences
Dock New Tabs to Main Window
Download Free Fonts

ASSETS ADDED / CREATED / EDITED...
Zip File: CharacterUIAssets
Widget Blueprint Creation10:32
In this video we'll create a Widget Blueprint asset and cover the different areas inside of the Widget Blueprint editor.

THIS LESSON TEACHES HOW TO...
Create a Widget Blueprint
Identify areas of the Widget Blueprint Editor

ASSETS ADDED / CREATED / EDITED...
Widget Blueprint: WBP_CharacterUI
Widget Blueprint Display8:29
In this video we'll create the setup necessary to display our Character Profile UI.

THIS LESSON TEACHES HOW TO...
Create a Level
Set Editor Default Startup Level
Access the Level Blueprint
Create Script to Display a Widget Blueprint

ASSETS ADDED / CREATED / EDITED...
Level: LV_CharacterUI
Character Pic & Name Layout17:11
In this video we'll add our first few Widgets inside Designer Mode of our Widget Blueprint.

THIS LESSON TEACHES HOW TO...
Add & Edit an Image Widget
Add & Edit a Text Widget
Work with Widget Anchor Points
Size Widgets to Content
Show / Hide a Widget
Lock / Unlock a Widget
Toggle "Show Only Modified Properties" option in Details Panel
Character Role Layout15:35
In this video we'll add a Horizontal Box Widget that'll house our character's "Role" display.

THIS LESSON TEACHES HOW TO...
Add & Edit a Horizontal Box Widget
Size Widgets to Content
Edit Horizontal Box Slot Parameters
Set a Widget Tool Tip
Custom Widget Creation8:29
In this video we'll be creating a Custom Widget. Custom Widgets are excellent when wanting to create some kind of stylized UI element you may want to use again and again.

THIS LESSON TEACHES HOW TO...
Create a Custom Widget
Add & Edit a Border Widget
Add, Edit, Use a Named Slot Widget
Character Affinities Layout12:16
In this video we'll add another Horizontal Box Widget that'll house our character's "Affinities" display.

THIS LESSON TEACHES HOW TO...
Add & Edit a Spacer Widget
Character Status Layout16:52
In this video we'll add a Vertical Box Widget that'll be used to show our character's level, XP, and money status.

THIS LESSON TEACHES HOW TO...
Add & Edit a Vertical Box Widget
Add & Edit a Progress Bar Widget
Character Change Layout12:54
In this video we'll add a Character Change instructional display to our Character UI to help users know how they can quickly swap between characters. We'll make use of several commonly used widgets to accomplish this.

THIS LESSON TEACHES HOW TO...
Duplicate Widgets using a hot key command (Ctrl + W)
Character Category Layout19:39
In this video we'll be introducing Button Widgets. These will live inside of a Horizontal Box and act as tabs a user can select between in order to present different character information categories.

THIS LESSON TEACHES HOW TO...
Add & Edit a Button Widget
Customize Button Styles
Character Basics Layout

Character Structs17:57
In this video we'll create 2 Structure assets. These assets act as containers that hold a lot of data inside of them.

THIS LESSON TEACHES HOW TO...
Create Structures (Structs)

ASSETS ADDED / CREATED / EDITED...
Structure: STR_CharacterAbility
Structure: STR_CharacterData
Character Data Table9:18
In this video we'll create a Data Table from one of our Struct assets we created in the last video. With a Data Table in place, we now have the ability to edit many properties in one centralized place.

THIS LESSON TEACHES HOW TO...
Create Data Tables

ASSETS ADDED / CREATED / EDITED...
Data Table: DT_CharacterRoster
Export Data Table5:56
In this video we'll learn how to export a Data Table into a .csv file. In doing this, we have an external means of quickly editing a LOT of data in a time efficient manner.

THIS LESSON TEACHES HOW TO...
Create External .csv files

ASSETS ADDED / CREATED / EDITED...
Microsoft Excel: DT_CharacterRoster
Google Sheets: DT_CharacterRoster
Import Data Table10:12
In this video we'll learn how to import our exported .csv Data Table. In doing this, we'll notice that Data Table entries in Unreal reflect changes we made to our table prior to importing them.

THIS LESSON TEACHES HOW TO...
Import .csv Data Tables into Unreal
Manually edit Data Tables in Unreal

ASSETS ADDED / CREATED / EDITED...
Microsoft Excel: DT_CharacterRoster_FULL

Game Instance Blueprint4:28
In this video we'll create a Game Instance Blueprint and assign this to be used by our game inside of our Project Settings. This ever present blueprint will be critical for tons of functionality in our project....everything from extracting data from our Data Tables to updating our Data Tables through creating Game Saves.

THIS LESSON TEACHES HOW TO...
Create a Game Instance Blueprint

ASSETS ADDED / CREATED / EDITED...
Blueprint: BP_GameInstance
Get Character Data Function12:45
In this video we'll create a Function inside of our Game Instance Blueprint that'll enable us to extract data from our Data Table.

THIS LESSON TEACHES HOW TO...
Create a Function
Character Name Binding10:29
In this video we'll create a Binding within our Character UI Widget Blueprint. This will result in the appropriate character's Name being read from the Data Table.

THIS LESSON TEACHES HOW TO...
Create a Widget Binding
Widget Binding Bug Fix5:08
In this video we'll show how to fix up "broken widget binding" bugs that can occur if you close out and re-open your project.

THIS LESSON TEACHES HOW TO...
Convert Variable to a "Validated Get"
Character Image Binding9:17
In this video we'll create a Binding within our Character UI Widget Blueprint. This will result in the appropriate character's Image being read from the Data Table.

THIS LESSON TEACHES HOW TO...
How to Fix "Broken" Widget Bindings
Create a Widget Binding
Character Role Binding5:37
In this video we'll create a Binding within our Character UI Widget Blueprint. This will result in the appropriate character's Role icon being read from the Data Table.

THIS LESSON TEACHES HOW TO...
Create a Widget Binding
Character Affinity Bindings5:58
In this video we'll create Bindings within our Character UI Widget Blueprint. This will result in the appropriate character's Affinity icons being read from the Data Table.

THIS LESSON TEACHES HOW TO...
Create Widget Bindings
Character Level Binding4:42
In this video we'll create a Binding within our Character UI Widget Blueprint. This will result in the appropriate character's Level being read from the Data Table.

THIS LESSON TEACHES HOW TO...
Create a Widget Binding
Character Money Binding3:05
In this video we'll create a Binding within our Character UI Widget Blueprint. This will result in the appropriate character's Money amount being read from the Data Table.

THIS LESSON TEACHES HOW TO...
Create a Widget Binding
Character XP Binding13:12
In this video we'll create a Binding within our Character UI Widget Blueprint. This will result in the appropriate character's XP amount being read from the Data Table.

THIS LESSON TEACHES HOW TO...
Create a Widget Binding
Character Color Binding6:31
In this video we'll create a Binding within our Character UI Widget Blueprint. This will result in the appropriate character's Color being read from the Data Table which will impact the color of the background image.

THIS LESSON TEACHES HOW TO...
Create a Widget Binding

Player Controller Blueprint9:12
In this video we'll create a Player Controller Blueprint. This blueprint will ultimately be used to toggle between different characters.

THIS LESSON TEACHES HOW TO...
Create a Player Controller Blueprint

ASSETS ADDED / CREATED / EDITED...
Blueprint: BP_PlayerController
Character Change (UI) #116:59
In this video we'll create script inside our Player Controller Blueprint that'll toggle the character displayed in our Character UI Widget Blueprint.

THIS LESSON TEACHES HOW TO...
Create Input Action Mappings
Create Script
Character Change (UI) #25:17
In this video we'll finish creating script inside our Player Controller Blueprint that'll toggle the character displayed in our Character UI Widget Blueprint.

THIS LESSON TEACHES HOW TO...
Create Script
Set Object to Debug
Visualize Blueprint Scripting Flow
Character Change (Game) #115:14
In this video we'll create script inside our Player Controller Blueprint that'll toggle the character controlled when we exit out of our Character UI and back to the game.

THIS LESSON TEACHES HOW TO...
Create an Input Action Mapping
Create Script
Character Change (Game) #218:08
In this video we'll continue creating script inside our Player Controller Blueprint in order to properly toggle which character we're controlling in the game.

THIS LESSON TEACHES HOW TO...
Create Script
Character Change (Game) #38:05
In this video we'll finish creating script inside our Player Controller Blueprint in order to properly toggle which character we're controlling in the game.

THIS LESSON TEACHES HOW TO...
Create a Variable

ASSETS ADDED / CREATED / EDITED...
Variable (Boolean): IsCharacterProfileUiOpen?

Abilities Base Layout10:07
In this video we're going to set the groundwork for laying out the entire Abilities tab of our Character UI Widget.

THIS LESSON TEACHES HOW TO...
Add & Edit a Widget Switcher Widget
Add & Edit Canvas Panel Widgets
Ability Icon & Button Layout17:38
In this video we'll add a Uniform Grid Panel Widget and set some Button and Image Widgets inside of it to show what abilities our character has and which controller button icons can be pressed to use that ability.

THIS LESSON TEACHES HOW TO...
Add & Edit an Uniform Grid Panel Widget
Add & Edit Button Widgets
Add & Edit Image Widgets
Ability Name & Description Layout14:19
In this video we'll add an Image Widget to act as a background for 2 Text Widgets to live upon. One will be for the selected ability name. The other for the selected ability description.

THIS LESSON TEACHES HOW TO...
Add & Edit an Image Widget
Add & Edit Text Widgets
Ability Properties Layout14:42
In this video we'll create the layout of our ability properties display by utilizing Vertical Box, Horizontal Box, Text, and Spacer Widgets.

THIS LESSON TEACHES HOW TO...
Add & Edit a Vertical Box Widget
Add & Edit a Horizontal Box Widget
Add & Edit Text Widgets
Add & Edit a Spacer Widget

Ability Icon Binding11:56
In this video we'll create a Binding within our Character UI Widget Blueprint. This will result in the appropriate character's Ability Icons being read from the Data Table.

THIS LESSON TEACHES HOW TO...
Create Widget Bindings
Ability Name Binding10:00
In this video we'll create a Binding within our Character UI Widget Blueprint. This will result in the appropriate character's Ability Names being read from the Data Table.

THIS LESSON TEACHES HOW TO...
Create a Variable
Create a Widget Binding

ASSETS ADDED / CREATED / EDITED...
Variable (Integer): SelectedAbilityIndex
Ability Description Binding4:32
In this video we'll create a Binding within our Character UI Widget Blueprint. This will result in the appropriate character's Ability Descriptions being read from the Data Table.

THIS LESSON TEACHES HOW TO...
Create a Widget Binding
Ability Property Name Bindings11:07
In this video we'll create a Binding within our Character UI Widget Blueprint. This will result in the appropriate character's Ability Property Names being read from the Data Table.

THIS LESSON TEACHES HOW TO...
Create Widget Bindings
Ability Property Value Bindings8:35
In this video we'll create a Binding within our Character UI Widget Blueprint. This will result in the appropriate character's Ability Property Values being read from the Data Table.

THIS LESSON TEACHES HOW TO...
Create Widget Bindings

Ability Widget Animations13:05
In this video we'll create Widget Animations for our 5 ability buttons. These animations will eventually be used to help communicate to a user which ability is being viewed.

THIS LESSON TEACHES HOW TO...
Create Widget Animations
Ability Hover Function6:03
In this video we'll create a Function within our Character UI Widget Blueprint that, when called, will make it so that our Widget Animations will play and that the input button associated with each ability becomes visible.

THIS LESSON TEACHES HOW TO...
Create a Function

Ability Default Button Script10:31
In this video we'll create script within our Character UI that'll force an ability button to be selected by default. In doing this, we're ensuring that we ARE showing some ability information! We do NOT want nothing to show by default!!!

THIS LESSON TEACHES HOW TO...
Create and Call a Custom Event
Create Script
Ability Button Hover Script7:54
In this video we'll create script within our Character UI that'll make our ability buttons animate when we hover our mouse cursor over each.

THIS LESSON TEACHES HOW TO...
Create Script
Ability Button Unhover Script16:45
In this video we'll create script within our Character UI that'll cause our ability buttons to reverse their animation when not hovered.

THIS LESSON TEACHES HOW TO...
Create and Call a Custom Event
Create Script
Ability Voice Script15:31
In this video we'll create script within our Character UI that'll cause our character to say something whenever we click on an ability button.

THIS LESSON TEACHES HOW TO...
Create a Function
Create Script

Attributes Base Layout11:54
In this video we'll begin creating the layout for the Attributes tab of our Character UI.

THIS LESSON TEACHES HOW TO...
Edit a Widget Switcher
Add & Edit a Scroll Box Widget
Add & Edit a Spacer Widget
Attribute Name Layout13:17
In this video we'll continue laying out the Attributes tab of our Character UI by introducing the Editable Text Box Widget. This widget will allow us to alter our character's name.

THIS LESSON TEACHES HOW TO...
Add & Edit a Horizontal Box Widget
Add & Edit a Text Box Widget
Add & Edit a Spacer Widget
Attribute Auto Move Layout11:38
In this video we'll continue laying out the Attributes tab of our Character UI by introducing the Check Box Widget. This widget will determine if our character will move without player input.

THIS LESSON TEACHES HOW TO...
Add & Edit a Check Box Widget
Attribute Auto Move Speed Layout11:45
In this video we'll continue laying out the Attributes tab of our Character UI by introducing the Slider Widget. This widget will determine our character's movement speed if auto moving.

THIS LESSON TEACHES HOW TO...
Add & Edit a Slider Widget
Attribute Health Layout9:31
In this video we'll continue laying out the Attributes tab of our Character UI by adding a Progress Bar Widget. This widget will show how much health our character has.

THIS LESSON TEACHES HOW TO...
Add & Edit a Progress Bar Widget
Attribute Health Regen Amount Layout6:02
In this video we'll continue laying out the Attributes tab of our Character UI by adding a Text Widget. This widget will show how much health our character will regenerate (at given time periods).

THIS LESSON TEACHES HOW TO...
Add & Edit a Text Widget
Attribute Health Regen Rate Layout14:16
In this video we'll continue laying out the Attributes tab of our Character UI by introducing the Spin Box Widget. This widget will determine our character's regeneration rate.

THIS LESSON TEACHES HOW TO...
Add & Edit a Size Box Widget
Add & Edit a Spin Box Widget
Attribute Taunt Layout11:04
In this video we'll continue laying out the Attributes tab of our Character UI by introducing the Combo Box (string) Widget. This widget will enable us to select a character taunt from a drop down list of choices.

THIS LESSON TEACHES HOW TO...
Add & Edit a Size Box Widget
Add & Edit a Combo Box (string) Widget
Attribute Color Layout18:30
In this video we'll finish laying out the Attributes tab of our Character UI by adding a Grid Panel Widget with several Button Widgets inside.

THIS LESSON TEACHES HOW TO...
Add & Edit a Grid Panel Widget

Requirements

SUGGESTED: Basic computer knowledge
SUGGESTED: Desktop PC with Windows 7 (or later) 64-bit - OR - a Mac with Mac OS X 10.9.2 or later
SUGGESTED: 8 GB RAM
SUGGESTED: Quad-core Intel or AMD processor
SUGGESTED: DirectX 11 compatible video card
SUGGESTED: Unreal Engine version 4.26 or later
NO programming experience needed! You'll learn to use Unreal's "blueprint scripting" to create functionality as we go!

Description

In this game development course, you will learn how to use Unreal Engine's Widget Blueprints to create a Character based UI (User Interface). This type of interface can be found in all genres of games! Games such as The Witcher, God of War, Final Fantasy, and Madden Football ALL have character UIs present in them. Knowing how to use widget blueprints is a critical skill for those aspiring to be a UX (User Experience) or UI (User Interface) designer on an Unreal Engine project.

This course contains 80 fun-to-follow video lessons. You'll learn how to:

Download, install, and setup a project using the Unreal Engine
Add-on (free!) Marketplace content (several Paragon character asset packs)
Import outside assets
Create a character based User Interface layout
Work with and understand many of the different "Widget" types available in widget blueprints including:
- Buttons
- Images
- Text Boxes
- Horizontal & Vertical Boxes
- Spinner Boxes
- Sliders
- Uniform Grid Panels
Create Data Tables
Extract data from a Data Table and Bind Data to Widget Variables in our User Interface
Create Variables, Write Functions, and Create Scripts to make an interactive and editable User Interface
Animate Widgets (such as buttons)
Have UI alterations affect our in-game character (such as character speed)

Create a Save / Load System
And more!

With the knowledge gained in these video lessons you'll have the necessary skills to start creating your OWN character user interface!

Who this course is for:

Students looking to learn how to create menus with Unreal Engine
Students looking to learn how to make interactive character user interfaces for their gaming projects
Students interested in learning how to use all the various widgets inside of Unreal's Widget Blueprints
UI/UX Designer
Indie Game Developer
Student
Hobbyist
Unity Developer
Artist
Animator
Complete Beginner
Game Designer

Unreal Engine: Character UI

What you'll learn

Explore related topics

Course content

Project Setup4 lectures • 27min

Character Basics Layout10 lectures • 2hr 14min

Character Data Assets4 lectures • 43min

Character Data Bindings11 lectures • 1hr 21min

Character Change Scripts6 lectures • 1hr 13min

Character Abilities Layout4 lectures • 57min

Character Ability Bindings5 lectures • 46min

Character Ability FX2 lectures • 19min

Character Ability Scripts4 lectures • 51min

Character Attributes Layout9 lectures • 1hr 48min

Requirements

Description

Who this course is for: