9

FORGE

CREATE BITMAPS WITH GIMP

The easiest way to create a bitmap is with

a pixel editor such as GIMP (gimp.org).

Create a new image with File > New

menu, and set the size to 16×16 with a type

of ‘px’ for pixels. This makes sure there’s

no background scaling. Click on Advanced

Options and make sure ‘Fill with’ is set to

Transparency, so that only the pixels you

draw will be in the output. Click on OK

and then zoom into your new tiny canvas

by either holding down the CTRL key

and using the mouse wheel, or selecting

Zoom from the view menu. To draw your

image, select the pencil tool from the

tools palette, and from the ‘Tool options’

pane, set its size to 1 – this is equivalent

to a single pixel. Finally, make sure the

foreground colour is white. You can now

start drawing your design.

When you’re happy with your art,

select Export As from the File menu and

use the drop-down Type menu to set the

output format to ‘X BitMap image (*.xbm,

*.icon, *.bitmap). Give your image a name

and click Export. The file you’ve just

generated is actually a text file you can

use within your code, just as we have

done in the main project.

The analogRead() functions read the Arduino inputs
from the joystick. All we’re then doing is mapping
the far left to 5 on the x axis and the far right to -8.
The negative is because this axis is inverted, with
the controls being opposite to what you’d expect. All
the points in between will correspond to the degree
the joystick is being moved, but the centre point isn’t
going to be 0, it’s going to be -1. This is a gameplay
trick that will move the ship back to the left edge of the
screen when the player isn’t controlling the ship. The y
axis, by comparison, is a straight translation, with 0 as

the centre point and no automatic movement. These
values can then be added to the ship’s current position
to generate movement when we update the ship’s
location. The further the stick is from the centre, the
greater the jump in the number of pixels, which means
the ship will travel faster across the screen.
The only checks we need to add are for when the
ship hits any of the edges of the screen, which we can
accomplish with simple if statements. Placing all of
this in single a function will look like the following:

void updateShip() {

int xValue, yValue;

xValue = map(analogRead(JOYX), 0, 1024, 5, -8);

// 5, -6 for no move backwards movement

yValue = map(analogRead(JOYY), 0, 1024, -5, 5);

shipx = shipx + xValue;

shipy = shipy + yValue;

if (shipx < 1)

shipx = 1;

if (shipy < 1)

shipy = 1;

if (shipx > display.width() - 12)

shipx = display.width() - 12;

if (shipy > display.height() - 12)

shipy = display.height() - 12; }

All that’s now left to do is to add the two ship
location variables as global, and update the main loop
function to call both the updateShip() function and the
displayShip() function:

int shipx, shipy;

void loop() {

updateShip();

displayShip(shipx, shipy);

display.display();

delay(1);

display.fillScreen(BLACK); }

We now have the framework for a fully fledged

game, which we’ll build in the next tutorial. Until

then, the code for this one can be downloaded

from: git.io/fNXzp.

The further the stick

is from the centre, the

greater the jump in the

number of pixels, which

means the ship will travel

faster across the screen

”

”

Above

GIMP is a good choice for editing large pixels, because you can easily

set the size of the canvas and zoom in