{"id":1114,"date":"2025-02-10T14:25:31","date_gmt":"2025-02-10T14:25:31","guid":{"rendered":"https:\/\/abdoubouam.com\/?p=1114"},"modified":"2025-02-10T14:25:31","modified_gmt":"2025-02-10T14:25:31","slug":"devlog-week-59-60","status":"publish","type":"post","link":"https:\/\/abdoubouam.com\/index.php\/2025\/02\/10\/devlog-week-59-60\/","title":{"rendered":"Devlog Week 59-60"},"content":{"rendered":"\n

As I mentioned last week, I’m focusing a bit more on my portfolio, so there’s less work done on the game. Here’s a summary of what I did.<\/p>\n\n\n\n

Dithering Effect<\/h2>\n\n\n\n

I had the idea to add some of the dream effects to the rest of the game. I tried it, but I didn’t like how it looked, so I created another one specifically for it. Here’s the end result.<\/p>\n\n\n

\n
\"\"
Final dithering effect<\/figcaption><\/figure><\/div>\n\n\n

I started with a 1-bit dithering effect first and then overlaid it on top of the render result. Here’s how the dithering effect looks on its own. If you zoom in you’ll notice it’s 1-bit (only black and white, no grayscale)<\/p>\n\n\n

\n
\"\"\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button>
Basic 1-bit dithering effect<\/figcaption><\/figure><\/div>\n\n\n

For anyone interested, here’s a breakdown :<\/p>\n\n\n\n

I Started with a 32x1px gradient, then scaling it up with the “nearest neighbor” filtering to 1024x32px, to avoid smoothing the result.
<\/p>\n\n\n

\n
\"\"
A Gradient of 32 grayscale values<\/figcaption><\/figure><\/div>\n\n\n

Next I opened it in GIMP and switched the color mode from “RGB” to “Indexed” then picked “Use black and white (1-bit) palette” and chose “Positioned” for the color dithering method. I’m not sure if Photoshop can do this, but I’m sure you can find online tools if you don’t have GIMP already installed.<\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n
\n
\"\"<\/figure><\/div>\n\n\n

This is the result. Please note the actual resolution is 1024×32 at this point, which is 32 squares of 32x32px. I manually fixed anything that didn’t look right, like obvious missing dots and such.<\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n\n

Next I cut these all into squares, set the mix mode to “additive” and the opacity to 2%, then stacked them all on top of each other. This is the result so far. <\/p>\n\n\n

\n
\"\"
Before The Levels Adjustment<\/figcaption><\/figure><\/div>\n\n\n

Notice that there are huge gaps in the histogram at the beginning and end, which means it’s not covering all the black and white range (there are no pure whites or pure blacks). This is where the levels adjustment comes in. I also adjusted the gamma a little bit to make the values (peaks) as evenly spaced as possible, because they were a bit skewed toward the the whites.
Make sure to use 16-bit color depth to reduce precision errors.<\/p>\n\n\n

\n
\"\"
After The Levels Adjustment<\/figcaption><\/figure><\/div>\n\n\n

That’s all I need. I have a dithered gradient mask. The values go progressively from dark to bright in a dithered manner, and when combined with a threshold filter the pattern will reveal itself.<\/p>\n\n\n\n