Scan Line Menu transitions.

My artist for my game wants me to do a menu transition using scan lines like in the above video. He designed that in After Effects. I have the black to white and white to black videos, and I’ve imported them into the engine, but I have to admit that I don’t fully understand how masks and all that work, so I’m lost in trying to set this up the way he wants. Any direction on this would be helpful.

you want to have this effect on an ui-transition, right? that means all the elements we see here are interactive buttons. i am not an expert in UI- unreal design, but maybe a kind overlay shader is what you are looking for, otherwise the material on each element must have a dynamical material with texture coordinate materials that can be altered (stretched) with an accessible parameter and probably a masked function. Generelly in materials you could substract a second texture (like stripes) which you substract and connect to the opacity of the material, i am not sure if this is compatible for ui materials though.

  1. On your HUD or Menu root container, create a RetainerBox. Everything that needs effects can be child (if you want seperate on each need to create a retainer for each element like button)
  2. Create a new Material UI Domain and assign to retainer.

It will simply post process it as example

A Retainer box with some child
image

Assing material to retainer

Example shader

Result
555

If artist a bit technical give shader so can play with it, I have some over the top glitch effects as material function here

Let me know if it helps

3 Likes

REALLY cool use of RetainerBox to get that material everywhere.

1 Like

Thanks! It really breaks the artificial barrier between HUDUMG and 3D world also, I use on my hud heavyly to achieve a glass overlay like HUD, didn’t start polish yet since I am still dealing with gameplay feels however added a gif on the snippet of its results.

Thank you so much. This seems like it might work. I will be trying it out later today and I will let you know. I’m interested also in that glass shader you mentioned, as our HUD is supposed to on a scouter type lenses for the player and we haven’t been able to nail down the look of the HUD quite yet and this sounds like it would do the trick.

Sure, you can find over here, still making tweaks to it and let me know if you manage something better that we can use aswell.

https://dev.epicgames.com/community/snippets/8N5o/unreal-engine-distortuvui_mf
Demo1

Will do. Just tried the scan lines, worked like a charm. Thanks again!

1 Like

One thing about the distortion Mat (I wasn’t able to comment on that post), the nodes that say “Function Preview” don’t carry over when you past it into a Material FYI. Also, what material domain and blend mode should it be set to?

blendmode should be transparent, not sure masked will work (can be)

image