Analog Horror Shaders

Analog Horror Shaders

Written by: Lara Doorenspleet

Table of contents

  1. Introduction
  2. Background
    1. Analog
    2. Analog horror
    3. Analog horror games
  3. The TV Shader
    1. GLSL to HLSL
    2. Shader code
    3. Showcase
    4. Variations
  4. The Lines Shader
    1. Calm vs chaotic
    2. View filter
  5. Final showcase
  6. Retrospective
    1. Research & Development
    2. Guild
  7. Table of contents

1. Introduction

I’ve always enjoyed horror games. Everyone gets scared by different things, and I’ve always been curious about what horror is the most effective. I’ve consumed a lot of horror media, such as movies, games, etc. The subject of this blog was inspired by my love of horror. The Mandela Catalogue and Puppet Combo were my primary sources of inspiration. I go into detail about these two in the background chapter, so I won’t go into detail here. The Mandela Catalogue is an analog horror YouTube series by Alex Kister. Puppet Combo is a game studio run by Benedetto Cocuzza that creates 80s low poly style short horror games. Here are some images to help you comprehend what I’m talking about.

Over the course of a few weeks, I developed a number of shaders that can be used in analog horror games. In this blog post, I will go over all of the shaders. I made them all in Unity 3D. Thank you for taking the time to read this blog post and enjoy.

2. Background

The predecessor of the digital technology we know and use today was analog technology. A wide range of devices are part of analog technology. Because of this, I will only discuss technology that is relevant to the development of analog horror games.

2.1 Analog

The best method to explain what analog is, is to compare analog to digital technology. Although they both function as information-carrying waves, they do so in different manners. This is really well illustrated in the image below. Digital waves use intervals that are converted into numbers, whereas analog waves record everything exactly as it is. The deterioration is one of the main distinctions between analog and digital technology. Unlike analog recording, which deteriorate over time, digital files do not. This explains why many actual analog recordings frequently have gaps in them or can’t be salvaged at all.

What’s the difference between analog and digital technology? (2000, April 1)

The VHS was a very popular analog device. Video Home System is what is stands for. The VHS was first made available in Japan in 1970 by JVC. Around the 90s it was very common for people to have VHS tapes. Up until the last VHS release in 2006, VHS remained widely used. The success of the DVD subsequently overtook the market.

Sommerfeld, K. (2020, December 29). The rise and fall of the VHS.

To make a collection of screenshots showing how real VHS footage looks, I watched several videos of actual VHS footage. The first images was taken at Kansas City, Missouri’s Metro North Mall. This screenshot demonstrates how challenging it is to make out the patterns on the ground and the features on people’s faces. Aside from that the video was well-preserved and had minimal to no damage.

This image was taken in 1986 in Portland, Oregon’s Beaverton High School. This one is obviously of much lesser quality than the first one. The cameraman also acknowledged that he was just a student having fun with a camera. The video has a sort of blurry sheen that makes many objects and individuals look more like shapes.

The Gowans Family’s home video is shown in the final screenshot. The recordings belong to Jacob Gowan’s Father. Given that Jacob Gowan was born in Michigan, I believe this was shot there. As you can see with this footage there are a lot of lines. This was caused by the cameraman walking. The sides of the video have also suffered some degradation.

2.2 Analog horror

Due to the fact that analog horror is technically a subgenre of a subgenre, we will have to take a slight detour. The fake horror documentary that launched the found footage genre in 1980 raised doubts about its veracity. This is due to the fact that it had never been done fore, which gave rise to the found footage subgenre. This subgenre changed the horror scene giving rise to movies like the Blair witch project and paranormal activity.

Perry, R. (2022, March 18). Found Footage Films: A brief and twisted history.

Now, analog horror is frequently in found footage style, but this isn’t an absolute rule. In comparison to found footage, analog horror has a more defined aesthetic. As you might have guessed, the style of analog horror is solely based on analog technology. Primarily in the VHS format, but also with retro video games and cassettes. The goal of analog horror is to evoke fear by playing to nostalgia. Creating a similar, secure environment while subtly altering it and using this to disturb you.

Williamson, S. (2023, February 7). What is analog horror? The subgenre of ‘Skinamarink’ explained.

An example is the best method to explain something. I want to take a look at a video series that has giving the analog horror genre its spike in popularity recently: the Mandela catalogue. Alex Kister started the series a year ago called “The Mandela Catalogue” on YouTube.

The Mandela Catalogue Vol. 1 is depicted in the image below. As you can see, there are lines in a few places as opposed to the entire screen. Similar to the last real VHS image. In actual VHS footage, depending on how much the camera is moved, this may indeed occur. This is a video taken during a car ride, the camera won’t be moved excessively but just enough to indeed produce these lines this way.

The following picture is from The Mandela Catalogue Vol.333. As you can see, it does a good job reproducing VHS footage. Similar to actual footage, this has a blurry like effect that makes it difficult to distinguish fine details. It lies a bit between real VHS screenshot 1 and 2.

2.3 Analog horror games

Analog horror games has become a popular horror game subgenre. For developers, there are many solid reasons to create games in this subgenre. The graphics are one of the reasons. The first PlayStation was introduced in 1995, about the same era as the VHS. This explains why a number of analog horror games feature graphics from the PlayStation 1 era. This provides the games great performance and makes it possible for almost everyone to play the games. Additionally, it is affordable because, as is obvious, very highly detailed graphics that almost resemble real life are very expensive. Making games that resemble PlayStation 1 games can also bring nostalgia for the players.

Cohen, D. (2019, November 22). The history of the Sony PlayStation.

Now let’s examine a superb example. A video game studio called Puppet Combo, run by a solo developer Benedetto Cocuzza. I’ll quote from the Puppet Combo website: “Puppet Combo is a game studio inspired by 80s VHS era horror, slasher movies, and retro low-poly survival horror games”. Their video games feature VHS tapes inside the game as well as VHS effects over the screen. You can choose from a variety of effect with Puppet Combo games. I’ll demonstrate the variations in effects from one of their games: Stay out of the House. The game has an off option in addition to 4 effect options. The images below show the variations; I took them while I was playing the game, so that is their source.

Raynor, K. (2021, September 21). Indie developers are doing their best: An interview with Lantern Studio and Puppet Combo. & Cocuzza, B. (n.d.). FAQ.

3. The TV Shader

Because of the following, I refer to this first shader as the TV shader. I wanted to replicate an effect used in the Mandela Catalogue. The following effect appeared in Alex Kister’s video called Exhibition. The image demonstrates why I name it the TV shader, as the scene features an old TV on the ground.

Kister, A. (2021, 31 October). Exhibition.

3.1 GLSL to HLSL

During my research, I began to look at shaders created by others. Shadertoy was shown to me by a guild teammate. Shadertoy is a website where people can create and share shaders using GLSL code. I use Unity, which does not use GLSL but rather HLSL. I did discover converters for this, but they were ineffective. As a result, I learned how to convert GLSL to HLSL. I did this by watched a tutorial by The Art of Code called How to Convert a Shader from Shadertoy to Unity. It required a lot of trial and error for me to get the hang of this.

The Art of Code. (2014, December 14). How to covert a shader from Shadertoy to Unity.

Krzysztof Narkowicz’s Shadertoy shader was used in part. I’ll demonstrate the distinction between the GLSL code and the translated HLSL code. The GLSL code is on the left, and the translated HLSL is on the right. Some variations are minor, while others necessitate substantial coding changes.

Narkowicz, K. (2015, 29 July). [SIG15] Mario World 1-1.

3.2 Shader code

First I began simple by making a white cube. This was accomplished easily by using: fixed3 color = RGB(255, 255, 255). This is how we get the image called Step 1 – Cube. Now I’ll go over the code for each stage, the results of which can be seen in the image gallery below.

The curve in step 2 creates the impression of an old television. If you look at old televisions, you will notice that the edges are curved compared to todays squared televisions. Making these black curves will replicate this old television effect.

