Skip to main content

HTML5-Spiele-Entwicklung: Browsergames und Spiele-Apps für iPhone, Android und Windows Phone

HTML5-Spiele-Entwicklung: Browsergames und Spiele-Apps für iPhone, Android und Windows Phone

Jacob Seidelin, Gerhard Franken (Translator)

ISBN: 978-3-527-76031-2

Jan 2013

506 pages

Select type: Paperback

Product not available for purchase

Einführung 15

Teil 1 Erste Schritte mit HTML5-Spielen

1 Spielen im Web 23

1.1 Die Geschichte von HTML5 24

1.2 HTML5 für Spiele nutzen  25

1.2.1 Canvas 25

1.2.2 Audio 27

1.2.3 WebSockets 29

1.2.4 Web Storage 30

1.2.5 WebGL 31

1.2.6 HTML5 ist (k)ein Flash-Killer 32

1.3 So sorgen Sie für Abwärtskompatibilität 33

1.3.1 Unterstützte Funktionen ermitteln 33

1.3.2 Die Modernizr-Bibliothek nutzen 34

1.3.3 Die Lücken mit Polyfills stopfen 35

1.4 Die Entwicklung eines Spiels 37

1.5 Zusammenfassung 38

2 Die ersten Schritte 39

2.1 Die Spielidee 40

2.1.1 Steine tauschen 40

2.1.2 3-Gewinnt 40

2.1.3 Aufstieg in höhere Level 41

2.2 Die verschiedenen Spielphasen 41

2.2.1 Startbildschirm 41

2.2.2 Hauptmenü 42

2.2.3 Das Game spielen 43

2.2.4 Highscore-Anzeige 43

2.3 Das Anwendungsgerüst erstellen 45

2.3.1 Das HTML-Grundgerüst 46

2.3.2 Ein paar Formate hinzufügen 47

2.3.3 Scripts laden 49

2.4 Den Startbildschirm erstellen 54

2.4.1 Webfonts nutzen 55

2.4.2 Gestaltung des Startbildschirms 57

2.5 Zusammenfassung 59

3 Mobil unterwegs 61

3.1 Webanwendungen für Mobilgeräte entwickeln 62

3.1.1 Einmal geschrieben, vielfach genutzt 63

3.1.2 Herausforderungen der Mobilplattformen 63

3.2 Der Umgang mit Benutzereingaben bei Mobilgeräten 64

3.2.1 Tastatureingaben 64

3.2.2 Maus versus Fingertipp 65

3.3 Anpassung an niedrige Bildschirmauflösungen 67

3.3.1 Skalierbare Layouts erstellen 69

3.3.2 Kontrolle des Darstellungsbereichs 71

3.3.3 Die Zoomfunktion für den Nutzer deaktivieren 72

3.4 Verschiedene Ansichten erstellen 73

3.4.1 Das Hauptmenü erstellen 73

3.4.2 screen-Module hinzufügen 75

3.4.3 CSS-media-Abfragen nutzen 80

3.4.4 Die Geräteausrichtung ermitteln 82

3.4.5 Eine CSS-Datei für Mobilgeräte hinzufügen 83

3.4.6 Entwicklung für iOS- und Android-Geräte 86

3.4.7 Webapps auf dem Homescreen ablegen 87

3.4.8 Eigenständige Apps erkennen 88

3.4.9 Modernizr erweitern 89

3.4.10 Einen speziellen Startbildschirm erstellen 89

3.4.11 Ein Anwendungssymbol hinzufügen 92

3.4.12 Ein Startbild hinzufügen 95

3.4.13 Die Statusleiste umgestalten 96

3.5 Den Browser beiseite schaffen 97

3.5.1 Elastisches Scrollen deaktivieren 97

3.5.2 Die Adressleiste verstecken 98

3.5.3 Das Standardverhalten des Browsers deaktivieren 99

3.6 Fehlersuche in Webapps für Mobilgeräte 100

3.6.1 Den Safari-Debugger aktivieren 101

3.6.2 Auf das Android-Protokoll zugreifen 103

3.7 Zusammenfassung 104

Teil 2 Das Spielgerüst erstellen

4 Das Spiel erstellen 107

4.1 Das Modul für die Ablauflogik des Spiels erstellen 107

4.1.1 Die Spielinitialisierung 109

4.1.2 Das Spielfeld zu Beginn füllen 113

4.2 Die Spielregeln implementieren 115

4.2.1 Die Zulässigkeit von Tauschvorgängen prüfen 116

