Space Schnablis

May 2019

Space Schnablis is an Arduino Uno sketch for use with a 3.5” ILI9486 TFT display. It uses the MCUFRIEND_kbv library and shows two platypodes flying through space with fireworks and stars in the background. Touching the screen results in even more fireworks.

Photo of the Arduino sketch

Fireworks

A group of sparks is called a firework, if the sparks have the same color, were created at the same time and are moving in different directions. Sparks are stored in an array which holds 64 elements. Creating a new firework at (x, y) with color c results in iterating over the array and modifying up to 10 alive elements by setting their coordinates to (x, y), their colors to c, assigning random values to dx and dy and resetting their age. An element is alive if its age is above 0 (age might not be the best field name).

The properties dx and dy are floats that define by how many pixels an entity moves each frame. age is decremented on each frame.

Clearing leftover pixels

Since clearing the whole screen on every frame would be too slow, only leftover pixels are redrawn with the background color. This is similar to mrt-prodz Flappy Bird clone. Platypodes, for example, always move towards the top left corner by random angles, so it is sufficient only to clear two rects: one to the platypuses right and one below it. The rects have the width or height of the platypuses horizontal or vertical verlocity.

tft.fillRect(e->x + e->width, e->y, ceil(e->dx), e->height, BLACK);
tft.fillRect(e->x, e->y + e->height, e->width, ceil(e->dy), BLACK);

Drawing only necessary parts

Most elements are one (stars) or five (sparks) pixels small and don’t have to have a special way to be drawn. Sprites on the other hand can overflow the screen on all four sides which creates glitches on the display. Usually, sprites are drawn using the libraries pushColors function, which writes the values of an array of colors to the display. If an entity moved outside on the left, right or bottom, only as many pixels as necessary are drawn (moving outside on the upper end does not create glitches).

+----------------+
|            ____|____
|           /....|    \
|          |.....|     |
|          |.....|     |
|           \____|____/
|                |
+----------------+

For example of this, erm, ball only the left half should be visible. That’s why there are five (its height) individual calls to pushColors with six colors each (now that I think of it, my functions should probably be camel cased).