Makzan. Programujeme hry v HTML5

Makzan Programujeme hry v HTML5 Computer Press Brno 2012

Programujeme hry v HTML5 Makzan Překlad: Jakub Zemánek Obálka: Martin Sodomka Odpovědný redaktor: Martin Herodek Technický redaktor: Jiří Matoušek Copyright Packt Publishing 2011. First published in the English language under the title HTML5 Games Development by Example: Beginner s Guide Objednávky knih: http://knihy.cpress.cz www.albatrosmedia.cz eshop@albatrosmedia.cz bezplatná linka 800 555 513 ISBN 978-80-251-3731-4 Vydalo nakladatelství Computer Press v Brně roku 2012 ve společnosti Albatros Media a. s. se sídlem Na Pankráci 30, Praha 4. Číslo publikace 16 194. Albatros Media a. s. Všechna práva vyhrazena. Žádná část této publikace nesmí být kopírována a rozmnožována za účelem rozšiřování v jakékoli formě či jakýmkoli způsobem bez písemného souhlasu vydavatele. 1. vydání

Obsah ÚVOD.................................................13 Co v této knize najdete................................... 13 Co budete v této knize potřebovat.......................... 14 Pro koho je tato kniha určena.............................. 14 Použité konvence........................................ 14 Zpětná vazba od čtenářů.................................. 16 Zdrojové kódy ke knize................................... 16 Errata................................................. 17 KAPITOLA 1 SEZNÁMENÍ S HRAMI V HTML5...........................19 Nové funkce HTML5..................................... 20 Plátno................................................20 Audio................................................20 Geolokace............................................20 WebGL...............................................21 WebSocket............................................22 Lokální úložiště.........................................22 Offline aplikace.........................................23 Nové funkce CSS3....................................... 23 Přechody.............................................24

Obsah Transformace..........................................25 Animace..............................................26 Nové funkce HTML5 a CSS3 detailněji....................... 27 Výhody her v HTML5..................................... 27 Žádné zásuvné moduly třetích stran.........................27 Podpora ios zařízení bez dodatečných zásuvných modulů.......28 Překročení hranice klasických her v prohlížeči.................28 Vývoj her v HTML5......................................29 Jaké hry v HTML5 hrají ostatní............................. 29 Pexeso...............................................29 Sinuous...............................................30 Nové pojetí hry Asteroids.................................31 Quake 2..............................................31 RumpeTroll............................................32 Scrabb.ly.............................................32 Aves Engine...........................................33 Další hry v HTML5....................................... 34 Co v této knize vytvoříme.................................. 34 Shrnutí................................................ 35 KAPITOLA 2 ZAČÍNÁME S VÝVOJEM HER A DOM.......................37 Příprava vývojového prostředí.............................. 38 Příprava dokumentů HTML pro hru.......................... 38 Doctype pro HTML5.....................................39 Záhlaví a zápatí.........................................40 Kam umístit kód v JavaScriptu.............................40 Provedení kódu po načtení stránky.........................41 Vytvoření elementů pro hru Ping Pong....................... 41 Seznámení s jquery.....................................43 Seznámení se selektory jquery............................44 Seznámení s metodou css knihovny jquery...................45 Výhody jquery.........................................45

Obsah Práce s elementy hry pomocí jquery........................46 Absolutní pozicování a jeho specifika........................47 Načtení vstupu z klávesnice................................ 48 Klávesnice a kódy kláves.................................50 Lépe čitelné konstanty...................................51 Převod řetězců na čísla pomocí funkce parseint...............52 Provádění kódu v JavaScriptu z konzole.....................53 Sledování konzole......................................53 Podpora vícenásobného vstupu z klávesnice.................. 54 Lepší deklarace globálních proměnných.....................56 Vytvoření časovače pomocí funkce setinterval................57 Herní smyčka..........................................57 Pohyb elementu s použitím časovače........................ 58 Základy detekce kolizí.................................... 60 Dynamické zobrazení textu v HTML......................... 64 Shrnutí................................................ 66 KAPITOLA 3 PEXESO A CSS3........................................67 Pohyb elementů s použitím přechodů CSS3................... 67 2D transformační funkce.................................71 3D transformační funkce.................................71 Úprava stylů s použitím přechodů CSS3...................... 72 Efekt otočení karty....................................... 73 Přepínání třídy pomocí metody toggleclass knihovny jquery.............................76 Nastavení viditelnosti překrývajících se prvků pomocí vlastnosti z-index........................76 Vlastnost perspective....................................78 Vlastnost backface-visibility...............................79 Vytváříme pexeso........................................ 80 Stažení obrázků hracích karet.............................80 Příprava prostředí hry....................................81 Klonování elementů pomocí jquery.........................86

