Autoplay
Autocomplete
Previous Lesson
Complete and Continue
Creating an Interactive Menu in UE5 in the Style of Genshin Impact
Project Files
Anime Girl - Unreal Engine
Anime Girl - Master Source Files
Final project - Unreal Engine
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
Orbs up and down smooth animation (6:21)
Changing camera settings with each menu option (27:56)
Orbs should be hidden when another option is chosen (12:00)
Character Animation change when we select different options (11:44)
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)
Creating the project and adding the character
Complete and Continue