Spiele entwickeln für iPhone und iPad - Programmierung, Grafik, Sound und Special Effects

Vorwort

Inhaltsübersicht

Inhaltsverzeichnis

1 Der macht nichts, der will nur spielen …

2 Loading … Von der Idee bis zum Game-Design-Dokument

2.1 Inspiration – Woher nehmen?

2.1.1 Inspiration von der Technik

2.1.2 Inspiration vom Spielen

2.1.2.1 Kreative Kombination alter Spielkonzepte

Abb. 2–1 Ein Tetris-Stein als Jump’n’Run-Held? Nicht wirklich innovativ!

2.1.2.2 Umwerfen alter Spielkonzepte

Abb. 2–2 Das Tetris-Prinzip als »echtes« Puzzlespiel wäre neuartig.

2.1.2.3 Erweiterung bekannter Spielkonzepte

2.1.3 Inspiration im Alltag

Abb. 2–3 Schiedsrichterspiel: Entdecken Sie alle Fouls so schnell wie möglich.

2.2 Casual Games: Wovon reden wir hier eigentlich?

2.2.1 Charakteristik

Schneller Ein- und Ausstieg:

Leichtes Spielprinzip:

Leicht erlernbare oder intuitive Steuerung:

Schnelle Erfolgserlebnisse:

2.2.2 Zielgruppen

2.3 Garantierte Flops – Apples No-Gos

2.4 Game-Design-Dokument – Grau ist alle Theorie

Abb. 2–4 Das Game-Design-Dokument steht ganz am Anfang.

2.4.1 Aufbau

2.4.1.1 Core Statement

Abb. 2–5 Tic Tac Toe

2.4.1.2 Exposé

Abb. 2–6 Das Exposé in seiner frühen Konzeptphase

2.4.1.3 Grobkonzept

2.4.1.4 Feinkonzept

Abb. 2–7 Feinkonzeptbeschreibung eines Items

2.5 Zielgeräte – iPhone, iPod oder iPad?

2.5.1 Display

Abb. 2–8 Dasselbe Bild auf iPhone und iPad (skaliert)

Abb. 2–9 Gleiche Grafikgrößen, allerdings zeigt das iPad ein wenig mehr.

Abb. 2–10 Dasselbe Spiel für iPhone und iPad im Vergleich

Abb. 2–11 Die drei Größen im Vergleich

2.5.2 Größe

Abb. 2–12 Eines der besten iPad-Spiele überhaupt: »Carcassonne« von den »Coding Monkeys« aus Deutschland

2.5.3 Zeit

2.5.4 Anspruch

2.5.5 Sozialer Aspekt

2.5.6 Die eierlegende Wollmilchsau

3 Level I: Klassische Casual Games

3.1 »Pong«

Abb. 3–1 So unspektakulär soll das Spiel in wenigen Seiten aussehen!

3.1.1 Das erste komplette Spiel

3.1.1.1 Vorbereitungen

Abb. 3–2 Einrichtung des Projektes

Abb. 3–3 Vergeben eines Produktnamens

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.

Abb. 3–6 Unsere »grafischen« Vorbereitungen für »Pong« sind fertig.

3.1.1.2 Programmierung der Game Engine

Abb. 3–7 Unser erstes Spiel: Pong

3.1.1.3 Titelbild

Abb. 3–8 Unser Titelbild: nicht schön, aber für unsere erste Gamedemo reicht’s

3.1.1.4 Debugging und Codeoptimierung

Abb. 3–9 Diese theoretischen Kollisionsabfragen müssen abgefangen werden.

3.1.2 Pong-Variationen

3.1.2.1 Pong einhändig

Abb. 3–10 Das CoreMotion-Framework wird hinzugefügt.

3.1.2.2 Zweidäumig

3.1.2.3 Ball mit Drall

Abb. 3–11 Manipulation der Geschwindigkeit sorgt für Winkelveränderungen.

3.1.3 Pong für zwei – Mensch gegen Maschine

Abb. 3–12 So sieht die Zweispielervariante aus, egal ob mit KI oder menschlichem Gegenspieler.

3.1.4 Pong für zwei – Mensch gegen Mensch

Abb. 3–13 Zuständigkeitsbereiche für die Touch-Steuerung

Abb. 3–14 Zahlreiche Variationen unseres Spiel durch Skinning (Verwendung von Grafiken)

3.2 »Breakout«

Abb. 3–15 So sollte es am Ende des Workshops aussehen: »Breakout«.

3.2.1 Programmierte UI

Abb. 3–16 Hinzufügen von Frameworks

Listing 3–1 ViewController.h

Listing 3–2 ViewController.m

3.2.1.1 CADisplayLink – der bessere Timer

3.2.1.2 Licht an, Status aus

Abb. 3–17 Berechnung der Koordinatenwerte der Bounding-Box

3.2.2 Verfeinerung der Kollisionsabfrage

Abb. 3–18 Was das Auge sofort sieht, muss die Game Engine erst berechnen: Hier findet trotz Überschneidung der Bounding-Boxen keine Kollision statt.

Abb. 3–19 Haarscharf daneben! Jetzt weiß es auch die Game Engine: Hier findet keine Kollision statt.

Abb. 3–20 Unterschiedliche Berechnungen für unterschiedliche Bereiche

3.2.2.1 Kollisionsabfrage zwischen zwei Bällen

Abb. 3–21 Kollisionsabfrage bei Flipper und Billard

Abb. 3–22 Kollisionserkennung zweier Kreise

3.2.3 Die Mauer muss weg!

Abb. 3–23 Zweidimensionales Raster durch geschicktes Umrechnen eines eindimensionalen Arrays

3.2.4 Level 1 – 36

Abb. 3–24 In das 7 ´ 6-Raster zeichnen wir unser Leveldesign, hier: ein Smiley

Abb. 3–25 Vom Karopapier zum Array

Abb. 3–26 Der fertige Smiley im Spiel

Listing 3–3 leveldesign.h

Listing 3–4 leveldesign.m

Abb. 3–27 Diese Steine sollten für etwas Abwechslung im Leveldesign sorgen.

Abb. 3–28 Das fertige Herz im Spiel

Abb. 3–29 Bei 42 Pixeln Schrittweite wird die Kollision mit dem bisherigen Algorithmus nicht erkannt.

