Developing an Interactive Menu in Unreal Engine 5

Name: Developing an Interactive Menu in Unreal Engine 5
Rating: 3.8 (39 reviews)

Master the art of polishing games in Unreal Engine 5 by recreating an interactive Menu in the style of Genshin Impact

Created byUNF Games

Last updated 6/2022

English

What you'll learn

Learn Blueprints
Learn Niagara and VFX
Learn to make UI Art
Learn to create games in Unreal Engine 5

Course content

7 sections • 82 lectures • 15h 22m total length

Breakdown of the example5:01
Break down the example to guide building a screen-space UI and a 3D world UI in Unreal Engine 5, with blueprints, 3D widgets, and interactive buttons that change the menu.
Creating the project and adding the character4:26
Setting up the input2:42
Create needed framework and character classes7:30
Create a framework folder with a game mode blueprint, a UI hud blueprint, and a character blueprint, then configure a demo map and set the game mode for menu.
Menu location teleport and menu character camera24:54
Explore creating an interactive menu in Unreal Engine 5 by setting a target point for teleportation, routing input to move the player, and activating a dedicated menu camera.

Orb blueprint creation9:20
Using Polar Coordinates to generate the orbs around the character29:06
Attaching orbs to an actor to control their movement10:37
Clicking the orbs and sending information through event dispatchers15:44
Rotating the orbs to the selected one10:19
Idle Orb rotation4:49
Orb rotation state8:16
Creating the orb container class39:48
Orb selection working properly33:45
Creating the sub menu, and opening it through the orbs37:19
Create an artifact submenu in Unreal Engine 5 that opens from orb selection, uses a six-button uniform grid, and animates its appearance before returning with backspace.

VFX Intro0:57
Making the Cloud texture and mesh9:46
Making the Background Material5:58
Create an opaque background material in Unreal Engine 5 by texturing and color-multiplying, then implement a background blueprint with cloud layers, one translucent and one fake, using a duplicated mesh.
Making the Colored Cloud7:45
Making the Mesh UVs10:48
Make the mesh UVs by applying a gradient texture to a Lambert material, adjust scale and mirroring, and test in Unreal for a translucent unlit look.
Making the Front Cloud Material20:46
Fixes & Making the Star Texture14:56
Adjust textures and lighting to fix cloud texture spots in Unreal Engine 5. Apply gradients, blend modes, levels, blur, anisotropic noise, and a glow to achieve a believable starfield.
Star Material & Emitter17:24
Last touches on the background21:20
Making the Ring Texture and Material14:36
Ring noise and Material11:07
Implemeting Glow to the niagara system6:37
Ring spawn Texture & material9:07
Making the Flare Texture16:29
Flare Emitter10:41
Develop a flare emitter in Unreal Engine 5 by building materials, textures, and color channels to create a vivid centered flare with sparks and refined timing.
Making the Flare stars19:05

Analizing our reference for Styling the Buttons6:08
Blocking out our Button12:42
Creating the Button Masks9:32
Animating the arrow12:21
Develop an interactive arrow button in Unreal Engine 5 by using masks in a translucent UI material, animating texture coordinates with a sine wave, and managing hover and press states.
Changing the Text Style9:45
Import fonts from google fonts, create font assets, and apply font families to ui text in unreal engine 5, then adjust color and hover effects for the menu.
Button Opacity tweaks3:46
Creating the Portrait Textures10:32
Develop portrait textures for an Unreal Engine 5 widget by building circular masks and borders with shadows in Photoshop. Assemble avatar imagery from internet assets to populate the menu textures.
Creating the Avatar Material14:14
Creating the Avatar Button9:46
Creating the Avatar Hover Texture10:33
Adding the Hover Button State for Avatars8:29
Changing the Font for Character Menu7:02
Creating the Exit Button Texture11:04
Creating the Exit Button Widget7:34
Adding the Shadow to the Exit Button1:09
Switch Button creation9:31
Creating the Menu Symbol Texture13:46
Menu Symbol Widget11:26
Creating the Extra Menu Button6:07
Extra Menu Widget7:57
Creating the Item Button Texture mask10:54
Testing the First version of the Item color6:20
Painting Icons with fundamentals25:27
Refining the icon values23:08
Coloring our Icon13:29
Importing our UI texture6:18
Import a UI texture, apply it by updating the material instance, then edit the icon in Photoshop and import PNG via content browser using a mask and alpha.
Creating the Item Widget7:57
Create a new item widget in Unreal Engine 5, organize icons into an items folder, and build the widget with a size box, overlay, and image to control layout.
Fixing our Widget size8:08
Adding Text to the Item8:12
Adjust textures and text placement in Unreal Engine 5 by resizing images, applying transforms, and exporting separate PNG assets for menu items to ensure consistent UI sizing.
Using Grid Canvas to organize elements12:55
Polishing the Avatar Background Texture6:40
Creating the avatar image for items4:08
Creating the Star Texture5:56
Create a star texture in Unreal Engine 5 using Substance, adjust blur with a histogram scan, export as PNG, import as UI item, and apply a masked opacity material.
Changing the Item Widget size3:59
Scale the item widget by 1.5x, adjust text and icons, and remove the size box by replacing it with a child to ensure consistent Unreal Engine 5 menu sizing.
Importing High resolution Item Texture2:02
Adding our Widget to the Orb Blueprint2:52
Fixing the Orb Icon Rotation2:18

Requirements

A basic understanding on Unreal Engine 5 is required.

Description

Made by UNF Games, the first course taught by 3 veterans in the game industry is now available in Udemy.

In this course you will learn how to create a complete Game Feature in Unreal Engine 5 using the Style of Genshin Impact.

This course is not about showing you one part of game development, is about showing you the complete picture.

You will learn Blueprints, Niagara, Materials, UI and how to make them work together to create an entire Game Feature.

UI is one of the most least overlooked topics on Game Development and almost all games have one. To make a great UI is all about User Experience and that can make the difference between someone liking or disliking your game.

Learn Blueprints:

You will learn the best practices used by professionals in Game Dvevelopment to create Widgets and organize them to create any kind of UI. Not only that but you will learn Blueprint Communication and connect your Gameplay with the UI creating a great User Experience.

Learn Niagara and VFX:

You will learn how to decorate your Menu using Niagara and learn Materials to create magical effects. Niagara is one of the most important features in Unreal Engine and learning it can give you a huge advantage to make your games stand out from the croud.

Learn to make UI Art:

You will learn how to decorate your widgets using Photoshop to create nice and stylish themes for your UI and enhance the User Experience.

Who this course is for:

Beginner Game Developers who want to create games in Unreal Engine 5

Developing an Interactive Menu in Unreal Engine 5

What you'll learn

Explore related topics

Course content

Project Setup5 lectures • 45min

Classic UI3 lectures • 52min

Spacial UI10 lectures • 3hr 19min

Orb Animation4 lectures • 58min

Background & Orbs VFX16 lectures • 3hr 17min

Styling the Widgets37 lectures • 5hr 34min

Polishing7 lectures • 37min

Requirements

Description

Who this course is for: