Sprites / SpritesB Library
What are Sprites?
Sprites are a computer graphic which can be rendered and moved on screen as a single unit. In older systems such as the Commodore 64 and Atari, the sprite was rendered by hardware as an overlay to the normal screen image. As the sprite is an overlay, it can be moved around without it affecting the background image.
The Arduboy library has support for sprites but due to the lack of a powerful graphics processor handles them differently. When rendering a sprite, the image is mapped into a single display buffer that may already have a background image drawn on it. If you move the sprite you need to regenerate the background from its old position.
The Arduboy library also provides some nice masking utilities that allow you to render a sprite over a background and have it take that background into account. The drawing functions include:
drawOverwrite()drawErase()drawExternalMask()drawPlusMask()drawSefMasked()
But what do they each do? Consider the following image and mask:
Using these images with the various draw functions produces different results:
drawOverwrite() - The sprite is drawn by simply overwriting what was already there. A bit set to 1 in the frame will set the pixel to 1 in the buffer, and a 0 in the array will set a 0 in the buffer. In the example below, the black corners of the ball are visible as the ball passes into the white area.
drawErase() - Erases the sprite. When "erasing" a sprite, bits set to 1 in the sprite will set the corresponding pixel in the background to 0. Sprite bits set to 0 will not affect the background. In the example below, the ball is not visible on the left hand side of the screen as the white portions of the image has set the background to black. The right hand shows that the white sections of the image have ‘erased’ the white background.
drawExternalMask() and drawPlusMask() - draw a sprite using a mask. As the name implies, the drawExternalMask() function allows the image and mask to be nominated separately whereas drawPlusMask() uses a single image with the mask embedded within it.
When rendering a sprite, bits set to 1 in the mask indicate that the pixel will be set to the value of the corresponding image bit. Bits set to 0 in the mask will be left unchanged. This can be seen clearly as the ball moves into the right hand side of the background. The top-left and bottom-right corners of the image are rendered as black as the mask is set to 1 in these areas which in turn ensures that the images pixels (both zeroes and ones) are rendered on the background.
drawSelfMasked() - Draw a sprite using only the bits set to 1. Bits set to 1 in the frame will be used to draw the sprite by setting the corresponding pixel in the background to 1. Bits set to 0 in the sprite will remain unchanged in the background.
As you can see, when the ball moves onto the white and striped backgrounds the highlights on the ball are not visible on the solid white as the background is rendered (also white!) whereas the highlights are visible on the striped background. This is simply due to the position of the ball that fortuitously placed the highlights over the black area between stripes on the background.
To ensure that the ball’s highlight was always visible, you could create a mask that was the exact shape and size of the ball and was solid – without a highlight – and use either of the drawExternalMask() and drawPlusMask() functions.
A sample application that demonstrates the various draw commands can be found here