Abb. 3–30 Durch die Einführung der Zwischenschritte erkennen wir Kollisionen, die mit dem bisherigen Code nicht erkannt worden wären.

3.2.5 Erweiterungsmöglichkeiten

3.2.5.1 Vogelfreie Mauersteine

Abb. 3–31 Vertikale, horizontale und achtförmige Bewegung

Abb. 3–32 Die drei Schichten: Hintergrund, Spiel, Vordergrund

3.2.5.2 »BallOut« – der Rundum-Schläger

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

Abb. 3–34 Die fertige Version: »BallOut«

Listing 3–5 (BallOut) ViewController.h

Abb. 3–35 Die in »BallOut« verwendeten Grafiken in der Übersicht

Listing 3–6 (BallOut) ViewController.m

3.2.5.3 Erweiterung des Leveldesigns

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.

3.2.5.4 Der Ball

3.3 »Lunar Lander«

Abb. 3–37 Das Original gilt als die erste spielbare Weltraumsimulation: »Lunar Lander«.

Abb. 3–38 Für »Lunar Lander« benötigen wir diese 14 Grafiken.

Listing 3–7 (Lunar Lander) ViewController.h

Listing 3–8 (Lunar Lander) ViewController.m

3.3.1 Animation

Abb. 3–39 Die Animationsschritte der Mondstation

Abb. 3–40 Die Animationsschritte des Düsenantriebs

Abb. 3–41 Die Explosionsanimation des Raumgleiters

Listing 3–9 leveldesign.h

Listing 3–10 leveldesign.m

3.3.2 Head-up-Display

Abb. 3–42 Die Hintergrundgrafik hud.png, die den Hauptteil des HUDs bildet

Abb. 3–43 Das komplette Head-up-Display mit Balken und Levelanzeige vermittelt dem Spieler übersichtlich die wichtigsten Daten.

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

3.3.3 Aufbau und Gameplay

3.4 »Marble Maze« aka »Labyrinth«

Abb. 3–45 iPhone-Klassiker: Marble Maze

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)

Listing 3–11 (Marble Maze) ViewController.h

Listing 3–12 (Marble Maze) ViewController.m

Listing 3–13 leveldesign.h

Listing 3–14 leveldesign.m

Abb. 3–47 Ablesen der Werte für die eigene Levelkreation

3.5 »Fire!« aka »Bouncing Babies«

Abb. 3–48 Gerade mal gut 150 Seiten und schon unser fünftes Spiel: Fire!

Abb. 3–49 canvas.png (verkleinert, 480 ´ 320), baby.png (39 ´ 39), firemen0.png (182 ´ 90), firemen1.png (182 ´ 90)

Listing 3–15 (Fire!) ViewController.h

Listing 3–16 (Fire!) ViewController.m

Abb. 3–50 Identische Programmierung, andere Grafiken: politisch korrekt!

3.5.1 Querformat

Abb. 3–51 Wenn das Bildformat bereits voreingestellt ist, dreht sich der Screen schon vor Programmstart in die gewünschte Richtung.

3.5.2 Die Klasse »Sprite«

Listing 3–17 Sprite.h

Listing 3–18 Sprite.m

4 Level II: Moderne Casual Games

4.1 Scrolling

Abb. 4–1 Macht ohne Scrolling so keinen Spaß.

4.1.1 Page-Scrolling

Abb. 4–2 Die Spielfigur bewegt sich, der Hintergrund ist statisch.

Abb. 4–3 Unterschied zwischen Spieler.center.x (oberer Pfeil) und spielerPosImLevelX (unterer Pfeil)

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.

4.1.2 Einfaches Scrolling

Abb. 4–5 Die Spielfigur ist auf festen Displaykoordinaten fixiert, der Hintergrund scrollt vorbei.

4.1.3 Parallax-Scrolling

4.2 »Noodle Jump« aka »Doodle Jump«

Abb. 4–6 Unser Doodle-Jump-Klon mit Makkaroni

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)

Listing 4–1 (NoodleJump) ViewController.h

Listing 4–2 (NoodleJump) ViewController.m

Listing 4–3 Sprite.h

Listing 4–4 Sprite.m

4.2.1 Jetzt wird alles relativ

Abb. 4–8 Bislang haben wir das Sprite relativ zum Koordinatenursprung bewegt, der Hintergrund war fix.

Abb. 4–9 Nun bleibt das Sprite an einer fixen Position und dient als Ursprungspunkt, zu dessen Koordinaten sich der Hintergrund relativ bewegt.

Abb. 4–10 Das Player-Sprite bewegt sich in horizontaler Richtung, der Hintergrund ausschließlich vertikal.

4.2.2 Performance-Optimierungen

4.2.2.1 Endlosphilosophie

Abb. 4–11 Die unterste Plattform erhält eine neue, zufällige Form und wird oberhalb des Viewports neu gesetzt.

4.2.2.2 Auf Konstanten können Sie zählen

4.2.2.3 Preloader

4.2.2.4 Erweiterungsmöglichkeiten

4.3 »iType« aka »R-Type«

Abb. 4–12 So sieht am Ende unseres Workshops der erste Level von iType aus.

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)

4.3.1 Scrolling

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.

Abb. 4–15 Felsen, Palmen, futuristisches Design, Mauerwerk

Abb. 4–16 Die Tiles können optisch nahtlos aneinandergesetzt werden, wenn sie vertikal mit einem Vielfachen von 20 Pixeln positioniert werden.

Abb. 4–17 Aus mehreren Pattern à 10 Tiles gestalten wir einen längeren Levelabschnitt.

Abb. 4–18 Zusammenfassung mehrerer Levelabschnitte als Pattern zu einem Gesamtlevel

Listing 4–5 leveldesign.h

Listing 4–6 leveldesign.m

Listing 4–7 (iType) ViewController.h

Listing 4–8 (iType) ViewController.m

Listing 4–9 Sprite.h

Listing 4–10 Sprite.m

4.3.2 Virtual Joypad

Abb. 4–19 Im Vergleich zum Hochkantformat ist die Touch-Steuerung beim Querformat nicht immer ideal.

Abb. 4–20 Analog: Je weiter sich der Finger vom Steuerkreuzmittelpunkt entfernt, desto schneller bewegt sich das Sprite in dieselbe Richtung.

Abb. 4–21 Die halbtransparente Joypadgrafik wird links unten auf dem Display platziert.

