Conrad 10223 Operation Manual [de]

10223-0 Spieleprogrammierung mit dem Arduino_03.indd 110223-0 Spieleprogrammierung mit dem Arduino_03.indd 1 14.09.2016 08:37:4514.09.2016 08:37:45

10223-0 Spieleprogrammierung mit dem Arduino_03.indd 210223-0 Spieleprogrammierung mit dem Arduino_03.indd 2 14.09.2016 08:37:5314.09.2016 08:37:53

INHALT

4

.

4

.

5

.

.

.

..............................................................................................................

..............................................................................

0

................................................................................................................

4

..................................................................................................

8

1

...................................................................................................................................

1 Einführung ...............................................................................................................................

1.1 Das Display-Shield ...................................................................................................

1.2 Das Joypad-Shield ...................................................................................................

1.3 Montage ......................................................................................................................

1.4 Die Dokumentation ..................................................................................................

1.5 Die Community ..........................................................................................................

1.6 Die Entwicklungsumgebung (IDE) ...........................................................................

8

2 Ball – Einstieg in die Spiele programmierung

3 Pong – mal anders

4 Snail – Bitmaps einbinden

5 Flappy Bird – Spielspaß mit Game Engine

6 Anhang

1

1

1

10223-0 Spieleprogrammierung mit dem Arduino_03.indd 310223-0 Spieleprogrammierung mit dem Arduino_03.indd 3 14.09.2016 08:37:5414.09.2016 08:37:54

4

EINFÜHRUNG

1

Vor Ihnen liegen die Bauteile für das Spielepaket. Neben der Schnellstart­anleitung fi nden Sie vor sich das LCD-Display-Shield und das Joypad­Shield. Beide Platinen wurden speziell für den Arduino Uno entwickelt
und passgenau abgestimmt. Sie ermöglichen Ihnen, die vorgestellten
Beispiele auszuprobieren oder eigene Spiele zu entwickeln. Schauen Sie
sich die beiden Shields einmal genauer an. Es gibt viel zu entdecken.

1.1 | Das Display-Shield

Das Display-Shield

10223-0 Spieleprogrammierung mit dem Arduino_03.indd 410223-0 Spieleprogrammierung mit dem Arduino_03.indd 4 14.09.2016 08:37:5414.09.2016 08:37:54

Bei dem Display-Shield handelt es sich um eine Platine, die das LCD-Dis­play 12864 LCD ST7565 zusammen mit zwei Hardwarebuttons Arduino­kompatibel macht. Das Display hat eine Aufl ösung von 128 x 64 px und
wird über SPI (Serial Peripheral Interface) angesteuert. Zu den techni-
schen Daten:

Display-Shield Arduino-Uno-kompatibles Shield

Display DXDCG12864-4330

Displaycontroller ST7565

Aufl ösung 128 x 64 px

Betriebsspannung 3,3 V

Peripherie 2 Onboard-Taster (an A4 und A5)

Displaygröße 38 x 20 mm

Sonstiges verkürzte Bauform – 14 freie I/O-Ports am Arduino

Sie müssen sich allerdings nicht allzu sehr in die Details der Displayan­steuerung einarbeiten, denn eine Library nimmt Ihnen den Großteil der
Arbeit ab, sodass Sie sich voll auf die Programmierung von Spielen kon­zentrieren können. Wenn Sie Interesse an detaillierteren Informationen
rund um die Ansteuerung des Displays und dessen Eigenschaften ha­ben, empfehle ich Ihnen das Lernpaket „Franzis Maker Kit Grafi kdisplays
programmieren“.

1.2 | Das Joypad-Shield

5

Das Joypad-Shield

Das Joypad-Shield wurde speziell für dieses Projekt entwickelt, und es
ermöglicht Ihnen, Spiele praktisch und intuitiv zu bedienen. Es befi nden
sich sechs Buttons auf dem Shield. Vier davon sind zu einem Steuer­kreuz angeordnet, sodass Richtungen intuitiv eingegeben werden kön­nen. Zwei weitere Buttons werden individuell dem Spiel entsprechend
mit Funktionen belegt. Insgesamt haben Sie also acht Buttons zur Ver­fügung, mit denen sich eine ganze Menge Spiele und Funktionen reali­sieren lassen.

Neben den Buttons ist auch noch ein kleiner Piezo-Schallwandler als
Lautsprecher auf der Platine verbaut. Sie können also nicht nur über das
Display Informationen übermitteln, sondern auch akustisch Feedbacks
geben. Zu den technischen Daten:

Joypad-Shield Arduino-Uno-kompatibles Shield

Eingabe 6 Kurzhubtaster (Steuerkreuz + 2 Aktionstasten)

Soundausgabe integrierter Lautsprecher TMB12A05

