Box2DJS

Pokud chcete vytvářet hry (nové webové technologie k tomu přímo vybízejí), zjistíte, že pro většinu stříleček a chodiček a pro spoustu skládaček budete potřebovat nějak nadefinovat pravidla pro interakce mezi objekty. U Manic Minera to bylo prosté: co se hýbe, co trčí ze země a co trčí ze stropu, to postavičku zabije, stejně jako když figurka spadne s příliš velké výšky.

Pro poněkud pokročilejší svět využijete takzvaný fyzikální engine. Jejich high-end je dnes zabudovaný v grafických kartách a jmenuje se PhysX, ovšem není třeba hned počítat 3D realtime akci, že. Někdy bohatě stačí zůstat v 2D.

Co vlastně fyzikální engine dělá? Dovoluje určit základní fyzikální vlastnosti objektům (hmotnost, materiál povrchu apod.), soustavám, tj. spojeným objektům, a „scéně“ (například hodnotu gravitačního zrychlení). Pro každý objekt fyzikální engine počítá jeho pozici v rámci scény, ale nepoužívá k tomu abstraktní pravidla („pokud skáče figurka nahoru, tak nejprve 3× o 2px, pak 2× o 1px, pak stojí, pak 2× o 1px a pak 3× o 2px…“), ale počítá parametry jako rychlost, zrychlení, hybnost, moment hybnosti, …, přičemž bere v úvahu tření, gravitační zrychlení, pružnost a další parametry reálné hmoty.

Takovým 2D fyzikálním engine je Box2D (zájemce o podrobnosti odkážu na manuál). Box2DJS je pak převedením tohoto engine do JavaScriptu (na stránce je i několik ukázkových příkladů, pomocí pravého tlačítka myši přepnete na další, levým pak „upustíte“ do scény malý objekt).

Volně poskládané objekty se po dopadu na „zem“ hroutí tak, jak by to člověk od hmotných předmětů očekával.

WebGL pro vobyčejný lidi

WebGL vtrhl do prohlížečů stejně nečekaně jako silvestrovské vysílání na obrazovky televize. WebGL je technologie poněkud ošidná – na jednu stranu je velmi výkonná (protože prohlížeč může práci delegovat OpenGL, který už ve většině systémů, resp. grafických karet, je), na druhou stranu je práce s ní utrpením – programátor musí napsat naprosto neuvěřitelné množství kódu na to, aby získal použitelný výsledek (neplatí pro programátory-masochisty, pro ně je práce s API OpenGL/WebGL radost).

WebGL je už v Chrome, ve FF4 bude brzy, stejně tak i v Safari a Opeře, a podporu WebGL má dokonce i smartfone Nokia N900 v systému Maemo. Je tedy na místě, nechcete-li ztratit spojení s vývojem, se na tuto technologii podívat blíže.

Pokud zvolíte trnitou cestu přes překážky k 3D hvězdám, oceníte tutoriály a návody (např. na Learning WebGL). Pokud ale raději vyměníte spoustu nízkoúrovňového psaní za trošku menší možnosti detailního nastavení, sáhnete po nadstavbě, která práci s WebGL usnadní.

Jednou z nich je PhiloGL, za kterou stojí známá společnost Sencha. PhiloGL zjednodušuje zápis WebGL tím, že nahrazuje imperativní zápis objektů, světel, scény a kamer deklarativním. Autoři převedli některé ukázkové příklady z Learning WebGL do PhiloGL a ukazují, jak je možné zkrátit repetitivní zápis volání nízkoúrovňového WebGL API pomocí objektové deklarace, která možná některým může připomenout nástroj POV-Ray.

PhiloGL není ani první, ani jediná JS nadstavba nad WebGL. Jednou z prvních bylo WebGLU (autorovy stránky). Zajímavou možností je i Canvas 3D Library – C3DL (tutoriály), která rovněž balí nízkoúrovňové WebGL API do stravitelnější podoby, kde svou energii nevynakládáte na hlídání, zda správně zapíšete volání

gl.texParameteri(
   gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR
);
gl.texParameteri(
   gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_NEAREST
);

ale na užitečnou práci.

Processing.js

Do třetice grafických knihoven: představíme si zajímavý nástroj na vizualizaci a vytváření jednoduchých interaktivních grafických programů. Ti z vás, kdo sledují seriál o Arduinu na Rootu, se už s nástrojem Processing setkali. V článku o měření fyzikálních veličin sloužil k vytvoření zobrazovacího programu, v ovládání Arduina z PC jsme v Processing vytvářeli ovládací program pro řízení Arduina.

Processing je nástroj, který umožňuje jednoduchým způsobem zapsat v jazyce, podobném C/C++, algoritmy pro práci s grafikou a uživatelskými vstupy. Takže v referenci k jazyku nalezneme nejen běžné funkce jako v každém minimálním C/C++, ale i funkce pro práci se sériovým portem (pro komunikaci s HW vývojovým kitem), pro práci s myší a klávesnicí, pro ukládání či načítání dat, a – především – pro práci s grafikou.

Pro podobné účely by samosebou bylo vždy možné napsat jednorázový program v C/C++/Pytho­nu/Doplňtesivá­šoblíbenýjazyk, ale Processing přináší významné zjednodušení: odstíní vás od problémů s konkrétní implementací grafiky a periferií; soustředíte se jen na to, jak se mají zpracovávat data, a neřešíte, jestli použít SDL nebo Allegro nebo volání systému… Navíc je napsaný v Javě a funguje na velkém množství platforem – jak na Linuxu, tak i na Macu a Windows.

Knihovna Processing.js implementuje většinu možností Processing v JavaScriptu/Can­vasu. V případech, kde to má smysl, tak můžete vzít svoje GUI, napsané v tomto jazyce (např. vizualizaci procesů či dat s jednoduchým ovládáním) a kromě nativních aplikací pro Win/Lin/Mac vytvořit bez velkých úprav verzi, která bude použitelná přímo na webových stránkách.

Trocha společenské konverzace nakonec

Smalltalk je to, co vedeme na rautu; takové ty nezávazné společenské řeči o počasí. Programovací jazyk Smalltalk je lehké společenské povídání s počítačem. Pokud se vám zdá, že Smalltalk s webem nejde moc dohromady, možná se budete brzo mýlit. Důkazem budiž projekty jako JTalk nebo Clamato. Zatím to rozhodně nejsou nástroje pro masové použití. JTalk je navíc doslova jen několik dnů starý. Přesto obsahuje některé zajímavé myšlenky – parser i kompiler JTalku jsou napsány v JTalku a výsledkem je zkompilovaný JS kód.

Překlad do JS

Jazyků, které jsou překládány do JS, je celá řada. Někdy je možná označení „jazyk“ přehnané a lépe by odpovídal výraz „nadstavba“, jiné jsou třeba ve fázi úvodní obskurnosti a reálně je bude používat nejvýš jejich autor a dvacet dalších lidí. Přesto je to směr vývoje, který nelze úplně zanedbat, a myslet si, že poslední potřebný jazyk vznikl s Pythonem / Ruby / Javou / C# / C++ / FORTRANem (podle preferencí) je přinejmenším v rozporu s historickou zkušeností.

Takové jazyky (a „jazyky“) mohou přesto nalézt výborné uplatnění např coby DSL pro určité specifické oblasti (není jQuery do určité míry takový DSL pro DOM?).

Příště…?

V příštím JavaScriptaření si ukážeme další grafické knihovny, knihovny pro vytváření her, šablonovací nástroje a nějaké to překvápko na závěr.