Deadlock - Hero Select Screen
Tools: Unreal Engine 5, UMG, Material Graph, Figma & Adobe Photoshop
Tools: Unreal Engine 5, UMG, Material Graph, Figma & Adobe Photoshop
Tools: Unreal Engine 5, UMG, Material Graph, Figma & Adobe Photoshop
Overview
Overview
This is a UI study of the hero select screen from the closed early access Deadlock game developed by Valve. My goal in this study was to re-create the select screen as accurately as possible with the same layout, effects and animations and implement it in Unreal Engine 5.
This was a very fun and insightful study to take on and I am quite proud of the result as it has honed my creative thinking on blending UI design and technical UI.
This is a UI study of the hero select screen from the closed early access Deadlock game developed by Valve. My goal in this study was to re-create the select screen as accurately as possible with the same layout, effects and animations and implement it in Unreal Engine 5.
This was a very fun and insightful study to take on and I am quite proud of the result as it has honed my creative thinking on blending UI design and technical UI.
Screen Layering Process
Screen Layering Process
When starting the UI study, I decided to dissect the screen into independent visual layers. This helped me to better understand what the original designer was thinking when designing the screen and I was able to notice the key design principles used for the final composition.
The UI/UX principles being:
Visual Hierarchy - The large character render establishes the primary focal point.
Progressive Disclosure - Decorative layers remain behind gameplay critical information.
Contrast Management - Gradients, shadows and blur improve readability without excessive opacity.
Depth Layering - Foreground, midground and background elements create separation while avoiding clutter.
Modularity - Every layer can be animated, disabled or updated independently.
Performance Awareness - Separating the effects into independent layers allows selective optimization and easier iteration.
The design is brilliant because by isolating decorative effects from interactive components, the interface remains readable during hero selection while retaining a dynamic, high quality presentation. This layered workflow also streamlines iteration in Unreal Engine, allowing individual effects and UI elements to be modulated without impacting the overall composition.
When starting the UI study, I decided to dissect the screen into independent visual layers. This helped me to better understand what the original designer was thinking when designing the screen and I was able to notice the key design principles used for the final composition.
The UI/UX principles being:
Visual Hierarchy - The large character render establishes the primary focal point.
Progressive Disclosure - Decorative layers remain behind gameplay critical information.
Contrast Management - Gradients, shadows and blur improve readability without excessive opacity.
Depth Layering - Foreground, midground and background elements create separation while avoiding clutter.
Modularity - Every layer can be animated, disabled or updated independently.
Performance Awareness - Separating the effects into independent layers allows selective optimization and easier iteration.
The design is brilliant because by isolating decorative effects from interactive components, the interface remains readable during hero selection while retaining a dynamic, high quality presentation.
This layered workflow also streamlines iteration in Unreal Engine, allowing individual effects and UI elements to be modulated without impacting the overall composition.
Character Layering Process
Character Layering Process
A big challenge was that the character renders in the game are 3D models. Having no access to the models, I had to improvise and create 2D layers for each character. Minus the character backgrounds, each character has a layer of unique material effects, flipbook shadow and noise mask material instances.
A big challenge was that the character renders in the game are 3D models. Having no access to the models, I had to improvise and create 2D layers for each character.
Minus the character backgrounds, each character has a layer of unique material effects, flipbook shadow and noise mask material instances.
Hero Card Breakdown
Hero Card Breakdown
The 'Hero ID Material Animation' is created by using a custom rotator node and connecting the rotated values output to the texture UVs input. The ping-pong animation is the result of the rotation angle input on the custom rotator being animated by a multiplication of the time node, sine node and scalar parameters such as: speed and rotation amount.
The 'Hero ID Material Animation' is created by using a custom rotator node and connecting the rotated values output to the texture UVs input.
The ping-pong animation is the result of the rotation angle input on the custom rotator being animated by a multiplication of the time node, sine node and scalar parameters such as: speed and rotation amount.
Tunnel Warp Material Breakdown
Tunnel Warp Material Breakdown
This background material is a procedural radial tunnel animation where the center appears infinitely deep while the outer edges continuously flow from the middle which adds on to guiding the player's eye directly to the selected hero.
The center can be tweaked by using a transform position node and the motion is generated entirely through UV distortion with manipulated nodes like voronoi noise and radial gradient exponential by using scalar parameters.
This background material is a procedural radial tunnel animation where the center appears infinitely deep while the outer edges continuously flow from the middle which adds on to guiding the player's eye directly to the selected hero.
The center can be tweaked by using a transform position node and the motion is generated entirely through UV distortion with manipulated nodes like voronoi noise and radial gradient exponential by using scalar parameters.
Thank you for your time.
Thank you for your time.