10223-0 Spieleprogrammierung mit dem Arduino_03.indd 510223-0 Spieleprogrammierung mit dem Arduino_03.indd 5 14.09.2016 08:37:5414.09.2016 08:37:54

6 1 | Einführung

g

g

-

g

g

0

ese

ebseite:

1.3 | Montage

Wie eingangs erwähnt, passen beide Shields optimal auf einen Arduino
Uno. Dabei sollten Sie darauf achten, dass das Display-Shield mit den
oberen Steckplätzen des Arduino Uno exakt abschließt.

Das Joypad-Shield passt dann genau auf die unteren Steckleisten, wie
in der Abbildun
Handhabun
in die Hand nehmen und bedienen.

zu sehen ist. In dieser Konstellation haben Sie die beste

und können den Arduino auch zusammen mit dem Shield

1.4 | Die Dokumentation

Diese Schnellstartanleitung liefert Ihnen erste Informationen und einfa
che Beispiel für einen gelungenen Einstieg in die Spieleprogrammierung.
Den Hauptteil der Informationen fi nden Sie in dem online verfü
Handbuch zur Spielepro

erunterladen unter:

-

Zusätzlich zu dem Handbuch fi nden Sie dort auch die benötigte Library

nd die vorgestellten Beispiele.

rammierung. Sie können das vollständige PDF

ttp://www.buch.cd

Der dazugehörige Code lautet

baren

1.5 | Die Community

ls Erweiterung zu dem Projekt fi nden Sie zusätzliche Informationen

h auf di

ttp://tiny.systems/spielekonsole

10223-0 Spieleprogrammierung mit dem Arduino_03.indd 610223-0 Spieleprogrammierung mit dem Arduino_03.indd 6 14.09.2016 08:37:5514.09.2016 08:37:55

r W

1 | Einführung 7

g

d

h-

j

.

g

duino

ebs-

:

j

g

-

g

n

-

.

-

-

g

-

0

auf

n

g

Hier können Sie nicht nur auf zukünftige Updates zur Library oder den

rammen zugreifen, sondern auch auf einige weiterführende Projekte

Pro

Informationen der beiden Autoren. Darüber hinaus werden hier wic

un
tige Onlinetools bereitgestellt, die Sie für die Bearbeitung Ihrer eigenen
und der Beispielpro

ekte benötigen

1.6 | Die Entwicklungsumgebung (IDE)

Damit Sie überhaupt etwas entwickeln können, benötigen Sie zunächst

ine möglichst einfach zu handhabende Entwicklungsumgebung (kurz:

IDE) sowie eini

-IDE verwendet. Sie fi nden die aktuellste Version für Ihr Betri

Ar
system auf der Seite

www.Arduino.cc/Downloads

e Tools. Als IDE wird hier die bekannte und oft genutzte

Wir haben in unseren Pro
Anleitun

en in diesem Buch sollten auch mit neueren Versionen funkti

ekten mit der Version 1.6.7 gearbeitet, aber die

nieren. Nach dem Download und der Installation der Umgebung wählen

Sie noch das richti

e Board und den richtigen Port unter Einstellunge

aus, und schon können Sie Ihren Arduino bzw. Ihre Spielkonsole pro

rammieren

Neben Arduino werden noch ein paar andere Tools genutzt, unter ande
rem eine Software zum Erstellen und Bearbeiten von Grafi ken. In die
sem Buch wurden sowohl das Windows-Programm Paint als auch der
Open-Source-Editor Gimp verwendet. Mit einem Onlinetool auf tiny.sys­tems können Sie schließlich diese Grafi ken in ein kompatibles Format
umwandeln – doch dazu später mehr.

Zunächst ist es noch wichti
spiele von der Seite

ttp://www.buch.cd.

, dass Sie die Library inklusive der Bei

er dazugehörige Code lautet

10223-

herunterladen und installieren. Zum Installieren der Library müssen Sie

infach die Zip-Datei über den Library-Manager einbinden. Klicken Sie

zu

Sketch -> Bibliothek einbinden -> .Zip-Bibliotheknzufüge
und wählen Sie dort die eben heruntergeladene Library-Zip-Datei aus.
Schon sollte unten eine Erfol

smeldung erscheinen.

10223-0 Spieleprogrammierung mit dem Arduino_03.indd 710223-0 Spieleprogrammierung mit dem Arduino_03.indd 7 14.09.2016 08:37:5514.09.2016 08:37:55

8 1 | Einführung

g

i-

g

g

,

o.

g

g

1.7 | Hardwaretest

Die IDE und die Beispielprogramme sind nun eingerichtet – Zeit, das erste

ramm auf den Arduino zu laden. Öffnen Sie dazu über

Pro

spiele -> GameEngine -> Starter das erste Programm und klicken Sie

auf den Upload-Button. Nach kurzer Zeit sehen Sie eine Erfol

