Sprite Not Importing Correctly!

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... :frowning:

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 :pray:

In the meantime, after tweaking palettes, I found one I like:
:white_large_square: Background 'white' #B1AEA8 / RGB(177,174,168) - Playdate standard.
:black_large_square: Foreground 'black' #001020 / RGB(0,16,32) - Very dark indigo.


09-ConfettiLarge-table-8-8

Cheers!