WebAppGames

Pre súťaž som napísal fyzikálne čarodejnícky sandbox. Jedná sa o hru na webe, ktorú si môžete zahrať hneď bez akejkoľvek inštalácie na https://hejny.github.io/webappgames/.

Koncept hry

• 3D first person hra.
• Kostičkový Sandbox s otvoreným svetom.
• Veci v tomto svete môžeš meniť pomocou kúziel.
• Kostičky len tak "až po maximum" vo vzduch. Na pozadí beží Fyzikálny engine, ktorý zborí všetko, čo nestojí pevne.

Ďalšou dôležitou vecou, ktorá ešte nie je implementovaná, je to. Aby hra využívala všetky výhody webu. Viď. moja séria Vytvor si vlastnú webovú hru.

Ovládanie

Hra sa dá zatiaľ hrať iba s klávesnicou a myšou. Najskôr si musiš "zamknúť myš". To urobíš tak, že po spustení klikneš úplne kamkoľvek do scény. Prehliadač sa ťa následne spýta, či chceš zamknúť myš.

• Chodíš pomocou klávesov [W] [A] [S] [D] alebo pomocou šípok.
• Kúzla vyberáš kolieskom myši.
• A kouzlíš pomocou kliknutia myšou.

Kúzla

Sú rozdelené do 5tich kategórií:

• Subjective - Manipulujú priamo s hráčom.
• Kinetics - Menia objektu jeho kinetickú energiu.
• Create - Vytváranie nových objektov
• Hide - Ničenie či iné menenie objektov
• Transform - Premieňanie

Technológie

• TypeScript nadstavba nad JavaScriptom
• Babylon.js 3D engine
• Oimo.js fyzikálny engine
• Hand.js polyfill pre pointer udalosti
• React knižnica pre vykresľovanie používateľského rozhrania
• MobX knižnica pre držanie stavu aplikácie

Kam ďalej?

Celá hra rozhodne nie je dokončená, jedná sa skôr o koncept na ktorom by som v budúcnosti mohol postaviť reálnu hru pre hráčov. Mám pár vecí, ktorá by som rád urobil. Budem veľmi rád za nápady, pripomienky a rady.

Blízka budúcnosť

Toto sú skôr nedorobky a bugy, ktoré som jednoducho nestihol odladiť pred 1.10.2017.

• Ukladanie hry do LocalStorage či do cloudu.
• Survival mód
• zvuky

Do Vianoc

• Lepšie generátor prostredie hry
• Pohodlnejšie stavanie vlastných budov
• Možnosť ovládať aj na dotykových obrazovkách

Dlhodobejšia vízia

• Vytvoriť nad týmto sandbox nejaký Príbeh.
• multiplayer

Odkazy

Hru možno stiahnuť aj priamo pod článkom. Ide však iba o mŕtvu kópiu, ak chceš vidieť aktuálnu verziu, použi nasledujúce odkazy.

Zdrojové kódy: https://github.com/.../webappgames

Zahraj si priamo na webe: https://hejny.github.io/webappgames/

Hodnotenie porotcov

Aplikácia bola vytvorená do súťaže ITnetwork summer 2017

• David Čapka (8.5 bodov) - Ako vždy pekná webová hra od teba. Hrateľnosť nejakú dobu drží, potom to začína byť stereotypné. V článku u hry píšeš o plánoch sa survival módom, ten by tento problém určite vyriešil. Škoda chýbajúcich zvukov, ty k čarovanie priamo patrí. Celkovo to na mňa pôsobí ako dobre odladený prototyp, ale k plnohodnotnej hre tomu ešte kúsok zostáva. Nechám sa prekvapiť ako to bude ďalej vyzerať.
• Lucie Hartingerová (8 bodov) - Billboard na začiatku je epický!:-D Nepodarilo sa nám zhodiť veža tým veľkým dominom, ale podarilo sa nám ju zhodiť na seba ... Slušne sme sa zasekli pri skúšaní jednotlivých možností demolácie a prestavby. Akurát pri rýchlejšom klikanie sa stĺpy i zväčšovali, i kopírovali.
• Tomáš Bitter (8 bodov) - Skôr ako hru to beriem ako demonštráciu fyziky, ktorá funguje dobre. Človek si v tom môže celkom vyhrať. Ale do budúcnosti to chce rozhodne nejakú gamifikaci.

V nasledujúcom kvíze, Kvíz - WebGL a BabylonJS, si vyskúšame nadobudnuté skúsenosti z kurzu.

Galéria