Is there an easy way to convert color images to playdate b&w? Like this one:
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.
2 Likes
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
-
Canvas Dither
Last year after announcement of Playdate I found some web code for Atkinson dithering (the standard Classic Mac approach) on GitHub by @ticky (hi, thanks again, and great to see you on here!). I expanded on it a great deal - adding multiple dithering modes and greyscale options that I researched and implemented myself. Here is a usable version: https://www.gingerbeardman.com/canvas-dither/ -
Dither Me This - Image Dithering Tool
Part of doodad.dev "tools for making the internet fast, accessible, expressive, and green."
https://doodad.dev/dither-me-this/ -
Dither it!
https://ditherit.com -
Dither Paint
https://beyondloom.com/tools/ditherpaint.html
8 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 
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!
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
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:
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: TexTuring – dithering tool based on natural patterns on Vimeo
2 Likes
Added a couple of dither tools I've recently stumbled across to my detailed post above:
They are:
- Dither Me This - Image Dithering Tool (web)
Dither Me This | Online Image Dithering Tool - Dither it! (Web)
https://ditherit.com