Spiele entwickeln für iPhone und iPad (eBook)

Patrick Völcker arbeitete fünf Jahre als Mobile-Experte und Webdeveloper bei der renommierten Webagentur Jung von Matt / Neckar, bevor er 2011 als Rich Media Innovation Tech zu Google wechselte. Freiberuflich ist er als Programmierer für mobile Endgeräte und als Gastdozent der Internationalen Filmschule Köln und der Popakademie Baden-Württemberg im Bereich 'Mobile Games' tätig. Seit 2008 bloggt er auf mobile-zeitgeist.de über den Schwerpunkt 'Mobile Games'.

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.
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