Listing 4–11 (iType) ViewController.h

Listing 4–12 (iType) ViewController.m

4.3.3 Virtual Touchpad

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.

Listing 4–13 (iType) ViewController.h

Listing 4–14 (iType) ViewController.m

4.3.4 Optimierung der Kollisionsabfrage: Maskierung

Abb. 4–23 Wieder einmal ein Kollisionsproblem: die Bounding-Boxen

Abb. 4–24 Weitere Frames als Masken: Maske 1 (33 ´ 13 Pixel), Maske 2 (19 ´ 3 Pixel)

4.3.5 Verlieren mit Bumms!

Abb. 4–25 Die Animation der Explosion in der Einzelbilderfolge

4.3.6 Aliens und Game-Balance

Abb. 4–26 Die vier Alienarten: alien, eyeball, staticRobot, snake

Listing 4–15 leveldesign.h

Abb. 4–27 Das vierte Alien in die einzelnen Tiles gesplittet: »snake« bildet den Kopf, die 10 »snakeFollow« die Körpersegmente

Listing 4–16 leveldesign.m

Abb. 4–28 wobble: Das Alien bewegt sich auf einer Sinuskurve.

Abb. 4–29 jumper: Das Alien springt 100 Pixel hoch.

Abb. 4–30 jumper2: Das Alien springt 200 Pixel hoch.

Abb. 4–31 guerilla: Das Alien fährt versteckt ins Bild hinein, springt hervor, schießt und duckt sich wieder.

Abb. 4–32 twist: Das Alien rotiert um einen Punkt mit dem Radius 50 Pixel.

Abb. 4–33 twistFollow: Das Alien rotiert um einen Punkt mit dem Radius 50 Pixel und um eine Winkelgröße versetzt (für Schlangenanimation).

Abb. 4–34 bigtwist: Das Alien rotiert um einen Punkt mit dem Radius 100 Pixel.

Abb. 4–35 bigtwistFollow: Das Alien rotiert um einen Punkt mit dem Radius 100 Pixel und um eine Winkelgröße versetzt (für Schlangenanimation).

Abb. 4–36 attack: Das Alien visiert direkt den Raumgleiter an, agiert dabei aber sehr langsam.

4.3.7 Schüsse, Sterne, Funken, Rauch und Explosionen: Partikel

Listing 4–17 Particle.h

Abb. 4–37 Die wichtigsten Eigenschaften eines Partikels im Überblick

Listing 4–18 Particle.m

Listing 4–19 Ergänzungen im ViewController.h

4.3.7.1 Die Aliens schießen zurück

Abb. 4–38 Ein wahres Inferno erwartet den Spieler.

4.3.7.2 Kosmetik: Sterne und Explosionen

4.3.8 Bonuslevel: Faszination Partikel

Listing 4–20 (Elements) ViewController.h

Listing 4–21 (Elements) ViewController.m

Abb. 4–39 Wasserfontäne

4.3.8.1 Funkenflug

Abb. 4–40 Funkenflug

4.3.8.2 Brandherd

Abb. 4–41 Brandherd

4.3.8.3 Rauchschwaden

Abb. 4–42 Rauchschwaden

4.3.8.4 Nebelschwaden

Abb. 4–43 Nebelschwaden

4.3.8.5 Niagarafälle

Abb. 4–44 Niagarafälle

4.3.8.6 Wunderkerze oder Lunte

Abb. 4–45 Wunderkerze

4.3.8.7 Feuerwerk

Abb. 4–46 Feuerwerk

4.3.9 Endgegner und andere Erweiterungen

Abb. 4–47 Getroffenes Alien: kurzes Aufleuchten

Abb. 4–48 2 Aliens = 1 Alien + Schutzschild

Abb. 4–49 Ein Auto im Weltall?

4.4 »Neptune Patrol« aka »Moon Patrol«

Abb. 4–50 Ungewöhnliches Fahrverhalten

Abb. 4–51 App Store-Klassiker seit 2009: Canabalt

4.5 »The Little Jungle Sisters« aka »The Great Giana Sisters«

Listing 4–22 Methode loadLevel

Listing 4–23 level1.lvl

Abb. 4–52 Die verwendeten Plattformen in »The Little Jungle Sisters«

Abb. 4–53 11 Zeichen ermöglichen die einfache Gestaltung eines simplen, aber kompletten Levels.

4.5.1 Dynamisches Scrollen

4.5.2 Kompletter Code

Listing 4–24 constants.h

Listing 4–25 (The Little Jungle Sisters) ViewController.h

Listing 4–26 (The Little Jungle Sisters) ViewController.m

Abb. 4–54 Level 2 in der Komplettansicht

Listing 4–27 level2.lvl

Abb. 4–55 Level 3 in der Komplettansicht

Listing 4–28 level3.lvl

4.5.3 Ebenensortierung

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.

4.5.4 Detaillierte Animationen

Abb. 4–57 Pro Animationsschritt wird der Ballen des Standfußes jeweils um 2 Pixel nach hinten verschoben.

4.5.5 Parallax-Scrolling – ein Hauch von 3D

Abb. 4–58 bg.png (480 ´ 320), layer0.png (1440 ´ 320) und layer1.png (1440 ´ 320)

Abb. 4–59 Die vier Schichten: Canvas (inkl. Spiel), Hintergrund1 (Wald, beweglich), Hintergrund2 (Wald, beweglich) und der eigentliche Hintergrund (Farbverlauf, fix)

Abb. 4–60 Die vier Schichten im Viewport: Die Baumstämme im Vordergrund können sich optisch vom Hintergrund noch nicht so richtig absetzen.

Abb. 4–61 Märchenhafter Schleier: fog.png (zur besseren Sichtbarkeit auf schwarzem Hintergrund)

Abb. 4–62 So soll unser Spiel anschließend aussehen, die Hintergrundebenen scrollen dabei in unterschiedlichen Geschwindigkeiten mit.

Listing 4–29 ViewController.h

Listing 4–30 ViewController.m

Abb. 4–63 Das linke und das rechte Drittel sehen identisch aus.

4.5.6 Einäugige Sumpfmonster

Abb. 4–64 Sumpfmonster (Bufo zyklopensis, engl. Bogeye = »Sumpfauge«) das fieseste Geschöpf im Dschungel

Listing 4–31 level1.lvl (mit Monstern)

