| Vorwort | 5 |
| Inhaltsübersicht | 9 |
| Inhaltsverzeichnis | 11 |
| 1 Der macht nichts, der will nur spielen … | 19 |
| 2 Loading … Von der Idee bis zum Game-Design-Dokument | 23 |
| 2.1 Inspiration – Woher nehmen? | 23 |
| 2.1.1 Inspiration von der Technik | 23 |
| 2.1.2 Inspiration vom Spielen | 26 |
| 2.1.2.1 Kreative Kombination alter Spielkonzepte | 27 |
| Abb. 2–1 Ein Tetris-Stein als Jump’n’Run-Held? Nicht wirklich innovativ! | 27 |
| 2.1.2.2 Umwerfen alter Spielkonzepte | 29 |
| Abb. 2–2 Das Tetris-Prinzip als »echtes« Puzzlespiel wäre neuartig. | 29 |
| 2.1.2.3 Erweiterung bekannter Spielkonzepte | 31 |
| 2.1.3 Inspiration im Alltag | 32 |
| Abb. 2–3 Schiedsrichterspiel: Entdecken Sie alle Fouls so schnell wie möglich. | 33 |
| 2.2 Casual Games: Wovon reden wir hier eigentlich? | 34 |
| 2.2.1 Charakteristik | 34 |
| Schneller Ein- und Ausstieg: | 34 |
| Leichtes Spielprinzip: | 34 |
| Leicht erlernbare oder intuitive Steuerung: | 35 |
| Schnelle Erfolgserlebnisse: | 35 |
| 2.2.2 Zielgruppen | 35 |
| 2.3 Garantierte Flops – Apples No-Gos | 37 |
| 2.4 Game-Design-Dokument – Grau ist alle Theorie | 40 |
| Abb. 2–4 Das Game-Design-Dokument steht ganz am Anfang. | 40 |
| 2.4.1 Aufbau | 41 |
| 2.4.1.1 Core Statement | 42 |
| Abb. 2–5 Tic Tac Toe | 43 |
| 2.4.1.2 Exposé | 44 |
| Abb. 2–6 Das Exposé in seiner frühen Konzeptphase | 45 |
| 2.4.1.3 Grobkonzept | 46 |
| 2.4.1.4 Feinkonzept | 47 |
| Abb. 2–7 Feinkonzeptbeschreibung eines Items | 49 |
| 2.5 Zielgeräte – iPhone, iPod oder iPad? | 50 |
| 2.5.1 Display | 51 |
| Abb. 2–8 Dasselbe Bild auf iPhone und iPad (skaliert) | 51 |
| Abb. 2–9 Gleiche Grafikgrößen, allerdings zeigt das iPad ein wenig mehr. | 52 |
| Abb. 2–10 Dasselbe Spiel für iPhone und iPad im Vergleich | 53 |
| Abb. 2–11 Die drei Größen im Vergleich | 53 |
| 2.5.2 Größe | 53 |
| Abb. 2–12 Eines der besten iPad-Spiele überhaupt: »Carcassonne« von den »Coding Monkeys« aus Deutschland | 54 |
| 2.5.3 Zeit | 54 |
| 2.5.4 Anspruch | 55 |
| 2.5.5 Sozialer Aspekt | 55 |
| 2.5.6 Die eierlegende Wollmilchsau | 56 |
| 3 Level I: Klassische Casual Games | 59 |
| 3.1 »Pong« | 59 |
| Abb. 3–1 So unspektakulär soll das Spiel in wenigen Seiten aussehen! | 60 |
| 3.1.1 Das erste komplette Spiel | 60 |
| 3.1.1.1 Vorbereitungen | 61 |
| Abb. 3–2 Einrichtung des Projektes | 61 |
| Abb. 3–3 Vergeben eines Produktnamens | 61 |
| Abb. 3–4 Wenn die Unterfenster am rechten Rand nicht sichtbar sind, können diese über »View« > »Utilities« sichtbar geschaltet werden. | 63 |
| Abb. 3–5 Die Verbindung der View zum Code wird über den »Connections Inspector« hergestellt. | 64 |
| Abb. 3–6 Unsere »grafischen« Vorbereitungen für »Pong« sind fertig. | 65 |
| 3.1.1.2 Programmierung der Game Engine | 68 |
| Abb. 3–7 Unser erstes Spiel: Pong | 75 |
| 3.1.1.3 Titelbild | 76 |
| Abb. 3–8 Unser Titelbild: nicht schön, aber für unsere erste Gamedemo reicht’s | 77 |
| 3.1.1.4 Debugging und Codeoptimierung | 78 |
| Abb. 3–9 Diese theoretischen Kollisionsabfragen müssen abgefangen werden. | 79 |
| 3.1.2 Pong-Variationen | 81 |
| 3.1.2.1 Pong einhändig | 82 |
| Abb. 3–10 Das CoreMotion-Framework wird hinzugefügt. | 83 |
| 3.1.2.2 Zweidäumig | 85 |
| 3.1.2.3 Ball mit Drall | 87 |
| Abb. 3–11 Manipulation der Geschwindigkeit sorgt für Winkelveränderungen. | 88 |
| 3.1.3 Pong für zwei – Mensch gegen Maschine | 89 |
| Abb. 3–12 So sieht die Zweispielervariante aus, egal ob mit KI oder menschlichem Gegenspieler. | 90 |
| 3.1.4 Pong für zwei – Mensch gegen Mensch | 93 |
| Abb. 3–13 Zuständigkeitsbereiche für die Touch-Steuerung | 94 |
| Abb. 3–14 Zahlreiche Variationen unseres Spiel durch Skinning (Verwendung von Grafiken) | 97 |
| 3.2 »Breakout« | 98 |
| Abb. 3–15 So sollte es am Ende des Workshops aussehen: »Breakout«. | 99 |
| 3.2.1 Programmierte UI | 100 |
| Abb. 3–16 Hinzufügen von Frameworks | 100 |
| Listing 3–1 ViewController.h | 101 |
| Listing 3–2 ViewController.m | 105 |
| 3.2.1.1 CADisplayLink – der bessere Timer | 105 |
| 3.2.1.2 Licht an, Status aus | 106 |
| Abb. 3–17 Berechnung der Koordinatenwerte der Bounding-Box | 107 |
| 3.2.2 Verfeinerung der Kollisionsabfrage | 107 |
| Abb. 3–18 Was das Auge sofort sieht, muss die Game Engine erst berechnen: Hier findet trotz Überschneidung der Bounding-Boxen keine Kollision statt. | 108 |
| Abb. 3–19 Haarscharf daneben! Jetzt weiß es auch die Game Engine: Hier findet keine Kollision statt. | 109 |
| Abb. 3–20 Unterschiedliche Berechnungen für unterschiedliche Bereiche | 110 |
| 3.2.2.1 Kollisionsabfrage zwischen zwei Bällen | 112 |
| Abb. 3–21 Kollisionsabfrage bei Flipper und Billard | 112 |
| Abb. 3–22 Kollisionserkennung zweier Kreise | 113 |
| 3.2.3 Die Mauer muss weg! | 114 |
| Abb. 3–23 Zweidimensionales Raster durch geschicktes Umrechnen eines eindimensionalen Arrays | 117 |
| 3.2.4 Level 1 – 36 | 119 |
| Abb. 3–24 In das 7 ´ 6-Raster zeichnen wir unser Leveldesign, hier: ein Smiley | 120 |
| Abb. 3–25 Vom Karopapier zum Array | 120 |
| Abb. 3–26 Der fertige Smiley im Spiel | 121 |
| Listing 3–3 leveldesign.h | 121 |
| Listing 3–4 leveldesign.m | 122 |
| Abb. 3–27 Diese Steine sollten für etwas Abwechslung im Leveldesign sorgen. | 125 |
| Abb. 3–28 Das fertige Herz im Spiel | 126 |
| Abb. 3–29 Bei 42 Pixeln Schrittweite wird die Kollision mit dem bisherigen Algorithmus nicht erkannt. | 128 |
| Abb. 3–30 Durch die Einführung der Zwischenschritte erkennen wir Kollisionen, die mit dem bisherigen Code nicht erkannt worden wären. | 131 |
| 3.2.5 Erweiterungsmöglichkeiten | 132 |
| 3.2.5.1 Vogelfreie Mauersteine | 133 |
| Abb. 3–31 Vertikale, horizontale und achtförmige Bewegung | 136 |
| Abb. 3–32 Die drei Schichten: Hintergrund, Spiel, Vordergrund | 137 |
| 3.2.5.2 »BallOut« – der Rundum-Schläger | 137 |
| Abb. 3–33 1.) Ursprungssituation 2.) Tangente an großem Ball als Kollisionsebene 3.) Situation wird auf Horizontale gedreht 4.) Nun kann Einfallswinkel = Ausfallswinkel leicht berechnet werden 5.) Bild wird zurückgedreht 6.) Finale Position der B... | 138 |
| Abb. 3–34 Die fertige Version: »BallOut« | 139 |
| Listing 3–5 (BallOut) ViewController.h | 140 |
| Abb. 3–35 Die in »BallOut« verwendeten Grafiken in der Übersicht | 141 |
| Listing 3–6 (BallOut) ViewController.m | 145 |
| 3.2.5.3 Erweiterung des Leveldesigns | 146 |
| Abb. 3–36 Auch wenn man es auf den ersten Blick nicht erkennt: Die komplette Seitenwand wurde aus Kreisen erstellt und anschließend wurde der gestaltete Rahmen darübergelegt. | 147 |
| 3.2.5.4 Der Ball | 147 |
| 3.3 »Lunar Lander« | 149 |
| Abb. 3–37 Das Original gilt als die erste spielbare Weltraumsimulation: »Lunar Lander«. | 149 |
| Abb. 3–38 Für »Lunar Lander« benötigen wir diese 14 Grafiken. | 151 |
| Listing 3–7 (Lunar Lander) ViewController.h | 153 |
| Listing 3–8 (Lunar Lander) ViewController.m | 158 |
| 3.3.1 Animation | 159 |
| Abb. 3–39 Die Animationsschritte der Mondstation | 159 |
| Abb. 3–40 Die Animationsschritte des Düsenantriebs | 159 |
| Abb. 3–41 Die Explosionsanimation des Raumgleiters | 159 |
| Listing 3–9 leveldesign.h | 161 |
| Listing 3–10 leveldesign.m | 162 |
| 3.3.2 Head-up-Display | 163 |
| Abb. 3–42 Die Hintergrundgrafik hud.png, die den Hauptteil des HUDs bildet | 164 |
| Abb. 3–43 Das komplette Head-up-Display mit Balken und Levelanzeige vermittelt dem Spieler übersichtlich die wichtigsten Daten. | 164 |
| Abb. 3–44 Mögliche Darstellungsoptionen für die Anzahl der noch verbliebenen Schüsse in einem Shooter: a) über die Anzahl der Icons b) Kombination Icon und Ziffer c) Kombination Icon und Balken bzw. Einheiten | 166 |
| 3.3.3 Aufbau und Gameplay | 166 |
| 3.4 »Marble Maze« aka »Labyrinth« | 168 |
| Abb. 3–45 iPhone-Klassiker: Marble Maze | 168 |
| Abb. 3–46 Hintergrund für die Canvas (verkleinert, 320 ´ 480), die Kugel (20 ´ 20), der halbtransparente Kugelschatten, ein Loch (30 ´ 30), das Zielloch (30 ´ 30), Block (verkleinert, 100 ´ 100) | 169 |
| Listing 3–11 (Marble Maze) ViewController.h | 170 |
| Listing 3–12 (Marble Maze) ViewController.m | 174 |
| Listing 3–13 leveldesign.h | 174 |
| Listing 3–14 leveldesign.m | 175 |
| Abb. 3–47 Ablesen der Werte für die eigene Levelkreation | 175 |
| 3.5 »Fire!« aka »Bouncing Babies« | 176 |
| Abb. 3–48 Gerade mal gut 150 Seiten und schon unser fünftes Spiel: Fire! | 176 |
| Abb. 3–49 canvas.png (verkleinert, 480 ´ 320), baby.png (39 ´ 39), firemen0.png (182 ´ 90), firemen1.png (182 ´ 90) | 178 |
| Listing 3–15 (Fire!) ViewController.h | 178 |
| Listing 3–16 (Fire!) ViewController.m | 182 |
| Abb. 3–50 Identische Programmierung, andere Grafiken: politisch korrekt! | 183 |
| 3.5.1 Querformat | 184 |
| Abb. 3–51 Wenn das Bildformat bereits voreingestellt ist, dreht sich der Screen schon vor Programmstart in die gewünschte Richtung. | 185 |
| 3.5.2 Die Klasse »Sprite« | 185 |
| Listing 3–17 Sprite.h | 185 |
| Listing 3–18 Sprite.m | 187 |
| 4 Level II: Moderne Casual Games | 189 |
| 4.1 Scrolling | 189 |
| Abb. 4–1 Macht ohne Scrolling so keinen Spaß. | 189 |
| 4.1.1 Page-Scrolling | 190 |
| Abb. 4–2 Die Spielfigur bewegt sich, der Hintergrund ist statisch. | 190 |
| Abb. 4–3 Unterschied zwischen Spieler.center.x (oberer Pfeil) und spielerPosImLevelX (unterer Pfeil) | 192 |
| Abb. 4–4 Oben und links wechselt ohne Korrektur bereits die Levelansicht, obwohl sich das Sprite noch im sichtbaren Bereich befindet, unten und rechts hingegen wird korrekt umgeblendet. | 192 |
| 4.1.2 Einfaches Scrolling | 193 |
| Abb. 4–5 Die Spielfigur ist auf festen Displaykoordinaten fixiert, der Hintergrund scrollt vorbei. | 193 |
| 4.1.3 Parallax-Scrolling | 193 |
| 4.2 »Noodle Jump« aka »Doodle Jump« | 195 |
| Abb. 4–6 Unser Doodle-Jump-Klon mit Makkaroni | 195 |
| Abb. 4–7 canvas.png (320 ´ 480), noodle.png, noodle_rocket und 8 Plattformen: 3 ´ normal, 3 ´ speziell, 2 ´ Monster (platform6.png und platform7.png) | 196 |
| Listing 4–1 (NoodleJump) ViewController.h | 197 |
| Listing 4–2 (NoodleJump) ViewController.m | 204 |
| Listing 4–3 Sprite.h | 206 |
| Listing 4–4 Sprite.m | 207 |
| 4.2.1 Jetzt wird alles relativ | 207 |
| Abb. 4–8 Bislang haben wir das Sprite relativ zum Koordinatenursprung bewegt, der Hintergrund war fix. | 208 |
| Abb. 4–9 Nun bleibt das Sprite an einer fixen Position und dient als Ursprungspunkt, zu dessen Koordinaten sich der Hintergrund relativ bewegt. | 209 |
| Abb. 4–10 Das Player-Sprite bewegt sich in horizontaler Richtung, der Hintergrund ausschließlich vertikal. | 209 |
| 4.2.2 Performance-Optimierungen | 210 |
| 4.2.2.1 Endlosphilosophie | 210 |
| Abb. 4–11 Die unterste Plattform erhält eine neue, zufällige Form und wird oberhalb des Viewports neu gesetzt. | 211 |
| 4.2.2.2 Auf Konstanten können Sie zählen | 212 |
| 4.2.2.3 Preloader | 214 |
| 4.2.2.4 Erweiterungsmöglichkeiten | 214 |
| 4.3 »iType« aka »R-Type« | 215 |
| Abb. 4–12 So sieht am Ende unseres Workshops der erste Level von iType aus. | 215 |
| Abb. 4–13 Der Raumgleiter (nicht abgebildet: die animierten Phasen, in denen die Signallichter flackern und der Düsenantrieb flimmert), 5 Tiles, aus denen wir die Umgebung bauen (je 80 ´ 160 Pixel) | 216 |
| 4.3.1 Scrolling | 216 |
| Abb. 4–14 Tiles, die links aus dem Viewport »rutschen«, bekommen ein neues Design und werden mit neuer y-Koordinate rechts neben den Displayrand gesetzt, von wo aus sie wieder in den Viewport scrollen. | 217 |
| Abb. 4–15 Felsen, Palmen, futuristisches Design, Mauerwerk | 218 |
| Abb. 4–16 Die Tiles können optisch nahtlos aneinandergesetzt werden, wenn sie vertikal mit einem Vielfachen von 20 Pixeln positioniert werden. | 218 |
| Abb. 4–17 Aus mehreren Pattern à 10 Tiles gestalten wir einen längeren Levelabschnitt. | 219 |
| Abb. 4–18 Zusammenfassung mehrerer Levelabschnitte als Pattern zu einem Gesamtlevel | 220 |
| Listing 4–5 leveldesign.h | 221 |
| Listing 4–6 leveldesign.m | 223 |
| Listing 4–7 (iType) ViewController.h | 225 |
| Listing 4–8 (iType) ViewController.m | 226 |
| Listing 4–9 Sprite.h | 231 |
| Listing 4–10 Sprite.m | 232 |
| 4.3.2 Virtual Joypad | 233 |
| Abb. 4–19 Im Vergleich zum Hochkantformat ist die Touch-Steuerung beim Querformat nicht immer ideal. | 234 |
| Abb. 4–20 Analog: Je weiter sich der Finger vom Steuerkreuzmittelpunkt entfernt, desto schneller bewegt sich das Sprite in dieselbe Richtung. | 236 |
| Abb. 4–21 Die halbtransparente Joypadgrafik wird links unten auf dem Display platziert. | 236 |
| Listing 4–11 (iType) ViewController.h | 237 |
| Listing 4–12 (iType) ViewController.m | 238 |
| 4.3.3 Virtual Touchpad | 239 |
| Abb. 4–22 Die Position des Berührpunkts auf dem virtuellen Touchpad wird um den Faktor 4 auf die Position des Raumgleiters im Viewport hochskaliert. | 240 |
| Listing 4–13 (iType) ViewController.h | 241 |
| Listing 4–14 (iType) ViewController.m | 242 |
| 4.3.4 Optimierung der Kollisionsabfrage: Maskierung | 243 |
| Abb. 4–23 Wieder einmal ein Kollisionsproblem: die Bounding-Boxen | 243 |
| Abb. 4–24 Weitere Frames als Masken: Maske 1 (33 ´ 13 Pixel), Maske 2 (19 ´ 3 Pixel) | 244 |
| 4.3.5 Verlieren mit Bumms! | 247 |
| Abb. 4–25 Die Animation der Explosion in der Einzelbilderfolge | 248 |
| 4.3.6 Aliens und Game-Balance | 249 |
| Abb. 4–26 Die vier Alienarten: alien, eyeball, staticRobot, snake | 250 |
| Listing 4–15 leveldesign.h | 250 |
| Abb. 4–27 Das vierte Alien in die einzelnen Tiles gesplittet: »snake« bildet den Kopf, die 10 »snakeFollow« die Körpersegmente | 251 |
| Listing 4–16 leveldesign.m | 252 |
| Abb. 4–28 wobble: Das Alien bewegt sich auf einer Sinuskurve. | 259 |
| Abb. 4–29 jumper: Das Alien springt 100 Pixel hoch. | 259 |
| Abb. 4–30 jumper2: Das Alien springt 200 Pixel hoch. | 259 |
| Abb. 4–31 guerilla: Das Alien fährt versteckt ins Bild hinein, springt hervor, schießt und duckt sich wieder. | 259 |
| Abb. 4–32 twist: Das Alien rotiert um einen Punkt mit dem Radius 50 Pixel. | 260 |
| Abb. 4–33 twistFollow: Das Alien rotiert um einen Punkt mit dem Radius 50 Pixel und um eine Winkelgröße versetzt (für Schlangenanimation). | 260 |
| Abb. 4–34 bigtwist: Das Alien rotiert um einen Punkt mit dem Radius 100 Pixel. | 260 |
| Abb. 4–35 bigtwistFollow: Das Alien rotiert um einen Punkt mit dem Radius 100 Pixel und um eine Winkelgröße versetzt (für Schlangenanimation). | 260 |
| Abb. 4–36 attack: Das Alien visiert direkt den Raumgleiter an, agiert dabei aber sehr langsam. | 260 |
| 4.3.7 Schüsse, Sterne, Funken, Rauch und Explosionen: Partikel | 261 |
| Listing 4–17 Particle.h | 262 |
| Abb. 4–37 Die wichtigsten Eigenschaften eines Partikels im Überblick | 262 |
| Listing 4–18 Particle.m | 265 |
| Listing 4–19 Ergänzungen im ViewController.h | 265 |
| 4.3.7.1 Die Aliens schießen zurück | 269 |
| Abb. 4–38 Ein wahres Inferno erwartet den Spieler. | 276 |
| 4.3.7.2 Kosmetik: Sterne und Explosionen | 277 |
| 4.3.8 Bonuslevel: Faszination Partikel | 280 |
| Listing 4–20 (Elements) ViewController.h | 281 |
| Listing 4–21 (Elements) ViewController.m | 282 |
| Abb. 4–39 Wasserfontäne | 283 |
| 4.3.8.1 Funkenflug | 288 |
| Abb. 4–40 Funkenflug | 289 |
| 4.3.8.2 Brandherd | 289 |
| Abb. 4–41 Brandherd | 290 |
| 4.3.8.3 Rauchschwaden | 290 |
| Abb. 4–42 Rauchschwaden | 290 |
| 4.3.8.4 Nebelschwaden | 291 |
| Abb. 4–43 Nebelschwaden | 291 |
| 4.3.8.5 Niagarafälle | 291 |
| Abb. 4–44 Niagarafälle | 292 |
| 4.3.8.6 Wunderkerze oder Lunte | 292 |
| Abb. 4–45 Wunderkerze | 293 |
| 4.3.8.7 Feuerwerk | 293 |
| Abb. 4–46 Feuerwerk | 294 |
| 4.3.9 Endgegner und andere Erweiterungen | 295 |
| Abb. 4–47 Getroffenes Alien: kurzes Aufleuchten | 295 |
| Abb. 4–48 2 Aliens = 1 Alien + Schutzschild | 296 |
| Abb. 4–49 Ein Auto im Weltall? | 297 |
| 4.4 »Neptune Patrol« aka »Moon Patrol« | 298 |
| Abb. 4–50 Ungewöhnliches Fahrverhalten | 304 |
| Abb. 4–51 App Store-Klassiker seit 2009: Canabalt | 307 |
| 4.5 »The Little Jungle Sisters« aka »The Great Giana Sisters« | 307 |
| Listing 4–22 Methode loadLevel | 310 |
| Listing 4–23 level1.lvl | 310 |
| Abb. 4–52 Die verwendeten Plattformen in »The Little Jungle Sisters« | 311 |
| Abb. 4–53 11 Zeichen ermöglichen die einfache Gestaltung eines simplen, aber kompletten Levels. | 311 |
| 4.5.1 Dynamisches Scrollen | 312 |
| 4.5.2 Kompletter Code | 313 |
| Listing 4–24 constants.h | 313 |
| Listing 4–25 (The Little Jungle Sisters) ViewController.h | 314 |
| Listing 4–26 (The Little Jungle Sisters) ViewController.m | 322 |
| Abb. 4–54 Level 2 in der Komplettansicht | 323 |
| Listing 4–27 level2.lvl | 323 |
| Abb. 4–55 Level 3 in der Komplettansicht | 324 |
| Listing 4–28 level3.lvl | 324 |
| 4.5.3 Ebenensortierung | 325 |
| Abb. 4–56 1) So soll es aussehen. 2) Bei Bewegung nach rechts wird Plattform 2 verdeckt. 3) Bei Bewegung nach links ist alles korrekt. | 325 |
| 4.5.4 Detaillierte Animationen | 327 |
| Abb. 4–57 Pro Animationsschritt wird der Ballen des Standfußes jeweils um 2 Pixel nach hinten verschoben. | 327 |
| 4.5.5 Parallax-Scrolling – ein Hauch von 3D | 330 |
| Abb. 4–58 bg.png (480 ´ 320), layer0.png (1440 ´ 320) und layer1.png (1440 ´ 320) | 331 |
| Abb. 4–59 Die vier Schichten: Canvas (inkl. Spiel), Hintergrund1 (Wald, beweglich), Hintergrund2 (Wald, beweglich) und der eigentliche Hintergrund (Farbverlauf, fix) | 332 |
| Abb. 4–60 Die vier Schichten im Viewport: Die Baumstämme im Vordergrund können sich optisch vom Hintergrund noch nicht so richtig absetzen. | 332 |
| Abb. 4–61 Märchenhafter Schleier: fog.png (zur besseren Sichtbarkeit auf schwarzem Hintergrund) | 333 |
| Abb. 4–62 So soll unser Spiel anschließend aussehen, die Hintergrundebenen scrollen dabei in unterschiedlichen Geschwindigkeiten mit. | 334 |
| Listing 4–29 ViewController.h | 334 |
| Listing 4–30 ViewController.m | 336 |
| Abb. 4–63 Das linke und das rechte Drittel sehen identisch aus. | 337 |
| 4.5.6 Einäugige Sumpfmonster | 337 |
| Abb. 4–64 Sumpfmonster (Bufo zyklopensis, engl. Bogeye = »Sumpfauge«) das fieseste Geschöpf im Dschungel | 338 |
| Listing 4–31 level1.lvl (mit Monstern) | 338 |
| Abb. 4–65 Das animierte Sumpfauge | 339 |
| 5 Level III: Casual Games für Profis | 343 |
| Abb. 5–1 Ein typisches Tile-based Game | 344 |
| 5.1 Tilemaps | 345 |
| Abb. 5–2 Hier sind die Tiles deutlich sichtbar markiert. | 345 |
| 5.1.1 UIView vs. CALayer | 346 |
| Abb. 5–3 Nur die untere Hälfte liegt im Viewport. | 348 |
| Abb. 5–4 Die ersten Tiles sind nicht mehr sichtbar. | 348 |
| Abb. 5–5 Die unterste Reihe (außerhalb des Viewports) und die oberste sichtbare Reihe sind identisch. | 349 |
| Abb. 5–6 Zwei gleiche Hälften | 349 |
| Abb. 5–7 Im Viewport hat sich nichts geändert. | 350 |
| Abb. 5–8 Die obere Hälfte wird neu bestückt. | 350 |
| Listing 5–1 ViewController.h | 351 |
| Listing 5–2 ViewController.m | 355 |
| Listing 5–3 tilemap1.lvl | 356 |
| 5.1.2 Tiled – ein kostenloser Tilemap-Editor | 357 |
| Abb. 5–9 Tilemaps mit dem Tool »Tiled« einfach erstellen | 357 |
| Listing 5–4 loadLevel-Methode | 359 |
| Abb. 5–10 Eine Tilemap im Rohzustand | 360 |
| 5.2 »1783 – Montgolfière« aka »1942« | 361 |
| Abb. 5–11 So soll das fertige Spiel aussehen. | 361 |
| Listing 5–5 constants.h | 362 |
| Abb. 5–12 Die neue Tilemap »versailles.png«, mit der wir einen kompletten Schlossgarten entwerfen können | 363 |
| 5.2.1 Pseudo 3D | 363 |
| Abb. 5–13 Der Ballon in Scheiben und zusammengesetzt | 364 |
| Abb. 5–14 Durch unterschiedlichen Versatz der »Scheiben« entsteht ein dreidimensionaler Eindruck. | 364 |
| 5.2.2 Tile-Engine für Animation | 367 |
| Abb. 5–15 Keine sechs Einzelbilder, sondern ein Filmstreifen. | 368 |
| Listing 5–6 ViewController.h | 370 |
| Listing 5–7 ViewController.m | 377 |
| 5.3 »Nuke Control« – Programmieren mit Cocos2D | 377 |
| Abb. 5–16 So soll der Einstiegslevel von »Nuke Control« später aussehen. | 378 |
| Abb. 5–17 Von oben betrachtet ist alles flach. | 379 |
| 5.3.1 Installation von Cocos2D | 380 |
| Abb. 5–18 »Terminal« über Spotlight starten | 381 |
| Abb. 5–19 Den Cocos2D-Ordner einfach in das Terminalfenster ziehen | 381 |
| Abb. 5–20 Cocos2D wurde erfolgreich installiert. | 382 |
| Abb. 5–21 Ein neues Cocos2D-Projekt anlegen | 383 |
| 5.3.2 Einführung in Cocos2D | 383 |
| Abb. 5–22 Ein Buch, bei dem man nach 366 Seiten sein erstes »Hello World!« programmiert hat, würde ich sofort reklamieren. | 384 |
| Listing 5–8 HelloWorldLayer.m | 385 |
| Abb. 5–23 Die Position eines Sprites wird in Cocos2D über dessen Ankerpunkt bestimmt. | 387 |
| 5.3.3 Draw-Steuerung | 388 |
| Abb. 5–24 Der gezeichnete Pfad, dem das Sprite im nächsten Schritt folgen wird, ist bereits sichtbar. | 391 |
| Abb. 5–25 Leider folgt das Elektron-Sprite nicht dem direkten Pfad. | 392 |
| Listing 5–9 HelloWorldLayer.h | 394 |
| Listing 5–10 HelloWorldLayer.m | 398 |
| 5.3.4 Spielkonzept und Grafiken | 399 |
| Abb. 5–26 atom1.png, atom2.png und elektron.png, mehr brauchen wir nicht | 399 |
| Abb. 5–27 Drei Schichten von rotierenden Grafiken ergeben das vitale Farbspiel. | 400 |
| 5.3.5 Herstellung der Grafiken | 402 |
| Abb. 5–28 Die neu erstellte Grafik mit 400 ´ 400 Pixeln | 402 |
| Abb. 5–29 Die Einstellungen in dem Tool »Verlaufsaufhellung« für die Erzeugung der Atomhülle | 403 |
| Abb. 5–30 Wir missbrauchen den Schlagschatten als roten Schein um das Elektron. | 404 |
| Listing 5–11 HelloWorldLayer.h | 405 |
| Listing 5–12 HelloWorldLayer.m | 415 |
| 5.3.6 Draw-Steuerung (Choreografie, Muster) | 416 |
| Tab. 5–1 Gesten in Kampfhandlungen übersetzen | 417 |
| Abb. 5–31 Die Geste wird direkt in die Kampfhandlung übertragen. | 417 |
| Abb. 5–32 C64-Klassiker: »Winter Games« | 418 |
| Tab. 5–2 Gesten in Tanzfiguren übersetzen | 418 |
| Abb. 5–33 In »daWindci« wird ein Heißluftballon indirekt z. B. durch einen Tornado gesteuert, den der Spieler mit einer Kreisgeste hervorrufen kann. | 419 |
| Abb. 5–34 Eingrenzung des Pfads | 420 |
| Abb. 5–35 Rasterung | 420 |
| Abb. 5–36 Filterung der Störfelder, die zur Erkennung nicht notwendig sind | 421 |
| Tab. 5–3 Gängige Gesten und deren Erkennungscodes | 422 |
| Listing 5–13 HelloWorldLayer.h | 422 |
| Listing 5–14 HelloWorldLayer.m | 426 |
| 6 Level IV: Casual Games 3D | 427 |
| Abb. 6–1 Anhand der Bounding-Boxen auf Kollisionen zu schließen – da möchte man kein Programmierer sein. | 428 |
| 6.1 OpenGL ES | 429 |
| 6.2 »Jellybears« aka »Collapse!« | 431 |
| Abb. 6–2 Unser Gummibärchenspiel: Jellybears | 431 |
| 6.2.1 Grafische Umsetzung | 433 |
| Abb. 6–3 Diese Texturen werden wir verwenden: Gummibären in allen Farben und eine halbtransparente Tüte. | 433 |
| Abb. 6–4 In diesem Fall konvertiert das weiße Gummibärchen in ein grünes, womit der Sechserblock komplett verschwindet. | 434 |
| Abb. 6–5 Beim Speichern der Textur das Häkchen bei »Interlaced« nicht vergessen | 435 |
| 6.2.2 Technische Umsetzung | 435 |
| Abb. 6–6 Auswahl des richtigen Templates | 436 |
| Abb. 6–7 Eine kleine Änderung im Storyboard Editor | 436 |
| Abb. 6–8 Ein Sprite im 3D-Raum | 438 |
| Abb. 6–9 Zwei Dreiecke: ein Sprite | 438 |
| 6.2.3 Spiellogik | 440 |
| Listing 6–1 (Jellybears) ViewController.h | 443 |
| Listing 6–2 (Jellybears) ViewController.m | 455 |
| 6.2.4 Rekursiver Steinbruch | 456 |
| 6.3 »Gems 3D« aka »Collapse!« | 457 |
| Abb. 6–10 Dasselbe Spiel, anderes Outfit und nun komplett in 3D. | 457 |
| Abb. 6–11 Unsere neuen Texturen gembg.png und gem0.png bis gem4.png | 459 |
| Abb. 6–12 Das sieht nun schon vielversprechend aus: unser Spiel in echtem 3D! | 461 |
| Abb. 6–13 Entscheidend ist die Umlaufbahn: Gegen den Uhrzeigersinn bedeutet »vorne« und damit »sichtbar«. | 462 |
| Abb. 6–14 Die Hälfte der Textur wird einfach nicht angezeigt. | 463 |
| 6.3.1 Meshes aus .OBJ laden | 464 |
| Listing 6–3 cube.obj | 464 |
| Abb. 6–15 Ringe statt Würfel … und zwar durch und durch | 467 |
| 6.4 Blender | 468 |
| Abb. 6–16 Der kostenlose 3D-Editor »Blender 2.61« | 468 |
| Abb. 6–17 Erst einmal die Bühne säubern | 469 |
| 6.4.1 Ikosaeder | 469 |
| Abb. 6–18 Der erste Gem ist schon fast fertig. | 469 |
| Abb. 6–19 Positionieren, »Subdividieren« und Exportieren | 470 |
| 6.4.2 Edelstein | 470 |
| Abb. 6–20 Über den »Schraubenschlüssel«-Reiter erreichen Sie das »Modifier«-Panel. | 471 |
| 6.4.3 Metaballs | 471 |
| Abb. 6–21 Über »Alt« + »C« konvertieren Sie die Metaballs zu einem Gitternetz. | 472 |
| Abb. 6–22 So wechseln Sie in die »Von oben«-Sicht und unterteilen alle Vierecke in Dreiecke. | 472 |
| Abb. 6–23 Das Menü rechts erscheint, wenn Sie das kleine Pluszeichen in der rechten oberen Ecke der 3D-Ansicht anklicken. Nun können Sie das Objekt skalieren. | 473 |
| Abb. 6–24 Vielleicht nicht gerade die passenden Texturen, aber dafür in 3D! | 474 |
| 7 Der Endgegner: Die letzten 10 % | 477 |
| 7.1 Die Menüstruktur | 478 |
| Abb. 7–1 Diese vier Screens sollten Sie im Mindestrepertoire haben: Default.png, Startscreen, das Spiel und einen Endscreen | 479 |
| 7.1.1 Methode 1: »Eine für alles« | 479 |
| 7.1.2 Methode 2: »Storyboard« | 480 |
| Abb. 7–2 Um das Spiel zu komplettieren, erstellen wir ein neues Projekt »completeGame«. | 481 |
| Abb. 7–3 Der Storyboard Editor hilft uns bei der Erstellung der Menüstruktur. | 482 |
| Abb. 7–4 Fügen Sie rechts von unserer UIView einen UIViewController hinzu. | 482 |
| Abb. 7–5 Das Spiel wird hinzugefügt. | 483 |
| Abb. 7–6 Das Titelbild wird einfach über ein UIImageView hinzugefügt. | 484 |
| Abb. 7–7 Über einen unsichtbaren Button fügen wir dem Titelscreen eine einfache Menüstruktur hinzu. | 484 |
| Abb. 7–8 Der Button wird mit der Gamescreen verbunden. | 485 |
| 7.1.2.1 Programmiertechnischer Wechsel | 485 |
| Abb. 7–9 Hier wird die selbst geschriebene Klasse zugeordnet | 486 |
| 8 Hidden Levels | 487 |
| 8.1 Face Detection | 487 |
| Listing 8–1 (Face Detection) ViewController.h | 488 |
| Listing 8–2 (Face Detection) ViewController.m | 489 |
| Abb. 8–1 Das Gesicht in face.jpg wurde erkannt und die Augen wurden markiert. | 490 |
| 8.2 Face Tracking | 490 |
| Listing 8–3 (Face-Tracking) ViewController.h | 491 |
| Listing 8–4 (Face-Tracking) ViewController.m (Auszug) | 492 |
| Abb. 8–2 An Position des Betrachters angepasste Darstellung: 3D-Simulation | 494 |
| 8.3 Einstellungen | 494 |
| Listing 8–5 Einstellungen speichern | 494 |
| Listing 8–6 Einstellungen einlesen | 495 |
| 8.4 Highscore | 495 |
| Listing 8–7 Highscore-Verwaltung | 496 |
| Listing 8–8 Highscore.h | 496 |
| Listing 8–9 Highscore.m | 498 |
| 8.5 GameKit | 499 |
| Listing 8–10 Game-Center-Initialisierung, Teil I | 500 |
| Listing 8–11 Game -Center-Initialisierung, Teil II | 500 |
| Listing 8–12 Highscore an Game Center übergeben | 501 |
| Listing 8–13 Highscore anzeigen | 501 |
| 8.6 Facebook | 501 |
| Abb. 8–3 Hier werden die Daten aus dem Provisioning Portal eingefügt. | 502 |
| 8.7 Videosequenz | 504 |
| Abb. 8–4 Miro Video Converter | 505 |
| Listing 8–14 Video abspielen | 505 |
| 8.8 Location | 506 |
| Listing 8–15 (Location) ViewController.h | 506 |
| Listing 8–16 Ausschnitt aus der getGPSViewController.m | 507 |
| 8.9 Kompass | 507 |
| 9 Bonuslevel: Artwork und Grafik | 509 |
| 9.1 Gimp | 509 |
| 9.1.1 Installation | 510 |
| 9.1.2 Einführung für komplette Neulinge | 510 |
| Abb. 9–1 Die Gimp-Fenster von links nach rechts: Werkzeugkasten, Ebenenfenster, Zeigerinformationen und das Arbeitsfenster | 511 |
| Abb. 9–2 Pixelgenaues Arbeiten mit dem Stift | 512 |
| Abb. 9–3 Besser fürs Malen geeignet: der Pinsel | 513 |
| Abb. 9–4 Farbverläufe werden später noch wichtig sein. | 514 |
| 9.1.3 Zeichnen mit Niveau: Ebenen in Gimp | 515 |
| Abb. 9–5 Jedes Körperteil hat seine eigene Ebene. | 516 |
| 9.2 Farbtheorie | 516 |
| 9.2.1 Die wichtigsten Farben | 517 |
| 9.2.1.1 Himmel | 517 |
| Abb. 9–6 Schafft Atmosphäre: kreisförmiger Farbverlauf von hell nach dunkel | 517 |
| Abb. 9–7 Mit drei Klicks erzeugen wir eine schöne Sonne. | 518 |
| Abb. 9–8 Mit Ebenen jonglieren: 1) neue Ebene erzeugen, 2) aktuelle Ebene duplizieren, 3) aktuelle Ebene löschen | 519 |
| Abb. 9–9 Ein wunderschöner Hintergrund, z. B. für das Titelbild eines asiatischen Beat’em Up (enthält Bildmaterial von Tomo Yun, www.yunphoto.net/de/) | 519 |
| Abb. 9–10 Nächtliches Szenario | 520 |
| Abb. 9–11 Ideal für Spaceshooter: Fotos der NASA | 521 |
| 9.2.1.2 Haut | 521 |
| Abb. 9–12 Die Von-Luschan-Skala ist eine hervorragende Quelle für synthetische Hautfarben und kann in Farbe auf www.iosgames.de heruntergeladen werden. | 522 |
| Abb. 9–13 Hier den Hexcode eintragen und Gimp wandelt den Code in die dazugehörige Farbe um. | 523 |
| 9.2.1.3 Metalle | 523 |
| Abb. 9–14 Metall, Chrom und Gold/Silber | 524 |
| 9.2.2 Ambiente | 524 |
| 9.2.3 Farbnutzung | 525 |
| 9.2.4 Licht und Schatten | 526 |
| Abb. 9–15 Gehen und Wiederkommen wird in verschiedenen Ländern anders interpretiert. | 527 |
| Abb. 9–16 Dreidimensionale Wahrnehmung durch den richtigen Einsatz von Licht und Schatten | 527 |
| Abb. 9–17 Richtiges Setzen von hellen und dunklen Flächen | 528 |
| Abb. 9–18 Lineare Farbverläufe sorgen für die räumliche Darstellung von Röhren, ein kreisförmiger Farbverlauf für dreidimensionale Kugeln. | 528 |
| Abb. 9–19 Funktioniert nur bei der liegenden Röhre: Umkehr durch horizontale Spiegelung | 528 |
| Abb. 9–20 Nun stimmt die Darstellung wieder. | 529 |
| 9.3 Sprites | 529 |
| 9.3.1 Helden | 529 |
| 9.3.1.1 Typ »Doodle« | 530 |
| Abb. 9–21 Kurzer Selbsttest: Welches der folgenden Doodles würden Sie als reiner Spieler am ehesten als hingekritzelte Spielfigur akzeptieren? | 530 |
| Abb. 9–22 Hier sehen wir eine kleine Auswahl naiv gezeichneter Superhelden. Ich habe mich für den vorletzten entschieden, auch wenn sein linker Nachbar sympathischer wirkt. | 531 |
| Abb. 9–23 Meinen Superhelden habe ich gezeichnet und gezeichnet, bis ich zufrieden war (rechts unten): keine aufwendigen Schuhe oder dicke Antennen, kugelrund, einfacher Mund – perfekt unperfekt! | 532 |
| Abb. 9–24 Zuschneiden des gewünschten Bildausschnitts | 532 |
| Abb. 9–25 Ebene kopieren und Abbildungsmodus einstellen | 533 |
| Abb. 9–26 Entweder schwarz oder weiß, ein Dazwischen gibt es beim Schwellwert nicht. | 534 |
| Abb. 9–27 Beim Skalieren setzen wir mit »Sinc (Lanczos 3)« am besten immer den besten Algorithmus ein. | 534 |
| Abb. 9–28 Die Auswahl der Farbe des Pinsels und der Pinselstärke (links: Gimp 2.6, rechts: Gimp 2.8) | 535 |
| Abb. 9–29 Wer hätte gedacht, dass Mausgrobmotorik einmal ein Vorteil sein könnte? | 536 |
| Abb. 9–30 Das fertige Doodle | 536 |
| 9.3.1.2 Typ »8-Bit Pixel Art« | 537 |
| Abb. 9–31 Ein Meisterwerk in Reduktion: 86 Pixel und nur zwei Farben sorgen in »Canabalt« für das stimmungsvolle Retrofeeling. | 537 |
| Abb. 9–32 Jedes optische Pixel besteht in Wahrheit aus mehreren Pixeln. | 538 |
| Abb. 9–33 Ein typisches Pixel Artwork: Jedes einzelne Pixel ist von Hand gesetzt. | 539 |
| Abb. 9–34 Schritt für Schritt entsteht der Kopf unserer Heldin, frisiert wird ganz zum Schluss. | 540 |
| Abb. 9–35 12 Pixel, 18 Variationen: erwartungsvoll, achtsam, durchgeknallt, männlich, übernächtigt, neugierig, aufdringlich, verschlossen, Augen zu und durch, angsterfüllt, hinterfragend, entschlossen, skeptisch, angestrengt, blauäugig (typisc... | 541 |
| Abb. 9–36 Eine gute Heldin braucht Köpfchen und Körper. | 541 |
| Abb. 9–37 Auch unsere Heldin steht auf gutes Schuhwerk. | 542 |
| 9.3.1.3 Typ »Vektorgrafik« | 543 |
| Abb. 9–38 Mit wenigen geometrischen Schritten zum sympathischen Heldenkopf | 544 |
| Abb. 9–39 1) Die Höhe vom Hals bis zum Boden entspricht genau der Größe des Kopfes 2) Der Boden zwischen linkem und rechtem Rand des Kopfes wird gedrittelt 3) Kinnspitze wird mit linkem Drittel des Bodens verbunden 4) Parallele durch linkes Bode... | 546 |
| Abb. 9–40 6) Schnittpunkt markiert Beinansatz, Flächen darüber und darunter werden jeweils halbiert 7) Leichter Bogen durch obere Halbierende markiert Hosenbund, Beinansatz jeweils mit äußeren Schnittpunkten der Halbierenden verbinden und Stief... | 547 |
| Abb. 9–41 11) Schultern abschrägen 12) Verbindung Beinansatz zu Nasenspitze markiert an Hosenbund Bauchnabel (oder Gürtelschnalle) 13) Details (Fäuste, Hemdausschnitt, Schuhe, Gürtel) hinzufügen 14) + 15) Kolorieren und ergänzen (Weltraumkäm... | 547 |
| Abb. 9–42 Erst der »Smiley« macht aus dem Bauch einen Waschbrettbauch. | 548 |
| Abb. 9–43 Links sieht aus wie Plastik, rechts – mit krakeligen Linien – wie Baumwolle. | 548 |
| Abb. 9–44 Das furchtbare Ergebnis nach dem Verkleinern ohne Interpolation | 548 |
| Abb. 9–45 Die Umrisslinie lässt das Sprite nicht mehr ganz so verfranst aussehen. | 549 |
| Abb. 9–46 Im Zweifelsfall die Augen immer vergrößern | 549 |
| Abb. 9–47 Der fertige kleine Barbar ist bereit für sein Abenteuer. | 550 |
| 9.3.1.4 Typ »16-Bit« | 550 |
| Abb. 9–48 So ungefähr soll der eigene Pinsel aussehen. | 550 |
| Abb. 9–49 Der selbst erstellte Pinsel | 551 |
| Abb. 9–50 Die Reihenfolge der Pinselstriche für den korrekten Schattenwurf | 552 |
| Abb. 9–51 Mit nur sechs Pinselstrichen die Gliedmaßen zeichnen und mit nur 10 Punkten den Körper modellieren | 552 |
| Abb. 9–52 Die fertige Vorlage und ein amphibienartiges Alien, welches auf Basis dieser Vorlage erstellt wurde | 553 |
| Abb. 9–53 Die Textur (links) sorgt für ein organisches Aussehen unseres Aliens (rechts). | 554 |
| 9.3.1.5 Typ »3D« | 555 |
| Abb. 9–54 Nur drei Schritte bis zum 3D-Küken | 555 |
| Abb. 9–55 Weitere mögliche, niedlich dreinschauende Varianten | 556 |
| 9.3.1.6 Typ »Eigenkreation« | 556 |
| Abb. 9–56 Am Anfang steht immer die Bleistiftzeichnung. | 557 |
| Abb. 9–57 Experimente bei den Details sind erwünscht. | 557 |
| Abb. 9–58 Die Textur gibt dem Wesen eine realistische Haut, egal ob Fell, Leder oder Schuppen. | 558 |
| Abb. 9–59 Die finale Ausarbeitung für das Spiel | 558 |
| 9.3.2 Animationen | 559 |
| 9.3.2.1 Rollige Helden | 559 |
| Abb. 9–60 Zu Lande, zu Wasser und in der Luft | 559 |
| 9.3.2.2 Läufige Helden | 560 |
| Abb. 9–61 Konstante Geschwindigkeit: 2 Pixel/Frame | 560 |
| Abb. 9–62 Bei Pferden bewegt sich die Brust selbst im Galopp nur unwesentlich. | 561 |
| 9.3.2.3 Rundgang | 562 |
| Abb. 9–63 Eine komplette Laufanimation innerhalb 15 Frames | 562 |
| Abb. 9–64 Die Abspieldauer jedes einzelnen Frames kann einfach hinter dem Ebenennamen gesetzt werden. | 563 |
| 9.3.3 Plattformen (16 Standard Tiles) | 563 |
| Abb. 9–65 Level 1: Wenige Tiles ermöglichen nur schlichtes Leveldesign. | 564 |
| Abb. 9–66 Level 2: Statt nur Plattformen sind nun massive Wände im Einsatz. | 564 |
| Abb. 9–67 Level 3 | 564 |
| Abb. 9–68 16 Teile, die die Welt bedeuten (schwarze Linie = hier kann das Sprite laufen) | 565 |
| Abb. 9–69 Ein brauchbares Tileset, wobei die Kachelung noch deutlich ins Auge sticht. | 565 |
| Abb. 9–70 Bessere Kachelübergänge dank des Filters »Nahtlos machen« | 566 |
| Abb. 9–71 3 Varianten einer Kachel, die an den Seiten immer die identischen Pixel hat, damit die Übergänge reibungslos funktionieren | 566 |
| Abb. 9–72 Plattformen gefällig? Diese passen irgendwie immer! | 567 |
| Abb. 9–73 Unschöne Blockeffekte in der Mitte sind durch ungerade Pixelbreite und -höhe oder durch Antialiasing vermeidbar. | 567 |
| 9.3.4 Minisprites: Gems | 567 |
| Abb. 9–74 Von einem einfachen Herz zu einem plastisch wirkenden Gem | 568 |
| Abb. 9–75 Selbst das Werk eines unfähigen Grafikers kann man mit dem Algorithmus unheimlich aufwerten. | 569 |
| Abb. 9–76 Vor und nach der Anwendung des Algorithmus | 569 |
| Abb. 9–77 Von der Kritzelpalme zum perfekten 16-Bit-Sprite | 570 |
| Abb. 9–78 Screenshot des Tools Needlework8 | 570 |
| 9.3.5 Explosionen | 571 |
| Abb. 9–79 Der Explosionspinsel | 571 |
| Abb. 9–80 Eine schöne Explosion in weniger als einer Minute mit dem richtigen Pinsel | 571 |
| Abb. 9–81 Animierter Feuerball | 572 |
| Abb. 9–82 Effektvoll, aber stellt den Programmierer vor heftige Probleme | 573 |
| 9.4 Hintergrundgrafiken | 573 |
| Abb. 9–83 Mit Hintergrundbild wirkt die Gegend einfach stimmungsvoller. | 573 |
| Abb. 9–84 Die Baumwipfel schränken die virtuelle Freiheit immens ein. | 574 |
| Abb. 9–85 Kennt man, mag man, ist man gewohnt, kommt man mit zurecht. | 576 |
| 9.4.1 Wolken | 576 |
| 9.4.1.1 Typ »Kinderspiel« | 576 |
| Abb. 9–86 Entstehung einer Wolke im Comic-Style | 576 |
| 9.4.1.2 Wolkenmeer | 577 |
| Abb. 9–87 Wolken und Buschwerk in einem Schritt | 577 |
| 9.4.1.3 Typ »Comic« | 578 |
| Abb. 9–88 In zwei Minuten zur Schäfchenwolke | 578 |
| 9.4.2 Landschaft | 578 |
| 9.4.2.1 Hügel | 579 |
| Abb. 9–89 Entstehung eines Hügels | 579 |
| Abb. 9–90 Für jedes Szenario die richtigen Hügel | 579 |
| 9.4.2.2 Wald und Bäume | 579 |
| Abb. 9–91 Ööööh … nö! | 580 |
| Abb. 9–92 Das sieht schon besser aus. | 580 |
| Abb. 9–93 Die Knotenstellen lassen den Baum natürlicher aussehen | 580 |
| Abb. 9–94 Eine Baumkrone ist in einer Minute aufgemalt. | 581 |
| Abb. 9–95 Mit einem solchen Pinsel können Wiesen schnell und leicht erzeugt werden. | 581 |
| Abb. 9–96 Holzaugen und Astlöcher geben dem Baum ein märchenhaftes Aussehen. | 582 |
| Abb. 9–97 Zwei Kurven, Rücken an Rücken | 583 |
| Abb. 9–98 Die Äste werden hinzugefügt. | 583 |
| Abb. 9–99 Eine flache Krone (z. B. als Plattform verwendbar), Büschel und eine mächtige Baumkrone | 583 |
| Abb. 9–100 Ein Stern mit verschieden grünfarbenen Strahlen bildet unseren Pinsel. | 584 |
| Abb. 9–101 Schritt für Schritt zum liegenden Stern | 584 |
| Abb. 9–102 Und dasselbe noch einmal | 584 |
| 9.4.3 Wetter | 585 |
| Abb. 9–103 Nebel | 585 |
| Abb. 9–104 Regenfäden und Schneeflocken | 585 |
| 9.4.4 Schnörkel | 586 |
| Abb. 9–105 Unrealistisch, aber stimmungsvoll: Schnörkel skizzieren leichte Windverwehungen. | 586 |
| 9.4.5 Weltraum | 586 |
| Abb. 9–106 Viele Dreiecke, eine Glaskuppel: Konstruktion eines typischen Sidescroller-Raumschiffs | 587 |
| Abb. 9–107 Dreiecke und eine Ellipse: So designen wir den Raumgleiter eines gängigen Vertikalscrollers. | 587 |
| 9.4.5.1 Panel »Raumschiff« | 587 |
| Abb. 9–108 Ein Ausgangspanel und zwei Variationen für den klassischen Retro-Shooter | 587 |
| Abb. 9–109 Kanonen und Düsenantriebe | 588 |
| 9.4.5.2 Panel »Versuchslabor« | 589 |
| Abb. 9–110 Konstruktion einer ekligen Versuchlaborumgebung | 589 |
| Abb. 9–111 Der klassische »Alienlabor-Level« | 590 |
| 9.4.5.3 Panel »Felsplanet« | 590 |
| Abb. 9–112 Die Entstehung eines Felsen | 590 |
| 9.4.5.4 Panel »Alienplanet« | 590 |
| Abb. 9–113 Zwei Pinsel gestalten einen kompletten Level. | 591 |
| Abb. 9–114 In vier Schritten zu Kaviarmatsche und Tentakeln | 591 |
| Abb. 9–115 Borgen der Nachbarin garantiert kein Mehl: pflanzliche Bewohner des Alienplaneten | 592 |
| 9.4.5.5 Panel »Eiskristall« | 592 |
| Abb. 9–116 In nur fünf einfachen Schritten zum Eisplaneten | 592 |
| 9.4.5.6 Panel »Elektro« | 593 |
| Abb. 9–117 Elektropanels leicht gemacht | 593 |
| 9.4.6 Puzzlehintergründe | 594 |
| 9.4.6.1 Fraktale | 594 |
| Abb. 9–118 Schnell spektakuläre Hintergründe mit dem Fraktal-Explorer erstellen | 595 |
| 9.4.6.2 Pinsel | 596 |
| Abb. 9–119 Solche Effekte zaubern Sie mit den richtigen Pinseln. | 596 |
| 9.5 Titelbild | 596 |
| 9.5.1 Titelbildloser Titelscreen | 597 |
| Abb. 9–120 Funktioniert super als Titelscreen: »The Little Jungle Sisters« im Demo-Modus mit zusätzlichem Schriftzug | 597 |
| 9.5.2 Titelbilder, wie sie sein müssen | 598 |
| Abb. 9–121 Unsere Vorlage (Fotograf: Benjamin Miller) | 598 |
| Abb. 9–122 Ohne Durchpausen geht nichts: Mit einem dicken Pinsel zeichnen wir die Strukturen des Gesichts nach. | 599 |
| Abb. 9–123 Ausdünnen der Linien | 600 |
| Abb. 9–124 Verfeinerung der Augenpartie | 600 |
| Abb. 9–125 Schritte 4–6: Von der Skizze zur Kolorierung | 601 |
| Abb. 9–126 Die schraffierten Hautpartien decken symbolisch den mittleren Schatten ab, Ohr und Hals sind die dunkelsten Stellen. | 602 |
| Abb. 9–127 Schritte 7–9: Jetzt erledigen Filter den Rest für uns. | 603 |
| Abb. 9–128 Schritte 10 und 11: Wir machen die Zeichnung etwas plastischer. | 603 |
| Abb. 9–129 Als letztes Highlight: blaue Augen | 604 |
| Abb. 9–130 Etwas arg überspitzt deformiert: unser Titelmädchen als eingebildete Zicke und mit bösen Hintergedanken | 605 |
| 9.6 Grafiken in Code einbinden | 605 |
| 9.6.1 Standardauflösung vs. Retina | 605 |
| 9.6.2 Ladescreen | 606 |
| 10 Bonuslevel: Sound FX/Music | 607 |
| 10.1 Musikproduktion | 607 |
| 10.1.1 Software | 608 |
| 10.1.1.1 Elektronische Musik | 608 |
| 10.1.1.2 MuLab 4.1 | 609 |
| Abb. 10–1 Sieht kompliziert aus, ist aber total einfach: MuLab 4.1 | 609 |
| Abb. 10–2 So präsentiert sich der Sequenzer zum Programmstart. | 610 |
| Abb. 10–3 Aus der umfangreichen Bibliothek wählen wir das »EPianoGT«. | 610 |
| Abb. 10–4 Wenn Ihnen das gewählte Instrument nicht gefällt, können Sie über die beiden Pfeile durch die gesamte Instrumentenbibliothek zappen. | 611 |
| Abb. 10–5 Die Piano-Roll | 611 |
| 10.1.2 Virtuelle Instrumente | 612 |
| Abb. 10–6 Das Plugin »Independence Free« beinhaltet u. a. hervorragende Gitarren. | 613 |
| 10.1.3 So spielen Sie keine falschen Töne | 614 |
| 10.1.3.1 Akkorde | 614 |
| Abb. 10–7 Die schwarzen Tasten sind in Zweierblocks angeordnet. | 615 |
| Abb. 10–8 Bildung eines Dur- und Moll-Akkords | 615 |
| 10.1.3.2 Tonleiter | 615 |
| Abb. 10–9 Bei der Bestimmung der Noten einfach dem Alphabet folgen | 616 |
| Abb. 10–10 Die doppelten Bezeichnungen der schwarzen Tasten | 617 |
| 10.1.3.3 Akkordfolgen | 617 |
| Abb. 10–11 Die vier magischen Akkorde für ansprechende Game-Musik | 618 |
| Abb. 10–12 Eine kleine Auswahl möglicher Begleitmelodien | 619 |
| Abb. 10–13 Ein einfaches Begleitschema für die Akkordfolge C – F – G – C | 619 |
| Abb. 10–14 Das Tempo kann einfach durch die Maustaste verändert werden. | 620 |
| 10.1.3.4 Rhythmik | 620 |
| Abb. 10–15 Ein sehr einfacher Reggae-Rhythmus C – F – G – C (langer Balken = 2 kurze Balken) | 620 |
| Abb. 10–16 Ein sehr einfacher Marsch C – F – G – C | 620 |
| 10.1.3.5 Percussion | 621 |
| Abb. 10–17 C3: Kickdrum/B3: Snare Drum/G3 + A3: Tom Toms | 621 |
| 10.1.3.6 Bass | 621 |
| 10.1.3.7 Melodie | 622 |
| Abb. 10–18 Die Tonleitern und die jeweils nicht zu verwendenden Noten/Tasten (samt Alternative) | 623 |
| 10.1.4 Jingles | 623 |
| Abb. 10–19 »Alle meine Entchen« in C-Dur | 624 |
| Abb. 10–20 »Alle meine Entchen« auf sieben Noten ergänzt | 624 |
| Abb. 10–21 Wir bauen den Akkord auf Basis der letzten Melodienote. | 625 |
| Abb. 10–22 Unsere einfache Jingle-Variation | 625 |
| Abb. 10–23 Unser kompletter Jingle mit vier Spuren: SGbrasoft, SGtar, BoogieMoogie und Drumset | 626 |
| 10.1.5 Musik | 628 |
| 10.1.5.1 Reggae | 629 |
| Abb. 10–24 Drumset als Reggae-Grundlage | 629 |
| Abb. 10–25 Durch die »DiSar97«-Spur tritt das Reggae-Feeling deutlich hervor. | 629 |
| Abb. 10–26 Die »Wow«-Spur | 630 |
| 10.1.5.2 Samba | 630 |
| Abb. 10–27 Mit dem »GM Drumset« haben wir ein weiteres Schlagzeug im Programm. | 630 |
| Abb. 10–28 Durch die Merengue-Trommeln bekommt die Samba ihren charakteristischen, südamerikanischen Klang. | 631 |
| Abb. 10–29 Zu guter Letzt der Bass | 631 |
| 10.1.5.3 Elektro | 632 |
| Abb. 10–30 »Fat Bass« und »Minor7th« | 632 |
| Abb. 10–31 Die Techno-typische Betonung auf allen Taktschlägen | 632 |
| 10.1.5.4 Rap | 633 |
| Abb. 10–32 Die einzelnen Instrumentenspuren für Old-School-Rap | 633 |
| 10.1.6 Sound FX | 633 |
| 10.1.6.1 Bibliothek | 634 |
| 10.1.6.2 Cfxr | 634 |
| Abb. 10–33 Typische Gamesounds einfach mit Cfxr generieren | 635 |
| 10.1.6.3 Aufnahme | 635 |
| 10.1.7 Sounds für die App vorbereiten | 635 |
| Abb. 10–34 Mit dem Tool »Switch Sound File Converter« bringen wir die Sounds in die App. | 636 |
| 10.2 Auftragsmusik | 637 |
| 10.3 Sound in Objective-C | 638 |
| 10.3.1 Dateiformate | 638 |
| 10.3.2 Cleveres Musikmanagement | 639 |
| 10.3.2.1 Atmosphäre erzeugen | 640 |
| 10.3.2.2 Loops | 640 |
| 10.3.3 Wiedergabe über Objective-C | 641 |
| 10.3.3.1 Sound FX | 642 |
| Listing 10–1 Sound FX abspielen | 642 |
| 10.3.3.2 Hintergrundmusik | 643 |
| Listing 10–2 MP3-Datei abspielen | 643 |
| Listing 10–3 (BackgroundMusic) ViewController.h | 643 |
| Listing 10–4 (BackgroundMusic) ViewController.m | 645 |
| 11 Hall of Fame | 647 |
| 11.1 Sehen Sie die Spieler an | 647 |
| Abb. 11–1 Keine Frage, die Bälle mit Augen laden weitaus sympathischer zu einem Spiel ein. | 648 |
| 11.2 Helden mit Macken | 648 |
| 11.3 Pfeifkonzert | 649 |
| 11.4 Gefühlsduselei | 650 |
| 11.5 Öfter mal was Neues | 650 |
| Abb. 11–2 Der Blockbuster »Tiny Wings« spielt jeden Tag in einem neuen Erscheinungsbild. | 651 |
| 11.6 Oster- und Mogelei | 652 |
| 11.7 Bescherung | 652 |
| Listing 11–1 Ein Bild schenken | 653 |
| 11.8 Humor | 654 |
| 11.8.1 Slapstick | 654 |
| 11.8.2 Situationskomik | 654 |
| Abb. 11–3 Tierisches Durcheinander sorgt für Situationskomik. | 655 |
| 11.8.3 Anspielungen, Hommagen, Zitate | 655 |
| Abb. 11–4 Welcome-Back-Empfangskomitee | 656 |
| 11.9 Erschöpfung | 657 |
| 11.10 Blitzreinkarnation | 657 |
| 11.11 Kreative Sensoren | 658 |
| Abb. 11–5 Spielen Sie mit den Sensoren. | 658 |
| 11.12 Kopierschutz | 659 |
| Literaturverzeichnis | 661 |
| Videospiele | 661 |
| Kent, Steven L.: | 661 |
| Gameplay und Spielideen | 661 |
| Deutsch: | 661 |
| Saltzman, Marc: | 661 |
| Englisch: | 661 |
| Schell, Jesse: | 661 |
| Rogers, Scott: | 661 |
| Perry, David: | 661 |
| Links: | 662 |
| »Game Design Dokumente Aufbau und Struktur«: | 662 |
| »Digitale Spiele: Gams Design und das Design Document«: | 662 |
| The »Core« of a Game: | 662 |
| Example Blank Design Document: | 662 |
| Game Design Document-Template: | 662 |
| Objective-C | 662 |
| Deutsch: | 662 |
| Stäuble, Markus: | 662 |
| Seelmann, Max: | 662 |
| Spieleprogrammierung | 662 |
| Deutsch: | 662 |
| Steinke, Lennart: | 662 |
| Luka, Thomas: | 662 |
| Englisch: | 662 |
| Bourg, David M.: | 662 |
| Goldstein, Neal und Manning, Jon und Buttfield-Addison, Paris: | 662 |
| Daley, Michael: | 662 |
| Craft, Chris: | 663 |
| Zirkle, Paul: | 663 |
| Cocos2d | 663 |
| Englisch: | 663 |
| Itterheim, Steffen: | 663 |
| Links: | 663 |
| Cocos2d for iPhone: | 663 |
| OpenGL ES 2.0 | 663 |
| Englisch: | 663 |
| Rideout, Philip: | 663 |
| Grafik | 663 |
| Deutsch: | 663 |
| Lechner, Bettine K.: | 663 |
| Howe, John: | 663 |
| Englisch: | 663 |
| nfgman: | 663 |
| Fox, Brent: | 663 |
| Tsai, Francis: | 663 |
| Robinson, Craig: | 663 |
| Mullen, Tony: | 663 |
| Links: | 663 |
| ImagineFX (Zeitschriften und Tutorials): | 663 |
| Gimp: | 663 |
| GIMP on OS X: | 664 |
| Musik | 664 |
| Deutsch: | 664 |
| Kaiser, Carsten: | 664 |
| Novy, Mike: | 664 |
| Schmitt, Werner: | 664 |
| Englisch: | 664 |
| Hoffert, Paul: | 664 |
| IV Childs, G. W.: | 664 |
| Marks, Aaron: | 664 |
| Links: | 664 |
| Hofmann, Jan und Szczypula, Oliver: | 664 |
| Krause, Benjamin: | 664 |
| Index | 665 |
