Sprites

Sprites are two-dimensional images that we can draw on a framebuffer. In computer graphics, the term "sprite" is often used to refer to fixed images, like a spaceship or character that is moved around the screen while the games is played. The Ready Set STEM API provides a Sprite() function to create sprites that can then be placed at different locations on the screen — we also provide functions to allow you to flip, crop and rotate your sprite on the display.

To create a sprite, we can use the the Sprite() function with a string representing the sprite:

Sprite(string_sprite)

The string_sprite is a multiple line string, with each character in the string representing the color of one point of the sprite. Each row of the sprite must have the same number of points.

Multiline Strings

Sometimes, we'll want to create a string that has multiple lines. For example, to print() a your grocery list, we might do the following:

print("Cheeze Whiz")
print("Snickers")
print("Mangoes")

However, it is sometimes useful to be able to put several lines all together in one string. Python provides a way to do this with multiline strings. Multiline strings start and end with three quotes. For example, to print the above grocery list with only one print statement, we could use:

print("""Cheeze Whiz
Snickers
Mangoes""")

Just like single-line strings, multiline strings can be enclosed with double quotes or single-quotes, but remember, we'll need three of them.

The sprite colors range from 0 through 15, as discussed previously in . To represent the colors in the string_sprite, we need to use only one digit for each character. So, we use the digits 0 through 9 followed by A through F (where A=10, B=11, and so forth). Plus, sprites add a new color: transparent. To use it, we can put a dash ('-') in the sprite string.

The full list of colors for sprites is:

LED COLOR

0

1

2

3

4

5

6

7

8

9

A

B

C

D

E

F

-

For example, a up-arrow sprite could be created with:

The Sprite() function doesn't care if we add extra spaces at the beginning or end of a line, or if we add extra blank lines. Once we have created a sprite, we can draw it on our framebuffer with the framebuffer's draw() function:

Similar to framebuffers, sprites can also tell us how high and wide they are. For example, to print the height and width of our arrow:

Finally, sprites have several function that allow us to modify the sprite:

Like sound chains described in , sprite functions can be chained. This means that we can do multiple operations (crop, flip, rotate), together in one brief statement.

Examples

Here's a set of examples that all use the same sprite, a flag, as defined below:

Before drawing the flag (just before the fb.draw() function above), there are a number of operations we could do to modify it. The following table shows what the flag would look like for various operations:

Functions

LED Matrix

fb.draw(flag)

000FF000
00F4F000
0F44F000
FFFFF000
0000F000
0000F000
0000F000
0000F000

# Shift right and up
fb.draw(flag, (2,3))

00FFFFF0
000000F0
000000F0
000000F0
000000F0
00000000
00000000
00000000

# Crop the trianglar part
flag.crop((0,4), (4,4))
fb.draw(flag)

00000000
00000000
00000000
00000000
000F0000
00F40000
0F440000
FFFF0000

# Draw the triangular part shifted right and up
flag.crop((0,4), (4,4))
fb.draw(flag, (3,2))

00000000
00000000
000000F0
00000F40
0000F440
000FFFF0
00000000
00000000

# Rotate 90 degrees
flag.rotate(90)
fb.draw(flag)

00000000
00000000
00000000
FFFFFFFF
F44F0000
0F4F0000
00FF0000
000F0000

# Rotate 180 degrees
flag.rotate(180)
fb.draw(flag)

F0000000
F0000000
F0000000
F0000000
FFFFF000
F44F0000
F4F00000
FF000000

# Rotate 270 degrees
flag.rotate(270)
fb.draw(flag)

00000000
00000000
00000000
0000F000
0000FF00
0000F4F0
0000F44F
FFFFFFFF

# Flip horizontally
flag.flip(vertical=False)
fb.draw(flag)

FF000000
F4F00000
F44F0000
FFFFF000
F0000000
F0000000
F0000000
F0000000

# Flip veritcally
flag.flip(vertical=True)
fb.draw(flag)

0000F000
0000F000
0000F000
0000F000
FFFFF000
0F44F000
00F4F000
000FF000

# Crop the trianglar part, then rotate
flag.crop((0,4), (4,4)).rotate(90)
fb.draw(flag)

00000000
00000000
00000000
00000000
F44F0000
0F4F0000
00FF0000
000F0000

# Crop, rotate, then reset
# Original image will be restored!
flag.crop((0,4), (4,4)).rotate(90).reset()
fb.draw(flag)

000FF000
00F4F000
0F44F000
FFFFF000
0000F000
0000F000
0000F000
0000F000