Let’s start with the code in fixed2 CRTCurveUV. This code ensures that the effect is centered. It also determines the size of the black curves as well as the white background. The length and size of the dark curves are determined by the numbers 6 and 4 in the second line. In the same line, I use mathf.abs, which returns the absolute value of the uv’s y and x in this instance. Now unto the fixed4 frag section. The if statement is straightforward. It is for each corner to place the black corners with the color code 0, 0, 0. The color of the corners can be altered here.

Step 2 – Code

A vignette is defined by darker areas that resemble shadows. This softens the dark corners and blends them together exquisitely. There is a void with three lines of code that is added to the fixed4 frag to draw it. The number 16 in the second line determines how dark the vignette is; the higher the number, the brighter the vignette. Mathf.clamp secures a value between a minimum and maximum number. The color of the vignette is taken from the same color as the background, so when you alter that color, the vignette goes along with it. The vignette would appear out of place otherwise.

Step 3 – Code

This code functions similarly as the vignette code. The first line fixed scanline generates horizontal lines. The 240 number represents the number of lines, the higher the number, the denser the lines become, and the lower the number, further apart the lines become. It employs mathf.clamp once more, as in the vignette code. The grille is for the vertical lines. This functions a little differently because the grille creates the effect of the lines ‘moving’ when viewed from various angles. Old televisions have the same effect. This effect can be seen in the showcase after this because screenshots alone won’t describe this perfectly.

Step 4 – Code

3.3 Showcase

First, I’ll show you a video of the shader in action so you can see how the effects change as you move around. When you look at the shader from various angles, the lines appear to move, simulating real old televisions from the 1980s.

Multiple screenshots of the shader in various situations are shown below. I used several environments from the Unity asset store, which are all linked in the captions. The shader can also be used as an illumination source. It is quite bright in comparison to some of the scenes, as seen in the screenshots. This is done by design because a TV in a dark room will still be bright.

3.4 Variations

The background color can be changed by altering the RGB code in the shader. This can be accomplished in the line: fixed3 color = RGB(255, 255, 255). The following images are some examples of various background colors. You can look up RGB codes or experiment with the numbers to get the desired color.

Copes, F. (2020, 21 May). RGB Color Codes.

The vignette’s hue can be altered to make it darker or lighter. This can be accomplished with the following line: vignette = clamp(pow(16.0 * vignette, 0.3). 0.0, 1.0). By altering the amount of the number 16. The images below show how it appears when the number is changed to 1 and 30.

4. The Lines Shader

The lines shader got its name because I wanted to recreate the look of scanlines on old TVs and VHS tapes. Below are two examples of scanlines. The left is more consistent and close together, while the right is more chaotic and far apart. I made several various versions of this shader. This is because I believe it is better to provide multiple options because some people may favor one over the other.

4.1 Calm vs chaotic

First, I’ll show two videos that demonstrate the differences between the calm and chaotic lines shader. The first video is the calm lines shader and the second one is the chaotic/rapid lines shader.

Despite the fact that the shaders appear quite different, apart from the same colors, the code is nearly identical. There is only one additional line of code in the chaotic lines shader. It only took a little fiddling with the numbers to make them appear so different. As a result, the majority of alterations are simply numerical.

Holmer, F. (2021, 26 February). Shader Basics & Textures – Shaders for Game Devs [Part 1].

Now I’ll go over the code using the chaotic lines code, because of the extra line. Let’s commence with the float offset, which is the extra line. This is the one that makes the most impact. The shader without the offset line is shown on the left, and the shader with the offset line is shown on the right. The Offset causes the shader to be non-symmetrical, giving it a more chaotic appearance.

There is a number after _Time.y in the float t line, 0.09 in the calm lines, and 0.3 in the chaotic lines. This number determines the pace at which the lines move. The higher the number, the faster it goes; because this is very sensitive the number does not need to be changed in big steps to have a significant impact. A little further in the same line, right after TAU, the number 33 in calm and 23 in chaotic. This modifies the size of the lines, specifically their width. The greater the width, the smaller the number. The final number in that line, 0.1 for calm and 0.3 for chaotic. This one decides the brightness of the lines, but this is most visible with the white lines. The greater the number, the brighter. Here are some examples of how these changes might appear.

4.2 View filter