Obsah Výběr prvního potomka elementu pomocí jquery..............86 Vertikální zarovnání elementu..............................87 Použití sprite sheetu jako obrázku na pozadí..................87 Přidání logiky hry........................................ 88 Provedení kódu po dokončení přechodu.....................92 Odložené provedení kódu při obracení karet..................92 Náhodné uspořádání prvků pole...........................92 Uložení dat do elementu pomocí vlastního datového atributu.....93 Přístup k vlastním datovým atributům pomocí jquery...........94 Další karetní hry........................................96 Přidání písem do hry..................................... 96 Další služby pro webová písma............................98 Shrnutí................................................ 99 KAPITOLA 4 HRA UNTANGLE A PLÁTNO..............................101 Seznámení s elementem plátna............................ 102 Kresba kruhů na plátno.................................. 102 Alternativní obsah pro případ, že prohlížeč plátno nepodporuje..104 Kresba kruhů a čar s použitím metody arc...................105 Převod stupňů na radiány................................105 Kresba cest na plátně...................................109 Vytvoření cesty........................................109 Uzavření cesty........................................110 Vložení kódu pro kresbu kruhů do funkce...................111 Generování náhodných čísel v JavaScriptu..................112 Uložení pozice kruhu...................................113 Základní definice tříd...................................114 Kresba čar na plátno.................................... 115 Seznámení s aplikačním rozhraním pro kresbu čar............117 Interakce s nakreslenými objekty pomocí myši................ 118 Určení polohy myši v rámci plátna.........................122 Obsluha událostí myši týkajících se kruhů...................122 Herní smyčka.........................................124 Vymazání obsahu plátna.................................124

Obsah Detekce průsečíků čar na plátně........................... 125 Určení toho, zda se dvě přímky protínají....................128 Vytvoření hry Untangle................................... 130 Definice úrovní hry.....................................134 Určení postupu mezi úrovněmi............................135 Zobrazení aktuální úrovně a ukazatel postupu................135 Shrnutí............................................... 136 KAPITOLA 5 VYLEPŠENÁ HRA UNTANGLE A PLÁTNO...................137 Výplň tvarů gradientní barvou............................. 138 Nastavení přechodových bodů gradientu....................139 Radiální gradient.......................................140 Zobrazení textu na plátně................................ 143 Použití vlastního písma na plátně..........................146 Zobrazení obrázků na plátně.............................. 147 Použití metody drawimage...............................150 Dekorace hry.........................................152 Animace sprite sheetu na plátně........................... 154 Vytvoření více vrstev na plátně............................ 158 Kombinace kaskádových stylů a kreslení na plátno............165 Shrnutí............................................... 166 KAPITOLA 6 HUDBA, ZVUKOVÉ EFEKTY A ELEMENT AUDIO.............167 Přidání zvukového efektu ke spouštěcímu tlačítku............. 168 Vytvoření elementu audio................................171 Přehrání zvuku........................................172 Pozastavení přehrávání.................................173 Nastavení hlasitosti zvuku...............................173 Událost hover knihovny jquery............................173 Převedení audia do formátu OGG.........................174 Podpora ostatních webových prohlížečů....................175

