Example of Arduboy2 Sprites

The header file already provides high level documentation and examples of each function.

I don’t know how JO3ri’s tool works, but mine takes a transparent PNG and figures it out - it doesn’t require you to split the image manually into two frames.

Nor does ours, you need to provide 1 image, where transparent pixels determine the mask, like this:

and name it cube_13x16.png (using width and height) YES only 13 pixels wide, because only height needs to be a multiple of 8

This is the resulting array for use with drawPlusMask created with https://teamarg.github.io/arduboy-sprite-converter/

const unsigned char PROGMEM cube_plus_mask[] =
// width, height,
13, 16,
// FRAME 00
0xf8, 0xf8, 0x14, 0xfc, 0x94, 0xfc, 0x22, 0xfe, 0x22, 0xfe, 0x41, 0xff, 0xc1, 
0xff, 0xc1, 0xff, 0xe2, 0xfe, 0xe2, 0xfe, 0xf4, 0xfc, 0xf4, 0xfc, 0xf8, 0xf8, 
0x07, 0x07, 0x08, 0x0f, 0x0a, 0x0f, 0x10, 0x1f, 0x15, 0x1f, 0x20, 0x3f, 0x3f, 
0x3f, 0x3f, 0x3f, 0x1f, 0x1f, 0x1f, 0x1f, 0x0f, 0x0f, 0x0f, 0x0f, 0x07, 0x07,

This is how you use it:

sprites.drawPlusMask(x, y, cube_plus_mask, 0);

Which of your tools did you use to create this array please?

https://teamarg.github.io/arduboy-sprite-converter/ for comfort I added the link in the explanation above too :slight_smile:

1 Like

Thanks @JO3RI Perhaps a few lines of instructions on each of those tools would help :wink:

Yeah I know, short of time, but like I promised I’ll write up a complete article on this for the next Arduboy Magazine with some technical explanation too. Once I have written that, I’ll have what I need for a manual on each page too.

1 Like

That will be very useful. Thanks.

Thanks @TheArduinoGuy.

I didn’t think about it when documenting the drawExternalMask() in the Arduboy2 library but then I saw your example code here and it got me wondering. I then looked at the code for the function and it appeared that the leading width/height is not to be included in the mask array.

However, I decided to grep all the sketches in my sketchbook to see how it was being used and only found it used by SkateArdDie by @pixelplatforms, which does include the dimensions in the mask, so now I was confused.

It appears that SkateArdDie is incorrect, and so is my documentation in Arduboy2. I’ll correct the Arduboy2 documentation.


You should probably change your image converter so it comments out, or doesn’t include, the width and height in the mask only array.

To get a detailed walk through i highly recommend this series of Posts from @crait


Part 6 is what you want but i recommend them all.

1 Like

Is this tool working at the moment? I’m dropping files onto it and nothing is happening.

I know how to program @cronk (35 years experience) it was the converter program not recognising non black or white pixels.

i never said you didn’t know how to program, the link to the post is a detailed guide that I thought i would link for the newer person @hmngwy they made this post originally. Also in that guide Crait uses a different convert program that might help. It looks to be one that he made. he also describes how to get rid of the black/ negative space.

But again only trying to help and not question any ones lvl of programming, i have owned an Arduboy about 2 weeks now and only shared what i know helped me.


I don’t think @crait 's tool creates image that will work with drawPlusMask.

It works for me.

I took the image that @JO3RI provided in this post, saved it as cube_13x16.png, then dragged its icon from a folder view on my desktop to this page.

I got Sprite, Mask and Spite + Mask code blocks as a result.

This is using Firefox under the Ubuntu Linux Unity desktop on two different computers.

1 Like

Nope. Doesn’t work still on Chrome. Let me try Firefox.

Nope, doesn’t work on Chrome or Firefox on Windows 10.


Works for me with Chromium. Again, under Linux/Unity.