Jak se tvoří HTML5 videohra

Vesmírný kovboj vás ve své vesmírné lodi vybízí ke hře a najednou se ocitnete ve své vlastní vesmírné lodi, se kterou se uhýbáte střelám a střílíte na útočníky, kterých není zrovna málo. Tak začíná nová HTML5 hra na Spritted s názvem War Games: Space Dementia. “Nápad jsem dostal, protože jsem vždy chtěl akční arkádovou hru. Opravdu mám rád hru Robotron 2084; Myslím, že je opravdu jednoduchá a zábavná, tak jsem si řekl, proč ji nepoužít jako inspiraci?,” vysvětluje Eduardo Ortega, projektový manažer na Spritted. Ten by rád odhalil všechna jeho tajemství a spolu se svým týmem nám řekl, jak fungují, když přijde na vytváření hry.

Eduardo, který sám sebe popisuje jako "vášnivého hráče videoher, který má rád jednoduchou a přímou hratelnost, které poskytují klasické hry," měl nápad vytvořit hru War Games: Space Dementia jako "arkádovou hru, která je "jednoduchá a přenosná." Prvním krokem v tvůrcím procesu videohry je mít nápad, a jakmile tento nápad vyberete, musíte se vrhnout na scénář, což znamená určit to, o čem hra bude. Abyste tak učinili, musí se sejít tým, který se chystá hru přivést do života a naplánovat, jak bude postupovat.

“Když vím, jakou hru chceme mít, všichni se sejdeme a načrtneme obecnou představu o tom, o čem hra bude," vysvětluje Ortega. Spolupracuji přitom s programátorem a designérem. Ti jako první vypracují náčrtek uživatelského rozhraní - menu a přechody obrazovky. Ortega dále říká, že "je zodpovědný za uživatelský zážitek, který se skládá z ujištění, že všechny obrazovky plynou intuitivní a uživatelsky přátelskou cestou." Poté začíná skutečný vývoj hry - to znamená, že jsou obecně načtrtnuté obrazovky, nepřátelé, předměty atd. Jakmile designér udělá vše a předá to Eduardovi, který to schválí, vše ostatní se dá do pohybu: návrhy designéra a první kód, který vyrobí programátor.

Nadšení a inspirace, múzy videoherního designu.

Daniel Peña má na starosti tvorbu postav a musí v rámci hry dát všemu fyzickou formu. Designér ve Spritted nejprve pracoval pro reklamní agentury, ale jeho nadšení pro videohry zapříčinilo, že skončil u jejich navrhování. Tento mladý muž z Valladolidu nám řekl, že nápad na design War Games: Space Dementia k němu přišel, když poslouchal píseň z 80. let: ‘Avalon’ by Roxy Music. Díky tomuto titulu a poté, co dostal zelenou od Eduarda Ortegy, se rozhodl, že vytvoří postavy založené na legendě Krále Artuše a rytířů kruhového stolu.

Původně se titul jmenoval Defenders of AVA, ale nakonec si pomyslel, že by to mohlo vést k zaměnění se severskou kapelou ABBA, tak to změnil na Knights o fSpace. Nakonec se ale stalo to, že hra má z marketingových důvodů současný název. “Titul Knights of Space byl malým odkazem na Guardians of the Galaxy od Marvelu,” říká Peña, který také přiznává, že tento malý odkaz zakomponoval i do designu loga hry.
Proces návrhu je překvapivě docela klasika. Daniel potřebuje pouze tužku a papír, aby udělal svoje skeče a jakmile je s nii spokojený a má jasný nápad, převede je do Illustratoru. Tento program umožňuje digitalizovat to, co jste nakreslili na papír - každá kreba přitom byla, opakujeme, inspirovaná v Králu Artušovi. “K1-ARZ je na palubě své kosmické lodi XK-LIBUR musí bránit 3 sektory, které obklopují KM-LOT”; převypravuje Peña příběh War Games: Space Dementia a vysvěluje, že K1-ARZ je vesmírná verze Krále Artuše.

Dále odhaluje, že herní estetika byla inspirována ilustrátorem a tvůrce komiksu Hellboy Mikem Mignolou—jeho charakteristické kontrastní tóny, málo barev a polygonů, se kterými obvykle pracuje. Dále také vidíme vliv arkádových her z 80. Let,In addition, we also see influence of classic 80’s arcade games such as Tron, Asteroids or R-Type.

Programování, obkladačské práce u videohry.

Ortega má vášeň pro nekomplikovanou hratelnost, a proto navrhl nápad vytvořit jednoduchou videohru o přežití na jedné obrazovce. David Satín nám řekl, že vytváří videohry od svých jedenácti let, a že nyní je programátorem videoher ve Spritted. Jakmile projektový manažer postaví tohoto mladého muže z Madridu před úkol vytvořit videohru inspirovanou hrou Robotron 2084, okamžitě si vzpomněl na hru Smash TV.

David měl vždycky rád klasické arkádové hry, předchůdce hry Robotron 2084, takže se rohodl pokračovat v dynamice hry Smash TV aby vytvořil War Games: Space Dementia. Robotron vyšel v roce 1982 a cílem hry bylo eliminovat roboty, kteří se vzbouřili proti lidstvu v roce 2084, plus zachraňovat přeživší. Později, v roce 1990, byla vytvořena hra Smash TV, která měla stejný cíl s přežitím: tentokrát šlo o futuristický TV program, kde účastníci musí zabít útočníky a sbírat power-upy.

