Transparency and bitmaps


Normally I use this online tool to convert my bitmaps:

But my bitmap becomes transparent.

Any way to make my bitmaps partly transparent?
So that eg. the cornes are transparent but the middle of the bitmap is not!

Any suggestions?

Cheers Jacoste

Can you show us your png file?

In general it converts:
Black -> 0
White -> 1

Don’t know how it interprets the alpha.


Yeah, the way the data is converted, 0’s are black and 1’s are white. There’s not other way to store transparency if you do it like this. The only other thing would be storing images in 2 digits, so 00 would be black, 01 would be white, 01 would be transparent, but 11 would have no color to match it. This means that you’re only using 3/4th of the space when storing images on the Arduboy. It makes drawing slower, but since the device is already so limited in space, it just wouldn’t make since to store images this way.

To get around this, what people do is have 2 copies of the same image, except one of them has all black pixels stored as 1’s and one has all white pixels stored as 1’s. Then, draw both images at the same location on the screen, but being sure to only draw the white from one and black from the other. If there’s any 0’s in either of them, they simply won’t be drawn. This is where the transparency will be.

Look at the following example:


In Original.png (above), I’ll have my character’s portrait displayed. I want her to have an orange background that is transparent, so whatever is behind her can still be seen. However, I don’t want to be able to see through her face.

We can use the arduboy.drawBitmap() function, white is a cool way to draw all the 1’s in an image to the screen in the color that you want. Let me elaborate…


In order to achieve this, I need to make an image with just the white saved as white. In First.png, you can easily see this. It makes sense, right?

To draw this image, we’d use arduboy.drawBitmap(x, y, first, 9, 10, WHITE); . The image converter will save all white pixels as 1’s and black pixels as 0’s. Using the drawBitmap() function, we tell which color we want to draw. Notice we specify WHITE. This will take all 1’s and draw white pixels to the screen. The only thing we’ve drawn so far is white pixels.


We still need to draw the character’s outline, which was originally black in Original.png, but for Second.png, we need to flip things around. Notice that our outline is now saved in white pixels. Converting this image will cause, again, all black pixels to be 0’s and white pixels to be 1’s.

In order to draw this image, we will use arduboy.drawBitmap(x, y, second, 9, 10, BLACK); . This will take all 1’s in the image and draw them in BLACK pixels.

Hi guys,

Thnx for your input.

Cheers Jacoste

If you read sprites.h you’ll see the Arduboy2 library supports all this out of the box - you just provide both a bitmap and a mask - or a single combined resource that includes both.