Colorful assets
So the guidance is your artwork should have true black #000000
or white #FFFFFF
pixels. This works. ...But perhaps we want to do something funky and import other tinted monotone images?... such as using Playdate's own brand palette (#b1aea8
, #322f27
). This does not work...
TL;DR
Due to the current import code (6-Jul-2023) :
- Your 'black' tone (for set /on pixels
=1
) must not contain any red channel color (but green and blue can have any value). e.g.#00FFFF
will work! - Your 'white' tone (for unset /off pixels
=0
) can have any value, as long as the red channel is 1-255 (not zero). e.g.#FFFF00
will work! - Avoid any transparency for background tiles.
Deeper dive
It's a shame the code isn't open sourced... so to understand the code importing images, I had to debug in the browser. The relevant function is importPixels
from the main pulp.xxxx.js
script. The code reads each pixel value of a canvas element, getting 4 bytes (RGBA) per pixel with getImageData
.
The logic to determine whether a pixel is set 1
(black) or unset 0
(white) is:
(imageData[j]==0?1:0)
where j
is the first byte of a pixel. So... we are just checking the Red channel value is equal to zero (dark) to give a black, set 1
pixel. Any other Red value gives us an unset 0
pixel. This isn't unreasonable and is a commonly used approach.
But, a trivial fix might be to threshold the R
channel at 127
, to separate light and dark tones:
(imageData[j]<128?1:0)
This would then work with Playdate's own brand palette (and most others). Hopefully this gets fixed
In the meantime, after tweaking palettes, I found one I like:
Background 'white'
#B1AEA8
/ RGB(177,174,168)
- Playdate standard.
Foreground 'black'
#001020
/ RGB(0,16,32)
- Very dark indigo.
Cheers!