nten im Debug-Fenster. Das Display sollte nun in etwa so aussehen wie
auf der Abbildun
Buttons direkt unterhalb des Displays herum. Auf diese Weise stellen Sie
den Kontrast des Displays ein und beheben damit die wahrscheinlichs­te Ursache dafür

ichts auf dem Display zu erkennen sein, überprüfen Sie die Position der

iden Shields auf dem Arduin

atei -> Be

smeldung

unten. Ist das nicht der Fall, spielen Sie mit den beiden

dass Sie noch nichts sehen können. Sollte dennoch

Stellen Sie nun den für Sie optimalen Kontrastwert ein und merken Sie sich
diesen Wert. In den fol

en, damit das Display auch immer gut lesbare Anzeigen liefert.

eintra

10223-0 Spieleprogrammierung mit dem Arduino_03.indd 810223-0 Spieleprogrammierung mit dem Arduino_03.indd 8 14.09.2016 08:37:5514.09.2016 08:37:55

enden Projekten müssen Sie ihn in das Programm

1 | Einführung 9

g

-

g

r

g

In diesem Beispielpro

ramm können Sie außerdem die verschiede
nen Funktionen der Shields testen. Drücken Sie beispielsweise einen
Joypad-Button, wird dieser auf der Anzei

e hervorgehoben. Auch den
Sound können Sie testen. Sie sollten nun also die volle Funktionalität alle
Komponenten überprüfen, bevor es richti

losgeht.

10223-0 Spieleprogrammierung mit dem Arduino_03.indd 910223-0 Spieleprogrammierung mit dem Arduino_03.indd 9 14.09.2016 08:37:5614.09.2016 08:37:56

10

{

l(ball

);

;

;

;

;

BALL  EINSTIEG

2

IN DIE SPIELE
PROGRAMMIERUNG

Sie haben nun also alles eingerichtet und getestet –
Zeit, sich der tatsächlichen Spieleentwicklung zu wid­men. Öffnen Sie dazu das Beispielprogramm Ball über
Datei -> Beispiele -> GameEngine -> Ball.

In diesem ersten, einfachen Beispielprogramm geht es
um das Zeichnen und Bewegen eines einfachen Ob-

jekts, eines Balls. Passen Sie zunächst den Kontrast
in der Programmzeile 9 an. In dieser Zeile befi ndet sich innerhalb der
Setup-Routine der Befehl engine.init(20). Die Zahl 20 in den Klammern
können Sie durch Ihren individuellen Kontrastwert ersetzen. Dies wird
auch in den folgenden Projekten nötig sein. Anschließend können Sie
das Programm auf den Arduino laden. Nach erfolgreichem Upload sehen
Sie ein einfaches Objekt in der Mitte des Displays. Doch wie wurde dies
programmiertechnisch realisiert?

001void drawBall()
002 engine.drawPixe

3 engine.drawPixel(ballX + 1, ballY)

004 engine.drawPixel(ballX - 1, ballY)

5 engine.drawPixel(ballX, ballY + 1)

006 engine.drawPixel(ballX, ballY - 1)

}

X, ballY

10223-0 Spieleprogrammierung mit dem Arduino_03.indd 1010223-0 Spieleprogrammierung mit dem Arduino_03.indd 10 14.09.2016 08:37:5614.09.2016 08:37:56

Mit der Funktion, die den passenden Namen drawBall() trägt, wird der
Ball auf das Display gebracht. Es sind nur ein paar einfache Zeilen not­wendig, um die passenden Pixel auf dem Display zu aktivieren. Dies liegt
vor allen daran, dass die meiste Arbeit im Hintergrund von der Game
Engine übernommen wird. Die aktuelle Position des Balls ist über die Va­riablen ballX und ballY bekannt. Durch die drawPixel()-Funktionsaufrufe,
die an der aktuellen Position des Balls und in seiner direkten Umgebung
des Balls die Pixel aktivieren, wird der gesamte Ball gezeichnet. Sie kön­nen die Form des Balls auch anpassen, indem Sie variieren, welche Pixel

rund um die Ballposition ebenfalls aktiviert werden sollen. Beachten Sie,

ll() {

;

;

;

5

{

)){

1;

}

{

;

}

dass sich in der oberen linken Ecke das Pixel mit der Position 0,0 befi n­det.

001void moveBa
002 ballX = ballX + 1

ballX = ballX % 128
ballY = ballY % 64

00

11

Mit der Funktion moveBall() wird schließlich Bewegung in den Ball ge­bracht. Jedes Mal, wenn diese Funktion aufgerufen wird, erhöht sich die
x-Position des Balls um 1. Im Klartext bedeutet dies, dass sich der Ball
auf dem Display nach rechts bewegt. Die beiden Zeilen darunter sorgen
dafür, dass der Ball nicht die Dimensionen des Displays verlässt.

