Description
(Text)
Sie möchten Browsergames und Spiele-Apps für iPhone, Android, Windows 8 und Co. entwickeln? In diesem Buch lernen Sie anhand eines attraktiven Beispiel-Spiels, wie es geht! Sie erfahren, wie Sie das Spielfeld mit dem Canvas zeichnen, die Spiellogik umsetzen, Ton hinzufügen, Spielstände speichern u.v.m. Die benötigten HTML5-Grundlagen werden Ihnen dafür ausführlich erklärt - wenn Sie also ein paar JavaScript-Kenntnisse mitbringen, steht Ihren eigenen HTML5-Spielen nichts mehr im Weg!
(Table of content)
- Alle HTML5-Grundlagen für die Spieleentwicklung- Von der Spielidee zum Grundgerüst- Das Spielfeld mit Canvas zeichnen- Benutzereingaben per Touch oder Maus verarbeiten- Animationen, Timer und Punkte- Das Spiel mit Soundeffekten ausstatten- Spielstände speichern und Highscores erstellen- 3D-Grafiken mit WebGL- Multiplayergames mit WebSockets realisieren- Browserunterstützung mit Modernizr sicherstellen- Native Apps mit PhoneGap erzeugen
(Author portrait)
Jacob Seidelin ist freiberuflicher Webentwickler, der über mehr als zehn Jahre Erfahrung in der Branche verfügt. Er ist spezialisiert auf die Spieleentwicklung mit Webtechnologien.
(Table of content)
dungssymbol 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 erstellen107
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üfen116
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 sichmit 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 Umrahmunge
Contents
Einfuhrung 15 Teil 1 Erste Schritte mit HTML5-Spielen 1 Spielen im Web 23 1.1 Die Geschichte von HTML5 24 1.2 HTML5 fur 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 fur Abwartskompatibilitat 33 1.3.1 Unterstutzte Funktionen ermitteln 33 1.3.2 Die Modernizr-Bibliothek nutzen 34 1.3.3 Die Lucken 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 hohere Level 41 2.2 Die verschiedenen Spielphasen 41 2.2.1 Startbildschirm 41 2.2.2 Hauptmenu 42 2.2.3 Das Game spielen 43 2.2.4 Highscore-Anzeige 43 2.3 Das Anwendungsgerust erstellen 45 2.3.1 Das HTML-Grundgerust 46 2.3.2 Ein paar Formate hinzufugen 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 fur Mobilgerate entwickeln 62 3.1.1 Einmal geschrieben, vielfach genutzt 63 3.1.2 Herausforderungen der Mobilplattformen 63 3.2 Der Umgang mit Benutzereingaben bei Mobilgeraten 64 3.2.1 Tastatureingaben 64 3.2.2 Maus versus Fingertipp 65 3.3 Anpassung an niedrige Bildschirmauflosungen 67 3.3.1 Skalierbare Layouts erstellen 69 3.3.2 Kontrolle des Darstellungsbereichs 71 3.3.3 Die Zoomfunktion fur den Nutzer deaktivieren 72 3.4 Verschiedene Ansichten erstellen 73 3.4.1 Das Hauptmenu erstellen 73 3.4.2 screen-Module hinzufugen 75 3.4.3 CSS-media-Abfragen nutzen 80 3.4.4 Die Gerateausrichtung ermitteln 82 3.4.5 Eine CSS-Datei fur Mobilgerate hinzufugen 83 3.4.6 Entwicklung fur iOS- und Android-Gerate 86 3.4.7 Webapps auf dem Homescreen ablegen 87 3.4.8 Eigenstandige Apps erkennen 88 3.4.9 Modernizr erweitern 89 3.4.10 Einen speziellen Startbildschirm erstellen 89 3.4.11 Ein Anwendungssymbol hinzufugen 92 3.4.12 Ein Startbild hinzufugen 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 fur Mobilgerate 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 Spielgerust erstellen 4 Das Spiel erstellen 107 4.1 Das Modul fur die Ablauflogik des Spiels erstellen 107 4.1.1 Die Spielinitialisierung 109 4.1.2 Das Spielfeld zu Beginn fullen 113 4.2 Die Spielregeln implementieren 115 4.2.1 Die Zulassigkeit von Tauschvorgangen prufen 116 4.2.2 Ketten aufspuren 118 4.2.3 Das Spielfeld erneut mit Steinen fullen 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 Beschrankungen von Workern 132 5.1.2 Was sich mit Workern erledigen lasst 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 gewahlt werden 158 6.2 Mit Canvas zeichnen 159 6.2.1 Figuren und Pfade zeichnen 160 6.2.2 Fullungen und Umrandungen 161 6.2.3 Rechtecke 163 6.2.4 Bogen und Kreise 164 6.2.5 Bezierkurven 167 6.2.6 Beschnittpfade 170 6.3 Anspruchsvolle Umrahmungen und Fullstile 171 6.3.1 Linienenden 171 6.3.2 Linienverbindungen 172 6.3.3 Gradienten nutzen 174 6.3.4 Fullmuster verwenden 176 6.3.5 Transformationen nutzen 177 6.3.6 Text, Bilder und Schatten hinzufugen 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 Sicherheitsbeschrankungen 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 Juwelengrosse ermitteln 207 7.3 Das Ladescript andern 208 7.4 Einen Fortschrittsbalken hinzufugen 213 7.5 Den Hintergrund verschonern 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 fullen 226 7.6.4 Das anfangliche Neuzeichnen auslosen 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-Geraten 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 Punktzahler und Timer integrieren 291 9.2.1 Die Elemente der Bedienoberflache 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 fur Spiele erstellen 317 10.1 HTML5-Audio 318 10.1.1 Ermittlung der unterstutzten 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 fur Benutzer hinzufugen 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 Mobilgeraten 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 fur die Audiowiedergabe 342 10.4.2 Soundeffekte wiedergeben 343 10.4.3 Soundwiedergabe stoppen 345 10.4.4 Aufraumen 346 10.5 Soundeffekte zum Spiel hinzufugen 347 10.6 Zusammenfassung 349 11 3D-Grafiken mit WebGL erstellen 351 11.1 3D fur 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 hinzufugen 386 11.4.2 Pixelweise Beleuchtung hinzufugen 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 Spielstande 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 hinzufugen 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 Mobilgeraten 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