Obsah Vytvoření hudební hry................................... 176 Scény ve hrách HTML5.................................179 Vizualizace přehrávané hudby............................179 Výběr správné skladby pro hudební hru.....................185 Uložení a načtení údajů o skladbě.........................185 Určení doby běhu hry...................................186 Vytvoření hudebních bodů...............................187 Přesunutí hudebních bodů...............................187 Propojení spouštěcího tlačítka s hudební hrou................ 189 Vytvoření efektu vysunutí herní scény pomocí CSS3...........190 Ovládání hry klávesnicí.................................. 191 Zobrazení indikátoru....................................193 Vyhodnocení zásahů bodu...............................194 Odstranění prvku pole se zadaným indexem.................195 Obohacení hry o další funkce............................. 196 Nastavení hlasitosti melodie na základě úspěšnosti...........196 Odstranění bodů ze hry.................................199 Uložení úspěšnosti za posledních pět pokusů................199 Uložení dat úrovně.....................................199 Zpracování události dokončení přehrávání................... 202 Obsluha událostí elementu audio..........................202 Shrnutí............................................... 203 KAPITOLA 7 LOKÁLNÍ ÚLOŽIŠTĚ....................................205 Lokální úložiště HTML5.................................. 206 Vytvoření závěrečného dialogu............................206 Uložení výsledků v prohlížeči.............................210 Uložení a načtení dat z lokálního úložiště....................212 Datové typy a lokální úložiště.............................212 Lokální úložiště jako asociativní pole.......................213 Ukládání objektů do lokálního úložiště....................... 213 Určení aktuálního data a času v JavaScriptu.................217 Převedení objektu na řetězec JSON........................218

Obsah Načtení objektu z řetězce JSON...........................218 Prověření obsahu lokálního úložiště v konzole prohlížeče.......219 Upozornění uživatele na překonání rekordu................... 220 Uložení celkového postupu ve hře.......................... 223 Uložení postupu ve hře..................................224 Odstranění rekordu z lokálního úložiště.....................226 Klonování pole v JavaScriptu.............................227 Obnovení postupu ve hře................................227 Shrnutí............................................... 231 KAPITOLA 8 HRA PRO VÍCE HRÁČŮ A WEBSOCKET....................233 Ukázka existující webové aplikace využívající rozhraní WebSocket 234 Instalace serveru WebSocket.............................. 236 Instalace serveru node.js................................236 Vytvoření serveru WebSocket vysílajícího počet připojených klientů....................................237 Inicializace serveru WebSocket...........................238 Naslouchání spojením na straně serveru....................239 Určení počtu klientů připojených k serveru..................239 Odeslání zprávy všem připojeným klientům..................239 Vytvoření klienta pro připojení k serveru WebSocket...........240 Navázání spojení protokolem WebSocket...................242 Klientské události rozhraní WebSocket.....................242 Vytvoření chatu s použitím rozhraní WebSocket............... 242 Odeslání zprávy serveru.................................242 Odeslání zprávy od klienta serveru.........................244 Příjem zpráv na straně serveru............................244 Přeposlání zpráv obdržených serverem...................... 245 Srovnání rozhraní WebSocket s dotazováním................246 Vytvoření sdíleného náčrtkového bloku s použitím plátna a rozhraní WebSocket.................................. 248 Vytvoření lokálního náčrtkového bloku......................248 Odesláním kresby všem připojeným klientům................251

Obsah Vytvoření datového objektu pro komunikaci mezi klientem a serverem..........................................255 Převedení informací o nakreslených čarách do formátu JSON.....................................255 Nakreslení čar obdržených od ostatních klientů...............256 Vytvoření hry Uhodni obrázek pro více hráčů................. 256 Řízení hry pro více hráčů................................262 Výčet klientů připojených k serveru........................263 Odeslání zprávy klientovi................................264 Vylepšení hry.........................................264 Dekorace hry pomocí kaskádových stylů.................... 265 Shrnutí............................................... 267 KAPITOLA 9 HRA S FYZIKÁLNÍM ENGINEM BOX2D A PLÁTNEM..........269 Instalace knihovny Box2D................................ 270 Vytvoření nového světa s použitím třídy b2world..............273 Nastavení ohraničující oblasti s použitím třídy b2aabb.........273 Nastavení gravitace....................................273 Zakázání spánku objektů................................274 Vytvoření pevné země ve světě............................ 274 Definice tvaru.........................................275 Vytvoření objektu......................................275 Nakreslení světa na plátno................................ 276 Vytvoření dynamického obdélníku ve světě................... 279 Nastavení odrazivosti objektu.............................280 Nastavení času ve světě................................. 281 Přidání kol k obdélníku................................... 282 Vytvoření auta......................................... 283 Spojení dvou objektů rotačním spojem.....................285 Ovládání auta klávesnicí................................. 286 Aplikace sil na auto.....................................286 Rozdíly mezi metodami ApplyForce a ApplyImpulse...........287 Přidání nájezdových ramp do naší hry......................287

