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