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 auto-generated; if you want to alter them please edit the pug template or less stylesheet, then either run the included build.sh script or build 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)?:\/\/|^\/\//)) {

bugs

• does not work on ipad (can't scroll to the right?)
  • possibly fixed; needs testing
• create tiles slider breaks onto 2 lines in some browsers?
• sometimes overwrites existing rooms?

to do

• test new room ID handling!!!
• don't reuse wall tiles
• add 'clear'/'upload' buttons for game data
• select all on clicking game data entry field
• allow user to save output as image, or tweet it :)
  • user can currently right-click -> Save As but the 128x128 size is not great
• 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
• add up/down arrows to the brightness slider for incremental tweaks
• add 'all-white' tile by default in case the game data doesn't have it?
• handle arbitrary animation frames (editor only supports 2 frames, but game data has no upper limit)
• list how many new tiles are being created
• combine preview and output
• give warning on duplicate room names?
• loading spinner on rendering?
• make brightness slider exponential
• rotation options for image

could do

• add some more palettes
• add some alternate default tiles - something more useful e.g. dithered tiles, 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)
• add 'invert' function
• allow for image colour hack
• make a tool for batch importing images?