Obsah Ověření kolizí ve světě................................... 289 Získání seznamu kolizí..................................290 Restartování hry........................................ 291 Přidání úrovní do hry.................................... 293 Nahrazení obrysů grafikou................................ 297 Použití vlastnosti userdata...............................300 Zobrazení grafiky......................................301 Rotace a translace obrázku na plátně......................301 Finální úpravy.......................................... 302 Přidání omezeného množství paliva........................308 Zobrazení zbývajícího množství paliva......................308 Shrnutí............................................... 309 Herní enginy HTML5....................................310 Animace a textury hry...................................310 Zvukové efekty........................................310 PŘÍLOHA KVÍZ.................................................311 REJSTŘÍK............................................313

Úvod Od HTML5 se toho hodně očekává, obzvláště pak v oblasti online her. Hry využívající HTML5 fungují na počítačích, chytrých telefonech i tabletech, včetně iphonů a ipadů. Buďte mezi prvními vývojáři, kteří již dnes vytvářejí v HTML5 hry pro zítřek. Tato kniha vás seznámí s nejnovějšími webovými standardy HTML5 a CSS3 a jejich použitím při tvorbě online karetních, kreslicích, fyzikálních, a dokonce i multiplayer her. Kniha vás názorně a systematicky provede tvorbou celkem šesti ukázkových her. HTML5, CSS3 a JavaScript to jsou pojmy, které dnes na webu uslyšíte stále častěji. Tyto standardy otevírají nový herní průmysl, HTML5 hry. S jejich použitím je možné navrhovat hry tvořené elementy HTML5, kaskádovými styly CSS3 a kódem v JavaScriptu. Kniha se skládá z devíti tematicky odlišných kapitol. V jejím průběhu vytvoříme šestici her a dozvíme se, jak ve hrách vykreslovat objekty, animovat je, přidat zvuky, propojit hráče a vytvořit fyzikální engine hry založený na systému Box2D. Co v této knize najdete Kapitola 1, Seznámení s hrami v HTML5, představuje nové funkce HTML5, CSS3 a JavaScriptu a ukazuje jejich využití při vývoji her. Kapitola 2, Začínáme s vývojem her a DOM, ukazuje na vývoji klasické hry Ping Pong základy DOM a knihovny jquery. Kapitola 3, Pexeso a CSS3, nás seznámí s novými funkcemi CSS3 a ukáže jejich po užití při vývoji pexesa. Kapitola 4, Hra Untangle a plátno, představí nový způsob vykreslování obsahu ve webové stránce a interakci s ním, založený na použití elementu plátna HTML5. Demonstruje také tvorbu logických her pomocí tohoto elementu.

Úvod Kapitola 5, Vylepšená hra Untangle a plátno, rozšiřuje hru z předchozí kapitoly a ukazuje, jak lze prostřednictvím plátna vykreslovat gradienty a obrázky. Ukazuje také použití animací a práci s více vrstvami obsahu. Kapitola 6, Hudba, zvukové efekty a element audio, ukazuje, jak s použitím elementu audio, obohatit hry o zvukové efekty přehrávané na pozadí. Řeč bude také o kompatibilitě různých audioformátů napříč jednotlivými webovými prohlížeči a v závěru ukazuje tvorbu jednoduché hudební hry ovládané klávesnicí. Kapitola 7, Lokální úložiště, rozšiřuje pexeso využívající CSS3 a demonstruje použití nového lokálního úložiště HTML5 pro uložení informací o postupu ve hře a dosažených výsledků v ní a jejich zpětné načtení. Kapitola 8, Hra pro více hráčů a WebSocket, popisuje aplikační rozhraní WebSocket, s jehož pomocí může webový prohlížeč navázat perzistentní spojení se serverem. Díky tomu může hru v reálném čase hrát i několik hráčů společně. V závěru kapitola ukazuje vývoj hry ve stylu uhodni, co je na obrázku. Kapitola 9, Hra s fyzikálním enginem Box2D a plátnem, ukáže, jak zakomponovat do her využívajících plátno známý fyzikální engine Box2D. Popisuje, jak vytvořit fyzikální objekty, aplikovat síly, propojit je, spojit grafiku s fyzikou, a na závěr vše demonstruje na karetní hře. Co budete v této knize potřebovat Neobjedete se bez moderního webového prohlížeče, dobrého textového editoru a základních znalostí HTML, CSS a JavaScriptu. Pro koho je tato kniha určena Tato kniha cílí na vývojáře her se základními znalostmi HTML, CSS a JavaScriptu, kteří chtějí vytvářet hry pro webové prohlížeče využívající možností plátna a DOM. Použité konvence V knize najdete několik stylů textu, které pomáhají odlišovat různé typy informací. Zde je pár příkladů ukazujících použití těchto stylů a objasňujících jejich význam. Programový kód je v textu vyznačen následovně: Vývoj hry v HTML5 začneme u souboru index.html. Blok kódu má následující podobu: 14 // uložení času spuštění var date = new Date();

