How to achieve this kind of fade?

It is from Shinobi 1. Shinobi 1 Arcade Gameplay Playthrough longplay - YouTube

It is between transitions. I want to think you would call it some kind of “mosaic” fade. It seems like it is a bunch of black squares that first go to a non solid block pattern and then gone completely. But as for which ones in order it seems fairly random, or at least done so complex it appears random.

I see no way to do it without it being very complicated lol. Any ideas? thx

Off the top of my head I am thinking a widget, with one of the boxes either a horizontal box or vertical box, and try to make them fill the screen uniformly. And also have the other state for the block fill up the screen. Then when triggered it randomly picks which for the half state. then very small delay, and all the ones that were turned half set not visible and the ones that were not picked go half then delay and set them not visible.

I think you should use a material instead through post process (i think post process is correct here). You can then use scene depth/text to do what you want. I also wanted to do a level transition from portal 2 but getting a 3d effect rotating was hard so I gave up :grinning_face:

Hey,

It has been a few days but I think I might have something you could use to start with at least. Had to test few different approaches and used some of the free tokens to finally nail it. :melting_face:

I created a material that will represent the grid (size) and give each cell a unique position value values and a random start point for transition from translucent to opaque (full black). You can try different textures for noise but for now they will all have the same pattern.

I use blueprint code inside widget to “drive” the transition. I created an animation, purely to be used as a timer for the material transition (Mosaic Progress). I have my set to length of 4 and I just used color and opacity, values are the same at start and end. It’s just used for time.
If you need more control over the length of the transition you could set animation length to 1second and then have a variable plugged into play rate, which would drive your speed (0.5 = 2s transition, 2 = 0.5s transition), but that’s optional.

If you need a comprehensive breakdown of what does each thing do in this material, I can provide is separately, otherwise this reply would be many screens long, lol.

Below the material graph. Material is set to User Interface / Translucent

Widget. Canvas + Image with Anchors set to entire screen.

END RESULT CLIP

Some textures can produce really nice effect. Rest is up to timing and values.

Hope you find this somewhat helpful.

Hey Don, first off thanks for doing this! I really like what I see on the video, it seems that you nailed it essentially. I see you said if I have any questions I just need to ask. I do naturally have some.

When you said

Ok the widget overall will be 1920x1080 to cover a full screen HD. I do not really understand what all is going on in the Material so please start there. The widget which I called Shinobifade has been made and added to viewport off of eventbegin play of the level BP.

I tried to set some of these nodes up but they look different than what you got. I use UE4, this must be 5.

Here is a project started for it Download ShinobiFade.uproject | LimeWire

It would be awesome if you could transfer that logic into this. I will study it and try to see how you achieved this. Thanks

Sure thing, I will do my best to break it down, please give me a day or two to reply again.

I will need to redownload 4.27 but that is not a problem. I will reprodude this effect to see if anything changed between 4 and 5.

I did use AI to help me out, especially with these magic numbers. :sweat_smile:

As for your widget, you could use the one you have now as long as have a reference to it, so you can run the event triggering this transition effect. I believe blueprint code will be exactly the same or very close. I will verify that as well as material nodes.

Btw, you can also run this in reverse, say when the level is loaded. It would start full black and transition exactly the same way until every cell is transparent.

Sorry for the delay. I did spend some extra time on the material, which makes it a bit simpler.

Set your Material Domain to: User Widget
Blend Mode to: Translucent

First of all, I can confirm that everything is exactly the same between Unreal 4 and 5 versions.

As for the Widget and Screen Resolution, you need to set the anchors to entire screen and remove all offset. This will then stretch the image to fit entire game window/screen.

Here a new graph material. Should be straight forward to understand as I simplified it a bit. I do use Named Reroute nodes to make this more readable (Grid Base / Square Pattern). Every other node can be easily found and is commonly used inside material.

In your Grid Base you define how many squares you want your material to have. My default is 60,34 (X/Y = R/G). We use Component Mask because we only need these two values. We use this Vector Parameter just for that, we do not need the Blue and Alpha channels, hence the mask. This is a parameter so you can easily make changes on the Material Instance.

The chain ending with Square Pattern, is what’s making everything appear the way it does (even squares), you can skip some nodes and try things out or use preview node tool to see exactly what each step does (Change Fade Progress Value from 0 to say .33 or .55, 1 is max for effect to be visible).

Last part leading to Opacity is what’s controlling the transition from translucent to opaque. We use the widget blueprint animation to drive the value of Fade Progress which is combined with a value for each square (cell). Each cells has a different value assigned to it and that is what produces the effect of randomness. It’s not entirely random, the effect will be the same every time you play it, unless you change the texture.

I did realize that you need a texture that doesn’t have any white and black spots, otherwise the math will break and that part of the screen will be either full black or fully translucent.

Ideal textures would be rubber texture from ue4 or even grass. You can play around with a texture that has say a circle with gradient in the middle and everything around it is full black. This should produce effect similar to this.

Also a texture with gradient going vertically produces a nice effect.

(This is after fade effect finished (I run it backwards at start of the game).

Don’t forget to create a material instance from the finished material and make sure to apply it to the widget in designer.
Widget blueprint code is exactly the same, please refer to screenshot from earlier post.

Sorry but I’m not going to stick this in a project, that is something you will need to do yourself. :person_shrugging: If you’re struggling to find nodes, hit me up on DM and I will list all of them. Deal?