In: Game Development, Made with Unity, Project Libra

Just tackling shaders in unity for the first time to accomplish a simple grayscale on the entire screen.

Introduction

A year ago, a friend of mine gave me a few links to good tutorials for learning shaders in Unity. I kept them in my big (and badly organized) pile of bookmarks, waiting for the time where I might need to create custom shaders for my games. Since I’m currently making a visual novel, learning how to make custom shaders is not a top priority for me.

However, in the last few days, I wanted to create an image effect for when we are showing flashbacks to retell old events to the player.

I felt it was very important for the player to be able to distinguish if we are in the present vs in a flashback. A simple effect where the screen is black and white when it’s a flashback should do the job.

There are a few ways to create the grayscale lens effect. You can create this effect by installing the post-processing stack package from the Unity Store. All you need is to add an image effect to your camera and put the saturation to 0.

However, it is probably overkilling if that’s the only image effect you need. I thought about it and decided to look how to do this effect with a basic shader instead.

Shaders Basics

Let me start this section by saying I know next to nothing when it comes to shaders. I barely understand the surface of it all. Before reading about it, all I knew about shaders was that you could do amazing visual effects with them. In my mind, it also implied complex maths and code I will not understand even if you gave me a million years to study it all.

I can’t really explain something I don’t understand, but I will say if you want to understand anything about shaders, you need to look at other people’s work and how they accomplish these cool effects. This article won’t teach you how to make shaders.

Makin’ Stuff Look Good is an amazing YouTube channel if you’re just starting up. While it’s not regularly updated, the author explains the basics very well (although I will say you should take a look at how a shader is built before watching, makes it easier to follow along.)

By watching Shaders101 and Shaders102 from this channel, I managed to create the black and white image effect I wanted. See below.

The Grayscale Image Effect

At first, I thought you could only use shaders on objects, but I learned you can also apply them to cameras. You can put your shader on a material and then apply that material onto the final output of your camera, using this code.

(Note: This code may not work for all platforms. I only tried on Windows. On mobile, these image effects can be quite expensive.)

This code won’t do much without the grayscale shader. The following shader turns all color into shades of gray.

(If you are interested into grayscale algorithm, you can look here for more info)

Put the shader onto a material, then put that material onto the script above and you are ready to go!

Now, all you need to do is put the script on a camera, enable it when needed and the image effect should work. You should also disable it when you’re done using it.

Final Result:

What else can be done with Shaders

While I’m using this effect to showcase a flashback to the player, this effect can also be used for something else, like a picture mode filter or to create an unsettling mood.

I only watched a few videos about shaders and I already have many ideas on what I can do with this new knowledge. Although there are people that are way smarter than me when it comes to creating and explaining shaders, I can still inspire myself from their work and branch out and see what I can come up next.

Simple ideas I’ve got:

  • Animate a simple texture onto a cube. You could easily recreate [?] blocks from Mario by alternating between different textures over time.
  • Create a wavy effect for hot area. (This is covered in Shaders102)
  • Water surface effects!
  • Cell shading (like how Wind Waker looks like)

What’s next for me

I’ll probably take a look into other shaders later. As I said earlier, I feel the best way to learn shaders for me is to look at other people’s work.

Besides, I don’t have much time to dedicate to learning complex maths. I’d rather learn from other people’s shaders and put more time into other aspects of my game that matters more to me, like the soundtrack which is in dire need of my attention. In the upcoming weeks, I’m diving back into all the songs I written so far for Project Libra. I’ll try to make them sound better. I look forward to share more about it later. Stay tuned!