An update on the sketch, I hope this 2AM post will make sense

I started with the part that I’m most familiar with in Unreal - the grid shader.

The first step was getting the pattern on the character to look to scale. Initially I started with the grid going in the 3 axis:

The problem was it didn’t really look too appealing and the original reference was only splitting it in 2 directions from the perspective of the laser in the back:

So I downscaled it to 2:

The shader looks at the distance of a point from a coordinate with a whole number and the closer you are, the more of the line there is:

Then the next step was making it disappear one square at the time. Usually when you work on shaders you’re working with gradients and ranges of values, while this is a set number of things (squares) turning on and off. That made it a bit more tricky to translate into shader code.

My first try at masking out the correct areas ended up in a lot of spaghetti nodes that were impossible to understand the next day, but it gave me a clear idea of how to approach it.

You divide the 2 axis into 3 areas each - red is already transparent, green is currently transitioning and blue is still intact:

The laser and disappearing cells go back and forth, so the red and blue columns will be switched in even and odd rows.

The next thing to do is make the transition of a single cell. I’m using what’s left after the decimal point of the column value mixed with a bit of noise to go from a visible cell to an invisible one:

And after connecting it to the opacity mask:

It’s driven by 2 values “Row” and “Column”. Initially, I wanted to calculate each of them from a single value, but if I do it in the blueprint I’ll be able to also use it for placing the end of the laser.

Now on to setting up the teleport mechanic in the blueprint!