HTML5 a hry

HTML5 a hry

Čtvrtkon 18. 6. 2015

Bojový plán

1. Hry v prohlížečích
2. JavaScript
3. Dostupná API
4. Ukázky

Hry v prohlížečích

• Dlouhá historie
• Historicky problémy s technologiemi (výkon, rozhraní)
• Rozšířenost
• Dostupnost

Hry v prohlížečích

• Evergreen browsers: Firefox, Chrome, Safari, Internet Explorer
• Otázka kompatibility nově u mobilních zařízení
• Responsive design
• Nejistá vstupní zařízení (myš, klávesnice, dotyky, gamepad)

Hry v prohlížečích

• Pluginy: Flash, Silverlight, Java, …
• Na ústupu
• Namístu pluginu JS jako kompilační cíl

JavaScript

• Historicky zdroj zmatení (validace formulářů)
• Hybrid mnoha jazyků
• V posledních letech důraz na rychlost
• Jazyk prochází modernizací

JavaScript: verze

• Aktuálně ES5
• Nově ES6 / ES2015
• V plánu i následná verze (ES7)
• Možno provozovat i bez prohlížeče

JavaScript: specifika

• Prototypová dědičnost
• Funkce jako first-class object
• V prohlížeči striktně asynchronní API

JavaScript: obtíže

• Modularizace
• Dynamická typová kontrola
• Řízení asynchronního toku kódu
• Odstraňování obtíží je hlavní úkol nových verzí

JavaScript: výkon

• JIT, pokud lze (!)
• "use strict";
• "use asm";
• Emscripten – LLVM-to-JavaScript

JavaScript: jak na něj?

• Mozilla Developer Network
• Zkoušet, zkoušet, zkoušet
• Kniha

Dostupná API

• …se napříč prohlížeči shodují i liší
• caniuse.com
• Vendor prefixy v CSS i JS
  • -webkit-transition: 2s
  • div.requestFullscreen(), div.mozRequestFullScreen()

Síť

• XMLHttpRequest, fetch – HTTP
• WebSocket – plně duplexní komunikační kanál
• WebRTC – Peer-to-peer, bleeding edge
• CORS
• Asynchronnost!

Úložiště

• WebStorage – pět megabajtů key-value na doménu
• IndexedDB – neomezená databáze strukturovaných dat
• Přístup k souborovému systému silně omezený

Grafika: HTML

• DOM
• CSS3 – Flexible Box
• Strom stránky, JS API, léty prověřené řešení

Grafika: 2d canvas

• HTML značka <canvas>
• Rastrová kreslicí plocha
• Bohaté JS API
  • obdélníky, křivky, text
  • sprity (jiný canvas, obrázky, video)
  • afinní transformace
  • vzory, přechody, stíny
• Ukázka

Grafika: 3d canvas

• HTML značka <canvas>
• WebGL – OpenGL ES 2.0
• Kompatibilní shadery (GLSL)
• Nové datové typy v JS (typovaná pole)
• Ukázka

Interakce

• Programování řízené událostmi
• Události myši, klávesnice, dotyků
• Gamepad API
• Device APIs: Vibration, Battery, Proximity, Orientation, Acceleration

Výkon

• WebWorkers – paralelizace, silná separace
• requestAnimationFrame – scheduling vykreslování cílený na 60 FPS
• requestFullscreen – zobrazení HTML prvku přes celou obrazovku

Audio, Video

• HTML značky <audio> a <video>
• Web Audio API
  • Kompletní zvukový graf
  • Generování signálu
  • Transformace zvuku, efekty
  • Analýza (FFT)
• Ukázka

Ostatní

• Geolocation – zjištění zeměpisné polohy zařízení
• Firebase – realtime databáze pro strukturovaná data s JS API
• Fyzika – např. box2d.js

Dr. Drago's Madcap Chase

• Online, GitHub
• Remake hry z roku 1997
• 2d canvas
• Zvuk jako předsamplované midi ⇒ ogg

Banana Bread

• Online, GitHub
• Port Cube2 do JS
• Emscripten, WebGL

Roguelike hry

• Silně specifický žánr her ve stylu Rogue (1980)
• Tahové hry na mřížce, často jen pomocí znaků
• Těžiště v herních mechanismech a procedurálně generovaném obsahu
• Knihovna rot.js pro snadnou tvorbu
• The Royal Wedding, The Conception, Untrusted, Goldfish, FunhouseRL

Just Spaceships

• Online, GitHub
• 2d canvas, sprity ze Space Rangers 2
• WebSocket pro multiplayer: autoritativní server, klientská predikce fyziky