// RECOMPILE

FOG-OF-WAR MAP REVEAL FX

As part of the game's unique aesthetic, we have created a glitchy "fog-of-war" effect to gradually reveal the terrain as the player explores the mysterious world of The Mainframe.

We use a combination of custom shaders, VFX and Unity's Culling Group API to achieve the desired effect.

STEP #1 - FINDING TILES TO REVEAL

First, we need to determine which tiles (ie. individual blocks of terrain) do we want to reveal. A simple Physics.OverlapSphere() is used, on every frame, from the player's position at a maximum radius of 12. Any tiles further away will not be revealed until the the player moves closer. We then group the results by distance, into the following 2 sets of tiles :-

1. PREVIEWED TILES - At a distance between 11 and 12 units from the player. These tiles are too far away to be revealed, instead we glitch them to hint at nearby unexplored areas.

2. ACTIVATED TILES - At a distance between 0 and 11 units from the player. These are tiles close to the player, so we want to reveal them.

The default Overlap Sphere is shown below.

Any tile within the 11m activation radius (Purple Sphere) is revealed.
Any tiles within the 11m and 12m radius (Yellow Sphere) are too far away to be activated, so instead they are previewed (Red).

The alternative example above shows a much wider preview range between 4m and 11m (Yellow Sphere).
Therefore, the margin of red, glitchy previewed tiles is more numerous in this case.

We also make use of Unity's Culling Group API to only preview/activate tiles that are visible by the camera and not occluded by geometry.

STEP #2 - PREVIEWING TILES

Now that we know which tiles are affected, we need to actually apply the visual transformations.
Tiles that are previewed remain in a flickering, indefinitely looping animation and are colorized red.

A MaterialPropertyBlock with the _GLITCH parameter (containing a value of 1, which represents maximum glitchiness) is sent to all of the MeshRenderers on the affected tiles.

On the shader side :-

The _GLITCH parameter is used to attenuate the level of visual glitching applied to the tile mesh. The above is performed in the vertex function of a surface shader, but you can easily use a regular vertex shader to do this as well.

The glitched mesh is achieved by simply extruding the vertices via their normals by a certain amount. The sine multiplier is used to smoothly vary the amount of extrusion across the world space, so that it doesn't end up looking too uniform. The material properties _GLITCH_SCALE and _GLITCH_INTENSITY are used to tweak the sine frequency and amplitude respectively. Note that the tiles are all static batched, so the v.vertex vector is already in world space at this point.

The last parameter in the above shader code _GLITCH_FLICKER is also sent inside the material property block, and contains a random value between 1 and 1.1 to create a pulsating effect on the vertex extrusion.

The above screenshot shows how the _GLITCH_INTENSITY material property affects the sine amplitude of the vertex extrusion. We use a default value of 3.5, which seems to strike a nice balance between variation and readability.

Finally, to achieve the red colorization, we also pass a color value into the material property block. The color is cycled over time through a pre-defined gradient, which is a global variable on our Bootstrap object and is applied to all tiles.

Finally, here is the _GLITCH_TINT_COLOR parameter being used to apply the emissive color, this time in the fragment function of the shader.

STEP #3 - ACTIVATING TILES

When a previewed tile moves into the activation radius, all we have to do is interpolate the _GLITCH value from 1 to 0 over time and the previously glitched meshes will smoothly transition to their final states. We use Unity's SmoothDamp function on the value sent to the shader's _GLITCH parameter. SmoothDamp is a great, lazy way to animate between values if you want something better than a simple lerp but don't feel like authoring actual animation curves.

Since the _GLITCH parameter controls both the vertex extrusion and the emissive tint in the shader, we eventually, over time end up with a tile mesh with no glitching applied. The "fog-of-war" animation effect is now complete.

STEP #4 - MESH DISTORTION VFX

In addition to the vertex and colorization effects above, we also spawn a bunch of Mesh Distortion Particles, augmenting the effect further by adding a surreal, shimmering layer.

These particle systems stop emitting and are removed from the scene when the surrounding tiles are activated in Step #3. To prevent the distortion from being too chaotic/cluttered, we ensure that these particles are spawned at least 3 units apart.

Link to Mesh Distortion Shader

We also spawn some holographic box-like VFX using the same spread and lifetime to sell the glitchy, virtual world feel even more.

THE FINISHED EFFECT

As well as contributing to the game's glitchy art style and theme, the effect encourages exploration by organically hinting at unexplored areas. The result is a satisfying feeling of progress as the player traverses through the unique, mysterious world of The Mainframe.

Recompile is an atmospheric action exploration game, combining 3D precision platforming, intense combat and environmental hacking mechanics.

Found out more about the game's development on Twitter.