Abb. 4–65 Das animierte Sumpfauge

5 Level III: Casual Games für Profis

Abb. 5–1 Ein typisches Tile-based Game

5.1 Tilemaps

Abb. 5–2 Hier sind die Tiles deutlich sichtbar markiert.

5.1.1 UIView vs. CALayer

Abb. 5–3 Nur die untere Hälfte liegt im Viewport.

Abb. 5–4 Die ersten Tiles sind nicht mehr sichtbar.

Abb. 5–5 Die unterste Reihe (außerhalb des Viewports) und die oberste sichtbare Reihe sind identisch.

Abb. 5–6 Zwei gleiche Hälften

Abb. 5–7 Im Viewport hat sich nichts geändert.

Abb. 5–8 Die obere Hälfte wird neu bestückt.

Listing 5–1 ViewController.h

Listing 5–2 ViewController.m

Listing 5–3 tilemap1.lvl

5.1.2 Tiled – ein kostenloser Tilemap-Editor

Abb. 5–9 Tilemaps mit dem Tool »Tiled« einfach erstellen

Listing 5–4 loadLevel-Methode

Abb. 5–10 Eine Tilemap im Rohzustand

5.2 »1783 – Montgolfière« aka »1942«

Abb. 5–11 So soll das fertige Spiel aussehen.

Listing 5–5 constants.h

Abb. 5–12 Die neue Tilemap »versailles.png«, mit der wir einen kompletten Schlossgarten entwerfen können

5.2.1 Pseudo 3D

Abb. 5–13 Der Ballon in Scheiben und zusammengesetzt

Abb. 5–14 Durch unterschiedlichen Versatz der »Scheiben« entsteht ein dreidimensionaler Eindruck.

5.2.2 Tile-Engine für Animation

Abb. 5–15 Keine sechs Einzelbilder, sondern ein Filmstreifen.

Listing 5–6 ViewController.h

Listing 5–7 ViewController.m

5.3 »Nuke Control« – Programmieren mit Cocos2D

Abb. 5–16 So soll der Einstiegslevel von »Nuke Control« später aussehen.

Abb. 5–17 Von oben betrachtet ist alles flach.

5.3.1 Installation von Cocos2D

Abb. 5–18 »Terminal« über Spotlight starten

Abb. 5–19 Den Cocos2D-Ordner einfach in das Terminalfenster ziehen

Abb. 5–20 Cocos2D wurde erfolgreich installiert.

Abb. 5–21 Ein neues Cocos2D-Projekt anlegen

5.3.2 Einführung in Cocos2D

Abb. 5–22 Ein Buch, bei dem man nach 366 Seiten sein erstes »Hello World!« programmiert hat, würde ich sofort reklamieren.

Listing 5–8 HelloWorldLayer.m

Abb. 5–23 Die Position eines Sprites wird in Cocos2D über dessen Ankerpunkt bestimmt.

5.3.3 Draw-Steuerung

Abb. 5–24 Der gezeichnete Pfad, dem das Sprite im nächsten Schritt folgen wird, ist bereits sichtbar.

Abb. 5–25 Leider folgt das Elektron-Sprite nicht dem direkten Pfad.

Listing 5–9 HelloWorldLayer.h

Listing 5–10 HelloWorldLayer.m

5.3.4 Spielkonzept und Grafiken

Abb. 5–26 atom1.png, atom2.png und elektron.png, mehr brauchen wir nicht

Abb. 5–27 Drei Schichten von rotierenden Grafiken ergeben das vitale Farbspiel.

5.3.5 Herstellung der Grafiken

Abb. 5–28 Die neu erstellte Grafik mit 400 ´ 400 Pixeln

Abb. 5–29 Die Einstellungen in dem Tool »Verlaufsaufhellung« für die Erzeugung der Atomhülle

Abb. 5–30 Wir missbrauchen den Schlagschatten als roten Schein um das Elektron.

Listing 5–11 HelloWorldLayer.h

Listing 5–12 HelloWorldLayer.m

5.3.6 Draw-Steuerung (Choreografie, Muster)

Tab. 5–1 Gesten in Kampfhandlungen übersetzen

Abb. 5–31 Die Geste wird direkt in die Kampfhandlung übertragen.

Abb. 5–32 C64-Klassiker: »Winter Games«

Tab. 5–2 Gesten in Tanzfiguren übersetzen

Abb. 5–33 In »daWindci« wird ein Heißluftballon indirekt z. B. durch einen Tornado gesteuert, den der Spieler mit einer Kreisgeste hervorrufen kann.

Abb. 5–34 Eingrenzung des Pfads

Abb. 5–35 Rasterung

Abb. 5–36 Filterung der Störfelder, die zur Erkennung nicht notwendig sind

Tab. 5–3 Gängige Gesten und deren Erkennungscodes

Listing 5–13 HelloWorldLayer.h

Listing 5–14 HelloWorldLayer.m

6 Level IV: Casual Games 3D

Abb. 6–1 Anhand der Bounding-Boxen auf Kollisionen zu schließen – da möchte man kein Programmierer sein.

6.1 OpenGL ES

6.2 »Jellybears« aka »Collapse!«

Abb. 6–2 Unser Gummibärchenspiel: Jellybears

6.2.1 Grafische Umsetzung

Abb. 6–3 Diese Texturen werden wir verwenden: Gummibären in allen Farben und eine halbtransparente Tüte.

Abb. 6–4 In diesem Fall konvertiert das weiße Gummibärchen in ein grünes, womit der Sechserblock komplett verschwindet.

Abb. 6–5 Beim Speichern der Textur das Häkchen bei »Interlaced« nicht vergessen

6.2.2 Technische Umsetzung

Abb. 6–6 Auswahl des richtigen Templates

Abb. 6–7 Eine kleine Änderung im Storyboard Editor

Abb. 6–8 Ein Sprite im 3D-Raum

Abb. 6–9 Zwei Dreiecke: ein Sprite

6.2.3 Spiellogik

Listing 6–1 (Jellybears) ViewController.h

Listing 6–2 (Jellybears) ViewController.m

6.2.4 Rekursiver Steinbruch

6.3 »Gems 3D« aka »Collapse!«

Abb. 6–10 Dasselbe Spiel, anderes Outfit und nun komplett in 3D.

Abb. 6–11 Unsere neuen Texturen gembg.png und gem0.png bis gem4.png

