9

Arduino programming: Build a games console (part 1/2)

SCHOOL OF MAKING

old term that still exists in places like the .bmp file

extension and graphics programming.

The term ‘bitmap’ refers to an arrangement

of ‘bits’, usually 1 for on and 0 for off, in series

representing adjacent pixels on a screen. Different

rows are represented by knowing the image width.

If an image is 16 pixels wide, for instance, the 17th

bit in the sequence will represent the first pixel on

the second row. It’s really the most simplistic way

of representing an image, although it can easily be

extended to add ‘bit depth’; for example, adding

colour rather than on and off states. Thanks to the

sequential way memory is mapped to a display,

bitmaps remain an effective way of representing

visual elements, especially when you consider this

kind of structure is identical to an array we can use

within our own code. Fortunately, the days when

you needed to use cross-hatched mathematics paper,

to pencil in your own designs and then translate these

into a sequence of binary values, are gone and you

can now draw your own bitmaps in your favourite

image editor and convert them online or using GIMP –

see the box overleaf for further details.

We converted a monochrome image we drew of a

spaceship into the following array:

const unsigned char shipBMP [] PROGMEM = {

// ‘ship, 16x16px

0x00, 0x00, 0x70, 0x00, 0x38, 0x00, 0x1f, 0xe0,

0x18, 0x10, 0x1b, 0x08, 0x9b, 0x88, 0xd9, 0x2c,

0xfb, 0xae, 0xff, 0xff, 0xdf, 0xff, 0x9f, 0xfe,

0x1f, 0xfc, 0x38, 0x00, 0x70, 0x00, 0x00, 0x00

};

The above array contains 32 elements, but it

represents a bitmap that’s 16 pixels wide and 16

pixels high, or 256 on/off positions in total. The

GET CONNECTED

Alongside the Arduino Uno and the 128×64 I^2 C OLED

display we’ve connected for the previous couple of

tutorials, we’ve added an analogue joystick labelled

as KY-023, although almost any analogue joystick

should work. We’re using a version with a small

breakout board, but nearly all joysticks of this type

feature the same five connections: GND and 5 V that

need to be connected to the corresponding outputs in

the Arduino via the rails on your breadboard, VYx and

VRy which we’ve connected to analogue inputs A0

and A1, and SW which we have connected to digital

input pin 7. We then needed to update our project

code to reflect these new inputs, using the following

const global values:

// Analogue joystick connections for X

and Y

const int JOYY = A0;

const int JOYX = A1;

// Digital input for the Joystick switch

const int SWITCH_PIN = 7;

To make this project feel more like a games console

and to make it more accessible to smaller fingers, we

connected a long ribbon cable between the joystick

and its connections. This allowed us to hold the joystick

just as we would a games controller on a console, and

also neatly side-stepped having to deal with horizontal

pins connecting to the breadboard. Of course, if you

end up keeping this configuration, there’s no limit

to how you connect and arrange the components –

from a handheld in a mints tin, to a diminutive home

entertainment system.

Thanks to the sequential

way memory is mapped to a

display, bitmaps remain an

effective way of representing

visual elements

”

”

Below

Our joystick includes

a switch, triggered by

pressing down, which

we’ll use to start

the game

Rather than using

GIMP or similar

to generate your

Arduino bitmap code,

use an online

converter like

hsmag.cc/yGbolA.

QUICK TIP