User manual

SNAIL – EMBEDDING
BITMAPS
Game elements were represented mainly by lines and pixels in the previous ex-
amples. This example will teach you how to integrate more complex graphics into
a game. You will get familiar with the online converter on Tiny.systems.
The website
http://tiny.systems/article/mosaic.html
has a tool that allows you to create drawings easily. There is a grey area in the
centre of the website. When you click anywhere now within the area, you are acti-
vating a pixel. If you click on the same pixel again, it will disappear. Click and hold
the mouse button while moving the mouse pointer over the surface. As you can
see, this lets you create entire drawings. For the time being, the drawing area has
a size of 16 x 16 pixels. You can extend the area for larger drawings by clicking on
the right icon below the drawing area. If you are not satisfied with your drawing,
you can delete the entire area by clicking the X.
Try first to create a game figure of 16 x 16 pixels. After you are done, click the
check mark at the bottom left. A long hex code will appear. Copy this into the Snail
program. To do this, open the program by clicking on
File -> Examples ->
GameEngine -> GameEngine1 -> Snail
. You will find the snail variable, which is
already filled with a different graphic, in program line 10. Here you insert the new
hex numbers generated by the Mosaic webpage in place of the existing ones.
When you load the program you will see that the graphic you have drawn will be
shown on the display (remember to adjust the contrast value). Use the directional
buttons to move the graphic across the screen. The new function from the library,
which is responsible for this, is called drawBitmap():
engine.drawBitmap(snailX, snailY, 16, 16, snail);
The first two parameters of the function define the position of the graphic on the
display, while the following two are indicating the size of the graphic. The last pa-
rameter in the parameter list is the variable itself, this is where you have stored the
graphic data. So, displaying graphics on a display can be as easy as that.
But there is also a second option how to create Arduino compatible graphics using
the Mosaic webpage. You may have already noticed the button labelled
Select
File
. Actually, it is possible to upload bitmap files to the webpage where they are
automatically converted to the hex code format. However, you should know that
not all bitmap files are converted that easily. Make sure that you have a mono-
chrome (single colour) bitmap. The straightforward way is to create a bitmap by
yourself using a paint program like MS Paint. The drawing program Gimp is an