Designing a main menu that makes a first impression: background camera animation, blur layering, hover text effects, and display quality settings in UMG.
This project is a main menu UI built in Widget Blueprints with Unreal Engine 5, developed following this Udemy course. Its scope is deliberately narrow — just the main menu — which makes it a useful study in a specific UI design challenge: the main menu is the first thing a player sees, and it needs to communicate the game’s identity before a single second of gameplay has been played. The techniques covered here — animated background camera, background blur, hover animations, and scalable quality settings — are the standard toolkit for making a main menu feel polished and intentional.
You can watch the demo here: YouTube
The Main Menu’s Design Role
Unlike in-game HUDs and settings screens, the main menu has an aesthetic function beyond its utility. It’s not just navigation infrastructure — it’s the game’s first impression. The visual language, the animation style, the typography, and the sound design of a main menu set expectations for everything that follows. A horror game’s main menu should feel unsettling before the player starts. An action game’s menu should feel energetic. A puzzle game’s menu should feel calm and deliberate.
This project approaches the main menu as a designed artifact rather than a functional skeleton, which changes the priorities: the background is animated rather than static, UI elements have hover states with character, and transitions between screens are treated as moments rather than instant swaps.
Background Camera Animation
Rather than a static background image or a looping video, the main menu uses a live Unreal scene rendered behind the UI — an environment the camera slowly moves through while the player is on the menu screen. This technique, common in AAA games, gives the menu a sense of depth and life that a flat background can’t achieve.
The camera animation is a Matinee or Sequencer track that moves the camera through the environment on a loop — typically a slow, cinematic path with gentle motion. The camera actor runs continuously while the main menu level is loaded; when the player starts the game, the menu level is unloaded and replaced with the gameplay level.
The key design consideration is that the background scene must loop seamlessly — the start and end of the camera path need to produce a smooth transition when the animation repeats. A visible loop cut breaks the illusion of a living world.
Background Blur
The background blur sits between the live camera scene and the UI elements — a semi-transparent blur layer that softens the background without obscuring it entirely. In UMG, the BackgroundBlur widget applies a Gaussian blur to everything rendered behind it, controlled by a BlurStrength parameter.
The purpose of the blur is compositional: it keeps the background visually present as atmosphere while ensuring the foreground UI elements remain legible regardless of what’s happening in the background scene. Without blur, a bright or detailed background can compete with menu text and buttons for visual attention. With blur, the background recedes into a soft context that frames the UI rather than fighting it.
Blur strength should be tuned per design — enough blur to separate the UI from the background clearly, not so much that the background becomes an undifferentiated grey wash.
Hover Text Animations
Menu button text uses animation on hover — a visual response when the player moves the cursor over a button. In UMG, hover animations are triggered by the OnHovered and OnUnhovered events, which play a UMG animation forward or in reverse respectively.
The animation itself is typically a scale-up, a color shift, a glow, or a combination — something that clearly communicates interactability without being distracting. For text specifically, a subtle scale increase (1.0 to 1.1) combined with a color shift from muted to bright is a clean and readable hover pattern. More elaborate effects — a slide-in underline, a particle burst — can work but need to match the game’s visual language.
The animation duration matters as much as the animation itself. A hover animation that takes 300ms reads as deliberate and confident. One that takes 50ms reads as jittery. One that takes 600ms reads as sluggish and unresponsive. Tuning these durations is a subtle but meaningful part of making UI feel good.
Settings Menu: Display Quality Scalability
The settings screen exposes Unreal’s built-in scalability settings — overall display quality — through a simple UI. Unreal’s scalability system groups graphics settings into preset levels (Low, Medium, High, Epic) that adjust a wide range of rendering parameters simultaneously: shadow quality, texture resolution, anti-aliasing, post-process effects, and more.
Exposing these presets as radio buttons or a slider is straightforward: the selected quality level maps to a call to UGameUserSettings::SetOverallScalabilityLevel, which applies all the associated settings changes immediately. The current setting is read from UGameUserSettings::GetOverallScalabilityLevel on menu open to initialize the UI to the correct state.
For this scope — a main menu exercise — exposing only the overall quality preset is the right level of granularity. Individual settings (shadow distance, texture quality, resolution scale) add complexity that’s only worth managing when the game’s performance requirements justify fine-grained control.
The settings are persisted via UGameUserSettings::ApplySettings(false) and UGameUserSettings::SaveSettings(), which writes them to the platform’s user preferences file. They reload automatically on the next launch, so the player’s chosen quality level persists across sessions without any custom save game logic.
Widget Blueprint Organization
The main menu is built from three widget classes: the root menu widget that owns the layout and manages which sub-screen is visible, the button widget used for each menu item (reused across all buttons via a single parameterized widget), and the settings widget that is shown as an overlay when the settings option is selected.
This three-widget structure mirrors the composability principle from the Advanced UI Prototype — individual elements are self-contained widgets rather than parts of a monolithic screen. The button widget encapsulates its own hover animation; the settings widget encapsulates its own quality controls. Each can be developed and tested in isolation.
Reflection
The main menu is a focused project precisely because it’s so often treated as an afterthought — functional skeleton built last, styled minimally, shipped with default fonts and flat colors. Dedicating a project to it specifically forces attention onto the design decisions that make it feel like part of the game rather than infrastructure in front of the game.
The techniques here — animated background, blur layering, hover animations, scalability settings — are the same ones appearing in polished commercial games, and they’re not technically complex. The investment is in tuning: getting the camera path to loop cleanly, the blur strength to separate without obscuring, the hover animation duration to feel responsive, the settings presets to cover the relevant hardware range. That tuning is the work.
Nicolás Bertoa 
Leave a comment