Thread by @ItsAMeRubenC

🌿 In this thread I will show what Post-Processing effects were added to Floppy Disk 💾 and how they were made.

If you don’t know what “Floppy Disk“ is you can take a look at the video below 👇

Let’s go!
#Unity #Indiedev #indiedevhour

https://twitter.com/ItsAMeRubenC/status/1146454598992969728

First of all, what I’m referring to when I talk about Post-Processing 📽️?

“Post-processing in videogames refers to filters or effects that affect the camera’s image buffer before the image appears on the screen 🖥️.”

You might be familiar with Anti-aliasing, Bloom, Motion Blur.

For Floppy Disk 💾 I decided to divide the post-processing techniques in two categories:

🔸Filters: Created using custom shaders and scripts 📄.
🔸Profiles: Created using Unity build-in “Post-processing Profile” assets 📂.

Let’s start with the profiles which are much simpler thanks to Unity. You can create a Post-Processing Profile from the Project Window or Assets Menu.

Inside the profile there are several effects you can apply.

To apply the filter, you will need to add a Script called “Post Processing Behaviour” to the desired camera (the script comes with Unity).

That Script 📄 has a variable called Profile were you can add the profile you just created.

That said, let’s take a look at the Black and White profile that can be found inside the game 🎮.

Not a big change from the original. I used the “Color Grading” effect setting the values seen on the image to get only black and white colours 🎨.

The Color Grading effect is used to alter or correct the colour and luminance of the final image. Like Instagram filters 📸.

But there is another change, I added a border that simulates an old TV 📺 shape using the “Vignette” effect. This was added to all the profiles.

The “Vignette” effect darkens the edges of the camera image; this is commonly used to draw focus to the centre of the image.

Now you can guess what I did to obtain the Green profile by just looking at it:

Same as before I applied a “Color Grading” effect and twisted the values to obtain greener colours. That way the final image resembles the old green screens that could be found on mobile phones 📱.

Then we have this post-processing profile that I called Vaporwave 🌅:

Once again, I applied a “Color Grading” effect but I made so that the “Hue Shift” variable value changes over time 🕐 via scripting. That way you can obtain those crazy colours that change over time.

The last profile called TV has some effects to resemble the image of an old CRT (cathode-ray tube) TV 📺:

For the colour mixing glitch on some areas; I used the “Chromatic Aberration” effect. This effect mimics the effect that is produced when the lens of a camera 🎥 fails to join all colours to the same point.

You can change the “Spectral Texture” for different colours and effects

Then I used the “Grain” effect to create a dirtier image. You can customize the variables to obtain different types of grain.

Now it is time for the filters to show up. First, we have the VHS filter, which tries to emulate the image of an old VHS tape 📼.

The tricky part here is to simulate the lines that appear as noise. For that I used some of the work done by Staffantan.

👉 Link to the original work of Staffantan: github.com/staffantan/uni…

So how is that achieved? Using this video that shows a black screen with the lines and effects of a VHS 📼. The video was uploaded by Christopher Huppertz under Creative Commons license (CC BY 4.0).

That video is reproduced in front of the camera’s image using a Video Player ⏯️ component. Then with the help of a script 📄 the video is sent as a texture to a Shader that eliminates the black image. Also, it draws some distortion lines randomly.

The last filter is the pixelated one, which gives the game a Retro 🕹️ look.

To simulate a pixelated image, I used an "Image Effect Shader" that is applied into a material. Then a script 📄 needs to get the image input ⬇️ and use the material with the shader to get the desired output ⬆️.

The shader gets a number of rows and columns to set the pixel density and “condensate” the image on each pixel.

You can combine the post-processing effects and filters to obtain a really cool image. For example, the VHS 📼 + TV 📺:

Or the VHS 📼 + Vaporwave 🌅 effects (my favourite):

Pixelated + Green:

So that’s all, I hope you liked the thread ❤️!
Remember that you can find the original project at the following links:

⬇️ ruben-crispin.itch.io/floppy-disk
⬇️ github.com/Rubetoman/Flop…

@threadreaderapp please unroll!