Abb. 6–12 Das sieht nun schon vielversprechend aus: unser Spiel in echtem 3D!

Abb. 6–13 Entscheidend ist die Umlaufbahn: Gegen den Uhrzeigersinn bedeutet »vorne« und damit »sichtbar«.

Abb. 6–14 Die Hälfte der Textur wird einfach nicht angezeigt.

6.3.1 Meshes aus .OBJ laden

Listing 6–3 cube.obj

Abb. 6–15 Ringe statt Würfel … und zwar durch und durch

6.4 Blender

Abb. 6–16 Der kostenlose 3D-Editor »Blender 2.61«

Abb. 6–17 Erst einmal die Bühne säubern

6.4.1 Ikosaeder

Abb. 6–18 Der erste Gem ist schon fast fertig.

Abb. 6–19 Positionieren, »Subdividieren« und Exportieren

6.4.2 Edelstein

Abb. 6–20 Über den »Schraubenschlüssel«-Reiter erreichen Sie das »Modifier«-Panel.

6.4.3 Metaballs

Abb. 6–21 Über »Alt« + »C« konvertieren Sie die Metaballs zu einem Gitternetz.

Abb. 6–22 So wechseln Sie in die »Von oben«-Sicht und unterteilen alle Vierecke in Dreiecke.

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.

Abb. 6–24 Vielleicht nicht gerade die passenden Texturen, aber dafür in 3D!

7 Der Endgegner: Die letzten 10 %

7.1 Die Menüstruktur

Abb. 7–1 Diese vier Screens sollten Sie im Mindestrepertoire haben: Default.png, Startscreen, das Spiel und einen Endscreen

7.1.1 Methode 1: »Eine für alles«

7.1.2 Methode 2: »Storyboard«

Abb. 7–2 Um das Spiel zu komplettieren, erstellen wir ein neues Projekt »completeGame«.

Abb. 7–3 Der Storyboard Editor hilft uns bei der Erstellung der Menüstruktur.

Abb. 7–4 Fügen Sie rechts von unserer UIView einen UIViewController hinzu.

Abb. 7–5 Das Spiel wird hinzugefügt.

Abb. 7–6 Das Titelbild wird einfach über ein UIImageView hinzugefügt.

Abb. 7–7 Über einen unsichtbaren Button fügen wir dem Titelscreen eine einfache Menüstruktur hinzu.

Abb. 7–8 Der Button wird mit der Gamescreen verbunden.

7.1.2.1 Programmiertechnischer Wechsel

Abb. 7–9 Hier wird die selbst geschriebene Klasse zugeordnet

8 Hidden Levels

8.1 Face Detection

Listing 8–1 (Face Detection) ViewController.h

Listing 8–2 (Face Detection) ViewController.m

Abb. 8–1 Das Gesicht in face.jpg wurde erkannt und die Augen wurden markiert.

8.2 Face Tracking

Listing 8–3 (Face-Tracking) ViewController.h

Listing 8–4 (Face-Tracking) ViewController.m (Auszug)

Abb. 8–2 An Position des Betrachters angepasste Darstellung: 3D-Simulation

8.3 Einstellungen

Listing 8–5 Einstellungen speichern

Listing 8–6 Einstellungen einlesen

8.4 Highscore

Listing 8–7 Highscore-Verwaltung

Listing 8–8 Highscore.h

Listing 8–9 Highscore.m

8.5 GameKit

Listing 8–10 Game-Center-Initialisierung, Teil I

Listing 8–11 Game -Center-Initialisierung, Teil II

Listing 8–12 Highscore an Game Center übergeben

Listing 8–13 Highscore anzeigen

8.6 Facebook

Abb. 8–3 Hier werden die Daten aus dem Provisioning Portal eingefügt.

8.7 Videosequenz

Abb. 8–4 Miro Video Converter

Listing 8–14 Video abspielen

8.8 Location

Listing 8–15 (Location) ViewController.h

Listing 8–16 Ausschnitt aus der getGPSViewController.m

8.9 Kompass

9 Bonuslevel: Artwork und Grafik

9.1 Gimp

9.1.1 Installation

9.1.2 Einführung für komplette Neulinge

Abb. 9–1 Die Gimp-Fenster von links nach rechts: Werkzeugkasten, Ebenenfenster, Zeigerinformationen und das Arbeitsfenster

Abb. 9–2 Pixelgenaues Arbeiten mit dem Stift

Abb. 9–3 Besser fürs Malen geeignet: der Pinsel

Abb. 9–4 Farbverläufe werden später noch wichtig sein.

9.1.3 Zeichnen mit Niveau: Ebenen in Gimp

Abb. 9–5 Jedes Körperteil hat seine eigene Ebene.

9.2 Farbtheorie

9.2.1 Die wichtigsten Farben

9.2.1.1 Himmel

Abb. 9–6 Schafft Atmosphäre: kreisförmiger Farbverlauf von hell nach dunkel

Abb. 9–7 Mit drei Klicks erzeugen wir eine schöne Sonne.

Abb. 9–8 Mit Ebenen jonglieren: 1) neue Ebene erzeugen, 2) aktuelle Ebene duplizieren, 3) aktuelle Ebene löschen

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/)

Abb. 9–10 Nächtliches Szenario

Abb. 9–11 Ideal für Spaceshooter: Fotos der NASA

9.2.1.2 Haut

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.

Abb. 9–13 Hier den Hexcode eintragen und Gimp wandelt den Code in die dazugehörige Farbe um.

9.2.1.3 Metalle

Abb. 9–14 Metall, Chrom und Gold/Silber

9.2.2 Ambiente

9.2.3 Farbnutzung

9.2.4 Licht und Schatten

Abb. 9–15 Gehen und Wiederkommen wird in verschiedenen Ländern anders interpretiert.

Abb. 9–16 Dreidimensionale Wahrnehmung durch den richtigen Einsatz von Licht und Schatten

Abb. 9–17 Richtiges Setzen von hellen und dunklen Flächen

Abb. 9–18 Lineare Farbverläufe sorgen für die räumliche Darstellung von Röhren, ein kreisförmiger Farbverlauf für dreidimensionale Kugeln.

Abb. 9–19 Funktioniert nur bei der liegenden Röhre: Umkehr durch horizontale Spiegelung

Abb. 9–20 Nun stimmt die Darstellung wieder.

9.3 Sprites

