Aila

389 views

Published on

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.

Published in: Design
  • Be the first to comment

  • Be the first to like this

Aila

  1. 1. AilaAlien Intelligent Lifeform AilaIndependent Study: Mobile Game InteractionsFelix HeibeckJulian HespenheideMichele KrügerUniversität Bremen / Sommersemester 2012
  2. 2. Grundidee. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3Audio & 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. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46Programm. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48 Box2D . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49 Shapes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50 Viewport. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51 Terrains. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52 Levelgenerierung. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53 Sprites. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55 Background Parallaxing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56 Background Himmel. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57 Partikel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58Vision. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59Menü. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64
  3. 3. GrundideeDas 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 undgleichzeitig 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-)Lebenbeeinflussen 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 unddie 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 zwarim 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ändewahrzunehmen, 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, dieschlechte 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. 4. Audio & Visuelle Entwicklung
  5. 5. StildefinitionUm gut starten zu können, musste neben einer Programmiersprache auch eine grafische Richtung vorgegeben werden. Dabei ist bei einem erstenSketch folgende Welt rausgekommen, die sich in drei Zonen teilt: Land bei Tag, Land bei Nacht und Unterwasser. Von diesem Startpunkt aus ginges 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. 6. PixelartIn der Entwicklungsphase hatten wir uns dazu entschieden einen Vektografiken-Stil nicht anzuwenden und eher einen klassischeren Pixelart-Stilzu benutzen. Hauptvorteil von Pixelgrafiken gegenüber einem Spiel mit Vektorgrafiken wäre einmal der Umgang mit einem Stil der uns zwarvom 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 gemeinsamenFarbpalette besser abstimmen und koordinieren. Dies wäre bei einem Vektorstil mit vielen Farbverläufen zu Lasten der Farbpalette und besondersdes 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 zuwackeln (jagging pixels), weil Pixel ausbrechen. Das definieren einer Kurve oder Pixelgerade ist sehr algorithmisch aufgebaut, so kann man zumBeispiel eine stark steigende Gerade wie folgt definieren: 1 Pixel nach rechts, 1 Pixel nach oben, 1 Pixel nach rechts usw. usf. Bei einer wenig starksteigenden 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=2182 = http://www.petesqbsite.com/sections/tutorials/tuts/tsugumo/ 6
  7. 7. FarbgebungIn 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. 8. FarbgebungDies 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 werdenkönnen. Weitere Interpretation, außer das die vier Hauptfarben von Ailastammen und grau die Farbe des Kerns und demnach die restlichen Far-ben die einzelnen Tier Zellen sind gibt es nicht. 8
  9. 9. FarbgebungDies sind die Farbpaletten der Hintergründe. 9
  10. 10. Hintergründe / Levels 10
  11. 11. Hintergründe / Levels 11
  12. 12. Hintergründe / Levels 12
  13. 13. Wahrnehmung der verschiedenen Wesen 13
  14. 14. Grafische Definition von Elementen und ihre Funktion 14
  15. 15. Grafische Definition von Elementen und ihre Funktion 15
  16. 16. Grafische Definition von Elementen und ihre Funktion 16
  17. 17. Grafische Definition von Elementen und ihre Funktion 17
  18. 18. Grafische Definition von Elementen und ihre Funktion 18
  19. 19. CharaktereIn unserem allersten Brainstorming haben wir uns auf eine Auswahl von verschiedenen Tieren geeinigt, die paarweise gut an Land bei Tag oderNacht oder im Wasser sind. Unserer Grundidee zufolge bedeutet dass, das Aila sich in eine der sechs Tierformen verwandeln kann und daher dieUmwelt 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. 20. AnimationFü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) versuchtdiese Bewegungen auf unsere Sprites zu übertragen. Dabei wird Frame eines Walk Cycles separat für jeden Sprite gezeichnet. Pixel müssen alsumgemalt werden, Schatten/Licht verändert sich etc. 20
  21. 21. Erstellung eines SpriteUm 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. 22. Artwork zu Sprite 22
  23. 23. Artwork zu Sprite 23
  24. 24. Artwork zu Sprite 24
  25. 25. Artwork zu Sprite 25
  26. 26. Artwork zu Sprite 26
  27. 27. Artwork zu Sprite 27
  28. 28. Artwork zu Sprite 28
  29. 29. Parallaxingfähige Hintergründe 29
  30. 30. Levelelemente 30
  31. 31. Levelelemente 31
  32. 32. LogoentwicklungSketch ScanVektorisierung Rumtesten in Photoshop mit Stilen, Licht und Schatten 32
  33. 33. Logoentwicklung Outlines neuzeichnenPixelart-Style angestrebt Inlines nachzeichnen 33
  34. 34. Logoentwicklung Pixelart-Style Revision Inlines 34
  35. 35. LogoentwicklungVerbesserung aller Linien 35
  36. 36. LogoentwicklungAm finalen Logo wurde noch ein wenig rumgearbeitet. Spationierung der Buchstaben ist nun richtig, diverse Pixellinien wurden korrigiert und auchwurde dafür gesorgt dass das Logo “Color proof” gegenüber anderen (nicht unbedingt blauen) Hintergrundfarben ist. Dazu passend gibt es auch die AppIcons 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. 37. Logoentwicklung Dritter Dra!t Zweiter Dra!t Pixelart-Style angedeutet 37
  38. 38. Menü DesignIn der Prototypephase gab es natürlich bereits Gedanken zum Menü Design: Was wir brauchen, was der Spieler als erstes sehen soll, wie das Ingame HUDaussehen soll. Hier ein Sketch aus dieser Phase. 38
  39. 39. Menü Design: SketchesWeitere Sketches zur Visualisierung 39
  40. 40. Menü Design: SketchesSketch zum Ringmenü im Pausenbildschirm 40
  41. 41. Menü Design: Mock-upMock-up des HUDs 41
  42. 42. Menü Design: ElementeGrafische Elemente (Buttons mit normalem Zustand und gedrückten Zustand, Ringauswahlmenü) 42
  43. 43. Tools für die EntwicklungUm 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. 44. Tools für die EntwicklungTexturePacker (Ansicht aller Objekte, keine Hintergründe) 44
  45. 45. Tools für die EntwicklungPhysicsEditor (Eine Wasserfalle + die komplexe Hitbox Shape) 45
  46. 46. Entwicklung von SoundNeben 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 alseine einsammelte Münze)– Buttons in den verschiedenen Menüs geben FeedbackAlle 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. 47. Entwicklung von SoundObwohl 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 imGrunde genommen nichts anderes als Patterns, Tonleitern und hier und da paar Akkorde. Also eine Ansammlung an Gedanken die später mehroder weniger auch in die finalen Stücke eingeflossen sind. 47
  48. 48. Programm
  49. 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. 50. Shapes Laden von Shapes aus Physics-Editor Benutzen der Klasse: GB2ShapeCache.h 50
  51. 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. 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. 53. LevelgenerierungBei der Levelgenerierung hat ein Patch eine Auswahl anFolgepatches. Jeder Folgepatch besitzt über eine gewisseWahrscheinlichkeit das er auftritt. Durch diese gener-ische Vorgehen stellen wir sicher, das kein Spielablaufunbedingt genauso aussieht wie ein anderer. Wir erh-alten eine dynamische Baumstruktur die spontan generi-ert wird.Es gibt außerdem spezielle Patches die eine Verschiebungder Y-Achse von Land nach Wasser/Wasser nach Landauslösen und demzufolge eine Abfolge von extra Patchesabrufen die dann die Verschiebung visuell begleiten. 53
  54. 54. LevelgenerierungUm aber weiterhin Patches interessant zumachen, es könnte ja sein das 3-mal diegleiche Falle hintereinander auftritt, gibtes pro Patch noch ein exklusives Set für dieMünzenverteilung. Dieses wird zufällig proPatch ausgewürfelt und sorgt dafür das auchaufeinander folgende gleiche Patches ein biss-chen mehr an Diversität gewinnen. 54
  55. 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. 56. Background Parallaxing vereinfachtes Parallaxing durch Nutzung der Klasse: CCParallaxScrollNode https://github.com/aramkocharyan/cocos2d/blob/master/ CCParallaxScrollNode.h 56
  57. 57. Background Himmel Einsetzen einer großen Sprite in der Hintergrund langsame Rotation über den Mittelpunkt 57
  58. 58. Partikel Einfügen der Partikel die im ParticleDesigner erstellt wurden keine Funktionserfüllung - nur optik 58
  59. 59. VisionFü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 ausgeschaltetwerden kann.
  60. 60. Vision Sichtschatten Ausnutzen der geladenen Shapes/Vertices zum Erstellen einer Polygonform 60
  61. 61. Vision Geruch Erstellen von indivudellen Partikeln für verschiedene Objekte dynamische Anziehungskraft zum Spieler 61
  62. 62. Vision Bewegung erneutes Ausnutzen der Shape-Vertices 62
  63. 63. Vision Nacht eine schwarze Ebene wird abhängig von der Rotation des Himmelshintergrunds eingeblendet 63
  64. 64. Vision Bat Outline erneutes Ausnutzen der Shape Vertices 64
  65. 65. MenüMithilfe von CocosBuilder wurden verschiedene Menüs entwickelt und in Xcode eingebunden.
  66. 66. Menü Start dient mehr als Basis für spätere Optionen, Achievements etc. 66
  67. 67. Menü HUD Punkteanzeige Pause-Button öffnet Spielerauswahl 67
  68. 68. Menü Pause Spielerwechsel 68

×