Manyland – gra pokazująca niesamowite możliwości HTML5

Platformowa gra online stworzona w technologiach HTML5, gdzie spotykają się ludzie i razem budują platformowy świat 2D. Działa również na platformach mobilnych.

Nie spodziewałem się, że zainteresuje mnie jakakolwiek gra na tyle, aby rozpisywać się o niej na łamach tego bloga. Specyficzny świat 2D w stylu retro, coś co wspominam z wielkim sentymentem w tym wypadku w ciekawej formie, gdzie efekt końcowy powala ogromem możliwości. Dziś (13.09.2014) została otwarta rejestracja dla wszystkich. Jednak opis samej gry to tylko cząstka tego artykułu, głównym tematem będzie to jak ta gra została zbudowana, czyli serce aplikacji.

Jeśli chcesz od razu sprawdzić grę, to kliknij w tego linka: Manyland
Klikasz i grasz, tak po prostu, tak od razu.

Opis gry

manyland logoManyland świat zamieszkiwany przez ludzi, gdzie można poruszać się we wszystkich kierunkach w jakikolwiek sposób się chce. Można biegać i odkrywać kolejne miejsca, zbierać przedmioty, które się spotyka, tworzyć nowe rzeczy, budować kolejne elementy świata. Jest też aspekt społeczny, można rozmawiać z innymi, pracować w zespołach i całkowicie najważniejsze samemu wymyślać nowe rzeczy do zrobienia.

Sterowanie jest niezwykle proste, strzałki, skróty klawiaturowe i reszta. Działa na iPadzie, Twoim laptopie, a nawet coś dało się grać na zwykłym telefonie (iPhone lub Android).

Myślę, że tyle wystarczy, bo w końcu rozpisywanie się na temat samej gry nie jest celem tego wpisu.
W szczególności, że instrukcja użytkowania i cała reszta jest opisana na stronie: Manyland Info
Gdybyś miał problemy ze zrozumieniem angielskiego, to spróbuj użyć google translatora :D.
Najważniejsze przed nami!

HTML5, czyli jak została zbudowana ta gra?

Jeśli jesteś równie mocno jak ja wdrożony w tworzenie i bardziej interesuje Cię aspekt techniczny od samego grania, to myślę, że ta część będzie idealna dla Ciebie. Sprawdzimy czy uda się coś wyłuskać, dojść do jakichkolwiek wniosków. Przy okazji przedstawię cały przebieg mojego kombinowania 😉

W pierwszej kolejności przy uruchomionej stronie Mainland.com należy wejść do narzędzi programistycznych (Dev Tools) w Google Chrome. Jako, że ekran jest zablokowany przed kliknięciem przycisku prawej myszy najwygodniej można to zrobić przy pomocy skrótu klawiaturowego:

⌥ + ⌘ + i (dla Windows: alt + ctrl + i)

Następnie sprawdźmy, co siedzi w środku:
DevTools Manyland W oknie „Sources” możemy sprawdzić dokładnie pliki z jakich korzysta aplikacja po stronie klienta. W tym przypadku plik został zminimalizowany (minify), co spowodowało, że jest kompletnie nieczytelny.
Dla nas nie stanowi to problemu, bo zawsze można skorzystać z narzędzia jsBeautifier.
Beauty Kod jak widać stał się nieco bardziej czytelny. Jednak nazewnictwo funkcji i reszty nie jest zbyt czytelne, gdzie nazwy są po prostu losowymi liczbami. Zaś sam kod posiada 45k linijek kodu. Pod tym względem trudno cokolwiek z kodu się dowiedzieć, na szczęście można było kilka rzeczy, które pomogą w dalszych poszukiwaniach z pewnością się przyda:
1. Autorem kodu jest: Philipp Lenssen & Scott Lowe
2. Po co więcej? 🙂

Zaś tak poważniej, to całość z jakich technologii korzystano przy tym projekcie opisano po prostu na stronie do której linkowałem przy opisie tej gry (manyland.com/info)

Thanks go out to the makers of Chrome, Firefox and all other nice browsers, PhotoPaint, PaintShop Pro, Audacity, ImpactJS by Dominic Szablewski, NodeJS, MongoDB, JavaScript, HTML, CSS and other cool web technologies. Thanks to the makers of devices we build on. Thanks to civilization whose shoulders we stand on, coffee, tea, and the universe in general.

MongoDbNodeJSImpactJSW tym wypadku po stronie klienta interesujący jest płatny silnik do tworzenia gier ImpactJS, zaś po stronie serwera NodeJS oraz MongoDB.

ImpactJS

Silnik do tworzenia gier w technologii HTML5, który znacząco ułatwia pisanie gier. Silnikiem do tworzenia gier nazwać można pewien zbiór funkcji, metod służących do wyświetlania grafiki i fizyki gier. Służy do obsługi takich efektów jak renderowanie całego świata i jego elementu, czy też kolizji, sztucznej inteligencji, czy dźwięku. Oczywiście wszystko w zależności od danego silnika.

ImpactJS jest płatny, a jego cena wynosi 100$. Ostatnia aktualizacja silnika do wersji 1.24 odbyła się w lipcu 2014. Niestety bez licencji nie da się ściągnąć silnika z legalnego źródła. Wprawdzie można zapoznać się z dokumentem i obejrzeć przykładowe kody, ale to już nie to samo.

Istnieje wiele alternatywnych, darmowych rozwiązań związanych z tworzeniem gier w technologii HTML5, jednak uznałem, że będzie to dobry temat na osobny artykuł.

NodeJS

Darmowa biblioteka (open source), która umożliwia uruchomienie kodu Javascript po stronie serwera, czyli miejscu gdzie najczęściej wykorzystuje się takie języki programowania jak PHP, Java, czy też technologię .NET. Jednym słowem API dla wszelkich aplikacji mobilnych dzięki NodeJS można tworzyć w Javascript 🙂

MongoDB

Stosowanie języka SQL i tworzenie RELACYJNYCH baz danych przy pomocy MySQL, czy SQL Server jest powszechne. MongoDB jest NIERELACYJNYM systemem zarządzania bazą danych, gdzie dane są składowanie w JSONie. Różnic pomiędzy relacyjnym, a nierelacyjnym przechowywaniem danych jest mnóstwo, każde z rozwiązań ma swoje wady i zalety. W wielkim skrócie w przypadku relacyjnych baz danych mamy do czynienia ze świetną obsługą transakcji, małymi rozmiarami bazy danych (brak redundancji danych) i dobrą obsługą kodowania, dodatkowo rozwiązanie jest niezwykle popularne. W nierelacyjnych bazach danych otrzymujemy przyjazny format danych, bardziej naturalny dla aplikacji i bardzo szybki dostęp do danych, jednak baza danych rośnie w zastraszającym tempie, a ceny serwerów nie są zbyt tanie.

Oczywiście o każdym z tych rozwiązań można się rozpisywać w osobnych artykułach, czy książkach opierając się na wielu przykładach. W tym wypadku jedynie chciałem wspomnieć pokazując w jakich technologiach została stworzona ta gra.

You may also like...