9.3.1 Helden

9.3.1.1 Typ »Doodle«

Abb. 9–21 Kurzer Selbsttest: Welches der folgenden Doodles würden Sie als reiner Spieler am ehesten als hingekritzelte Spielfigur akzeptieren?

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.

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!

Abb. 9–24 Zuschneiden des gewünschten Bildausschnitts

Abb. 9–25 Ebene kopieren und Abbildungsmodus einstellen

Abb. 9–26 Entweder schwarz oder weiß, ein Dazwischen gibt es beim Schwellwert nicht.

Abb. 9–27 Beim Skalieren setzen wir mit »Sinc (Lanczos 3)« am besten immer den besten Algorithmus ein.

Abb. 9–28 Die Auswahl der Farbe des Pinsels und der Pinselstärke (links: Gimp 2.6, rechts: Gimp 2.8)

Abb. 9–29 Wer hätte gedacht, dass Mausgrobmotorik einmal ein Vorteil sein könnte?

Abb. 9–30 Das fertige Doodle

9.3.1.2 Typ »8-Bit Pixel Art«

Abb. 9–31 Ein Meisterwerk in Reduktion: 86 Pixel und nur zwei Farben sorgen in »Canabalt« für das stimmungsvolle Retrofeeling.

Abb. 9–32 Jedes optische Pixel besteht in Wahrheit aus mehreren Pixeln.

Abb. 9–33 Ein typisches Pixel Artwork: Jedes einzelne Pixel ist von Hand gesetzt.

Abb. 9–34 Schritt für Schritt entsteht der Kopf unserer Heldin, frisiert wird ganz zum Schluss.

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

Abb. 9–36 Eine gute Heldin braucht Köpfchen und Körper.

Abb. 9–37 Auch unsere Heldin steht auf gutes Schuhwerk.

9.3.1.3 Typ »Vektorgrafik«

Abb. 9–38 Mit wenigen geometrischen Schritten zum sympathischen Heldenkopf

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

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

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

Abb. 9–42 Erst der »Smiley« macht aus dem Bauch einen Waschbrettbauch.

Abb. 9–43 Links sieht aus wie Plastik, rechts – mit krakeligen Linien – wie Baumwolle.

Abb. 9–44 Das furchtbare Ergebnis nach dem Verkleinern ohne Interpolation

Abb. 9–45 Die Umrisslinie lässt das Sprite nicht mehr ganz so verfranst aussehen.

Abb. 9–46 Im Zweifelsfall die Augen immer vergrößern

Abb. 9–47 Der fertige kleine Barbar ist bereit für sein Abenteuer.

9.3.1.4 Typ »16-Bit«

Abb. 9–48 So ungefähr soll der eigene Pinsel aussehen.

Abb. 9–49 Der selbst erstellte Pinsel

Abb. 9–50 Die Reihenfolge der Pinselstriche für den korrekten Schattenwurf

Abb. 9–51 Mit nur sechs Pinselstrichen die Gliedmaßen zeichnen und mit nur 10 Punkten den Körper modellieren

Abb. 9–52 Die fertige Vorlage und ein amphibienartiges Alien, welches auf Basis dieser Vorlage erstellt wurde

Abb. 9–53 Die Textur (links) sorgt für ein organisches Aussehen unseres Aliens (rechts).

9.3.1.5 Typ »3D«

Abb. 9–54 Nur drei Schritte bis zum 3D-Küken

Abb. 9–55 Weitere mögliche, niedlich dreinschauende Varianten

9.3.1.6 Typ »Eigenkreation«

Abb. 9–56 Am Anfang steht immer die Bleistiftzeichnung.

Abb. 9–57 Experimente bei den Details sind erwünscht.

Abb. 9–58 Die Textur gibt dem Wesen eine realistische Haut, egal ob Fell, Leder oder Schuppen.

Abb. 9–59 Die finale Ausarbeitung für das Spiel

9.3.2 Animationen

9.3.2.1 Rollige Helden

Abb. 9–60 Zu Lande, zu Wasser und in der Luft

9.3.2.2 Läufige Helden

Abb. 9–61 Konstante Geschwindigkeit: 2 Pixel/Frame

Abb. 9–62 Bei Pferden bewegt sich die Brust selbst im Galopp nur unwesentlich.

9.3.2.3 Rundgang

Abb. 9–63 Eine komplette Laufanimation innerhalb 15 Frames

Abb. 9–64 Die Abspieldauer jedes einzelnen Frames kann einfach hinter dem Ebenennamen gesetzt werden.

9.3.3 Plattformen (16 Standard Tiles)

Abb. 9–65 Level 1: Wenige Tiles ermöglichen nur schlichtes Leveldesign.

Abb. 9–66 Level 2: Statt nur Plattformen sind nun massive Wände im Einsatz.

Abb. 9–67 Level 3

Abb. 9–68 16 Teile, die die Welt bedeuten (schwarze Linie = hier kann das Sprite laufen)

Abb. 9–69 Ein brauchbares Tileset, wobei die Kachelung noch deutlich ins Auge sticht.

Abb. 9–70 Bessere Kachelübergänge dank des Filters »Nahtlos machen«

Abb. 9–71 3 Varianten einer Kachel, die an den Seiten immer die identischen Pixel hat, damit die Übergänge reibungslos funktionieren

Abb. 9–72 Plattformen gefällig? Diese passen irgendwie immer!

Abb. 9–73 Unschöne Blockeffekte in der Mitte sind durch ungerade Pixelbreite und -höhe oder durch Antialiasing vermeidbar.

9.3.4 Minisprites: Gems

Abb. 9–74 Von einem einfachen Herz zu einem plastisch wirkenden Gem

Abb. 9–75 Selbst das Werk eines unfähigen Grafikers kann man mit dem Algorithmus unheimlich aufwerten.

Abb. 9–76 Vor und nach der Anwendung des Algorithmus

Abb. 9–77 Von der Kritzelpalme zum perfekten 16-Bit-Sprite

Abb. 9–78 Screenshot des Tools Needlework8

9.3.5 Explosionen

Abb. 9–79 Der Explosionspinsel

Abb. 9–80 Eine schöne Explosion in weniger als einer Minute mit dem richtigen Pinsel

Abb. 9–81 Animierter Feuerball

Abb. 9–82 Effektvoll, aber stellt den Programmierer vor heftige Probleme

