All The Arduboy Image Converters

If it will be one converter that handles all the formats, it needs to do:

  • The original library drawBitmap() format.
  • Possibly the original library drawSlowXYBitmap() format, though there’s really no good reason to use this.
  • The Sprites formats, from a single image, a sprite sheet and possibly a tile sheet. Both the drawPlusMask() format, and the one used by the others, is required.
  • The compressed format used by the library drawCompressed() function.
  • Handling the Ardbitmap library format(s) would be a bonus.

Ideally it should be able to produce masks for all these formats by decoding the transparent pixels (alpha channel) in the provided images.

You also need to decide what input image formats you handle; PNG, GIF, BMP, JPEG …

Those are cool features, do any of the open source options currently available exist that can be deployed onto the site?

I don’t think we need all that to be honest, those would be nice to have.

Right now I’m looking at the team arg tool just tweaked to remove the height and width values from the array.

We could sit here and make a list but I can guarantee no developer is just going to pick up the charge and do it exactly the way we want, this post proves every is just going to do it their own way. And I’m not smart enough to do it.

If someone wants to do it I can compensate them for sure.

I’d been thinking of taking the TeamARG sprite converter, updating the HTML wrapper, and making it more gracefully handle bitmaps with a height not equal to a multiple of 8 by automatically expanding them… maybe as a project for Hacktoberfest. I got hit with the x8 bug several times recently, both in their page and the cabi converted included with the Arduboy2 library.

I think that to do that with the image converter, you just have to find the code in index.htm:

// Generate the sprite string
var spriteString = "const unsigned char PROGMEM "+imageData.name.split(/_|\./)[0]+"[] =\n"+
"{\n// width, height,\n"+droppedImage.naturalWidth+", "+droppedImage.naturalHeight+",\n";

and change it to:

// Generate the sprite string
var spriteString = "const unsigned char PROGMEM "+imageData.name.split(/_|\./)[0]+"[] =\n{\n";

(I haven’t included the indenting in the above)

I think what I will do, is I will take the team argimage converter, host it up on a github, link to it from the main page, and quick links so you can get to it easy, and then also have a note on the page “if you would like to improve the functions of this converter please send pull requests”

1 Like

I currently are hosting their sprite tools here > Team ARG Tools hosted by Filmote

As has been noted and linked to in the original post in this topic.

Yeah thanks @filmote I have been using it today. Like I mentioned I think I’ll just rehost the code portion and call it “official” and ask smart people to expand functions. I can maybe bug the people who have written their versions with better functions if they can adapt to javascript.

Good idea. If you do this, we also need to update the @Crait’s tutorial to point to the new location.

I cant seem to get any of the online image converters to work properly and Im not sure I understand how to compile any of the others from source. Can anyone suggest anything that might be causing an issue with the online converters (using chrome) or can anyone suggest one that might be simpler to compile from source? As for the online converters, Team ARG’s almost works… it’ll show the image correctly once its imported (and can outputs the correct size in the array) but generates all 0x00’s. Thanks!

What images are you using?

I’m willing to bet your image has values of ‘black’ or ‘white’ that aren’t actually proper black (RGB (0, 0, 0)) or white (RGB (255, 255, 255)), and the online tools are only checking for exact colours instead of using a colour threshold.

Ah, that would make sense. Im trying to use an image i made, tried using both a png and bmp. But ill mess with the colors and trying to make it darker and see if that helps

What are you using to edit your sprites?

Most decent image editors should be able to tell you the exact values your colours consist of, so it shouldn’t be a matter of guesswork, you should be able to actually verify the values.

Ah yeah, it seems youre right, i should have checked the color values beforehand but it appears the shade of black in the color palette was slightly off, ill suppose ill just have to open the sprites one by one and change the color value then try again. Thanks!

Actually it appears i spoke too soon, even after changing the color values its still outputting the same.

Edit: Also im using gimp

GIMP shouldn’t have a problem editing colours to precise values, though it may not be obvious when a colour isn’t quite ‘perfect’.

You might want to try changing the image to indexed colour mode (right click, Image > Mode > Indexed....) and then using the Palette Editor tab to check whether you’ve only got black and white or whether there are other colours in the mix.

Alternatively to be sure you’ve only got black and white you can use ‘right click’, Colors > Threshold, which will give you a ‘threshold’ tool that will map everything to black or white depending on which side of the ‘threshold’ value it is. (It works well on colour images too.)


Which online editor are you using?

Looking again, the second one on the list offers a variety of ‘mapping’ functions, which should all handle ‘impure’ colours, and it has a ‘threshold’ slider.

Ah i got it, was just a simple/dumb mistake… i was drawing them in black on a white/transparent background… i know the arduboy displays the opposite but i was planning on just inverting them in the end… but both the white background and black pixels were showing up as transparent, resulting in a blank image. But i got it working now, sorry. Thanks!

I’m not sure what you mean by this.

If you’re using transparency then I’m not sure how any of the editors will react to that. I would hope they’d ignore the transparency (unless they’re also generating a mask), but they might do something unexpected.

Also note that not all transparency is equal. Transparent black and transparent white might look the same to a human eye, but the computer knows otherwise.

I’m not sure what you mean by ‘displays the opposite’.

White pixels should end up white and black pixels should end up white.
The Arduboy’s screen format treats 1 bits as white and 0 bits as black.

Basically just this. In my editor it was treating white as transparency, when i ran it through the converter it im pretty sure it then treated the black as transparency, making the whole thing transparent :stuck_out_tongue: thats just my theory anyway, once i replaced the black pixels i had drawn with white then it worked.

If you’re using GIMP, it shouldn’t be doing that. GIMP uses a chequered grey background to signify transparency.

Do you mean the other way around?
Your image had transparency and the converter interpreted it as black?

Are you sure you’re not using one of the mask functions?

This is starting to sound to me like you’re creating a mask for a sprite and you’ve misinterpreted how masks work somewhere along the line.