Über die Modulo-Funktion ist gewährleistet, dass die x-Koordinate nie
größer als 128 sein kann und die y-Koordinate nie größer als 64 – also
genau entsprechend den 128 x 64 Pixeln, die Ihnen auf dem Display zur
Verfügung stehen.

001void controlBall()

if(engine.joypad.isPressed(UP
ballY = ballY -

if(engine.joypad.isPressed(DOWN))

006 ballY = ballY + 1
007

10223-0 Spieleprogrammierung mit dem Arduino_03.indd 1110223-0 Spieleprogrammierung mit dem Arduino_03.indd 11 14.09.2016 08:37:5614.09.2016 08:37:56

12 2 | Ball – Einstieg in die Spiele programmierung

g

g

g

g

-

g

erden.

{

()){

;

{

}

ll()

9

g

-

()

-

ber die controlBall()-Funktion können Sie nun den Ball auch steuern.

Die Tasten des Joypads werden dabei auf einfache Weise ab

ine.joypad.isPressed(UP) gibt den Wert TRUE zurück, wenn

erade gedrückt ist. Dann wird die y-Position des Balls um ein

ert, was zur Folge hat, dass sich der Ball dem oberen Dis-

;

2

Funktion en
die Taste
Pixel verrin

layrand nähert. Analog dazu gibt es die Funktion engine.joypad.isPres

ed(DOWN). Sie können also über die Richtungstasten nach oben und

nten die Höhe des Balls beeinfl ussen, während er sich auf dem Display
ach rechts bewegt. Erreicht er das eine Ende des Displays, erscheint er

wieder am anderen Ende. Damit diese drei Funktionen

pielen, müssen sie an passender Stelle in der loop-Routine aufgerufen

w

void loop()

if(engine.update

003 controlBall()
004 if(engine.isFrameCount(20))
005 moveBall();
006

drawBa

008 }
00

efragt. Die

ut zusammen-

Dazu gibt es in Arduino die loop-Funktion, die dauerhaft durchläuft. Über
die Funktion en
tionen, wie das Zeichnen des Balls und das Auswerten der Tasten, ausge-

ührt wurden, bevor der nächste Durchgang durchlaufen wird. Die Funk-

tion moveBall

ur alle 20 Frames aufgerufen. Es wird also zunächst 20-mal der Inhalt
des Displays aktualisiert, bevor sich die Position des Balls verändern darf.
Der Grund dafür ist, dass sich der Ball sonst viel zu schnell bewegen wür
de.

10223-0 Spieleprogrammierung mit dem Arduino_03.indd 1210223-0 Spieleprogrammierung mit dem Arduino_03.indd 12 14.09.2016 08:37:5614.09.2016 08:37:56

ine.update() wird sichergestellt, dass alle Engine-Funk

hat allerdings noch eine weitere Einschränkung – sie wird

2 | Ball – Einstieg in die Spiele programmierung 13

10223-0 Spieleprogrammierung mit dem Arduino_03.indd 1310223-0 Spieleprogrammierung mit dem Arduino_03.indd 13 14.09.2016 08:37:5614.09.2016 08:37:56

14

PONG  MAL

3

ANDERS

In dem nun folgenden Beispielprogramm geht es um das bekannte Spiel
Pong, allerdings etwas anders, als Sie es vermutlich kennen. Anstatt ei­nen der Schläger zu bedienen, beeinfl ussen Sie hier den Ball durch die
Richtungstasten. Ganz nebenbei lernen Sie zudem neue Elemente der
Spieleprogrammierung kennen.

Pong wurde 1972 von Atari veröffentlicht und ist eines der bekanntes­ten Spiele überhaupt. Es ist angelehnt an das Spiel Ping Pong oder auch
Tischtennis. In der klassischen Version spielen zwei Spieler gegeneinan­der. Auf den beiden gegenüberliegenden Seiten eines virtuellen Spiel­felds gibt es je einen Schläger in Form eines Strichs. Ein Ball bewegt sich
nun über den Bildschirm, und der Spieler muss versuchen, mit seinem
Schläger den Ball abzuwehren und in Richtung des Gegners zurückzu­spielen. Gelingt ihm das nicht, bekommt der Gegner einen Punkt.

10223-0 Spieleprogrammierung mit dem Arduino_03.indd 1410223-0 Spieleprogrammierung mit dem Arduino_03.indd 14 14.09.2016 08:37:5614.09.2016 08:37:56

In dieser Version spielen Sie die Rolle des Balls, während die beiden
Schläger vom Computer gesteuert werden. Sie müssen versuchen, den
Ball möglichst lange im Spiel zu halten.

Das Beispielprogramm öffnen Sie mit einem Klick auf:

Datei -> Beispiele -> GameEngine -> GameEngine1 -> Pong

Das Programm enthält viel bereits Bekanntes. Auch dieses Mal gibt es
beispielsweise die Funktion drawBall(), die – abhängig von der aktuel­len Position – einen Ball auf das Spielfeld malt. Analog dazu gibt es die
Funktionen drawPlayer() und drawField(), die die beiden Schläger auf
das Display zeichnen. Dabei gibt es bei drawField() noch eine neue Funk-

tion, nämlich drawValue(), die an der angegebenen Position das aktuelle

{

{

}

{

}

{

;

}

{

;

;

}

;

;

8

{

{

Level bzw. den Punktestand zeichnet. Das aktuelle Level ändert sich im­mer dann, wenn der Ball erfolgreich abgewehrt wurde. Dies wird über die
Funktion moveBall() überprüft.

001void moveBall()

if (ballX == 1 || ballX == 127)
setup();

005 if (ballY == 1 || ballY == 63)
006 collisionY = collisionY * -1;

008 if (abs(ballX - player1X) <=2 && abs(ballY - player1Y) < 9)

collisionX = collisionX * -1

10 level++;

011

12 if (abs(ballX - player2X) <=2 && abs(ballY - player2Y) < 9)

13 collisionX = collisionX * -1
014 level++
015

16 ballX = ballX + collisionX

17 ballY = ballY + collisionY
01

15

Wie Sie sehen, gibt es verschiedene Abfragen über die Position des Balls.
Befi ndet er sich an der x-Position bei 1 oder 127, bedeutet dies, dass er
nicht erfolgreich abgewehrt wurde und am linken oder rechten Rand aus
dem Spielfeld gefl ogen ist. In diesem Fall wird die Setup-Routine aufge­rufen, und das Spiel kann von vorne beginnen. Befi ndet sich der Ball an
der y-Position 1 oder 63, prallt der Ball an der oberen bzw. unteren Kante
ab, indem die collisionY-Variable negiert und somit die Richtung der Ball­bewegung umgekehrt wird. In den beiden Abfragen

f (abs(ballX - player1X) <=2 && abs(ballY - player1Y) < 9)

wird festgestellt, ob der Ball an einem Schläger refl ektiert wird, indem
überprüft wird, ob der Ball nah genug am Schläger ist und ob er auf den
Schlägers trifft. Ist dies der Fall, wird die Bewegungsvariable in x-Rich­tung umgekehrt und das Level erhöht.

001void movePlayer()

if (player1Y < 7)

10223-0 Spieleprogrammierung mit dem Arduino_03.indd 1510223-0 Spieleprogrammierung mit dem Arduino_03.indd 15 14.09.2016 08:37:5714.09.2016 08:37:57

16 3 | Pong – mal anders

;

}

{

;

}

;

{

;

}

{

;

}

;

g

g

.

{

){

;

}

{

;

}

{

;

}

){

;

}

g

gung

3 player1Y++
004
005 if (player1Y > 55)

3

006 player1Y--

player1Y = (player1Y -1 + random(3))

if (player2Y < 7)

010 player2Y++
011

12 if (player2Y > 55)

13 player2Y-­014
015 player2Y = (player2Y -1 + random(3))
016

Die Spielerbewegung (Schläger) hingegen wird zufällig festgelegt. Vor-

er wird nur überprüft, ob der Schläger zu nah an die obere oder untere

erät. Eine Verschiebung nach oben oder unten wird durch Addie-

Kante

en einer Zufallszahl zwischen -1 und 1 erzeugt. Der Funktionsaufruf ran-

dom(3) erzeu

t Zufallszahlen zwischen 0 und 2. Dieser Wertebereich wird

it „-1“ auf den nötigen Wertebereich verschoben

001void controlBall()
002 if(engine.joypad.isPressed(UP) && ballY > 2
003 ballY = ballY - 1
004

if(engine.joypad.isPressed(DOWN) && ballY < 61)

006 ballY = ballY + 1

008 if(engine.joypad.isPressed(LEFT) && ballX > 13)
009 ballX = ballX - 1
010
011 if(engine.joypad.isPressed(RIGHT) && ballX < 115

12 ballX = ballX + 1
013
014

In der Funktion controllBall() werden nun die Buttons abgefragt, und die
Position des Balls wird entsprechend der Ein

abe verändert. Aber der

störrische Ball“ unterliegt natürlich den Gesetzen der Physik. Die natürli-

che Bewe

10223-0 Spieleprogrammierung mit dem Arduino_03.indd 1610223-0 Spieleprogrammierung mit dem Arduino_03.indd 16 14.09.2016 08:37:5714.09.2016 08:37:57

des Balls kann also nur beeinfl usst werden.

3 | Pong – mal anders 17

{

{

;

{

}

{

}

();

;

;

}

4

g

g

-

g

g

g

gung

g

void loop()

002 if(engine.update())
003 controlBall()
004 if(engine.isFrameCount(10 - (level/10)))

moveBall();

if(engine.isFrameCount(25 - (level/4)))

008 movePlayer();

drawPlayer

11 drawBall()
012 drawField()
013
01

Damit der zeitliche Ablauf aller Funktionen gut koordiniert ist, müssen
sie in der loop-Routine nacheinander auf
isFrameCount() wird dazu verwendet, die Geschwindi

erufen werden. Die Funktion

keit von Ereignis
sen zu steuern. Die Position des Balls wird alle 10 Bildaufbauten und die
des Schlä
also häufi
ein
somit die Bewe
schwieri

ers alle 25 Bildaufbauten verändert. Die Ballbewegung wird
er aktualisiert. Zudem ist auch der Schwierigkeitsgrad hier

ebaut. Mit jedem Level wird das Updateintervall etwas kürzer und

schneller. Das Spiel wird mit der Zeit daher immer

er.

10223-0 Spieleprogrammierung mit dem Arduino_03.indd 1710223-0 Spieleprogrammierung mit dem Arduino_03.indd 17 14.09.2016 08:37:5714.09.2016 08:37:57

18

SNAIL  BITMAPS

4

EINBINDEN

In den vorangegangenen Beispielen wurden die Spielelemente vor allem
durch Linien und Pixel dargestellt. In diesem Beispiel erfahren Sie nun,
wie Sie auch komplexere Grafi ken in ein Spiel integrieren. Dazu lernen
Sie den Onlinekonverter auf Tiny.systems kennen.

Auf der Internetseite

http://tiny.systems/article/mosaic.html

befi ndet sich ein Tool, mit dem Sie sehr einfach Zeichnungen erstellen
können. Auf dieser Webseite fi nden Sie in der Mitte eine graue Fläche.
Wenn Sie nun an eine beliebige Stelle in der Fläche klicken, aktivieren
Sie damit ein Pixel. Klicken Sie auf dasselbe Pixel noch einmal, ver­schwindet es wieder. Klicken Sie und halten Sie die Maustaste gedrückt,
während Sie den Mauszeiger über die Fläche bewegen. Wie Sie sehen,
können Sie so auch ganze Zeichnungen erstellen. Die Zeichenfl äche hat
zunächst eine Größe von 16 x 16 px. Für größere Zeichnungen können Sie
die Fläche durch einen Klick auf das rechte Symbol unter der Zeichenfl ä­che vergrößern. Sollten Sie mit Ihrer Zeichnung unzufrieden sein, können
Sie mit einem Klick auf das X die gesamte Fläche löschen.

10223-0 Spieleprogrammierung mit dem Arduino_03.indd 1810223-0 Spieleprogrammierung mit dem Arduino_03.indd 18 14.09.2016 08:37:5714.09.2016 08:37:57

Für den ersten Versuch können Sie eine Spielfi gur der Größe 16 x 16 px
erstellen. Wenn Sie fertig sind, klicken Sie auf den Haken unten links.
Es erscheint ein recht langer Hex-Code, den Sie in das Snail-Programm
kopieren müssen. Öffnen Sie dazu das Programm mit einem Klick auf
Datei -> Beispiele -> GameEngine -> GameEngine1 -> Snail. In Zeile 10
des Programms fi nden Sie die Variable snail, die schon mit einer anderen
Grafi k gefüllt ist. Fügen Sie anstelle der vorhandenen Hex-Zahlen nun die
neuen von der Mosaic-Seite generierten ein. Sie können das Programm
anschließend hochladen und werden feststellen, dass die von Ihnen
gezeichnete Grafi k auf dem Display erscheint (vergessen Sie nicht, den
Kontrastwert anzupassen). Mit den Richtungstasten können Sie die Gra­fi k über den Bildschirm bewegen. Dafür ist eine neue Funktion der Li­brary zuständig, die drawBitmap() heißt:

engine.drawBitmap(snailX, snailY, 16, 16, snail);

Die ersten beiden Parameter der Funktion bestimmen die Position der
Grafi k auf dem Display, während die folgenden beiden die Größe der
Grafi k angeben. An letzter Stelle in der Parameterliste steht die Variable
selbst, in der Sie die Grafi kdaten hinterlegt haben. So einfach kann das
Darstellen von Grafi ken auf dem Display sein.

19

Es gibt aber noch eine zweite Möglichkeit, Arduino-kompatible Grafi kda­ten mit der Mosaic-Seite zu erstellen. Vielleicht ist Ihnen der Button, der
mit Datei auswählen beschriftet ist, schon aufgefallen. Es ist nämlich
möglich, Bitmap-Dateien auf die Seite hochzuladen und automatisch
in Hex-Code formatieren zu lassen. Beachten Sie aber, dass sich nicht
alle Bitmap-Dateien so einfach konvertieren lassen. Sie müssen darauf
achten, dass es sich um ein monochromes (einfarbiges) Bitmap han­delt. Am einfachsten ist es, sich selbst mit einem Malprogramm wie MS
Paint ein solches Bitmap zu erstellen. Alternativ ist z.B. das Zeichenpro­gramm Gimp gut dafür geeignet.

So Speichern Sie das Bild in Paint richtig.

10223-0 Spieleprogrammierung mit dem Arduino_03.indd 1910223-0 Spieleprogrammierung mit dem Arduino_03.indd 19 14.09.2016 08:37:5714.09.2016 08:37:57

20 4 | Snail – Bitmaps einbinden

-

ese Date

d

,

g

Dem Beispielordner dieses Programms liegt bereits ein passend for

atiertes Bild bei. Es trägt den Namen

ie Mosaic-Seite hochladen, und als Ausgabe bekommen Sie

l. snail) auf dem Display, sobald Sie das Programm hochladen.

4

Sie auf
die Bildinformation in Form von Hex-Zahlen. Diese Hex-Zahlen kopieren
Sie nun wieder in die snail-Variable
(en

nail.bmp Di

und schon erscheint eine Schnecke

i können

10223-0 Spieleprogrammierung mit dem Arduino_03.indd 2010223-0 Spieleprogrammierung mit dem Arduino_03.indd 20 14.09.2016 08:37:5714.09.2016 08:37:57

4 | Snail – Bitmaps einbinden 21

10223-0 Spieleprogrammierung mit dem Arduino_03.indd 2110223-0 Spieleprogrammierung mit dem Arduino_03.indd 21 14.09.2016 08:37:5814.09.2016 08:37:58

22

FLAPPY BIRD 

5

Flappy Birds auf
dem Display

SPIELSPASS MIT
GAME ENGINE 1

Dies ist das letzte Beispiel in dieser Schnellstartanleitung, und hier steht
in erster Linie der Spaß im Vordergrund. Bei dem folgenden Programm
handelt sich um ein kleines Geschicklichkeitsspiel, ursprünglich für
Smartphones entwickelt, das sich vor allem am Anfang des Jahres 2014
großer Popularität erfreute. Der Entwickler Dong Nguyen entschied sich
allerdings im Februar desselben Jahres, das Spiel aus den App-Stores zu
nehmen. Dennoch gibt es aktuell etliche Klone, sodass das Spielprinzip bis
heute populär ist.

Das Programm öffnen Sie über Datei -> Beispiele -> GameEngine ->
Game Engine1 -> FlappyBirdClone. Ziel des Spiels ist es, mit einem kleinen
Vogel zwischen zwei Rohren hindurchzufl iegen. Das Display ist bei die­sem Spiel seitlich gedreht, sodass Sie die Länge des Displays ausnutzen
können. Die Steuerung ist leicht zu merken, denn man benötigt nur den
normalerweise nach links zeigenden Hardwarebutton, mit dem man dem
Vogel einen kurzen Aufschwung geben kann. Dennoch ist eine Menge Ge­schicklichkeit gefragt, denn drückt man zu lange auf den Button, stößt der
Vogel oben am Kanalrohr an, der Schwung reicht nicht aus, und der Vogel
stürzt ab. Dazu erhöht sich der Schwierigkeitsgrad mit jedem Hindernis,
da die Lücke zwischen den beiden Röhren immer kleiner wird. Wenn der
Vogel scheitert, wird die Anzahl der überwundenen Hürden angezeigt. Mit
erneutem Druck auf die Taste kann man von vorne starten.

Das Programm ist ein nettes Geschicklichkeitsspiel für zwischendurch
– und zugleich Anlass für eine Menge Frust. Es macht dennoch sehr viel
Spaß, gegen Freunde im direkten Vergleich anzutreten. Damit Sie den
Controller mit dem Display auch mobil nutzen können, gibt es die Mög­lichkeit, eine Batterie anzuschließen. Dabei sollten Sie allerdings immer
darauf achten, die Stromversorgung nach dem Spielen wieder zu trennen,
denn das Arduino-Board ist mit ca. 70 mA ein ziemlich energiehungriger
Verbraucher.

Der Quelltext des Projekts ist sehr umfangreich und wird an dieser Stelle
nicht genauer erläutert. Es werden allerdings ausschließlich Funktionen
aus der Ihnen nun bekannten Game Engine 1 verwendet. Sie sehen also,
wie viel sich bereits mit diesen Mitteln realisieren lässt. Das eingangs er­wähnte Onlinehandbuch taucht noch tiefer in die Spieleprogrammierung
ein. Es stellt weitere Spiele vor, gibt Beispiele, und auch zusätzliche Game­Engines werden vorgestellt; somit erweitern sich die Arten und Möglich­keiten der Spiele. Neben einem Super-Mario-Ableger und einem Point-n­Click-Adventure lernen Sie auch die wichtigsten Spielelemente kennen
und können zum Schluss Ihre ganz eigenen Spiele programmieren.

10223-0 Spieleprogrammierung mit dem Arduino_03.indd 2210223-0 Spieleprogrammierung mit dem Arduino_03.indd 22 14.09.2016 08:37:5814.09.2016 08:37:58

ANHANG

)

el

y-

)

der

ue

y-

uezeichnet eine

)

eCount

e

e

p

Eine kurze Zusammenfassung der wichtigsten Befehle der Game Engine 1:

23

6

yte contrast

0–63

update - Update der Game Engine

rawPix

drawLine byte x1, byte y1

rawVal

drawBitmap byte x, byte y, byte

Fram

joypad.isPressed byte button gibt TRUE zurück, wenn der Button

byte x, byte y (x-,
Position

(Punkt 1) byte x2,
byte y2 (Punkt 2)

byte x, byte y (x-,
Position), byte
val

width, byte height,
const byte bitmap[]

byte fram

Initialisierung des Displays mit zu
übergebendem Kontrastwert

(Displayinhalte übertragen, Eingaben
abfragen usw.)

zeichnet einen Punkt an

egebenen Position

zeichnet eine Linie zwischen den
beiden Punkten (x1, y1) und (x2, y2)

n Punktestand an einer

beliebigen Position (x, y

zeichnet eine Bitmap an Position x, y
mit der Länge (width) und der Breite
(height)

gibt TRUE zurück, wenn die in
Klammern angegebene Anzahl an
Bildern (Frames) gezeichnet wurde;
Verwendung: zeitgesteuerte Abläuf

gedrückt wird (RIGHT, LEFT, DOWN,
UP, A, B)

bee

10223-0 Spieleprogrammierung mit dem Arduino_03.indd 2310223-0 Spieleprogrammierung mit dem Arduino_03.indd 23 14.09.2016 08:37:5814.09.2016 08:37:58

erzeugt einen Beep (Ton)

Impressum

g

f

r

.

h

i

.

n

m

r

n

g

z

.

n

e

stellen be

.

2016 Franzis Verlag GmbH, 85540 Haar bei München

www.elo-web.de
Autor: Fabian Kainka und Thomas Baum
Produktmanager: Dr. Markus Stäuble
ISBN 978-3-645-10223-0

Produziert im Auftrag der Firma Conrad Electronic SE, Klaus-Conrad-Str. 1, 92240 Hirschau

lle Rechte vorbehalten, auch die der fotomechanischen Wiedergabe und der Speicherun

n elektronischen Medien. Das Erstellen und Verbreiten von Kopien auf Papier, au

atenträger oder im Internet, insbesondere als PDF, ist nur mit ausdrückliche
enehmigung des Verlags gestattet und wird widrigenfalls strafrechtlich verfolgt
ie meisten Produktbezeichnungen von Hard- und Software sowie Firmennamen und

irmenlogos, die in diesem Werk genannt werden, sind in der Regel gleichzeitig auc

eingetragene Warenzeichen und sollten als solche betrachtet werden. Der Verlag folgt be

en Produktbezeichnungen im Wesentlichen den Schreibweisen der Hersteller
lle in diesem Buch vorgestellten Schaltungen und Programme wurden mit der größtmögliche

Sorgfalt entwickelt, geprüft und getestet. Trotzdem können Fehler im Buch und in

er Software nicht vollständig ausgeschlossen werden. Verlag und Autor haften in Fällen
es Vorsatzes oder der groben Fahrlässigkeit nach den gesetzlichen Bestimmungen. I

brigen haften Verlag und Autor nur nach dem Produkthaftungsgesetz wegen de
erletzung des Lebens, des Körpers oder der Gesundheit oder wegen der schuldhafte
erletzung wesentlicher Vertragspfl ichten. Der Schadensersatzanspruch für die Verletzun

wesentlicher Vertragspfl ichten ist auf den vertragstypischen, vorhersehbaren Schaden

egrenzt, soweit nicht ein Fall der zwingenden Haftung nach dem Produkthaftungsgeset

egeben ist

Elektrische und elektronische Geräte dürfen nicht über den Hausmüll entsorgt werden!

ntsorgen Sie das Produkt am Ende seiner Lebensdauer gemäß den geltenden gesetzliche
orschriften. Zur Rückgabe sind Sammelstellen eingerichtet worden, an denen Si
lektrogeräte kostenlos abgeben können. Ihre Kommune informiert Sie, wo sich solche

mmel

fi nden.

Dieses Produkt ist konform zu den einschlägigen CE-Richtlinien, soweit Sie es gemäß der

eiliegenden Anleitung verwenden. Die Beschreibung gehört zum Produkt und muss mitgegeben

werden, wenn Sie es weitergeben

10223-0 Spieleprogrammierung mit dem Arduino_03.indd 2410223-0 Spieleprogrammierung mit dem Arduino_03.indd 24 14.09.2016 08:37:5814.09.2016 08:37:58