Convert color PNGs to 1 bit per pixel?

Is there an easy way to convert color images to playdate b&w? Like this one:

UFO 10

You can use this image in your project and it will be automatically converted in a black and white image with transprency mask if needed.

However it will be converted with a very simple threshold and no dithering. There is so many different ways to convert an image to a 1bit black and white image that you usually need to do it yourself to get the exact look you want.

1 Like

Nic is quite correct. I believe the SDK uses a simple "threshold" greyscale conversion method, with no dithering, and supporting transparency which is good enough for prototyping/placeholders. Whilst I'd love to see greyscale/dithering options in the SDK, with graphics baked at compile-time, I do believe your graphics should be prepared as 1-bit outside of the game.

Anyway, I looked into 1-bit-conversion options in detail when Playdate was announced, here are my findings:

Photoshop

Has one greyscale and a few dithering options to get you 1-bit (Image > Mode > Greyscale & Bitmap). But they're not real-time, and awkward: ufo.psd.zip (11.2 KB)

Pixatool

Abandoned app. Strange, frustrating UI, but nice results and some good options: PixaTool by Kronbits

Acorn

Acorn also has a great filter system that can be stacked to get realtime preview of 1-bit conversion, but is limited in types of greyscale conversion and dithering. Here's a sample file: 1-bit Workflow.acorn.zip (89.2 KB)

Classic Macintosh

There are many amazing tools for this on Classic Macintosh (1-bit b/w for a long time, and for years after colour was introduced). Anyway, I have a System 7 Virtual Machine installed with a bunch of graphics apps that I use: DeBabelizer, GraphicConverter, Photoshop 3, SuperPaint, UltraPaint, etc.
See this post on my blog: https://blog.gingerbeardman.com/2021/04/24/macintosh-drawing-software-compared/

Android

Web

7 Likes

Very sorry I’ve not finished a review on that, @matt; I got part of the way through but it’s been quite a year :sweat_smile:

1 Like

No need to apologise.

I’ve been using Acorn a lot to make or tweak image for the Playdate. But I never actually used the filter system. That’s really useful.

There is also Strike that was released recently. It’s mainly about painting in 1bit but you can also import images.

But while there is here and there good solutions to convert assets in 1 bit, none of them (to my knowledge) support transparency, or let’s say black and white and transparent which is quite an important feature on the playdate.

1 Like

Both canvas-dither and my own web tool support transparency. May not be obvious in canvas-dither due to lack of patterned background.

Will try to find time to check on the others, but probably safe to say they do not.

1 Like

Oh! I didn’t realise.
That’s pretty cool.

This is pretty good: Ditherlicious!

UFO 10 copy-ditherlicious

4 Likes

This is probably too late to help anyone, but in case someone has Photoshop but dismissed it:

I’ve been using Photoshop to export the final versions of all my Playdate graphics, because it’s got the Mac Classic-style pattern dithering that I haven’t seen elsewhere. I don’t like the default handling, but going to File -> Export -> Save for Web (Legacy) and using the settings shown here has been giving me exactly what I want.

Note that because my game is cartoony, I’m mostly using 5 shades of black, white, and gray specifically chosen to give the familiar dither patterns. For an arbitrary image with gradients like the UFO, pattern dithering gives this:

while Diffusion dithering gives this (which I’d assume is more what you were looking for, and is similar to the one that eda posted):

I’ve never seen options in apps like Acorn or Pixelmator or Affinity Photo to have as much control over the dithering.

4 Likes

Great tip Chuck! And never too late.

1 Like

Wow! Thanks a lot!
It’s almost a replacement for ditherlicious

1 Like

I’d also add that using the Image > Mode > Indexed Color option, you get more control over the dithering:

1 Like

Dito (OSS app)

This tool is meant for converting images to NES bitmap format. It has a quite unique interface with multiple pickers that influence both colour and dithering.
It features 1-bit mode (press Space bar) and the source is available and very easy to change to 400x240 by changing two defines:

#define HOR 50
#define VER 30

I’ve not yet tried changing the colour selection to always return dark or light grey, which would make it even more suitable for Playdate graphics.

Example:
3cab252b35a46713

ImageMagick (CLI app)

This suite of tools provides powerful command line capabilities. The order of switches dictates the order of execution of the image processing pipeline.

Install with Homebrew or MacPorts.

Examples:

  • 1-bit dither ordered/Bayer 2x2
    convert in.png -colorspace gray -ordered-dither o2x2 out.png

  • 1-bit threshold 50% (only rgb channels; ignoring alpha channel)
    convert in.png -colorspace gray -channel rgb -threshold 50% out.png

3 Likes

Anyone interested in dithering algorithms should check this out!

http://ivan-murit.fr/project.php?side=art&w=texturing

Video: https://vimeo.com/145301542

1 Like

Added a couple of dither tools I’ve recently stumbled across to my detailed post above:

They are: