HackSpace – September 2019

(Wang) #1
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].
Free download pdf