Použité konvence audiogame.startingtime = date.gettime(); // určení uplynulého času var date = new Date(); var elapsedtime = (date.gettime() - audiogame.startingtime)/1000; Pokud je třeba vyzdvihnout určitou část bloku kódu, jsou jeho odpovídající řádky či položky vyznačeny tučně: function setupleveldata() { var notes = audiogame.leveldata.split(";"); // uložení celkového počtu teček audiogame.totaldotscount = notes.length; for(var i in notes) { var note = notes[i].split(","); var time = parsefloat(note[0]); var line = parseint(note[1]); var musicnote = new MusicNote(time,line); audiogame.musicnotes.push(musicnote); } } Veškerý vstup i výstup příkazového řádku má následující podobu: $./configure $ sudo make instar Nové termíny a důležitá slova jsou zvýrazněná tučně. Slova, která můžete vidět na obrazovce, v nabídkách nebo dialozích, mají následující podobu: Klepněte pravým tlačítkem myši na položku Spustit experiment a zvolte Otevřít odkaz v novém okně. V textu knihy se často setkáte s několika typy nadpisů. Následující nadpis slouží k označení instrukcí, které popisují provedení určitého úkolu: Jak na to 1. Akce 1 2. Akce 2 3. Akce 3 15

Úvod Uvedené instrukce často potřebují dodatečné vysvětlení a popis. V takovém případě za nimi následuje: Vysvětlení Pod tímto nadpisem najdete detailní popis úkolů nebo instrukcí, které jste právě dokončili. Kvíz V knize najdete i další doprovodné informace, včetně následujících: Krátké otázky, které vám pomohou ověřit si, zda jste všemu správně a zcela porozuměli. Zkuste to sami Tato část obsahuje praktické úkoly a poskytuje další nápady, jak experimentovat s tím, co už znáte. Varování a důležitá upozornění najdete v rámečcích, jako je tento. Tipy a triky jsou uvedeny takto. Zpětná vazba od čtenářů Nakladatelství a vydavatelství Computer Press, které pro vás tuto knihu přeložilo, stojí o zpětnou vazbu a bude na vaše podněty a dotazy reagovat. Můžete se obrátit na následující adresy: Computer Press Albatros Media a.s., pobočka Brno IBC Příkop 4 602 00 Brno nebo sefredaktor.pc@albatrosmedia.cz Computer Press neposkytuje rady ani jakýkoliv servis pro aplikace třetích stran. Pokud budete mít dotaz k programu, obraťte se prosím na jeho tvůrce. 16

Zdrojové kódy ke knize Zdrojové kódy ke knize Z adresy http://knihy.cpress.cz/k2023 si po klepnutí na odkaz Soubory ke stažení můžete přímo stáhnout archiv s ukázkovými kódy. Errata Přestože jsme udělali maximum pro to, abychom zajistili přesnost a správnost obsahu, chybám se úplně vyhnout nelze. Pokud v některé z našich knih najdete chybu, ať už v textu nebo v kódu, budeme rádi, pokud nám ji oznámíte. Ostatní uživatele tak můžete ušetřit frustrace a nám pomůžete zlepšit následující vydání této knihy. Veškerá existující errata zobrazíte na adrese http://knihy.cpress.cz/k2023 po klepnutí na odkaz Soubory ke stažení. 17

