Hades 2 - Character & Dialogue Box
Tools:
Unreal Engine 5, UMG, Material Graph, Photoshop
Summary
This is a material study inspired by Hades 2. After playing the game, I wanted to recreate a specific interaction effect, the shine characters have when you talk to them. Along the way, I also built the shaders and animations used in the dialogue box.
In this breakdown, I’ll go over each effect and animation. The character setup includes the main sheen pass, glow accents, a slight distortion on a highlight texture, an eye flipbook animation, and Niagara particles for the laurel effects. The dialogue box have layered glows, magical line animations, and smooth in-and-out transitions.
Character Animation
When I looked at the footage from Hades 2, I broke down the interaction effect into several key layers. Besides the main sheen pass, the characters also show:
A subtle distortion moving across their highlight areas
Soft glow accents scattered around the silhouette
A “magic” flow on the illuminated left side
Blinking eyes using a flipbook animation
Niagara particles emitting the laurel effects during interactions
For the distorted highlights, I recreated this using a simple UV distortion applied to a highlight texture. The glow are handled with a basic particle material that uses a hue shift. In the opacity channel, I drive a texture to get that same wavy movement seen in the game.
Sheen Breakdown
To recreate the sheen effect from Melinoe and the rest of the pantheon in Hades, I first recorded some gameplay to study how the highlights behaved. It’s a very specific sheen because it has these small flares. They look like they grow and shrink as the sheen passes over them.
To match that, I made a channel-packed texture where the flares are split between the R and G channels, and the B channel holds a soft glow. Then I built a sheen mask with dark edges and a bright center, so the flares would react the same way, growing as the white center passes over them and shrinking as it moves away.
In the shader, I tint each channel separately and boost the overall color values to get that strong, overexposed magical sheen.
Sheen Material Instance
Another small detail I fell in love with is Melinoë’s eye blink. In the game, her eyes probably use a simple flipbook animation, so I recreated that as well in Photoshop.
I painted a 2×2 flipbook texture and built a shader to handle the animation. Inside the shader, I animate the flipbook using a controlled Sine wave tied to Time. By adjusting the frequency and amplitude, I can smoothly transition through the four frames of the blink cycle.
I also exposed parameters for:
Frame duration
Blink speed
Period control (to decide when she should blink or stay open)
This gives full control over how often and how quickly the character blinks, just like in Hades 2.
Eye Animation Material Instance
Niagara System
I used the Niagara UI Renderer to place a particle system directly inside UMG. The particle material itself is simple, a channel-packed texture where the R channel holds the center of the leaf texture where I apply a red-orange gradient with an edge-dissolve mask, and the G channel is the same leaf sshape but bigger where I tint it fully black but uses the same dissolve mask with a slight offset.
This offset lets me animate both dissolves dynamically using just one parameter. In the Niagara System, I started with the Fountain emitter, assigned my material, added Curl Noise for movement, and tweaked the spawn rate, particle size, and lifetime to match the game’s style. After that, I used the Niagara UI Renderer to place the system directly into my widget (WBP), giving me fully functional particles inside the UI.
Dialogue Box
The dialogue box uses fewer layers than the character, but the transitions were the most challenging part because of how detailed they are. To recreate the in-and-out animations, I started with the R channel of a sine wave, with controls for wavelength and amplitude. Then I subtracted the G channel of the wave to transform the shape into sharp spikes.
I exposed parameters for spike count, feathering, and overall mask progression so the transition could be animated smoothly. This gave me the base for the black spike silhouette. For the shiny inner spikes, I duplicated that same base, offset its progression, subtracted them to get the intersection, and tinted that region to match the game’s bright middle glow. After that, I simply layered everything together to build the full transition effect.
The magic lines are created using a Perlin Curl Noise with all three channels and applying a Hue Shift to introduce subtle color variation. I combine this with the mask for the magic lines. The glows layer uses a simple glow texture, But the opacity channel has 2 panning Perlin noises, each moving at different speeds with different offsets and tiling values.
All of these noise layers are multiplied together to create that organic, shifting glow. I reuse the same color setup as the character sheen, and the glow mask is animated by feeding these moving noise patterns into it, giving the dialogue box that magical, liquid-light movement.
The WBP
To test everything together, I created a main widget that contains both the character and the dialogue box widgets. Each one uses its own materials and animations. In this main WBP, I added simple BP logic so that when I press a button, it triggers the in animation for the effect, and when I press it again, it plays the out animation.
WBP
Conclusion
Recreating this effect was an incredibly rewarding experience. By studying the UI interactions frame by frame, I gained a new appreciation for just how many subtle layers and thoughtful details Supergiant puts into their work. Seeing how much care, craft, and personality lives inside a single UI component was truly inspiring, and it reminded me why I love working with UI and materials so much.
Hades 2 - Character & Dialogue Box
Tools:
Unreal Engine 5, UMG, Material Graph, Photoshop
Summary
This is a material study inspired by Hades 2. After playing the game, I wanted to recreate a specific interaction effect, the shine characters have when you talk to them. Along the way, I also built the shaders and animations used in the dialogue box.
In this breakdown, I’ll go over each effect and animation. The character setup includes the main sheen pass, glow accents, a slight distortion on a highlight texture, an eye flipbook animation, and Niagara particles for the laurel effects. The dialogue box have layered glows, magical line animations, and smooth in-and-out transitions.
Character Animation
When I looked at the footage from Hades 2, I broke down the interaction effect into several key layers. Besides the main sheen pass, the characters also show:
A subtle distortion moving across their highlight areas
Soft glow accents scattered around the silhouette
A “magic” flow on the illuminated left side
Blinking eyes using a flipbook animation
Niagara particles emitting the laurel effects during interactions
For the distorted highlights, I recreated this using a simple UV distortion applied to a highlight texture. The glow are handled with a basic particle material that uses a hue shift. In the opacity channel, I drive a texture to get that same wavy movement seen in the game.
Sheen Breakdown
To recreate the sheen effect from Melinoe and the rest of the pantheon in Hades, I first recorded some gameplay to study how the highlights behaved. It’s a very specific sheen because it has these small flares. They look like they grow and shrink as the sheen passes over them.
To match that, I made a channel-packed texture where the flares are split between the R and G channels, and the B channel holds a soft glow. Then I built a sheen mask with dark edges and a bright center, so the flares would react the same way, growing as the white center passes over them and shrinking as it moves away.
In the shader, I tint each channel separately and boost the overall color values to get that strong, overexposed magical sheen.
Sheen Material Instance
Another small detail I fell in love with is Melinoë’s eye blink. In the game, her eyes probably use a simple flipbook animation, so I recreated that as well in Photoshop.
I painted a 2×2 flipbook texture and built a shader to handle the animation. Inside the shader, I animate the flipbook using a controlled Sine wave tied to Time. By adjusting the frequency and amplitude, I can smoothly transition through the four frames of the blink cycle.
I also exposed parameters for:
Frame duration
Blink speed
Period control (to decide when she should blink or stay open)
This gives full control over how often and how quickly the character blinks, just like in Hades 2.
Eye Animation Material Instance
Niagara System
I used the Niagara UI Renderer to place a particle system directly inside UMG. The particle material itself is simple, a channel-packed texture where the R channel holds the center of the leaf texture where I apply a red-orange gradient with an edge-dissolve mask, and the G channel is the same leaf sshape but bigger where I tint it fully black but uses the same dissolve mask with a slight offset.
This offset lets me animate both dissolves dynamically using just one parameter. In the Niagara System, I started with the Fountain emitter, assigned my material, added Curl Noise for movement, and tweaked the spawn rate, particle size, and lifetime to match the game’s style. After that, I used the Niagara UI Renderer to place the system directly into my widget (WBP), giving me fully functional particles inside the UI.
Dialogue Box
The dialogue box uses fewer layers than the character, but the transitions were the most challenging part because of how detailed they are. To recreate the in-and-out animations, I started with the R channel of a sine wave, with controls for wavelength and amplitude. Then I subtracted the G channel of the wave to transform the shape into sharp spikes.
I exposed parameters for spike count, feathering, and overall mask progression so the transition could be animated smoothly. This gave me the base for the black spike silhouette. For the shiny inner spikes, I duplicated that same base, offset its progression, subtracted them to get the intersection, and tinted that region to match the game’s bright middle glow. After that, I simply layered everything together to build the full transition effect.
The magic lines are created using a Perlin Curl Noise with all three channels and applying a Hue Shift to introduce subtle color variation. I combine this with the mask for the magic lines. The glows layer uses a simple glow texture, But the opacity channel has 2 panning Perlin noises, each moving at different speeds with different offsets and tiling values.
All of these noise layers are multiplied together to create that organic, shifting glow. I reuse the same color setup as the character sheen, and the glow mask is animated by feeding these moving noise patterns into it, giving the dialogue box that magical, liquid-light movement.
The WBP
To test everything together, I created a main widget that contains both the character and the dialogue box widgets. Each one uses its own materials and animations. In this main WBP, I added simple BP logic so that when I press a button, it triggers the in animation for the effect, and when I press it again, it plays the out animation.
WBP
Conclusion
Recreating this effect was an incredibly rewarding experience. By studying the UI interactions frame by frame, I gained a new appreciation for just how many subtle layers and thoughtful details Supergiant puts into their work. Seeing how much care, craft, and personality lives inside a single UI component was truly inspiring, and it reminded me why I love working with UI and materials so much.
Hades 2 - Character & Dialogue Box
Tools:
Unreal Engine 5, UMG, Material Graph, Photoshop
Summary
This is a material study inspired by Hades 2. After playing the game, I wanted to recreate a specific interaction effect, the shine characters have when you talk to them. Along the way, I also built the shaders and animations used in the dialogue box.
In this breakdown, I’ll go over each effect and animation. The character setup includes the main sheen pass, glow accents, a slight distortion on a highlight texture, an eye flipbook animation, and Niagara particles for the laurel effects. The dialogue box have layered glows, magical line animations, and smooth in-and-out transitions.
Character Animation
When I looked at the footage from Hades 2, I broke down the interaction effect into several key layers. Besides the main sheen pass, the characters also show:
A subtle distortion moving across their highlight areas
Soft glow accents scattered around the silhouette
A “magic” flow on the illuminated left side
Blinking eyes using a flipbook animation
Niagara particles emitting the laurel effects during interactions
For the distorted highlights, I recreated this using a simple UV distortion applied to a highlight texture. The glow are handled with a basic particle material that uses a hue shift. In the opacity channel, I drive a texture to get that same wavy movement seen in the game.
Sheen Breakdown
To recreate the sheen effect from Melinoe and the rest of the pantheon in Hades, I first recorded some gameplay to study how the highlights behaved. It’s a very specific sheen because it has these small flares. They look like they grow and shrink as the sheen passes over them.
To match that, I made a channel-packed texture where the flares are split between the R and G channels, and the B channel holds a soft glow. Then I built a sheen mask with dark edges and a bright center, so the flares would react the same way, growing as the white center passes over them and shrinking as it moves away.
In the shader, I tint each channel separately and boost the overall color values to get that strong, overexposed magical sheen.
Sheen Material Instance
Another small detail I fell in love with is Melinoë’s eye blink. In the game, her eyes probably use a simple flipbook animation, so I recreated that as well in Photoshop.
I painted a 2×2 flipbook texture and built a shader to handle the animation. Inside the shader, I animate the flipbook using a controlled Sine wave tied to Time. By adjusting the frequency and amplitude, I can smoothly transition through the four frames of the blink cycle.
I also exposed parameters for:
Frame duration
Blink speed
Period control (to decide when she should blink or stay open)
This gives full control over how often and how quickly the character blinks, just like in Hades 2.
Eye Animation Material Instance
Niagara System
I used the Niagara UI Renderer to place a particle system directly inside UMG. The particle material itself is simple, a channel-packed texture where the R channel holds the center of the leaf texture where I apply a red-orange gradient with an edge-dissolve mask, and the G channel is the same leaf sshape but bigger where I tint it fully black but uses the same dissolve mask with a slight offset.
This offset lets me animate both dissolves dynamically using just one parameter. In the Niagara System, I started with the Fountain emitter, assigned my material, added Curl Noise for movement, and tweaked the spawn rate, particle size, and lifetime to match the game’s style. After that, I used the Niagara UI Renderer to place the system directly into my widget (WBP), giving me fully functional particles inside the UI.
Dialogue Box
The dialogue box uses fewer layers than the character, but the transitions were the most challenging part because of how detailed they are. To recreate the in-and-out animations, I started with the R channel of a sine wave, with controls for wavelength and amplitude. Then I subtracted the G channel of the wave to transform the shape into sharp spikes.
I exposed parameters for spike count, feathering, and overall mask progression so the transition could be animated smoothly. This gave me the base for the black spike silhouette. For the shiny inner spikes, I duplicated that same base, offset its progression, subtracted them to get the intersection, and tinted that region to match the game’s bright middle glow. After that, I simply layered everything together to build the full transition effect.
The magic lines are created using a Perlin Curl Noise with all three channels and applying a Hue Shift to introduce subtle color variation. I combine this with the mask for the magic lines. The glows layer uses a simple glow texture, But the opacity channel has 2 panning Perlin noises, each moving at different speeds with different offsets and tiling values.
All of these noise layers are multiplied together to create that organic, shifting glow. I reuse the same color setup as the character sheen, and the glow mask is animated by feeding these moving noise patterns into it, giving the dialogue box that magical, liquid-light movement.
The WBP
To test everything together, I created a main widget that contains both the character and the dialogue box widgets. Each one uses its own materials and animations. In this main WBP, I added simple BP logic so that when I press a button, it triggers the in animation for the effect, and when I press it again, it plays the out animation.
WBP
Conclusion
Recreating this effect was an incredibly rewarding experience. By studying the UI interactions frame by frame, I gained a new appreciation for just how many subtle layers and thoughtful details Supergiant puts into their work. Seeing how much care, craft, and personality lives inside a single UI component was truly inspiring, and it reminded me why I love working with UI and materials so much.