Workshop: Android-Spiele selbst gemacht

Wollten Sie schon immer einmal selbst ein kleines Android-Spiel erstellen? Mit dem „App Game Kit“ gelingt das auch Anfängern, die über keine Vorkenntnisse verfügen, sehr schnell. Bereits am Ende dieses Workshops wird Ihnen Ihre erste eigene Kreation von Ihrem Smartphone entgegenleuchten.

Lust, auf Äpfel zu schießen? Mit dem „App Game Kit“ erstellen Sie Android-Spiele in kürzerer Zeit als etwa mit Java oder C – oder es kann dazu dienen, einen ersten Prototypen von einer Spielidee zu designen, bevor diese in einer komplexeren Sprache umgesetzt wird.

Smartphone-Spiele unterscheiden sich sowohl inhaltlich als auch durch ihre Zielgruppe von solchen auf einem gewöhnlichen PC. Für Letzteren entwickeln oft eine Vielzahl an Menschen mit einem Millionenbudget. Einschlägig interessierte Spieler zocken solch ein Spiel dann viele Stunden am Stück. Auf dem Handy sieht das anders. Dort spielen die verschiedensten Menschen kleine Apps, während sie auf ihren Zug warten oder mit einer Wartemarke in der Hand vor der Bürotüre einer Behörde sitzen. Dementsprechend besitzen Programme auf dem Smartphone normalerweise eine eher einfache Spielidee, die jeder auf Anhieb versteht. Auch ist der Programmier- und Design-Aufwand – außer wenn 3D-Grafik verwendet wird – entsprechend geringer.

Ein Spiel muss her!

Erinnern Sie sich noch an Moorhuhn? Dieses Spiel (welches allerdings nicht für Handys, sondern PCs erschien) legte vor ein paar Jahren ganze Bürobetriebe lahm: Die Arbeit blieb lange liegen, weil alle Mitarbeiter mit Mausklicks auf dem Bildschirm vorbeifliegende Moorhühner abschossen. Für diesen Workshop realisieren wir eine abgewandelte Idee: An einer zufälligen Stelle des Bildschirms erscheint ein Apfel. Wird dieser mit dem Finger berührt, verschwindet er, während ein Schussgeräusch zu hören ist – der Punktestand des Spielers erhöht sich um 50 Punkte, und an einer anderen Stelle erscheint einen neue Frucht. Wird ausversehen neben den Apfel getippt, verringert sich der Punktewert um 50. Dabei hat der Spieler insgesamt 20 Sekunden Zeit, um möglichst viele Punkte zu sammeln. Das Endprodukt werden wir dann auf dem Startbildschirm des Spiels mit dem Namen „Apple Shooter“ betiteln.

Nachdem die erste Idee für das Spiel feststeht, muss nun geplant werden, wie dessen zeitlicher Ablauf im „App Game Kit“ beschrieben werden kann. Schauen Sie sich zunächst Abbildung 1 an: Diese zeigt ganz im Allgemeinen die Chronologie, der viele Unterhaltungs-Apps folgen. Im ersten Kasten auf der oberen Seite steht: App wurde gestartet: Initialisierung. Damit ist gemeint, dass die ersten Zeilen, die Sie zur Programmierung eines Spiels im „App Game Kit“ eintippen, das Laden der benötigten Grafiken und Sounds veranlassen.

Als nächstes folgen Befehle zur Anzeige eines Titelbildschirms. Dieser besteht in der Regel aus einem Logo oder sonstigem Bild sowie einem Schriftzug mit dem Namen der App. Wenn der Spieler nun ein neues Spiel startet, werden die Startwerte hierfür gesetzt (zum Beispiel Punktestand = 0) und von nun an landet der Ablauf der App in einer Schleife: Immer wieder aufs Neue überprüft das Programm, ob vom Benutzer irgendwelche Aktionen durchgeführt wurden, auf die es reagieren muss (beispielsweise das Berühren eines bestimmten Punktes des Bildschirms). Außerdem prüft die App, ob irgendwelche anderen Aktionen auszuführen sind (zum Beispiel das Fortbewegen eines Spielergegners, weil wieder etwas Zeit vergangen ist) und ob irgendein Ereignis aufgetreten ist, das das Spielende (Game Over) auslöst? Falls ja, kehrt die App zum Startbildschirm/Hauptmenü zurück. Falls nicht, dann führt es die Schleife von vorne aus.

Ablauf planen

Nun folgt der letzte Schritt unserer Planungsphase: Diese allgemeine Struktur soll auf unsere Spielidee angepasst werden. Auf Grund unseres einfachen Spielkonzeptes ist dies nicht schwierig: Unser Programm, dass wir gleich eintippen werden, wird als erstes Zeilen enthalten, die alle benötigten Soundeffekte (Schuss, Explosion eines getroffenen Apfels?), die Bilder (eine Landschaft als Hintergrundbild, ein Apfel, Logo, nette Schriftzüge?) und eine Hintergrundmusik laden (deren Wiedergabe auch sofort zu Beginn der App startet – schließlich soll von Anfang an die richtige Atmosphäre herrschen). Danach wird als Titelbildschirm das Hintergrundbild und ein Logo, sowie eine Schaltfläche mit dem Text Neues Spiel? Hier drücken angezeigt (Abbildung 2).

Wenn der Benutzer letztere berührt, werden die Werte für den Spielanfang gesetzt (Erreichte Punkte = 0, Zeit die noch zur Verfügung steht = 20 Sekunden?). Dann landet das Spiel in der weiter oben angesprochenen Schleife: Setze den Apfel an eine zufällige Stelle des Bildschirms (Abbildung 3). Wenn der Bildschirm berührt wird, prüfe, ob sich das Obst an dieser Position befindet. Falls ja, dann schreibe 50 Punkte gut und setze den Apfel an eine neue Zufallsstelle. Falls nein, dann ziehe zur Strafe 50 Punkte ab. Ist die Spielzeit inzwischen abgelaufen (übrige Sekunden = 0) ? Falls ja, dann kehre zu einem modifizierten Starbildschirm zurück: Statt dem Spiellogo erscheint der Schriftzug Game Over (Abbildung 4). Über die bereits vom Anfang bekannte Schaltfläche Neues Spiel? Hier drücken kann dann ein neuer Durchgang gestartet werden. Ist die Zeit hingegen noch nicht abgelaufen, wird die Spielschleife erneut von vorne durchlaufen.

Das App Game Kit

Nach den ganzen theoretischen Vorüberlegungen geht es nun endlich an das Eingemachte: Installieren Sie das „App Game Kit“ auf Ihrem Computer. Normalerweise kostet dieses 54 Euro. Es gibt jedoch eine funktionell uneingeschränkte Testversion [1]. Die einzigen Einschränkungen bestehen darin, dass die Demoversion nur 30 Tage lang funktioniert, und dass die fertigen Apps mit einem unsichtbaren Wasserzeichen markiert werden. Dieser Workshop kann also auch ohne die Kaufversion problemlos durchgeführt werden. Die Installation ist auf jedem aktuellen Windows-PC möglich (eine kleine Randnotiz für Linux-Benutzer: Das Programm funktioniert uneingeschränkt unter der Windows-Emulationsschicht Wine).

Starten Sie nach der Installation direkt das App Game Kit. Nun wählen wir im Menü File den Punkt New | Project aus (Abbildung 6). Im anschließenden Dialog folgt ein Klick auf AGK Generic Project sowie auf Go (Abbildung 7). Bei der Abfrage des Project Title geben wir Apple Shooter ein und bestätigen mit Finish (Abbildung 8). Nun erscheint auf der linken Seite des Editors das neue Projekt mit den zwei Dateien main.agc und setup.agc. Letztere können Sie mit einem Rechtsklick und dem Kontextmenüpunkt Remove File from Project entfernen, da sie für unser Beispiel nicht benötigt wird.

Nun brauchen wir als erstes die eingeplanten Grafik- und Sounddateien. Ein guter Ausgangspunkt für Hobby-Projekte oder erste Spiele-Prototypen ist hierbei die Internet-Seite opengameart.org [2]. Grafiker und Musiker stellen dort ihre Kreationen zur Verfügung, damit Interessenten diese kostenlos in eigene Spiele einbinden können. Dabei ist aber auf jeden Fall zu beachten, was bei jedem der verwendeten Objekte jeweils unter dem Homepage-Punkt License aufgeführt wird (Abbildung 9, links): Manche Künstler erlauben beispielsweise nur das Verwenden in nicht-kommerziellen Projekten, oder sie bestehen auf die Nennung Ihres Namens innerhalb des Programms.

Die Mediendateien für unser Beispiel finden Sie auf der Android-User-Homepage zum Download [3]. Die Hintergrundmusik, alle Soundeffekte sowie die Bilder für den Hintergrund und den Apfel stammen von opengameart.org – sie alle wurden dort von den Urhebern mit dem Lizenztyp Public Domain gekennzeichnet. Das bedeutet, sie dürfen ohne Einschränkungen irgendeiner Art verwendet werden. Da nun noch Grafikdateien für das Titellogo, einen ansehnlichen Game Over-Schriftzug und eine Neues Spiel-Schaltfläche fehlten, kreierte der Autor dieses Workshops sie in einem Malprogramm selbst (sie befinden sich ebenfalls im Download-Archiv). Kopieren Sie alle Mediendateien in das Media-Unterverzeichnis Ihres Projekts: Verzeichnis zum App Game Kit auf Ihrer FestplatteAGK TrialProjectsBasicApple Shootermedia.

Los geht’s

Schließlich müssen wir dem Smartphone noch mit Befehlen klarmachen, wie es sich zu verhalten hat, wenn unsere App am Laufen ist. Löschen Sie hierzu im Editor in der Datei main.agc sämtlichen vorhandenen Text heraus und ersetzen diesen durch Abtippen der Befehle in Listing 1 (oder holen Sie sich die fertige Datei main.agc auf der Android-User-Homepage [3]).

SetVirtualResolution ( 800, 480 )
Spielstatus$ = Anfangsbildschirm
LoadImage ( 1, Hintergrundbild.png )
CreateSprite (1,1)
LoadImage (2, gameover.png)
CreateSprite (2,2)
SetSpritePosition (2,100,150)
SetSpriteVisible (2,0)
LoadImage (3, knopfNeuesSpiel.png)
CreateSprite (3,3)
SetSpritePosition (3,250,350)
LoadImage (4, apfel.png)
CreateSprite (4,4)
SetSpritePosition (4,300,70)
SetSpriteVisible (4,0)
LoadImage (5, titellogo.png)
CreateSprite (5,5)
SetSpritePosition (5,60,140)
LoadSound (1, schuss.wav)
LoadSound (2, explosion.wav)
LoadSound (3, knopfGedrueckt.wav)
LoadSound (4, gameover.wav)
LoadMusic (1, hintergrundmusik.mp3)
PlayMusic(1,1)
ResetTimer()
do
  If Spielstatus$ <> Anfangsbildschirm
    Print (Punkte:  + Str(Punkte))
    ZeitUebrig = 20 -- GetSeconds()
    if ZeitUebrig = 0
      PlaySound(4)
      Spielstatus$ = Game Over
      SetSpriteVisible (2,1)
      SetSpriteVisible (3,1)
      SetSpriteVisible (4,0)
    Endif
  EndIf
  If Spielstatus$ = Action!
    Print (Zeit:  + Str( ZeitUebrig ) +  Sekunden)
    If ( GetPointerPressed ( ) = 1 )
      PlaySound(1)
      If GetSpriteHitTest(4, GetPointerX(), GetPointerY() )
        PlaySound(2)
        SetSpritePosition (4, Random(1,600), Random(1,280) )
        Punkte = Punkte + 50
      Else
        Punkte = Punkte -- 50
      Endif
    Endif
  Endif
  If (Spielstatus$ = Game Over) or (Spielstatus$ =Anfangsbildschirm)
    If ( GetPointerPressed ( ) = 1 ) and (GetSpriteHitTest(3, GetPointerX(), GetPointerY() ) )
      PlaySound(3)
      Spielstatus$ = Action!
      Punkte = 0
      SetSpriteVisible (2,0)
      SetSpriteVisible (3,0)
      SetSpriteVisible (4,1)
      SetSpriteVisible (5,0)
      ResetTimer()
    Endif
  Endif
  Sync()
loop

Auf den ersten Blick erschließt sich wahrscheinlich nicht, was diese Befehle bedeuten mögen. Das wird sich gleich ändern. Doch zuerst sollten Sie ausprobieren, wie das fertige Spiel aussieht und sich anfühlt: Durch einen Druck auf [F5] simuliert der Windows-PC das spätere Verhalten Ihres Handys in einem kleinem Fenster. Mit einem Klick des Mauspfeils kann getestet werden, was beim Berühren des Touchscreens an dieser Stelle passieren würde. Doch ist es nicht viel interessanter das Spiel direkt auf ihrem Smartphone zu testen? Installieren Sie hierfür auf Ihrem Handy die App AGK Player [4] und starten diesen. Drücken Sie anschließend auf dem Windows-PC [F5]. Wenn sowohl Ihr PC als auch Ihr Smartphone im selben Wlan-Netz eingebucht sind, wird das Spiel automatisch auf Ihr Handy übertragen und dort gestartet. So ein Live-Test auf einem mobilen Gerät macht doch gleich viel mehr Spaß. Der AGK-Player ist übrigens nur zum Testen Ihres Spiels nötig, solange diese noch nicht fertig ist. Andere Personen müssen ihn nicht installieren, wenn sie später Ihre App nutzen möchten. Stattdessen kann das „App Game Kit“ aus Ihrem fertigen Projekt bei Bedarf eine vollkommen eigenständige App in Form einer APK-Datei erstellen, die keinen externen Player oder Ähnliches mehr benötigen wird.

Nachdem Sie nun ausprobiert haben, wie sich die App beim Spielen verhält, folgt eine Erklärung der Befehle, die genau dieses Verhalten herbeigeführt haben.

Zeile um Zeile

In Zeile 1 steht der Befehl SetVirtualResolution (800,480). Dieser trägt den vielen verschiedenen Auflösungen Rechnung, die Android-Geräte aufweisen können: Angenommen, sie entwerfen ein Spiel für ein Smartphone mit einer Bildschirmbreite von 800 und einer Höhe von 480 Pixeln. Würde die App nun auf einem anderen Handy mit höherer Auflösung genutzt, wären rings um den Bildschirm schwarze Balken zu sehen. Bei einem Bildschirm mit einer niedrigeren Pixelzahl würden hingegen Teile des Bildschirms abgeschnitten und somit nicht sichtbar sein. Deswegen sagt der Befehl SetVirtualResolution dem Handy: Ich gehe von einer Auflösung von 800×480 Punkten aus. Sollte das bei dem vorliegenden Gerät nicht zutreffen, dann skaliere die Grafiken so, dass trotzdem alles wieder stimmt und der Bildschirm genau ausgefüllt wird.

Mit 'Spielstatus$=Anfangsbildschirm' (Zeile 2) merkt sich das Smartphone, an welcher Stelle des Spiels es sich gerade befindet. Konkreter: An einer Stelle des Speichers wird die Zeichenkette Anfangsbildschirm abgelegt. Ausserdem wird festgelegt, das auf genau diese Speicherstelle (unter Programmierern heisst dies Variable) zukünftig über das Codewort Spielstatus zugegriffen werden kann. Das Anhängen des Dollar-Zeichens am Ende markiert, dass es sich bei dem Speicherinhalt um einen Text handelt (und nicht um einen Zahlenwert).

Die Zeilen 4 bis 23 laden und positionien alle benötigten Grafiken. Am Beispiel der Grafik für den abzuschießenden Apfel sieht das wie folgt aus: Mit Zeile 16 wird festgelegt, dass die Grafik apfel.png in den Speicher geladen werden soll. Außerdem wird definiert: Immer, wenn ich in der Zukunft Grafik Nr. 4 erwähne, meine ich damit diejenige aus der Datei apfel.png. Leider kann unser Spiel mit puren Grafiken noch nicht viel anfangen. Stattdessen benötigt es sogenannte Sprites: Dies sind Bilder, welche nicht nur auf dem Bildschirm dargestellt, sondern auch bewegt und gegebenfalls mit dem Finger angetippt werden können. Zeile 17 befiehlt deswegen dem Handy: Mache aus Grafik Nummer 4 ein Sprite, auf welches ich mich von nun an ebenfalls mit der Nummer 4 beziehe. Der Nummernwert kann übrigens willkürlich gewählt werden. Hier wurde die 4 genommen, weil die drei in den vorangegangenen Zeilen geladenen Grafiken bereits die Nummern 1-3 blockieren. Mit dem Befehl in Zeile 18 wird nun das Sprite Nummer 4 (also der Apfel) für den Spielanfang mittig positioniert (in der Horizontale bei Pixel 300, in der Vertikale bei Pixel 70). Zeile 19 macht den Apfel erstmal unsichtbar, da Anfangs nur der Titelbildschirm zu sehen sein soll, das Obst noch nicht.

Die Zeilen 25-28 laden alle Soundeffekte aus ihren jeweiligen Dateien und weist ihnen für eine spätere Bezugnahme Zahlen zu. Unsere Hintergrundmusik wird mittels der Zeilen 30-31 geladen und direkt wiedergegeben. Zeile 33 setzt unseren Zeitzähler zurück, da später ja eine Sekundenbegrenzung für ein Game Over sorgen wird.

Nun folgt eine Endlosschleife: Die Zeilen 36 und 79 besagen: Alles, was hier zwischendrin passiert, soll endlos oft wiederholt werden. Innerhalb dieser Schleife geht es dann mit den Zeilen 38-48 wie folgt weiter: Überprüfe, ob es sich beim aktuellen Spielstatus NICHT um das Anzeigen des Anfangsbildschirms handelt. Wenn das der Fall ist (also gerade ein Spiel läuft), dann gebe die aktuelle Punktezahl des Benutzers aus. Ermittle, wieviel Zeit noch übrig ist. Sind alle Sekunden bereits komplett aufgebraucht, dann spiele einen deprimierenden Soundeffekt ab, setze den Spielstatus auf Game Over, zeige ebenfalls das zugehörige Sprite an, und mache den Apfel unsichtbar. Dafür soll jedoch die Schaltfläche, welche nach dem Start eines neuen Spiels fragt, wieder angezeigt werden.

In den Zeilen 50 bis 62 wird nun festgelegt, was zu tun ist, falls der aktuelle Spielstatus Action! lautet: Wenn also nicht der Startbildschirm angezeigt wird, sondern das Spiel läuft, aber noch kein Game Over-Ereignis eingetreten ist. In diesem Fall wird die noch verbleibende Zeit ausgegeben. Falls der Bildschirm berührt wurde, ist der Schuß-Soundeffekt auszugeben. Hat der Spieler dabei die Position des Apfels berührt, dann spiele ein Explosionsgeräusch ab, setze das Obst an eine zufällige neue Bildschirmposition, und erhöhe die Punktzahl um 50. Wurde hingegen danebengetippt, dann ziehe von den Punkten den Wert 50 ab und mache sonst nichts.

Für die Spielzustände Game Over und Anfangsbildschirm sorgen die Zeilen 64 bis 75 dafür, dass ein Klick auf Neues Spiel? Hier drücken! ein eben solches neu startet. Dazu fragt das Programm zuerst ab, ob die Grafik mit diesem Schriftzug berührt wurde (Zeile 65). In diesem Fall wird ein Klick-Geräusch abgespielt, der aktuelle Spielstatus geändert, sowie die Punktzahl und der Zeitzähler zurückgesetzt. Außerdem muss in diesem Fall auch die Sichtbarkeit der Sprites angepasst werden: So dürfen dann der Game Over-Schriftzug oder der Neustart-Knopf nicht mehr sichtbar sein, dafür von nun an aber wieder der abzuschießende Apfel.

Der Befehl Sync() in Zeile 77 besagt schlichtweg nur, dass nun alle Bildschirminhalte neu gezeichnet werden. Er sollte in jedem Spiel vor dem Ende der Endlosschleife aufgeführt werden.

Wie weiter?

Wenn Sie bereits andere Programmiersprachen kennen sollten, dann konnten Sie diesen Workshop wahrscheinlich zügig durcharbeiten und sind nun mit den Grundkonzepten des App Game Kits vertraut. Versuchen Sie nun als nächste Übung, das Spiel weiter auszubauen – hierbei ist Ihnen das ausführliche Online-Handbuch [5] eine Hilfe. So könnten Sie mit Hilfe von Arrays mehrere Äpfel gleichzeitig anzeigen lassen, welche dann allesamt vom Spieler getroffen werden müssen. Oder führen Sie doch verschiedene Obstsorten ein, welche jeweils unterschiedliche Effekte auslösen: Wenn eine Birne gedrückt wird, halbiert sich die übrige Zeit des Spielers. Beim Berühren einer Orange verkleinern sich alle nachfolgend angezeigten Obstsorten um die Hälfte.

Oder liegen bei Ihnen noch keinerlei Vorkenntnisse aus anderen Programmiersprachen vor? Möglicherweise konnten Sie dann noch nicht jeden Schritt der hier aufgezeigten Vorgehensweise nachvollziehen. Das ist nicht schlimm und völlig normal. Wissen kann nicht alleine durch theoretisches Lesen erworben werden, für den berühmt-berüchtigten Aha-Effekt ist Handeln notwendig: Spielen Sie mit dem Programm herum, verändern Sie Einzelheiten an den Befehlen. Beobachten Sie anschließend inwiefern sich die App nun anders verhält. Wenn Sie innerhalb des Editors den Cursor auf einen Befehl bewegen und F1 drücken, erhalten Sie eine Erklärung zu diesem. Probieren Sie auch mal ein (für den Anfang kleines und sehr simples) Spiel selbst zu schreiben. Im Gegensatz zum professionellen Programmieren ist es hierbei nicht schlimm, durch Versuch und Irrtum zu lernen – sondern im Gegenteil sehr effektiv.