Run-time, screen-space dithering


In addition to some general playtesting and bug fixing, I've worked on getting screen-space dithering to work. I wanted screen-space dithering for 2 reasons: 

  1. Due to the dither patterns used I noticed some pretty severe screen flickering when the intro image scrolls slowly across the screen. Several alternative solutions were offered (using line-based dithering, moving the image 2 pixels at a time, etc) but none gave me the results I was looking for. 
  2. Painting images with dithering baked in makes changing shades a nightmare. Screen-space dithering would allow me to use grayscale images and have them dither at run-time, making iteration a million times faster.

Approximation of how screen flickering looks on device

With some pointers from the Playdate community I got it to work without too much trouble but this was just using a generated image - I had no way yet to use actual image files as input.

 

So after that I started work on a conversion tool, which could take a grayscale image, convert it to a format the playdate can use, and then pass that to the rendering function. The result of that effort is the tool pictured below (top-left is input image, bottom-left is exported pre-dithered image), and I'm pretty happy with what it does.


As mentioned, this loads up an image file, detects grayscale (brightness (R channel)) values, sorts them, and links the values to dither patterns. It then uses the same rendering code (and patterns) that the playdate game code uses to preview the image. It allows for scrolling the image (either dragging with the mouse or using the input fields at the bottom) so it's also possible to check how the scrolling would look in-game. To the right is a pattern selection, where I can choose specific patterns for each of the colors used in the image. There's also various auto-mapping options for easy and quick starting points. Bonus bits are three different zoom levels, background options of black/white/checkered, and toggling playdate simulator palette vs regular black and white.

Once I'm happy with how it all looks, I can export to a custom file format (basically a header of image width and height, followed by 4 bits per pixel encoding of the 15 shades + transparency) or a pre-dithered version in case the screen-space dithering ends up not working as intended (e.g too much wooble, shapes being too vague, etc).


One final thing to do (for these images) is to ensure it doesn't break the rest of the game. Currently they're rendered on top of everything else, meaning text and other overlay things disappear. I've asked my artist friend (Qwn, who also did the logo art, as well as all visual design for the physical game) to help with the actual images, so I thankfully don't have to do all that myself.

As for the rest of the game: More playtesting! I still need a bunch more data before I can start trying to balance the game, so that's what I'll focus on for now. I also need to figure out what to do exactly with the 'players' thing - specifically any mentions of 'player' in the game, and not have it be confused with the 'survivors' resource. Any thoughts are welcome!

Leave a comment

Log in with itch.io to leave a comment.