HTML5 wchodzi do gry! Ma jednak swoje plusy i minusy

Merixstudio to poznańska agencja interaktywna specjalizująca się w tworzeniu zaawansowanych stron internetowych. Widząc ogromny potencjał w technologii HTML5 stworzyliśmy Merixgames – część firmy specjalizującą się w tworzeniu gier w tym właśnie języku. W naszej kolekcji znajduje się już kilka prostych gier, lecz chcieliśmy pójść krok dalej.

Tak powstało nasze najnowsze dzieło, będąca na ukończeniu, a już zdobywająca branżowe nagrody, gra Kopanito All-Stars Soccer. Gra, stworzona w technologii HTML5 zdobywa uznanie graczy i krytyków na całym świecie. Właśnie o tym co stanowi jej siłę, jakie są słabe strony i dlaczego HTML5 jest lepszy od Flash’a przeczytacie w artykule poniżej.

HTML5 vs Flash

Fakt jest jasny: HTML5 powoli staje się alternatywą dla konkurencji i świetnie będzie się sprawdzał w tworzeniu małych lub średnich gier. Na pewno zepchnie w niepamięć Flash’a, a to za sprawą kilku solidnych argumentów. HTML5 jest bowiem idealną technologią jeżeli chodzi o prototypowanie czy prace koncepcyjne. Sprawdzenie mechanizmów, funkcjonalności czy stworzenie grywalnego dema nigdy nie było tak proste. Łatwość ta jest niezwykle cenna przy procesie produkcji, gdyż pozwala nam zaoszczędzić mnóstwo czasu.

Ogromny plus stanowi kompatybilność i wieloplatformowość – ten sam kod HTML5 działa na wielu przeglądarkach (w różnych systemach operacyjnych i urządzeniach mobilnych). Co warte podkreślenia, dzięki temu iż poddawane są rygorystycznym testom, przeglądarki internetowe są lepiej przystosowane. Gwarantują większą stabilność i wydajność w porównaniu do Flash’a (nie trzeba instalować żadnych plug-inów!), który działa bardzo wolno i towarzyszą mu luki w bezpieczeństwie.

Wspomniana powyżej bardzo ważna cecha, jaką jest multiplatformowość, wynika z dostępności Chromium. Ten silnik od przeglądarki potrafi interpretować JavaScript czy wyświetlać HTML ostylowany CSS’em. Chromium (który można rozprowadzać z własnym kodem), tak jak przeglądarki interpretujące JavaScript, działa na różnych systemach operacyjnych.

To prawda, developer uzależniony jest od gigantów rynkowych (Google, Mozilla, Microsoft) i nie jest w stanie sam poprawić istniejących, niezależnych od niego błędów. Jednak to się zmienia! Godny do naśladowania przykład daje Mozilla, która pracuje wraz z firmą Epic Games nad uruchomieniem Unreal’a (silnika gier) w ich przeglądarce.

Jak to się robi – czyli gra w HTML5 na przykładzie Kopanito?

Pomysł na rozbudowaną grę w HTML5 powstał około rok temu, gdy zaczęliśmy się zastanawiać w jaką produkcję sami chcielibyśmy pograć, a jakiej nie ma obecnie na rynku. Pierwsze prace koncepcyjne (rysunki, sztuczna inteligencja, całościowy zarys gry) trwały pół roku. Gdy mieliśmy już jasno nakreślony plan, zabraliśmy się do pracy.

Zadanie nie było proste, gdyż w chwili obecnej nie ma wielu narzędzi (wszystkie biblioteki czy frameworki do tworzenia gier w JavaScript’cie są jeszcze w stanie surowym), więc w niektórych aspektach musieliśmy wcielać w życie własne, nowatorskie pomysły.

Sztuczna inteligencja

Choć nasza gra daleka jest od realizmu znanego z wysokobudżetowych gier tego typu (czyli fauluj do woli, bo nie ma kartek!), musieliśmy naszym zawodnikom zaimplementować różnego rodzaju zachowania. Każdy z graczy reaguje inaczej gdy biegnie bez piłki, a inaczej gdy ma ją przy nodze. Wykonuje inne ruchy gdy atakuje i gdy broni. Podobnie z całą drużyną w trybie obrony lub ataku.

Wykorzystaliśmy do tego maszynę stanów (sami ją rozbudowaliśmy), która pozwoliła nam wszystkie zachowania kolejkować i parametryzować. To co rozwinęliśmy, stworzyliśmy tylko pod i na potrzeby Kopanito. Nie dopisywaliśmy zbędnych mechanizmów, aczkolwiek to, co zostało przez nas napisane, można wykorzystać przy tworzeniu kolejnych gier.

Chromium i nw.js

Naszą grę oparliśmy na autorskim silniku działającym dzięki nw.js. Jest on stabilny, lecz sprawdza się tylko do niektórego typu gier (ostrożnie z grafiką 3D!), a jego największą zaletą jest użycie HTML’a. Co ważne, dzięki chromium, istnieje możliwość edytowania na żywo, kodu działającej gry. Można zmieniać CSS’a (między innymi wygląd interfejsu) i wprowadzać zmiany bez konieczności resetowania gry.

Zdjęcie przedstawia fragment gry Kopanito | fot. materiały prasowe

Inne silniki skupiają się na renderowaniu grafiki, w Kopanito poszliśmy jednak w inna stronę – skupiliśmy się na mechanizmach od strony rozgrywki, game-playu. W związku z brakiem narzędzi zdecydowaliśmy się na stworzenie czegoś swojego – mechanizmu do sztucznej inteligencji, kontrolerów.

To właśnie stanowi siłę nw.js – łatwość w tworzeniu interfejsów, w integracji kontrolerów, obsługi dźwięku czy grafiki. Idealnie nadaje się on do tworzenia gier strategicznych czy typu manager.

Czas tworzenia i dlaczego tak… krótko?

HTML5 perfekcyjnie spełnia się przy tworzeniu prostych gier, które dzięki sprawnemu prototypowaniu, powstać mogą w stosunkowo krótkim czasie. Na stworzenie gry promocyjnej (w stylu stworzonego przez nas Travel Rush’a) trzeba poświęcić około dwóch tygodni. Jest to idealne rozwiązanie dla firm, które szukają interaktywnej promocji wśród swoich klientów.

Oczywiście poziom skomplikowania i czas tworzenia gry uzależniony jest od pomysłu i wymagań klienta. Prace nad Kopanito wciąż trwają (i pomimo tego, iż jest już w sprzedaży) i gra ciągle jest udoskonalana. Efekt ponad rocznej pracy to bardzo złożony produkt: ponad 100 drużyn narodowych, 600 zawodników i przynajmniej 152 mecze w 16 różnych turniejach, tworzą niezwykle rozbudowaną grę w technologii HTML5, która stanowi unikat w skali światowej.

Plusy i minus

Tak już ten świat jest zbudowany, że obok plusów istnieć muszą i minusy. Nie inaczej jest w przypadku gier stworzonych za pomocą HTML5, co znajdziecie w poniższym podsumowaniu.

Plusy:

• multiplatformowość,
• szybkość prototypowania (czyli czas to pieniądz),
• debugowanie – możliwość edycji kodu na żywo,
• wsparcie producentów przeglądarek, które na pewno będzie rosło,
• niski próg wejścia – szeroka dostępność i silnie rozwijana technologia.

Minusy:

• problemy wydajnościowe na urządzeniach mobilnych (nie polecamy przy bardziej zaawansowanych grach),
• regresja Chromium, czyli nowe wersje z nowymi bugami,
• brak możliwości stworzenia gry na konsolę, 
• uzależnienie od twórców przeglądarek.

–

Maciej Fedorów

PR & Marketing Manager w Merixstudio, który jest także odpowiedzialny za promocję gry Kopanito.