4.2.2 Ketten aufspüren 118

4.2.3 Das Spielfeld erneut mit Steinen füllen 124

4.2.4 Juwelen vertauschen 128

4.3 Zusammenfassung 130

5 Tasks an Web-Worker delegieren 131

5.1 Mit Web-Workern arbeiten 131

5.1.1 Beschränkungen von Workern 132

5.1.2 Was sich mit Workern erledigen lässt 134

5.2 Worker nutzen 135

5.2.1 Nachrichten senden 136

5.2.2 Nachrichten empfangen 137

5.2.3 Fehler abfangen 137

5.2.4 Shared Worker 138

5.2.5 Ein Primzahlenbeispiel 140

5.3 Web-Worker in Spielen verwenden 144

5.3.1 Das Worker-Modul erstellen 145

5.3.2 Dieselbe Schnittstelle beibehalten 147

5.4 Zusammenfassung 153

6 Grafiken mit Canvas erzeugen 155

6.1 Grafiken im Web 156

6.1.1 Bitmap-Bilder 156

6.1.2 SVG-Grafiken 156

6.1.3 Canvas 157

6.1.4 Wann sollte Canvas gewählt werden 158

6.2 Mit Canvas zeichnen 159

6.2.1 Figuren und Pfade zeichnen 160

6.2.2 Füllungen und Umrandungen 161

6.2.3 Rechtecke 163

6.2.4 Bogen und Kreise 164

6.2.5 Bézierkurven 167

6.2.6 Beschnittpfade  170

6.3 Anspruchsvolle Umrahmungen und Füllstile 171

6.3.1 Linienenden 171

6.3.2 Linienverbindungen 172

6.3.3 Gradienten nutzen 174

6.3.4 Füllmuster verwenden 176

6.3.5 Transformationen nutzen 177

6.3.6 Text, Bilder und Schatten hinzufügen 179

6.3.7 Die Verwaltung des Zustandsstapels 185

6.3.8 Das HTML5-Logo zeichnen 186

6.3.9 Kombinierte Operationen 193

6.4 Der Zugriff auf Bilddaten 196

6.5 Pixelwerte aktualisieren 197

6.6 Bilddateidaten exportieren 199

6.7 Sicherheitsbeschränkungen verstehen 200

6.8 Pixelbasierte Effekte erzeugen 201

6.9 Zusammenfassung 204

7 Die Spielanzeige gestalten 205

7.1 Spieldateien vorab laden 206

7.2 Die Juwelengröße ermitteln 207

7.3 Das Ladescript ändern 208

7.4 Einen Fortschrittsbalken hinzufügen 213

7.5 Den Hintergrund verschönern 216

7.6 Den Spielbildschirm erstellen 219

7.6.1 Das Spielbrett mit dem Canvas-Element zeichnen 221

7.6.2 Den Spielfeldhintergrund erstellen 222

7.6.3 Das Spielfeld mit Juwelen füllen 226

7.6.4 Das anfängliche Neuzeichnen auslösen 227

7.6.5 Das Spielfeld mit CSS und Bildern zeichnen 228

7.7 Zusammenfassung 236

8 Das DOM-Anzeigemodul laden 237

8.1 Benutzereingaben erfassen 238

8.1.1 Mausereignisse bei Touch-Geräten 238

8.1.2 Die virtuelle Tastatur 239

8.1.3 touch-Ereignisse 240

8.1.4 Input-Ereignisse und canvas 247

8.2 Das Eingabemodul erstellen 249

8.2.1 Eingabeereignisse verarbeiten 251

8.2.2 Spielaktionen implementieren 255

8.2.3 Eingaben mit Spielfunktionen verbinden 261

8.3 Zusammenfassung 269

9 Spielgrafiken animieren 271

9.1 Das Spiel reagieren lassen 272

9.1.1 Zeitsteuerung der Animationen 273

9.1.2 Den Cursor animieren 278

9.1.3 Spielaktionen animieren 280

9.2 Punktzähler und Timer integrieren 291

9.2.1 Die Elemente der Bedienoberfläche erstellen 293

9.2.2 Den Game-Timer erzeugen 297

9.2.3 Punkte vergeben 299

9.2.4 Das Spielende 309

9.3 Zusammenfassung 313

Teil 3 3D-Effekte und Sound

10 Audio für Spiele erstellen 317

10.1 HTML5-Audio 318

10.1.1 Ermittlung der unterstützten Audioformate 319

10.1.2 Die Audio-Formatkriege 319

