2. listopadu 2011 ↴

Nehostinný vesmír README.TXT

Nehostinný vesmír je minimalistický prototyp HTML5 3D hry. Zahrát si jej můžete zde. UPDATE: Ke hře si můžete pustit skladbu Angry Universe od Ondřeje Václavíka, která vznikla za tímto účelem.

Naprogramování Nehostinného vesmíru mělo jediný cíl: ukázat, že za 3 večery jde vytvořit prototyp HTML5 hry, který už je aspoň minimálně hratelný. Jak jsem psal na Google Blogu:

HTML5 je právě teď možná jediná platforma, na které lze vysloveně za jeden den vytvořit něco originálního, ale přitom potenciálně masově využívaného. […] Shodou okolností je HTML5 také platforma s obrovskou uživatelskou bází, která bude v nejbližších letech jenom růst.

V současném stavu Nehostinný vesmír skoro nic neumí. Hráč se snaží kometou strefit planetu Zemi. Kometa se chová podle fyzikálních zákonů (setrvačnost, zrychlení, gravitace). Score se navyšuje za zajímavé průlety. Zcela chybí persistence, tím pádem i high scores apod. Grafika (jestli se tomu tak dá říkat) je škaredá a splácaná horkou jehlou. A tak dále.

Jako PC hra by Nehostinný vesmír byl naprosto zoufalý. Vtip je v tom, že jako HTML5 hru si jej můžete zahrát bez instalace, okamžitě, bez přihlašování, a s jakýmkoliv moderním prohlížečem (s podporou WebGL). Už z toho důvodu toho člověk takové aplikaci také hodně odpustí. To jsou v tuto chvíli dvě hlavní výhody HTML5: skoro nulová bariéra vstupu a nízká očekávání.

Jak Nehostinný vesmír vznikl:

  • Nápad trochu vychází z jedné staré edukativní PC hry, kde jste mj. měli za úkol “řídit” raketoplán orbitující Zemi. Název si bohužel nevzpomenu.
  • Při programování WebGL jsem vyšel z tohoto Three.js dema od Mr Dooba.
  • Nejvíce času mi zabralo:
    • dostat se do Three.js (tahle úžasná WebGL knihovna bohužel není úplně svědomitě dokumentovaná)
      • ale tohle se bude hodit … :)
    • vzpomenout si na různá úskalí a specifika JavaScriptu
      • od TMZNS jsem na JS nesáhl — a TMZNS jsem navíc dělal v Closure
    • odladit fyzikální model, aby byl přiměřeně hratelný a přiměřeně realistický
      • nejvíc mi dal zabrat jeden idiotský bug, který jsem si na sebe sám ušil
  • Programování mě hodně bavilo (až na ten bug, teda), což přičítám hlavně extrémně rychlé iteraci
  • Prototyp bych měl hotový o dost dřív, kdybych nebyl tak důsledný a nebral ohled na (možný) budoucí vývoj:
    • Snažil jsem se vyhnout prasárnám jako globální proměnné apod. všude, kde to šlo.
    • Přestože se hra v podstatě odehrává ve 2D (plochá sluneční soustava), kód by fungoval i v plném 3D
      • zkuste při hře dát do adresního řádku toto a stisknout Enter:
        javascript:g_game.match.level.reset();g_game.match.level.shoot();g_game.match.level.playerControlledBody.velocity.set(0,100,0);
    • Není problém jakkoliv změnit sluneční soustavu
      • Orbitujících vesmírných těles může být kolik chcete, a můžou orbitovat kolem sebe navzájem (takže například zemský měsíc by klidně mohl mít svůj vlastní malý měsíc nebo by v prostřed soustavy mohly orbitovat dvě slunce kolem společného těžiště)
      • Přidat další planetu je záležitost nalezení textury a přídání příslušného elementu do JSONu na začátku html souboru
    • V kódu se počítá s levely, s více kometami (které se navzájem ovlivňují gravitačním polem), s různě rychle plynoucím časem
    • Krokový fyzikální model si dává pozor na příliš prudké změny. Pokud je těleso v silném gravitačním poli, na pozadí se až 16x zpomalí čas.
    • A tak dále..

Moc rád bych, kdyby tenhle můj experiment někoho povzbudil k tomu také si něco vytvořit v HTML5. V českém Googlu jsme nedávno spustili soutěž Mám padla, která má podobný cíl: povzbudit lidi k napsání minimalistických HTML5 aplikací. (S tím, že uděláme “galerii” přihlášených aplikací, kterou mediálně podpoříme!) Znáte tu analogii o naskakování na ujíždějící vlak? Mám pocit, že v tuto chvíli HTML5 vlak ještě ani nevystartoval (ale už zazněla píšťalka průvodčího) .. :)

Kód Nehostinného vesmíru je k dispozici open-source zde. Nevylučuji, že se k němu už nevrátím. Budu proto moc rád, pokud kdokoliv z vás kód jakkoliv využije. Buď z toho udělá regulérní hru, nebo třeba pomůcku pro výuku fyziky.

PS: Jestlipak uhádnete, která populární hra mě inspirovala k pracovnímu názvu “Angry Universe”. :)

2 komentářů:

Jindrich Sarson řekl(a)...

Jo jo, taky jsem byl prekvapen, co jsme dokazali behem Google Hackatonu ve 4 lidech za par hodin vytvorit - HTML5 hra ovladana 2mi iPhony na s HTML5 ovladacem, ktery komunikoval pres websockets s tou hrou.

Nedokazu si predstavit, ze bychom neco podobneho napsali tak rychle v necem jinem.

Filip řekl(a)...

@Jindrich: Že jo! Až to budete mít někde veřejně, rozhodně to sem hoď!

Okomentovat