KAPITOLA 1 Seznámení s hrami v HTML5 Několik posledních dekád formoval podobu Internetu jazyk HTML (Hyper-Text Markup Language). Definuje strukturu obsahu prezentovaného na webu a jeho propojení s dalšími souvisejícími stránkami. Jazyk HTML se vyvinul z verze 2 na verzi 4.1 a později na XHTML 1.1. Díky průkopnickým webovým aplikacím a sociálním sítím je nyní jazyk HTML na cestě k HTML5. CSS (Cascading Style Sheet) definuje vizuální prezentaci webových stránek. Určuje styly jednotlivých elementů stránky HTML, včetně stylu v různých stavech (např. po přejetí myší nebo klepnutí). JavaScript představuje logický řadič webové stránky. Právě díky němu mohou mít webové stránky dynamický charakter a nabídnout interaktivitu s uživatelem. Kód v JavaScriptu přistupuje k dokumentu HTML pomocí modelu DOM (Document Object Model) a umožňuje na jeho elementy např. aplikovat odlišné kaskádové styly. Tyto tři technologie otevírají dveře novému odvětví herního průmyslu, hrám v HTML5. S jejich pomocí je možné navrhovat hry v prostředí HTML5 a jeho elementů, využívající CSS3 a JavaScript. V této kapitole se dozvíme: O nových funkcích HTML5. Proč je okolo HTML5 a CSS3 takový rozruch. Jaké hry využívající HTML5 hrají ostatní. Jaké hry budeme vyvíjet v průběhu následujících kapitol. Jdeme na to.

