HackSpace – September 2019

FORGE

Above

The otter running

across our PyPortal

The final image for our running otter is as follows:

import board
import displayio
from time import sleep
import otter_data
display = board.DISPLAY
group = displayio.Group()

otter_bitmap = displayio.Bitmap(384,96,18)
background_file = open(“/images/background.bmp”,
“rb”)
background_bitmap = displayio
OnDiskBitmap(background_file)
backgroundtile = displayio.TileGrid(background
bitmap, pixel_shader=displayio.ColorConverter())

#load the otter pixel data
counter_x = 0
for line in otter_data.otter_bmp_data:

counter_y = 0
for pixel in line:
otter_bitmap[counter_y,counter_x] = pixel
counter_y = counter_y + 1
counter_x = counter_x + 1

#load the otter pallette data
otter_pallette = displayio.Palette(18)
counter_colour = 0
for colour in otter_data.otter_pallette_data:
otter_pallette[counter_colour] = colour
counter_colour = counter_colour + 1
otter_pallette.make_transparent(0)
otter_tile = displayio.TileGrid(otterbitmap,pixel
shader=otterpallette, width=1, height=1, tile
width=96, tile_height=96)

group.append(background_tile)
group.append(otter_tile)

counter = 0
direction = 1

otter_tile.y=144
while True:
for image_num in range(4):
counter = counter + (9 * direction)
otter_tile[0] = image_num
otter_tile.x = counter
display.show(group)
sleep(0.2)

if counter > 320 or counter < -96:

direction = direction * - 1

otter_tile.flip_x = not otter_tile.flip_x

As you can see, this loops through the data structures

our script created to add the pixels to the bitmap and

the colours to the palette. The only bit the script didn’t

do is extract which colour on the palette relates to the

transparency. We can tell from looking at the data that

it’s the first entry in the palette, so we use the

following code to mark that as a transparent colour:

otter_pallette.make_transparent(0)

Once the transparent bitmap is created, we can use it

in a TileGrid as usual.

As we’re now using two TileGrids in our group (one

for the background and one for the image), the only

thing we need to be careful of is the order they’re in.

Displayio will put them on the screen in the order they

are in the group, and we want our otter to appear on

top of the background, so we append that to the group

after we add the background. You should recognise the

rest of the code from the initial test.

That’s all there is to it. Displayio is a powerful way of

controlling the graphics on your screen, and now runs

fast enough to control animations. This otter should run

at about ten frames per second on a SAMD51 device.

That’s just about enough to make animations look like

animations rather than stuttering images. If you reduce

the size of the animation, you should be able to get it

to run even faster.

You now know enough to take this and embed it in

your own projects. You could use this to display

information relevent to your project, add a little

graphical spice or create an added bit of interest in a

prop or costume.

Whatever you choose to do, let us know about your

makes via Twitter @HackSpaceMag or email

[email protected].