Hi everyone!
I wanted to talk a little bit about the dithering effect and shader I wrote for our game Autumn Hike, why I wrote it and how I implemented it.

Our Game

Autumn Hike is in 1-bit style, meaning that this game is low-res, and has only two colors, black and white.

According to the "deeper and deeper" theme, protagonist Mr. Snail can enter some small spaces, which are then zoomed in to the entire screen.

The Problem

In the first released version, the zoom-in effect looked like this:

I think it looked quite neat, and communicated well the fact that you got inside this small area that now takes the entire screen.

However, something still bothered me - our game is black-and-white, but in this transition effect we use transparency, resulting in gray pixels! Take, for example, this intermediate frame between two screens:

It has different grayscale colors all over the place, which breaks the consistency of the style, and would not be possible in the imaginary gameboy-like device on which our game runs (at least that we aimed for...)

The Solution - Dithering!

To keep this effect and still use only two colors, I wanted to implement dithering, which is a method that allows expressing a scale between two colors, using only pixels of these two colors (in this - all grays between black and white).

Implementation

I implemented it by writing a simple screen-space shader, which takes the current screen "output" of the game, and overrides it with calculations based on the current pixels. I was using Godot game engine, but this method is possible with every modern engine.

The implementation goes roughly like this: - Divide the screen to pixels based on the game's resolution - Divide all pixels to 4x4 squares - For each of the 16 pixels in the square, set a different [0.0 to 1.0] "threshold". If the "original" color in darker than the threshold, final color would be black; otherwise it would be white. I chose thresholds of 1/16, 2/16, 3/16, ... 16/16 and scattered them in a nice pattern inside the 4x4 square.

That's it, actually.

Choosing different thresholds for different pixels in each 4x4 square makes sure that lighter gray colors would "paint" more pixels white and less black; while a darker color would paint more pixels "black" and less "white", resulting in the overall impression of a darker color while still using only two colors.
Needless to say, a "completely" white input (value 1) is above the threshold of all pixels in the square, and would result in the same white square. Similarly with black (value 0).

The pattern I chose is the following, with the goal of having similar-colored pixels as far away from each other as I can, to make it look more "scattered":

Square 1 has the threshold of 1/16, square 2 has 2/16 etc. Note that a 50% gray would paint only 1-8 squares white (because it is above (or equals, in that case) 1/16 to 8/16), and would result in a nice checkers-board pattern.

I could have chose any other pattern, but I think this one fit best the theme of the game.

Results

This grayscale gradient would become this after applying the shader:

This is how it looks like, zoomed in around the center (see the "checkers board" pattern around the 50% gray):

Before and after:

Before

After

(I like how the environment "dissolves" when switching to a new area)

What do you think? Do you like the new dithering or do you prefer the previous look?
Please let us know if the post was helpful for you! And don't forget to play Autumn Hike!

Thanks,
Ori and Autumn Hike team :)