To use this as a view filter in a first-person game, the shader must contain the appropriate tags. The rendertype should be transparent, otherwise the player will only see the shader and nothing else. The queue should be overlay. If the shader is in another queue, an object may pass in front of it, rendering it ineffective as a view filter.

There are two components to creating the transparency effect, which Unity refers to as blending. I made use of both blend and blendop. Unity refers to the line Blend SrcAlpha OneMinusSrcAlpha as traditional transparency. To alter the effect, SrcAlpha and OneMinusSrcAlpha can be changed separately. SrcAlpha serves the following purpose, as stated in the Unity Manuel: The GPU multiplies the value of this input by the source alpha value. Alpha is a color component that can be transparent or opaque based on its value. OneMinusSrcAlpha also makes use of the alpha value, multiplying the value of the input by 1 – source alpha, as stated in the Unity Manual. I then used BlendOp. The blend command’s blending procedure is specified by BlendOp. BlendOp cannot exist in the absence of a Blend command, which in this instance is blend SrcAlpha OneMinusSrcAlpha.

Unity Technologies. (2023, 24 March). ShaderLab command: Blend. & Unity Technologies. (2023, 24 March). ShaderLab command: BlendOp.

The calm lines view filter is demonstrated below. The circle represents the flashlight that came with the environment I downloaded from the Unity Asset Store.

Little dog creations. (2022, 15 December). Pixel horror abandoned classroom.

I originally intended to use the chaotic lines as another view filter. Accessibility in game is really essential to me. When I experimented with the chaotic lines shader, I found that it would hinder vision too much, perhaps making games a game lack accessibility, which is why I changed the purpose of this third shader.

I did some brainstorming and was inspired by a Silent Hill and A Nightmare on Elm Street. This shader could be used to create a psychedelic effect for transitions and other similar purposes. I was reminded of the trippy nightmare scenes in A Nightmare on Elm Street and the transitions from the normal world to the other/fog world in Silent Hill. I updated the chalkboard in the classroom scene to have the shader on it. It generates an alien sense, which isn’t generally feasible, and can in turn work well in horror games. A video of this can be found below.

5. Final Showcase

The video below is the final showcase, which includes all of the shaders. The room and first-person controls were not created by me; they were obtained from the Unity asset store via the previously indicated source.

Little dog creations. (2022, 15 December). Pixel horror abandoned classroom.

6. Retrospective

In this chapter, I’ll go over the process in carrying out this R&D endeavor. This undertaking was 5 weeks long. This blog was written in chronological sequence. I wrote this retrospective using my logbook and reflecting on the last 5 weeks.

6.1 Research & Development

Honestly, the research portion was my favorite. I could spend the entire day researching, I love it so much. Although coding is not my forte, creating shaders was quite enjoyable. Shaders are a fascinating aspect of coding. I had no idea that I could make visual effects with lines of code before this semester. The majority of my work went as planned. I had to adjust the purpose of the last shader, but I was pleased with the solution I devised. Since the advent of Shader Graph, it has been difficult to obtain lessons of how to code shaders. I obviously did not utilize Shader Graph for this, but I’d like to see how it works as well. I am a theorist by nature, yet I believe my development work was adequate in the end.

6.2 Guild

The guild meetings were quite beneficial. It’s always interesting to hear what other people think about your work; an outside perspective can be quite insightful. I received feedback on using various methods that I hadn’t considered or changing the look of things slightly to make it even better. Every week, I was able to complete the tasks on my action plan.

To be honest, these guild meetings took a lot out of me. It was difficult for me to speak in front of the group. I would attempt to end my speaking turns swiftly because being the center of attention causes me a lot of anxiety. As a result, I don’t believe the effort I put into my work was always communicated to the group. In the end, I am proud of how I handled the meetings; I did the best I could and was comfortable with.

I am pleased with the outcome of my efforts on this R&D endeavor. I understand that horror isn’t everyone’s cup of tea, but is is mine, and that’s all that matters when I chose this topic. Working on this has been enjoyable for me because I am passionate about the subject. After all, it’s only 6 months until Halloween.

Table of contents