Kapitola 1 Seznámení s hrami v HTML5 Nové funkce HTML5 HTML5 a CSS3 přináší mnoho nových funkcí. Než se pustíme do samotného vývoje her, ve stručnosti se s těmito novinkami seznámíme a podíváme se na jejich praktické využití při vývoji her. Plátno Plátno neboli také canvas je element HTML5, který umožňuje vykreslování objektů a manipulaci s bitmapami na nízké úrovni. Na element plátna je možné nahlížet jako na dynamický element obrázku. Tradiční element img zobrazí statický obrázek. Ať už se jedná o dynamicky generovaný obrázek anebo obrázek uložený na serveru, zobrazí se staticky a dále se již nemůže měnit. Je sice možné vyměnit datový zdroj elementu img anebo na něj aplikovat nové styly, nelze však změnit kontext samotného obrázku. Plátno naproti tomu funguje jako dynamický element img. Je možné do něj dynamicky načítat obrázky, vykreslovat objekty a pracovat s jeho obsahem pomocí JavaScriptu. Plátno hraje při vývoji her v HTML5 velmi důležitou roli, a proto bude v této knize jednou z hlavních oblastí našeho zájmu. Audio Hudba přehrávaná na pozadí a nejrůznější zvukové efekty často bývají důležitým aspektem vývoje her. HTML5 nabízí nativní podporu přehrávání audia v podobě elementu audio. Přehrávání zvukových efektů v našich HTML5 hrách tedy nevyžaduje proprietární přehrávač Flashe. Použitím elementu audio se zabývá kapitola 6, Hudba, zvukové efekty a element audio. Geolokace Díky geolokaci může webová stránka určit zeměpisnou šířku a délku počítače uživatele. Ještě před několika lety, když většina uživatelů přistupovala k Internetu z běžných stolních počítačů, se tato funkce nezdála natolik důležitá. Poloha uživatele s přesností na ulici není v takovém případě nijak zvlášť užitečná. Přibližnou lokalitu uživatele je možné získat analýzou jeho adresy IP. Dnes se však k Internetu stále více uživatelů připojuje pomocí svých chytrých telefonů. Moderní webové prohlížeče založené na jádře Webkit se dnes ukrývají téměř v každé kapse. Otevírá se tak prostor pro mobilní aplikace a hry, které využívají aktuální polohu uživatele zjištěnou pomocí geolokace. Zjišťování polohy našlo uplatnění již v několika sociálních sítích, jako je foursquare (http://foursquare.com) a Gowalla (http://gowalla.com). Jejich úspěch dal vzniknout novému trendu v oblasti určování polohy pomocí chytrého telefonu. 20

Nové funkce HTML5 WebGL WebGL rozšiřuje element plátna HTML5 o aplikační rozhraní umožňující zobrazování 3D grafiky ve webovém prohlížeči. Toto aplikační rozhraní vychází ze standardu OpenGL ES 2.0 a jedná se o vynikající řešení pro 3D hry v HTML5. Bohužel ne všechny webové prohlížeče, v době psaní této knihy, WebGL podporují. V tuto chvíli se jeho podporou pyšní Mozilla Firefox 4, Google Chrome a noční sestavení prohlížeče WebKit. Postup vývoje her, které využívají WebGL, se značně liší od vývoje běžných her v HTML5. Hry založené na WebGL musí pracovat s 3D modely a používat rozhraní podobné OpenGL. Z toho důvodu se jimi v této knize nebudeme zabývat. Následující obrázek ukazuje aplikaci Google Body (http://bodybrowser.googlelabs. com), která s pomocí rozhraní WebGL umožňuje třírozměrné zobrazení lidského těla v závislosti na parametrech zadaných uživatelem. TIP Na webu LearningWebGL (http://learnwebgl.com) najdete několik návodů, které vám pomohou se začátky WebGL. Jedná se o dobrý odrazový můstek, chcete-li se o této technologii dozvědět více. 21

Kapitola 1 Seznámení s hrami v HTML5 WebSocket Rozhraní WebSocket, které je součástí specifikace HTML5, umožňuje webové stránce navázat spojení se serverem. Jedná se o spojení mezi prohlížečem a serverem řízené událostmi. To znamená, že se klient nemusí v pravidelných intervalech neustále dotazovat serveru na nová data. Server zašle prohlížeči aktualizace hned, jak jsou k dispozici. Hlavní výhodou tohoto řešení je, že spolu mohou jednotliví hráči vzájemně komunikovat téměř v reálném čase. Když hráč provede nějakou akci a serveru se odešlou data, upozorní server na tuto událost všechny připojené prohlížeče. Ty tak mohou reagovat na to, co jeden z hráčů právě udělal. Díky tomuto rozhraní se otevírá prostor pro tvorbu multiplayer her v HTML5. UPOZORNĚNÍ Kvůli chybě v zabezpečení je nyní rozhraní WebSocket v prohlížečích Mozilla Firefox a Opera dočasně zablokované. Také prohlížeče Safari a Google Chrome mohou jeho podporu přerušit, než se bezpečnostní trhlinu podaří vyřešit. Více se o tomto problému dozvíte na adrese http://hacks.mozilla.org/2010/12/websockets-disabled-in-firefox-4/. / Lokální úložiště HTML5 nabízí perzistentní datové úložiště, které mohou webové stránky využívat. Lokální úložiště umožňuje trvale ukládat páry klíčů a hodnot. Data se zachovají i po ukončení prohlížeče a navíc není přístup k nim omezený pouze na danou stránku. Mohou k nim přistupovat všechny stránky v rámci dané domény. S použitím lokálního úložiště tak lze snadno ukládat stavové informace o hře, jako jsou např. postup hráče nebo dosažené výsledky, lokálně, přímo v prohlížeči. HTML5 nabízí také databázi Web SQL. Jedná se o relační databázi na straně klienta, kterou v tuto chvíli podporují prohlížeče Safari, Google Chrome a Opera. S použitím této relační databáze je přirozeně možné ukládat nejen páry klíčů a hodnot, ale i mnohem složitější relační struktury, které lze následně získávat pomocí dotazů SQL. Lokální úložiště i databáze Web SQL přijdou při vývoji her vhod pro lokální ukládání stavových informací o hře. Kromě lokálního úložiště nabízí moderní webové prohlížeče i jiné metody lokálního ukládání dat. Jedná se o již zmíněnou databázi Web SQL nebo také IndexedDB. Tyto databáze podporují i složitější dotazy na uložená data, obsahující podmínky, a jsou tedy mnohem vhodnější pro složitější datové struktury. Více informací o databázích Web SQL a IndexedDB najdete na webu Mozilly, na adrese http://hacks.mozilla.org/2010/06/comparing-indexeddb-and-webdatabase/. 22

Nové funkce CSS3 Offline aplikace Procházení webovými stránkami běžně vyžaduje připojení k Internetu, s výjimkou webových stránek uložených v mezipaměti prohlížeče, které v ní zpravidla příliš dlouho nezůstanou. HTML5 zavádí tzv. cache manifest neboli seznam souborů, které se mají uložit pro pozdější offline přístup. V tomto seznamu lze uvést veškeré soubory, ze kterých hra sestává, jako je její grafika, soubory s kódem v JavaScriptu a soubory HTML. Naše hry v HTML5 můžeme tímto způsobem proměnit v offline hry pro stolní počítače i mobilní zařízení. Hráči je mohou hrát dokonce i v letadle. Následující obrázek ze hry Pie Guy (http://mrgan.com/pieguy) ukazuje hru v HTML5 běžící na iphonu bez připojení k Internetu. Všimněte si symbolu letadla v levé horní části obrazovky, která indikuje offline stav: Nové funkce CSS3 Zatímco jazyk HTML stanoví obsah, kaskádové styly definují jeho formu, tedy jak bude obsah dokumentu HTML vypadat. Vývoj her v HTML5 se bez kaskádových stylů obejde jen stěží, obzvláště pak u her, které intenzivně využívají DOM. Hrám zobrazujícím obsah v elementu plátna může k tvorbě a stylování obsahu stačit jen JavaScript. Avšak hry, které jsou založené na manipulaci s elementy dokumentu HTML, budou kaskádové styly zcela jistě potřebovat. Podívejme se tedy na novinky v CSS3 a jejich uplatnění při vývoji her. Místo vykreslování obsahu na plátně je, s použitím nových funkcí CSS3, možné animovat přímo elementy dokumentu HTML. Tímto způsobem lze snadno vytvářet i komplikovanější hry pro webové prohlížeče. 23

Kapitola 1 Seznámení s hrami v HTML5 Přechody Běžně se styl elementu změní hned poté, co dojde k aplikaci stylu nového. Přechody CSS3 umožňují plynule přecházet mezi změnami stylu cílových elementů. Řekněme, že máme modrý obdélník a chceme, aby se jeho barva změnila na červenou, najede-li na něj uživatel kurzorem myši. Kód by mohl vypadat takto: HTML: <a href="#" class="box"></a> CSS: a.box { display:block; width: 100px; height: 100px; background: #00f; /* modrá */ border: 1px solid #000; } a.box:hover { background: #f00; /* červená */ } Obdélník se přebarví na červeno hned po přejetí kurzorem myši. S použitím přechodů CSS3 lze tuto záměnu stylů provést v zadané době trvání a s použitím specifikované vyhlazovací funkce: a.box { -webkit-transition: all 5s linear; } Následující obrázek ukazuje popisovaný efekt s aplikovaným přechodem: 24

Nové funkce CSS3 UPOZORNĚNÍ Vzhledem k tomu, že je specifikace CSS3 stále ve fázi návrhu a ještě není finální, může se její implementace v jednotlivých webových prohlížečích od specifikace W3C mírně odlišovat. Z toho důvodu vývojáři prohlížečů často opatřují své implementace funkcí CSS3 předponou, aby se zabránilo případným konfliktům. Prohlížeče Safari a Google Chrome používají předponu -webkit-, Opera -o-, Firefox -moz- a Internet Explorer zase -ms-. V tuto chvíli je proto deklarace vlastností CSS3, jako je např. stín elementu, poměrně nepřehledná, protože vyžaduje vícenásobné zadání téže vlastnosti pro různé prohlížeče. Poté, co se specifikace dané vlastnosti dokončí, dá se u ní očekávat eliminace těchto předpon. Ve většině příkladů v této knize najdete pouze prefix -webkit-, aby se zabránilo nepřehlednosti kódu. Důležitější je pochopit princip, než pořád dokola číst deklarace stejných vlastností pro různé prohlížeče. Transformace Pomocí transformací CSS3 je možné měnit velikost elementů, otáčet s nimi a měnit jejich pozici. Transformace CSS3 se dělí na 2D a 3D. Ke změně pozice elementu slouží funkce translate: -webkit-transform: translate(x,y); Změnu velikosti elementu umožňuje zase funkce scale: -webkit-transform: scale(1.1); Elementy je možné současně otáčet i měnit jejich velikost, případně kombinovat jiné transformace: a.box { -webkit-transition: all 0.5s linear; -webkit-transform: translate(100px,50px); } a.box:hover { -webkit-transform: translate(100px,50px) scale(1.1) rotate(30deg); } Následující obrázek ukazuje, jak bude výsledná transformace po přejetí myší nad elementem vypadat: 25