Pixelate Screen Effect

Shader for 4.3 stable

 

This shader adds a pixelated effect to the screen by reducing the resolution of the texture, making it ideal for retro-inspired visual styles. You can adjust the pixel size for greater or finer levels of pixelation, giving your game or application a unique, nostalgic aesthetic. It’s a simple yet effective way to bring a creative visual twist to any project.                           

Tutorial:

1- Create a Control node

2- Add a ColorRect to the Control node

3- Click on the ColorRect -> Material -> New ShaderMaterial -> Shader -> Create New Shader -> Paste the code below       

4. In Control node put pass in mouse option

Shader code
shader_type canvas_item;

uniform sampler2D SCREEN_TEXTURE: hint_screen_texture, filter_linear_mipmap;

uniform int pixel_size : hint_range(1, 64) = 4; // Pixel size
uniform vec2 screen_size = vec2(1920.0, 1080.0); // Screen size (set manually)

void fragment() {
    //Pixel coordinates in screen space
    vec2 pixel_coords = floor(FRAGCOORD.xy / float(pixel_size)) * float(pixel_size);
    // Convert pixel coordinates to UVs for screen texture
    vec2 uv = pixel_coords / screen_size;
    // Get color from texture screen
    COLOR = texture(SCREEN_TEXTURE, uv);
}
Tags
atmosphere, darkfantasy, horror, pixel, pixelate, retro, shader, vibe
The shader code and all code snippets in this post are under CC0 license and can be used freely without the author's permission. Images and videos, and assets depicted in those, do not fall under this license. For more info, see our License terms.

Related shaders

Scratch pixelate effect

Pixelate 3D Effect

Pixelate Postprocess

Subscribe
Notify of
guest

0 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments