In this fast-paced game for the iPhone you play as Aila in one of her six animal forms to rush through different stages, collect things and try to avoid traps. While playing you have to deal with the actual perception of your current animal.

1. Aila
Alien Intelligent Lifeform Aila
Independent Study: Mobile Game Interactions
Felix Heibeck
Julian Hespenheide
Michele Krüger
Universität Bremen / Sommersemester 2012

2. Grundidee. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
Audio & Visuelle Entwicklung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
Stildefinition. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
Pixelart . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
Farbgebung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
Hintergründe / Levels . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
Wahrnehmung der verschiedenen Wesen. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
Grafische Definition von Elementen und ihre Funktion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
Charaktere . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
Animation. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
Erstellung eines Sprite. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
Artwork zu Sprite. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
Parallaxingfähige Hintergründe. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
Levelelemente . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
Logoentwicklung. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
Menü Design. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
Menü Design: Mock-up. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41
Tools für die Entwicklung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43
Entwicklung von Sound. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
Programm. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48
Box2D . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
Shapes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
Viewport. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51
Terrains. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52
Levelgenerierung. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53
Sprites. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
Background Parallaxing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56
Background Himmel. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
Partikel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58
Vision. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
Menü. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64

3. Grundidee
Das Spiel Aila (Alien Intelligent Lifeform Aila) basiert auf der Umwelt-Theorie, die besagt das obwohl alle Lebewesen die gleiche Umwelt teilen,
sie trotzdem ihre Umgebung anders als andere Lebewesen wahrnehmen. Wir wollten ein Spiel kreieren, welches diese Theorie einschließt und
gleichzeitig dem Spieler eine spannende Unterhaltung für zwischendurch auf seinem mobilen Endgerät bietet.
Am Anfang stand auch die Idee von einem Karma-basierten Spiel im Raum, mit Wiedergeburt und Karma Punkten die das nächste (Spiel-)Leben
beeinflussen sollten. Wir haben diese Idee soweit abgewandelt, dass wir nun Aila, ein Alien von einem unbekannten Planeten welches die Fähig-
keit hat bis zu sechs andere Lebensformen vollständig zu kopieren, haben welches auf der Erde mit einem Kometen notgelandet ist und nun ver-
sucht einen Weg nach Hause zu finden. Kurz nach der Bruchlandung hat Aila es geschafft verschiedene Lebensformen der Erde zu kopieren und
die Aufgabe des Spielers ist es sich durch diese für Aila fremde Umwelt durchzuschlagen.
Im Laufe des Spiels erlangt der Spieler Punkte, sei es durch reines Laufen oder Münzen sammeln, und diese kann er gegen neue Transformations-
stufen eintauschen, welche ihm wiederrum neue Einsicht in die Umwelt gebietet. Dabei ist z.B. die für uns Menschen übliche Sicht, das wir zwar
im dreidimensionalen Raum einen Gegenstand von vorne und eventuell von der Seite mit unseren eigenen Augen sehen können, im zweidi-
mensionalen Raum ein wenig verwirrend: Objekte werfen einen langen Sichtschatten und man kann nicht wirklich erahnen was sich dahint-
er verbirgt. Sollte man nun aber in einen anderen Körper schlüpfen, z.B. den einer Fledermaus, so erlangt man andere Fähigkeiten Gegenstände
wahrzunehmen, nämlich über Ultraschall. Dieser kann sich auch um Objekte herum bewegen, Echos können im Sichtschatten verborgene Ge-
genstände reflektieren und somit hat die Fledermaus ein ziemlich klares Bild von dem was um sie herum abläuft. Wir haben weiterhin Tiere, die
schlechte Augen besitzen aber dafür umso bessere Nasen und sich so perfekt durch unbekanntes Terrain bewegen können.
Selbst illuminierend Tiere, wie ein Leuchtfrosch oder ein Anglerfisch, weisen sich selbst den Weg, wenn auch nur mit begrenztem Sichtradius.
Dann gibt es noch Tiere, die Bewegungen spüren können, welches wir hauptsächlich von Fischen kennen die über ein Seitenlinienorgan besitzen,
welches Bewegungsreize wahrnimmt.
3

4. Audio & Visuelle Entwicklung

5. Stildefinition
Um gut starten zu können, musste neben einer Programmiersprache auch eine grafische Richtung vorgegeben werden. Dabei ist bei einem ersten
Sketch folgende Welt rausgekommen, die sich in drei Zonen teilt: Land bei Tag, Land bei Nacht und Unterwasser. Von diesem Startpunkt aus ging
es dann in’s Detail, nämlich zuerst zu den Hintergründen der verschiedenen Zonen und dann zu Levelelementen und zu guter letzt den Tieren.
5

6. Pixelart
In der Entwicklungsphase hatten wir uns dazu entschieden einen Vektografiken-Stil nicht anzuwenden und eher einen klassischeren Pixelart-Stil
zu benutzen. Hauptvorteil von Pixelgrafiken gegenüber einem Spiel mit Vektorgrafiken wäre einmal der Umgang mit einem Stil der uns zwar
vom spielen diverser Spiele aus der Vergangenheit sehr wohl bekannt ist, aber den wir bis dato noch nicht wirklich selber produziert haben.
Außerdem ist neben dem höheren Zeitaufwand für Pixelart Grafiken der Output insgesamt sauberer und man kann Farben in einer gemeinsamen
Farbpalette besser abstimmen und koordinieren. Dies wäre bei einem Vektorstil mit vielen Farbverläufen zu Lasten der Farbpalette und besonders
des Geräts auf dem das Spiel laufen soll gefallen.
Bei einem Pixelart-Stil muss jeder Pixel perfekt gesetzt werden (Pixelperfect). Sollte in einer Kurve ein Pixel falsch gesetzt werden, so fängt bei Be-
trachtung aus der Ferne (oder bei zusammen gekniffenen Augen) die Linie an zu
wackeln (jagging pixels), weil Pixel ausbrechen. Das definieren einer Kurve oder Pixelgerade ist sehr algorithmisch aufgebaut, so kann man zum
Beispiel eine stark steigende Gerade wie folgt definieren: 1 Pixel nach rechts, 1 Pixel nach oben, 1 Pixel nach rechts usw. usf. Bei einer wenig stark
steigenden Gerade (siehe Bild oben: blaue Gerade links unten) ist es als “2 Pixel horizontal, 1 Pixel nach oben, 2 Pixel horizontal...” aufgebaut.
Dieses Wissen haben wir uns nach langem testen und lesen[1][2] aneignen können.
1 = http://www.derekyu.com/?page_id=218
2 = http://www.petesqbsite.com/sections/tutorials/tuts/tsugumo/
6

7. Farbgebung
In der Entwicklungsphase wussten wir bereits, das wir uns einmal noch auf eine gemeinsame Farbpalette einigen müssen und auch noch eine kleine Farb-
kodierung für die Tiere brauchen damit sie mehr zu einander passen. Nach einigen Überlegungen kam folgendes heraus:
Neben der Farbkodierung sieht man auch die neue Form von Aila (einem Hexagon) sowie das Kometenartige-Hexagon Logo auf der linken Seite
7

8. Farbgebung
Dies ist die komplette Farbpalette der Tiere sowie Fallen/Levelobjekte.
Die Zahlen zeigen jeweils an, welche Farben miteinander korrespond-
ieren und von daher als Primär-Sekundärfarben Paar benutzt werden
können. Weitere Interpretation, außer das die vier Hauptfarben von Aila
stammen und grau die Farbe des Kerns und demnach die restlichen Far-
ben die einzelnen Tier Zellen sind gibt es nicht.
8

9. Farbgebung
Dies sind die Farbpaletten der Hintergründe.
9

10. Hintergründe / Levels
10

11. Hintergründe / Levels
11

12. Hintergründe / Levels
12

13. Wahrnehmung der verschiedenen Wesen
13

14. Grafische Definition von Elementen und ihre Funktion
14

15. Grafische Definition von Elementen und ihre Funktion
15

16. Grafische Definition von Elementen und ihre Funktion
16

17. Grafische Definition von Elementen und ihre Funktion
17

18. Grafische Definition von Elementen und ihre Funktion
18

19. Charaktere
In unserem allersten Brainstorming haben wir uns auf eine Auswahl von verschiedenen Tieren geeinigt, die paarweise gut an Land bei Tag oder
Nacht oder im Wasser sind. Unserer Grundidee zufolge bedeutet dass, das Aila sich in eine der sechs Tierformen verwandeln kann und daher die
Umwelt besser bzw. anders wahrnimmt, an Fähigkeiten gewinnt oder verliert, weil sich die Wahrnehmung verändert.
Wir haben folgende Tiere:
Katze, Fledermaus, Eisbär, Anglerfisch, Biber und den Frosch. Es war uns vor allem Wichtig eine breite Auswahl an verschiedenen Land- und Was-
serlebewesen zu treffen, sodass das allgemeine Spielgefühl über einen längeren Spielraum spannend bleibt.
19

20. Animation
Für die Animationen haben wir uns so gut wie möglich an echte Tiere gehalten und mit Hilfe von Walk Cycles (für Grafik-Animateure) versucht
diese Bewegungen auf unsere Sprites zu übertragen. Dabei wird Frame eines Walk Cycles separat für jeden Sprite gezeichnet. Pixel müssen als
umgemalt werden, Schatten/Licht verändert sich etc.
20

21. Erstellung eines Sprite
Um von einem Artwork zu einem Sprite zu gelangen, zeigen wir hier einmal den kompletten Ablauf.
Sketch Nachzeichnen und 1 Pixel Linie halten Outline
Farbe Shading Selective Outlining
21

22. Artwork zu Sprite
22

23. Artwork zu Sprite
23

24. Artwork zu Sprite
24

25. Artwork zu Sprite
25

26. Artwork zu Sprite
26

27. Artwork zu Sprite
27

28. Artwork zu Sprite
28

29. Parallaxingfähige Hintergründe
29

30. Levelelemente
30

31. Levelelemente
31

32. Logoentwicklung
Sketch Scan
Vektorisierung Rumtesten in Photoshop mit Stilen, Licht und Schatten
32

33. Logoentwicklung
Outlines neuzeichnen
Pixelart-Style angestrebt Inlines nachzeichnen
33

34. Logoentwicklung
Pixelart-Style Revision Inlines
34

35. Logoentwicklung
Verbesserung aller Linien
35

36. Logoentwicklung
Am finalen Logo wurde noch ein wenig rumgearbeitet. Spationierung der Buchstaben ist nun richtig, diverse Pixellinien wurden korrigiert und auch
wurde dafür gesorgt dass das Logo “Color proof” gegenüber anderen (nicht unbedingt blauen) Hintergrundfarben ist. Dazu passend gibt es auch die App
Icons in der Auflösung 57*57 Pixel für iPhone 3 sowie 114*114 Pixel für das iPhone 4 mit Retina Display.
36

37. Logoentwicklung
Dritter Dra!t
Zweiter Dra!t
Pixelart-Style angedeutet
37

38. Menü Design
In der Prototypephase gab es natürlich bereits Gedanken zum Menü Design: Was wir brauchen, was der Spieler als erstes sehen soll, wie das Ingame HUD
aussehen soll. Hier ein Sketch aus dieser Phase.
38

39. Menü Design: Sketches
Weitere Sketches zur Visualisierung
39

40. Menü Design: Sketches
Sketch zum Ringmenü im Pausenbildschirm
40

41. Menü Design: Mock-up
Mock-up des HUDs
41

42. Menü Design: Elemente
Grafische Elemente (Buttons mit normalem Zustand und gedrückten Zustand, Ringauswahlmenü)
42