“Rozhodli jsme se pro hru s vesmírnými loděmi, protože je to jednodušší vyvinout”, přiznává David. Jelikož půjde o hru s pohledem ze vzduchu, návrh vesmírné lodě z toho zmíněného je jednodušší, než navrhnout osobu. David vysvětluje, že vytváření videohry je podobne, jako když "malujete malou animace na roh knihy a když otáčíte stránky, kresba ožije—to znamená, že každá stránka je sprite.” ‘Sprite’ může být ekvivalentem fotky v kinematografii.

V případě War Games: Space Dementia bylo plánováno od počátku použít pohled zezhora, kvůli čemuž vybrali vesmírné lodě, aby se vyhnuli vytváření osmi nezbytných póz pro pohyby postavy: přední pohled, zadní pohled, pohled ze strany, atd. “Pokud uděláte tank či letadlo v pohledu zezhora, nemá to hlavu, krk či něco podobného, takže musíte udělat jen jeden sprite,” vysvětluje David. Osm póz vyžaduje osmkrát více času k programování—jelikož každý pohyb potřebuje vlastní kód a návrh.

David dělá své programování, jakmile dostane návrhy od Daniela. Pracují společně a dělají rozhodnutí spolu a David má také na starosti dávat každému předmětu ve hře umělou inteligenci, což znamená určité chování. “Každý typ vesmírné lodě má jedinečné chování a inteligenci. Ty, se kterými se střetnete v prvních úrovních jsou pomalé a bloudící, ty v posledních úrovních mají sotva nějakou chybovost a jsou schopné vás honit ve skupině a předvídat všechny vaše pohyby,” říká Santín.

Každý předmět ve hře je možné vybavit unikátním pohybem a chováním díky totální kontrole nad proměnnými, které tvoří vesmír. Podle Santína jsou "některé z těchto proměnných rychlost, gravitace, rychlost reakce, schopnost střelby, zdraví, sledování a schopnost automatického otočení.”

Jednou z nejtěžších věcí, které David musel čelit během tvorby War Games: Space Dementia bylo bezpochyby zkoušení získat dobrý výkon navzdory veškerému provozu vesmírných lodí, projektilů, postav, atd., které jsou přítomné ve hře. “Je těžké najít na trhu HTML5 hry, které jsou schopné rozpohybovat tolik objektů najednou a udržet si dobrý výkon,” usuzuje David.

HTML5, univerzální jazyk?

Santín vysvětluje, že “programování HTML5 doprovází mnoho složitostí, zejména co se týče výkonu, jelikož není tak silné, jako u nativního jazyka, ale má výhody toho, že je cross-platformové.” Nativní jazyk je ten, který byl vytvořen přímo pro určitý procesor a každý má svůj vlastní; Apple, Android, atd. “Když programujete aplikaci v nativním kódu, je to jako když to děláte ve svém vlastním jazyce, takže nemusíte "překládat" nic a funguje to rychleji.”

Můžete tak říct, že HTML je univerzálním jazykem pro každého, ale nikoliv nativním, takže nebude tak účinný. “To se stává, když používáte běžný jazyk, který poté musí každé zařízení interpretovat ve svém vlastním jazyce,” řekl nám David.

To je důvod, proč programátor potřebuje být důrazný při vytváření velmi účinného kódu, protože hra bude hrána na jakémkoliv druhu zařízení - od velmi silných počítačů, až po staré telefony s pomalým připojením. HTML5 se nebude chovat stejně na každém zařízení, což je důvod, proč je vyžadováno mnoho testování, aby finální produkt fungoval všude správně.

Při hraní na telefonu budete mít ve skutečnosti pocit z řízení vesmírné lodi díky dynamice duálního joysticku, prvku, který je také přítomen v hrách Robotron 2084 a Smash TV. A jelikož Phaser, Framework, který David používá na programování her právě spustil plugin pro duální joystick, není potřeba to vytvářet od základu.

“Phaser je Framework, což je série programovacích struktur zaěřených na řešení určitého druhu problému. Konkrétně je Phaser orientován na výrobu videoher,” ujasňuje Santín. Má to na starosti správu spritů, zavádí zvuky a také to má nástroje k vytváření her, u kterých se zaměřuje na to dát jim výkon na vysoké úrovni.

I když původní myšlenka, kterou Eduardo Ortega měl byla vytvořit jednoduchou hru o přežití na jedné obrazovce—což by vám umožnilo hrát nekonečně až do vaší prohry— výsledek je trochu jiný. Když viděli potenciál hry a šanci věnovat tomu hodně času (přiznávají, že to bylo načasováno pěkně spolu s létem), tvůrci hry se rozhodli jít dál a skončili u vytvoření mnohem více vyvinuté a detailní HTML5 hry. Nakonec se jedná o hru s vesmírnou lodí rozdělenou do tří oblastí, ve kterých protagonista musí bojovat proti pěti různým nepřátelům, které na něj útočí různým způsobe a porazit pokaždé závěrečného bosse. Toto je magie videoher a způsob, jak se vytváří.

Článek napsala Paula Gil Alonso.