Superliminal inspired Level

Why I made it

Superliminal inspired level gif

I made this small level to recreate the core mechanic of Superliminal (one of my favourite indie games) while also experimenting with post-processing materials. The main concept is that at the end of each level, players pass through a portal that leads to entirely different levels with different aesthetics. In this case, the transition goes from a completely black-and-white room, inspired by Pop Art, back into a colourful fantasy world.

How I made it

Hatching Effect

slide 1

Hatching effect 1

boh

slide 2

First Layer

Hatching effect 2

The shader works by creating different lines positioned on the screen, with their placement determined by the light intensity of the surfaces. Additionally, I've used a Voronoi diagram to enhance the visual effect by introducing a touch of randomness. For a better final result I used four different lines layers (the first one is presented in the second image on the right) with different input values (lines number, thickness, rotation, etc.).

Outline Material

Superliminal inspired level gif

Outline Material portion

This showcases an effect that makes object outlines visible. It is a post-process material applied at the After Depth of Field Blending stage. The effect works by utilizing the depth buffer and normals. The technique involves shifting the original image by one pixel in multiple directions and subtracting the results to detect edges.

Movable Actors

slide 1

Portion of the scaling function

part 1

slide 2

Portion of the scaling function

part 2

As shown in the images, the core logic involves using a for loop proportional to the arbitrary maximum distance. At each iteration, a box trace is used to check for intersections with the held object. If an intersection is detected, the object is resized just before the point of contact. There is also a minimum size check to prevent losing the object held once dropped.

Superliminal inspired level gif

Main portal function

The image showcases the function that updates the render target every frame to accurately display “the other side”. This effect is achieved using a scene component positioned behind the material where the render target is applied, effectively mirroring the player's movement. Additionally, the function checks whether the player is ready to transition by calculating their position and velocity, then comparing them to the position of the mirror scene component. There is also a check to determine if the player is holding an object, if so, the teleport function is disabled.