43. Tools für die Entwicklung
Um das zusammenarbeiten einfacher zu gestalten haben wir diverse Tools benutzt, die mal mehr und manchmal weniger gut Hand in Hand ar-
beiten und unsere Workpipeline unterstützen.
Das wären:
- Dropbox (zum Datenaustausch)
- XCode (liegt in der Dropbox und greift auf ein Ressourcen Verzeichnis zu)
- TexturePacker (Zum Packen der Texturen in einen Spritesheet + Komprimierung) (www.codeandweb.com)
- PhysicsEditor (Zum Hitboxen erstellen sowie der Manipulation der Hitboxen und deren physikalischen Eigenschaften) (www.codeandweb.com)
- CocosBuilder (Zum erstellen von Menüs und weiteren Layern) (http://cocosbuilder.com)
- Particle Designer (Wie der Name bereits sagt, für Partikel) (http://particledesigner.71squared.com)
- Glyph Designer (Zum erstellen von Bitmap Fonts) (http://glyphdesigner.71squared.com)
Ein Blick in unsere Dropbox Ordnerstruktur
43

44. Tools für die Entwicklung
TexturePacker (Ansicht aller Objekte, keine Hintergründe)
44

45. Tools für die Entwicklung
PhysicsEditor (Eine Wasserfalle + die komplexe Hitbox Shape)
45

46. Entwicklung von Sound
Neben Grafiken muss auch eine Vielzahl von Geräuschen, Sound Effects und Hintergrundmusik in das Spiel eingebaut werden.
Unsere Liste sah wie folgt aus.
– Hintergrundmusik + Ambient (z.B. Waldgeräusche, Plätschern eines Bachs)
– einzelne Tiere geben akkustisches Feedback wenn angetipt
– einzelne Objekte geben akkustisches Feedback bei Kollision (z.B. Fallen hören sich anders an als
eine einsammelte Münze)
– Buttons in den verschiedenen Menüs geben Feedback
Alle Sounds im Spiel wurden mit Hilfe von Apples GarageBand und dem freien 8-Bit Plug-in “Magical 8bit Plug” der japanischen Band YMCK er-
stellt. Das Plug-in kann hier runtergeladen werden: http://www.ymck.net/magical8bitplug/index.html
46

47. Entwicklung von Sound
Obwohl jemand mit klassischer Musikausbildung in seiner Kindheit im Team vorhanden war, reichte es von der Zeit einfach nicht aus ein or-
dentliches Konzept hier die Musik zu packen. Hier ein Sketch aus Musikfindungsprozess. Man kann es nicht wirklich verstehen, aber es sind im
Grunde genommen nichts anderes als Patterns, Tonleitern und hier und da paar Akkorde. Also eine Ansammlung an Gedanken die später mehr
oder weniger auch in die finalen Stücke eingeflossen sind.
47

48. Programm

49. Box2D
Erstellen von Polygon-Shapes in box2d
Erstellen einer kontrollierbaren Spielerentität
Erstellen von passiven Einheiten (Coins, Löcher)
Kollisionshandling durch Contact-Listener
Erstellen von aktiven Einheiten die auf den Spieler reagier-
en (Tentakel)
49

50. Shapes
Laden von Shapes aus Physics-Editor
Benutzen der Klasse: GB2ShapeCache.h
50

51. Viewport
Ausnutzen der CCLayer Struktur von Cocos2d
Viewport wird am Spieler aufgehängt - das führt zu einer
festen Position des Spielers auf dem Bildschirm
51

52. Terrains
Organisieren der verschiedenen Spielelemente in “Ter-
rains”
es werden immer drei Terrains gehalten (Spieler, preSpieler,
postSpieler)
neues Terrain wird geladen, wenn Spieler ein Terrain
durchlaufen hat
Zufallsgenerierung
verschiedene Coin-Sets für einen Patch möglich
52

53. Levelgenerierung
Bei der Levelgenerierung hat ein Patch eine Auswahl an
Folgepatches. Jeder Folgepatch besitzt über eine gewisse
Wahrscheinlichkeit das er auftritt. Durch diese gener-
ische Vorgehen stellen wir sicher, das kein Spielablauf
unbedingt genauso aussieht wie ein anderer. Wir erh-
alten eine dynamische Baumstruktur die spontan generi-
ert wird.
Es gibt außerdem spezielle Patches die eine Verschiebung
der Y-Achse von Land nach Wasser/Wasser nach Land
auslösen und demzufolge eine Abfolge von extra Patches
abrufen die dann die Verschiebung visuell begleiten.
53

54. Levelgenerierung
Um aber weiterhin Patches interessant zu
machen, es könnte ja sein das 3-mal die
gleiche Falle hintereinander auftritt, gibt
es pro Patch noch ein exklusives Set für die
Münzenverteilung. Dieses wird zufällig pro
Patch ausgewürfelt und sorgt dafür das auch
aufeinander folgende gleiche Patches ein biss-
chen mehr an Diversität gewinnen.
54

55. Sprites
Laden von Sprites in BatchNode
höhere Performanz, dafür müssen aber alle Sprites einer
Textur angehören. Dies wird durch den TexturePacker er-
möglicht.
Anhängen der Sprites an Box2D Objekte
Darstellen der Sprites passend zu den Box2D Objekten (po-
sition, rotation)
55

56. Background Parallaxing
vereinfachtes Parallaxing durch Nutzung der Klasse:
CCParallaxScrollNode
https://github.com/aramkocharyan/cocos2d/blob/master/
CCParallaxScrollNode.h
56

57. Background Himmel
Einsetzen einer großen Sprite in der Hintergrund
langsame Rotation über den Mittelpunkt
57

58. Partikel
Einfügen der Partikel die im ParticleDesigner erstellt wurden
keine Funktionserfüllung - nur optik
58

59. Vision
Für die Implementierung der verschiedenen Visionen der Tiere mussten verschiedene Funk-
tionen implementiert werden.
Alle Effekte werden auf einer eigenen Ebene visualisiert die individuell ein- oder ausgeschaltet
werden kann.

60. Vision Sichtschatten
Ausnutzen der geladenen Shapes/Vertices zum Erstellen
einer Polygonform
60

61. Vision Geruch
Erstellen von indivudellen Partikeln für verschiedene Objekte
dynamische Anziehungskraft zum Spieler
61

62. Vision Bewegung
erneutes Ausnutzen der Shape-Vertices
62

63. Vision Nacht
eine schwarze Ebene wird abhängig von der Rotation des
Himmelshintergrunds eingeblendet
63

64. Vision Bat Outline
erneutes Ausnutzen der Shape Vertices
64

65. Menü
Mithilfe von CocosBuilder wurden verschiedene Menüs entwickelt und in Xcode eingebunden.

66. Menü Start
dient mehr als Basis für spätere Optionen, Achievements
etc.
66

67. Menü HUD
Punkteanzeige
Pause-Button öffnet Spielerauswahl
67

68. Menü Pause
Spielerwechsel
68