Pixelated Effect in Unity Shader Graph

If you are looking for any info about how to make a pixelated effect on any sprite in Unity, look no further. I’ll show you how you can do that using Unity Shader Graph.

To use Shader Graph in Unity, you have to have a project which uses Universal or High Definition Render Pipeline. If you do, then let’s get to work!

Create a graph πŸ“Š

At the start, we should create a new shader graph. You can do this by right-clicking in the Project Window and then Create > Shader > Unlit Shader

Create a new shader graph.

Next, we should open a newly created graph and start playing!

To create a pixelated effect, we will use a UV node inside the editor. UV values are between 0 and 1, so to create the effect, we need to play a bit with math!

The easiest way to create such an effect is to multiply the value of UV but the number bigger and 1, then floor the values and divide it back by the same value.

This is how it can look like.

Simple pixelate effect.

Create shader parameters πŸ‘¨β€πŸ’»

We know how we want to create our effect, and now it’s time to add some additional parameters with which we can play.

Let’s start by creating texture and vector1.

Create a texture.
Create a vector1.

I would recommend naming them “_MainTex” and “Pixelate” like I did.

Shader parameters.

Now, we should combine parameters and the effect together to make this shader work!

Working pixelate shader effect.

This is one way to make it, but there is another one.

Normalized parameters πŸ€–

It’s a good practice to normalize some parameters. So we won’t put some stupid values and break a game with them.

In our case, it would be cool to normalize the “Pixelate” parameter in our shader.

Let’s start by adding one more parameter “Max Pixelization” which will be another vector1.

Normalized parameters.

Notice that I’ve changed “Pixelate” to be a slider!

Now, we can apply a new parameter in the graph. It will replace the current “Pixelate” param.

Graph with normalized parameters.

Result πŸ†

Time to see the final result!

Changing Pixelate amount in shader.

What do you think about it? Let me know in the comment section below! 🀩

If you know someone that might need this, share it with him! I would really appreciate that! πŸ₯°

And if you are interested in getting emails when I release a new post, sign up for the newsletter!

The whole project is available at my public repository. πŸ”—

Hope to see you next time! πŸ€“

5 1 vote
Article Rating
Subscribe
Notify of
guest
2 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Chris H
Chris H
3 months ago

Cool! Nice Mode 7 effect. Or at least Super Mario World fade in / out effect πŸ™‚
 

Last edited 3 months ago by Chris H
Neurisko
Neurisko
2 months ago

Images are too small to read.