bitsy image to room

about

a tool for Bitsy. upload any image and convert it into a room. the room will be added to the game data automatically and you can paste it back into Bitsy.

thanks

to Adam Le Doux for creating the wonderful and inspiring Bitsy

to J.P. LeBreton for creating Playscii which was a huge inspiration for this tool

to Mark Wonnacott for being relentlessly encouraging and making me want to work even an eighth as hard as them

to Foliotek for the Croppie image plugin

contributing

Forks and pull requests welcome!

The stylesheet and html are autogenerated; if you want to alter them please edit the pug template or less stylesheet, e.g. from the command line as follows:

pug index.pug index.html

lessc style.less style.css

pug and less can be installed via npm as follows:

npm install -g pug-cli

npm install -g less

I had to hack the included Croppie plugin to allow the user to upload images from their own computer without falling foul of CORS restrictions. So the version bundled here is non-standard. It's a one-line change:

// croppie.js:182 (original)
if (src.match(/^(https)?:\/\/|^\/\//)) {
// croppie.js:182 (mine)
if (src.match(/^(file|https)?:\/\/|^\/\//)) {

to do

• make it clear that the user can paste in their own game data
• allow user to save output as image, or tweet it :)
  • user can currently right-click -> Save As but the 128x128 size is not great
• re-style the damn thing
  • inc. mobile styles
• animate animated tiles
• profile script performance and optimise where most needed
• make brightness slider trigger redraw every so often while being dragged, instead of waiting until drag stop

could do

• add some more palettes?
• add some alternate default tiles? something more useful e.g. dithered gradients?
• add dithering options
• add camera support so users can take a pic instead of uploading an image
• add a 'smoothing' stage to remove errant pixels
• allow user to add palettes to game data
• allow user to draw to canvas
• do a 'branching tree' approach to finding the closest tile? i.e. create a 1x1, 2x2, 4x4 version of each tile, so all the broadly darker tiles will sit under '0' and lighter tiles under '1', then tiles that are lighter at the top will sit under '1100', etc... I'm not sure how much more effective this will be or whatever it will give better/faster results but it's worth a try
• give heavier weighting to edge pixels when finding a matching tile? (thanks Mark)
• apply grid lines to preview
• optionally add inverted versions of existing tiles if they are a better match
• make new tiles out of fragments of existing tiles instead of directly copying from bitmap
• allow user to zoom out so the image is letterboxed/windowboxed/etc.
• break up rendering into separate preview and output modes (would be good to have a throttled preview for brightness slider adjustments and then a debounced tile render)