9.4 Hintergrundgrafiken

Abb. 9–83 Mit Hintergrundbild wirkt die Gegend einfach stimmungsvoller.

Abb. 9–84 Die Baumwipfel schränken die virtuelle Freiheit immens ein.

Abb. 9–85 Kennt man, mag man, ist man gewohnt, kommt man mit zurecht.

9.4.1 Wolken

9.4.1.1 Typ »Kinderspiel«

Abb. 9–86 Entstehung einer Wolke im Comic-Style

9.4.1.2 Wolkenmeer

Abb. 9–87 Wolken und Buschwerk in einem Schritt

9.4.1.3 Typ »Comic«

Abb. 9–88 In zwei Minuten zur Schäfchenwolke

9.4.2 Landschaft

9.4.2.1 Hügel

Abb. 9–89 Entstehung eines Hügels

Abb. 9–90 Für jedes Szenario die richtigen Hügel

9.4.2.2 Wald und Bäume

Abb. 9–91 Ööööh … nö!

Abb. 9–92 Das sieht schon besser aus.

Abb. 9–93 Die Knotenstellen lassen den Baum natürlicher aussehen

Abb. 9–94 Eine Baumkrone ist in einer Minute aufgemalt.

Abb. 9–95 Mit einem solchen Pinsel können Wiesen schnell und leicht erzeugt werden.

Abb. 9–96 Holzaugen und Astlöcher geben dem Baum ein märchenhaftes Aussehen.

Abb. 9–97 Zwei Kurven, Rücken an Rücken

Abb. 9–98 Die Äste werden hinzugefügt.

Abb. 9–99 Eine flache Krone (z. B. als Plattform verwendbar), Büschel und eine mächtige Baumkrone

Abb. 9–100 Ein Stern mit verschieden grünfarbenen Strahlen bildet unseren Pinsel.

Abb. 9–101 Schritt für Schritt zum liegenden Stern

Abb. 9–102 Und dasselbe noch einmal

9.4.3 Wetter

Abb. 9–103 Nebel

Abb. 9–104 Regenfäden und Schneeflocken

9.4.4 Schnörkel

Abb. 9–105 Unrealistisch, aber stimmungsvoll: Schnörkel skizzieren leichte Windverwehungen.

9.4.5 Weltraum

Abb. 9–106 Viele Dreiecke, eine Glaskuppel: Konstruktion eines typischen Sidescroller-Raumschiffs

Abb. 9–107 Dreiecke und eine Ellipse: So designen wir den Raumgleiter eines gängigen Vertikalscrollers.

9.4.5.1 Panel »Raumschiff«

Abb. 9–108 Ein Ausgangspanel und zwei Variationen für den klassischen Retro-Shooter

Abb. 9–109 Kanonen und Düsenantriebe

9.4.5.2 Panel »Versuchslabor«

Abb. 9–110 Konstruktion einer ekligen Versuchlaborumgebung

Abb. 9–111 Der klassische »Alienlabor-Level«

9.4.5.3 Panel »Felsplanet«

Abb. 9–112 Die Entstehung eines Felsen

9.4.5.4 Panel »Alienplanet«

Abb. 9–113 Zwei Pinsel gestalten einen kompletten Level.

Abb. 9–114 In vier Schritten zu Kaviarmatsche und Tentakeln

Abb. 9–115 Borgen der Nachbarin garantiert kein Mehl: pflanzliche Bewohner des Alienplaneten

9.4.5.5 Panel »Eiskristall«

Abb. 9–116 In nur fünf einfachen Schritten zum Eisplaneten

9.4.5.6 Panel »Elektro«

Abb. 9–117 Elektropanels leicht gemacht

9.4.6 Puzzlehintergründe

9.4.6.1 Fraktale

Abb. 9–118 Schnell spektakuläre Hintergründe mit dem Fraktal-Explorer erstellen

9.4.6.2 Pinsel

Abb. 9–119 Solche Effekte zaubern Sie mit den richtigen Pinseln.

9.5 Titelbild

9.5.1 Titelbildloser Titelscreen

Abb. 9–120 Funktioniert super als Titelscreen: »The Little Jungle Sisters« im Demo-Modus mit zusätzlichem Schriftzug

9.5.2 Titelbilder, wie sie sein müssen

Abb. 9–121 Unsere Vorlage (Fotograf: Benjamin Miller)

Abb. 9–122 Ohne Durchpausen geht nichts: Mit einem dicken Pinsel zeichnen wir die Strukturen des Gesichts nach.

Abb. 9–123 Ausdünnen der Linien

Abb. 9–124 Verfeinerung der Augenpartie

Abb. 9–125 Schritte 4–6: Von der Skizze zur Kolorierung

Abb. 9–126 Die schraffierten Hautpartien decken symbolisch den mittleren Schatten ab, Ohr und Hals sind die dunkelsten Stellen.

Abb. 9–127 Schritte 7–9: Jetzt erledigen Filter den Rest für uns.

Abb. 9–128 Schritte 10 und 11: Wir machen die Zeichnung etwas plastischer.

Abb. 9–129 Als letztes Highlight: blaue Augen

Abb. 9–130 Etwas arg überspitzt deformiert: unser Titelmädchen als eingebildete Zicke und mit bösen Hintergedanken

9.6 Grafiken in Code einbinden

9.6.1 Standardauflösung vs. Retina

9.6.2 Ladescreen

10 Bonuslevel: Sound FX/Music

10.1 Musikproduktion

10.1.1 Software

10.1.1.1 Elektronische Musik

10.1.1.2 MuLab 4.1

Abb. 10–1 Sieht kompliziert aus, ist aber total einfach: MuLab 4.1

Abb. 10–2 So präsentiert sich der Sequenzer zum Programmstart.

Abb. 10–3 Aus der umfangreichen Bibliothek wählen wir das »EPianoGT«.

Abb. 10–4 Wenn Ihnen das gewählte Instrument nicht gefällt, können Sie über die beiden Pfeile durch die gesamte Instrumentenbibliothek zappen.

Abb. 10–5 Die Piano-Roll

10.1.2 Virtuelle Instrumente

Abb. 10–6 Das Plugin »Independence Free« beinhaltet u. a. hervorragende Gitarren.

10.1.3 So spielen Sie keine falschen Töne

10.1.3.1 Akkorde

