Setting up the Input

Creating an Interactive Menu in UE5 in the Style of Genshin Impact

Project Files

Project Setup

Breaking down the elements of the User Interface we are going to achieve (5:01)
Creating the project and adding the character (4:26)
Setting up the Input (2:42)
Create needed framework classes and character class (7:30)
Teleporting to menu area and character menu camera (24:54)

Classic UI

Menu Widget creation using UMG and showing it to the player (30:21)
Add mouse interaction to the menu (8:06)
Using modularity to our advantage to develop better interfaces: Button Widget (13:34)

Spacial UI

Orb element blueprint creation (9:20)
Arranging the Orbs around the character (29:06)
Attaching orbs to an actor to control their movement (10:37)
Add Orb functionality: Clicking on them and sending information through event dispatchers (15:44)
Add Orb functionality: Rotating the orbs to the selected one (10:19)
Orbs: Idle rotation (4:49)
Orbs: Handling the idle rotation state (8:16)
Restructoring the functionality to containt complex behavior: Creating the Orb Container class (39:48)
Orb selection working properly (33:45)
Creating the sub menu, and opening it through the orbs selection (37:19)

Orb Animation

Background & Orbs VFX

Background VFX Intro (0:57)
Making the Cloud Texture and Mesh (9:45)
Making the Background Material (5:58)
Making the Colored Cloud (7:45)
Making the Mesh UVs (10:48)
Making the Front Cloud Material (20:46)
Fixes & Making the Star Texture (14:56)
Star Material & Emitter (17:24)
Last touches on the Background (21:20)
Making the Ring Texture and Material (14:36)
Ring noise and Material (11:07)
Implementing Glow to the Niagara System (6:37)
Ring Spawn Texture & Material (9:07)
Making the Flare Texture (16:29)
Flare Emitter (10:41)
Making the Flare Stars (19:04)

Styling the Widgets

Analizing our reference for Styling the Buttons (6:08)
Blocking out our Button (12:42)
Creating the Button Masks (9:32)
Animating the arrow (12:21)
Changing the Text Style (9:45)
Button Opacity tweaks (3:46)
Creating the Portrait Textures (10:32)
Creating the Avatar Material (14:14)
Creating the Avatar Button (9:46)
Creating the Avatar Hover Texture (10:33)
Adding the Hover Button State for Avatars (8:29)
Changing the Font for Character Menu (7:02)
Creating the Exit Button Texture (11:04)
Creating the Exit Button Widget (7:34)
Adding the Shadow to the Exit Button (1:09)
Switch Button creation (9:31)
Creating the Menu Symbol Texture (13:46)
Menu Symbol Widget (11:26)
Creating the Extra Menu Button (6:07)
Extra Menu Widget (7:57)
Creating the Item Button Texture mask (10:54)
Testing the First version of the Item color (6:20)
Painting Icons with fundamentals (25:27)
Refining the icon values (23:08)
Coloring our Icon (13:29)
Importing our UI texture (6:18)
Creating the Item Widget (7:57)
Fixing our Widget size (8:08)
Adding Text to the Item (8:12)
Using Grid Canvas to organize elements (12:55)
Polishing the Avatar Background Texture (6:40)
Creating the avatar image for items (4:08)
Creating the Star Texture (5:56)
Changing the Item Widget size (3:59)
Importing High resolution Item Texture (2:02)
Adding our Widget to the Orb Blueprint (2:52)
Fixing the Orb Icon Rotation (2:18)

Polishing

Start the polish pass (0:44)
Removing the orbs debug number (1:47)
Adding the Anime Girl Character (9:45)
Fixing the lightning for the menu (3:14)
Added return to main menu button logic and fixed menu bug hidding the artifacts list (6:08)
Added menu states for a smoother experience (15:34)
Polishing the camera after returning from the menu (3:15)