10.1.3 Soundeffekte ausfindig machen 322

10.2 So nutzen Sie das audio-Element 323

10.2.1 Steuerelemente für Benutzer hinzufügen 323

10.2.2 Audio vorab laden 324

10.2.3 Angabe mehrerer Quelldateien 325

10.2.4 Die Wiedergabe steuern 326

10.2.5 Audio auf Mobilgeräten nutzen 331

10.3 Mit Audiodaten arbeiten 332

10.3.1 Das Mozilla Audio Data API nutzen 333

10.3.2 Einige Beispiele 335

10.4 Das Audiomodul erstellen 341

10.4.1 Vorbereitung für die Audiowiedergabe 342

10.4.2 Soundeffekte wiedergeben 343

10.4.3 Soundwiedergabe stoppen 345

10.4.4 Aufräumen 346

10.5 Soundeffekte zum Spiel hinzufügen 347

10.6 Zusammenfassung 349

11 3D-Grafiken mit WebGL erstellen 351

11.1 3D für das Web 352

11.1.1 Die ersten Schritte mit WebGL 353

11.1.2 WebGL-Debugging 354

11.1.3 Ein Hilfsmodul erstellen 355

11.2 Shader 356

11.2.1 Variablen und Datentypen 357

11.2.2 Shader mit WebGL nutzen 362

11.2.3 Uniform-Variablen 368

11.2.4 Varying-Variablen 369

11.3 Berechnung von 3D-Objekten 371

11.3.1 Vertex-Puffer nutzen 372

11.3.2 Indexpuffer nutzen 373

11.3.3 Modelle, Beobachtungspunkte und Projektionen 374

11.3.4 Rendering 378

11.3.5 Collada-Modelle laden 383

11.4 Texturen und Beleuchtung 386

11.4.1 Lichteffekte hinzufügen 386

11.4.2 Pixelweise Beleuchtung hinzufügen 391

11.4.3 Texturen erzeugen 394

11.5 Die WebGL-Anzeige erstellen 400

11.5.1 Die WebGL-Dateien laden 401

11.5.2 WebGL einrichten 403

11.5.3 Die Darstellung der Juwelen berechnen 406

11.5.4 Die Juwelen animieren 412

11.6 Zusammenfassung 416

Teil 4 Lokaler Speicher und Multiplayer-Games

12 Lokaler Speicher und Caching 421

12.1 Daten mit Web Storage speichern 421

12.1.1 Die Speicherschnittstelle nutzen 422

12.1.2 Ein Speichermodul erstellen 426

12.2 Spielstände dauerhaft speichern 429

12.2.1 Das Spiel verlassen 429

12.2.2 Das Spiel pausieren lassen 431

12.2.3 Die Spieldaten speichern 433

12.3 Eine Highscore-Liste erstellen 437

12.3.1 Den Highscore-Bildschirm erstellen 437

12.3.2 Die Highscore-Daten speichern 440

12.3.3 Die Highscore-Daten anzeigen 441

12.4 Anwendungscache 443

12.4.1 Das Cache-Manifest zur HTML-Seite hinzufügen 444

12.4.2 Der Umgang mit Online-Ressourcen 445

12.4.3 Cache-Updates erzwingen 446

12.5 Zusammenfassung 447

13 Mit WebSockets online gehen 449

13.1 WebSockets verwenden 449

13.1.1 Serververbindungen herstellen 450

13.1.2 Mit WebSockets kommunizieren 454

13.2 Node auf dem Server einsetzen 456

13.2.1 Node installieren 457

13.2.2 Einen HTTP-Server mit Node erstellen 460

13.2.3 Einen WebSocket-Chatraum erstellen 462

13.3 Zusammenfassung 470

14 Ressourcen 471

14.1 Die Nutzung von Middleware 472

14.1.1 Box2D 472

14.1.2 Impact 474

14.1.3 Three.js 477

14.2 Verbreitung auf Mobilgeräten 479

14.2.1 PhoneGap/Apache Cordova 480

14.2.2 Appcelerator Titanium 484

14.3 Der Vertrieb Ihrer Spiele 486

14.3.1 Chrome Web Store 486

14.3.2 Zeewe 488

14.3.3 Google Play/Android Market 489

14.3.4 App Store 490

14.4 Online-Dienste nutzen 490

14.4.1 TapJS 491

14.4.2 Playtomic 492

14.4.3 JoyentCloud Node 493

14.5 Zusammenfassung 494

Stichwortverzeichnis 495