DD 13 A transition to build a dream on

Hi,

If you played our game and ever decided to stand on top of the severed trunk, a small surprise was there waiting for you. A not-a-cutscene-animated-sequence appeared (the use of cutscenes was prohibited by rules of the game-dev course we were originally creating our game for, we blocked player controls afterward) resembling a memory, a vision of the past, maybe some other means of spiritual connection of our character to this place.

Apart from developing a narrative of „Black Resin” there is a technical aspect to it. A world scrambles into a bunch of erratically moving rectangles transitioning into other images. This effect took @Pies some time to prototype and animate, and it was just one sequence. Bound to one place, triggered in specific conditions. And so it was our team decided to replace this somewhat expensive and inefficient approach with a procedurally generated one

As you probably noticed, @Pies art style is quite original, so I was not even aiming for fully recreating it, all I wanted to achieve was „close enough”.

To accomplish this task I decided to use my recently discovered gimmick Unity’s Shader Graph. My plan was to create a transparent sprite shader, that will affect a layer below. It was supposed to crop out portions of an image and slightly offset them from their previous positions so the new image was sliced and scrambled.

My first approach was not very successful as I wanted to try to execute the entire effect within the shader. I quickly realized that this solution is totally not scalable, it was taking an increasingly long time to add subsequent rectangles, required even more variables to be exposed in Unity Inspector, gave me hard time reliably mixing all this stuff into one image, and organizing it into small sub-shaders within this huge shader didn’t help much. It was probably done this way but was not worth the time doing it all along.

In my second approach, I decided to de-centralize the effect, and create a simpler version of the former shader that would focus on just a small part of the processed image. This allowed me to limit the amount of serialized variables to just two 4D vectors that managed the crop and image offset of the slice and were somehow still comprehensible to my alien brain. Then I just covered the original image with an array of thin rectangular sprites and slapped my shader on top of them.

All I needed then was to create a C# script, that would animate exposed shader variables per each sprite/slice covering the original image in a slightly randomized manner. To gain fine control over the effect I used AnimationCurve variables to precisely adjust random ranges over time.

The last step I took was to write a configurator that would create slices automatically and would add some random variation to their vertical size. The solution was not perfect as I had very limited

control over the layout of the slices and their overall size was not always accurately matching the area of the original image (the random factor strikes again), but on the bright side, it was all automated now, so I could just click away until I was happy with the result.

Although the scrambled vision effect may still require some work and tweaking to find the best-looking configuration, it is already usable and easy to implement anywhere in our game. This will definitely help us place more secrets inside game levels and further expand the lore of Black Resin.

With love,

Hubert

 Feel free to contact us in any form or write comments.

 Discord | Twitter | YouTube