Abb. 10–7 Die schwarzen Tasten sind in Zweierblocks angeordnet.

Abb. 10–8 Bildung eines Dur- und Moll-Akkords

10.1.3.2 Tonleiter

Abb. 10–9 Bei der Bestimmung der Noten einfach dem Alphabet folgen

Abb. 10–10 Die doppelten Bezeichnungen der schwarzen Tasten

10.1.3.3 Akkordfolgen

Abb. 10–11 Die vier magischen Akkorde für ansprechende Game-Musik

Abb. 10–12 Eine kleine Auswahl möglicher Begleitmelodien

Abb. 10–13 Ein einfaches Begleitschema für die Akkordfolge C – F – G – C

Abb. 10–14 Das Tempo kann einfach durch die Maustaste verändert werden.

10.1.3.4 Rhythmik

Abb. 10–15 Ein sehr einfacher Reggae-Rhythmus C – F – G – C (langer Balken = 2 kurze Balken)

Abb. 10–16 Ein sehr einfacher Marsch C – F – G – C

10.1.3.5 Percussion

Abb. 10–17 C3: Kickdrum/B3: Snare Drum/G3 + A3: Tom Toms

10.1.3.6 Bass

10.1.3.7 Melodie

Abb. 10–18 Die Tonleitern und die jeweils nicht zu verwendenden Noten/Tasten (samt Alternative)

10.1.4 Jingles

Abb. 10–19 »Alle meine Entchen« in C-Dur

Abb. 10–20 »Alle meine Entchen« auf sieben Noten ergänzt

Abb. 10–21 Wir bauen den Akkord auf Basis der letzten Melodienote.

Abb. 10–22 Unsere einfache Jingle-Variation

Abb. 10–23 Unser kompletter Jingle mit vier Spuren: SGbrasoft, SGtar, BoogieMoogie und Drumset

10.1.5 Musik

10.1.5.1 Reggae

Abb. 10–24 Drumset als Reggae-Grundlage

Abb. 10–25 Durch die »DiSar97«-Spur tritt das Reggae-Feeling deutlich hervor.

Abb. 10–26 Die »Wow«-Spur

10.1.5.2 Samba

Abb. 10–27 Mit dem »GM Drumset« haben wir ein weiteres Schlagzeug im Programm.

Abb. 10–28 Durch die Merengue-Trommeln bekommt die Samba ihren charakteristischen, südamerikanischen Klang.

Abb. 10–29 Zu guter Letzt der Bass

10.1.5.3 Elektro

Abb. 10–30 »Fat Bass« und »Minor7th«

Abb. 10–31 Die Techno-typische Betonung auf allen Taktschlägen

10.1.5.4 Rap

Abb. 10–32 Die einzelnen Instrumentenspuren für Old-School-Rap

10.1.6 Sound FX

10.1.6.1 Bibliothek

10.1.6.2 Cfxr

Abb. 10–33 Typische Gamesounds einfach mit Cfxr generieren

10.1.6.3 Aufnahme

10.1.7 Sounds für die App vorbereiten

Abb. 10–34 Mit dem Tool »Switch Sound File Converter« bringen wir die Sounds in die App.

10.2 Auftragsmusik

10.3 Sound in Objective-C

10.3.1 Dateiformate

10.3.2 Cleveres Musikmanagement

10.3.2.1 Atmosphäre erzeugen

10.3.2.2 Loops

10.3.3 Wiedergabe über Objective-C

10.3.3.1 Sound FX

Listing 10–1 Sound FX abspielen

10.3.3.2 Hintergrundmusik

Listing 10–2 MP3-Datei abspielen

Listing 10–3 (BackgroundMusic) ViewController.h

Listing 10–4 (BackgroundMusic) ViewController.m

11 Hall of Fame

11.1 Sehen Sie die Spieler an

Abb. 11–1 Keine Frage, die Bälle mit Augen laden weitaus sympathischer zu einem Spiel ein.

11.2 Helden mit Macken

11.3 Pfeifkonzert

11.4 Gefühlsduselei

11.5 Öfter mal was Neues

Abb. 11–2 Der Blockbuster »Tiny Wings« spielt jeden Tag in einem neuen Erscheinungsbild.

11.6 Oster- und Mogelei

11.7 Bescherung

Listing 11–1 Ein Bild schenken

11.8 Humor

11.8.1 Slapstick

11.8.2 Situationskomik

Abb. 11–3 Tierisches Durcheinander sorgt für Situationskomik.

11.8.3 Anspielungen, Hommagen, Zitate

Abb. 11–4 Welcome-Back-Empfangskomitee

11.9 Erschöpfung

11.10 Blitzreinkarnation

11.11 Kreative Sensoren

Abb. 11–5 Spielen Sie mit den Sensoren.

11.12 Kopierschutz

Literaturverzeichnis

Videospiele

Kent, Steven L.:

Gameplay und Spielideen

Deutsch:

Saltzman, Marc:

Englisch:

Schell, Jesse:

Rogers, Scott:

Perry, David:

Links:

»Game Design Dokumente Aufbau und Struktur«:

»Digitale Spiele: Gams Design und das Design Document«:

The »Core« of a Game:

Example Blank Design Document:

Game Design Document-Template:

Objective-C

Deutsch:

Stäuble, Markus:

Seelmann, Max:

Spieleprogrammierung

Deutsch:

Steinke, Lennart:

Luka, Thomas:

Englisch:

Bourg, David M.:

Goldstein, Neal und Manning, Jon und Buttfield-Addison, Paris:

Daley, Michael:

Craft, Chris:

Zirkle, Paul:

Cocos2d

Englisch:

Itterheim, Steffen:

Links:

Cocos2d for iPhone:

OpenGL ES 2.0

Englisch:

Rideout, Philip:

Grafik

Deutsch:

Lechner, Bettine K.:

Howe, John:

Englisch:

nfgman:

Fox, Brent:

Tsai, Francis:

Robinson, Craig:

Mullen, Tony:

Links:

ImagineFX (Zeitschriften und Tutorials):

Gimp:

GIMP on OS X:

Musik

Deutsch:

Kaiser, Carsten:

Novy, Mike:

Schmitt, Werner:

Englisch:

Hoffert, Paul:

IV Childs, G. W.:

Marks, Aaron:

Links:

Hofmann, Jan und Szczypula, Oliver:

Krause, Benjamin:

Index