See through sprite

so im shure theres a better way to prevent a sprite being see through than just puting one solid black the same size behind it

Instead of putting a box behind it, you could ‘fill in’ your sprite. This is what you need to know…

When using images, the images are converted into 0’s and 1’s, which is called binary. 0’s are typically black and 1’s are typically 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. Because you’re asking about transparency not being through the entire sprite, you’d want to follow this technique for the areas you don’t want to have transparent.

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 or outline. I am very sure this is what you’re asking about, @curly .

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.

ab.drawBitmap(locx, locy, playerrickbg, 16, 16, BLACK);
    ab.drawBitmap(locx, locy, playerrick, 16, 16, WHITE);

thats basicly what i am doing, i was just worried i might be wasting space

The sprites class in Arduboy2 supports this either with drawing using an external mask or drawing images where the mask is embedded in the image data itself. This is all documented in sprites.h with examples.

1 Like

Not if you need white+black+transparent… you can’t do that in 1 bit… technically with 2 bits you could have 4 choices (vs 3) but without grey there isn’t much else to do with that extra half-bit anyways. So yeah you pretty much store the mask the area to “black out”, and then store the image (which goes on top)… drawPlusMask smartly bundles them both into a single byte stream for high performance. Previous to that you can do the same thing much slower with two sep images and drawing them twice.