MerixGames

27 kwietnia 2016

/ case studies

Jak to robimy: Ice Cream Express – gra HTML5 na ekrany dotykowe

Marcin Wasilewski

Jedną z form marketingu, która z sukcesem angażuje zakupowiczów, są gry. Tworzenie ich jest jednak zawsze wyzwaniem, nawet jeśli opiera się ona jedynie na układaniu kompozycji lodów. Gdy tylko dowiedzieliśmy się, że powierzono mi takie zadanie, to wiedzieliśmy, że kolejne tygodnie naszej pracy wypełnione będą ciekawymi i wymagającymi świeżego spojrzenia zadaniami. Sprawdźcie sami, jak wyglądała praca naszego zespołu nad grą Ice Cream Express.

Digital Signage przy wykorzystaniu HTML5

Możliwość interakcji z wyświetlaczami cyfrowymi znajdującymi się wokół nas szybko stała się integralną częścią naszego życia. Być może słyszeliście już, że eksperci promują HTML5 jako technologię nowej generacji wykorzystywaną w interaktywnych projektach Digital Signage. Uważamy, że świetnym rozwiązaniem dla marek chcących poprawić doświadczenia klientów jest wykorzystanie nowoczesnych technologii takich jak HTML5. Wiadomo także, że niesamowite doświadczenia pozwalają na pozyskanie klientów, którzy chętnie do nas wracają. Typowy czas zaangażowania użytkownika w grę internetową waha się od 3 do 10 minut, co jest dobrym wynikiem w porównaniu z o wiele krótszymi interakcjami z przytłaczającymi reklamami wideo.


HTML5 jest świetnym rozwiązaniem ze względu na jego wieloplatformowość oraz łatwość dystrybucji. W Merixstudio skupiamy się na budowaniu wysoce funkcjonalnych i atrakcyjnych aplikacji oraz gier HTML5 na ekrany digital signage.


Interaktywne treści oparte na HTML5 (takie jak gry) mogą być bezpośrednio przesyłane między innymi na komputery, telefony, tablety czy inne wyświetlacze dotykowe. Stworzenie tego typu gry niewiele się różni od kreowania typowych gier mobilnych czy internetowych. W dzisiejszym case study możecie sami się przekonać, jak wygląda praca nad takimi projektami.

Kluczowe etapy projektowanie gry HTML5

Jednym z najważniejszych etapów projektu (jak nie najważniejszym) było zaplanowanie przebiegu rozrywki. W grach zależność między poszczególnymi elementami jest silna i najmniejsza nawet zmiana może mieć wpływ na cały projekt. Inaczej dzieje się w przypadku stron internetowych, w których dodanie obrazka, nowych treści czy nawet całej podstrony nie burzy zazwyczaj struktury witryny. Przy pracy nad Ice Cream Express dużym plusem był dla nas fakt, że Klient pozwolił nam na swobodę działania przy kreowaniu koncepcji gry. Po opracowaniu algorytmu, który pozwolił nam przewidzieć działanie aplikacji i uniknięcie nieprzewidzianych sytuacji wydłużających czas developmentu, mogliśmy przystąpić do pracy.

Animacja prezentująca grę Ice Cream Express

Rozważaliśmy wykorzystanie wielu różnych technologii i sposobów pracy nad projektem. Ostatecznie zdecydowaliśmy się zbudować grę na elementach HTML5 i oprogramować ją w czystym JavaScript’cie. Ze względu na wątpliwą wydajność docelowego urządzenia woleliśmy ograniczyć wykorzystanie JavaScript do minimum, dzięki czemu uniknęliśmy nadmiernego wykorzystania zasobów urządzenia. Całość uruchomiana jest w przeglądarce Chromium, a dokładniej NW.js, czyli połączenia silnika Webkit i środowiska Node.js. Urządzenie Klienta niestety działa na jednej ze starszych wersji tego rozwiązania, aktualizacja więc nie wchodziła tutaj w grę. Na szczęście WebKit sprzed 2 lat niewiele odbiega jakością od swojej najnowszej wersji i nie jest nawet w połowie tak straszny jak Internet Explorer. ;)

Stworzenie prototypu gry

W pierwszej kolejności zabraliśmy się za stworzenie prototypu, który zawierałby cały mechanizm gry.

Aplikacje podzieliliśmy na kilka części:

  • losującą - odpowiadającą za losowanie nowych kombinacji lodów do ułożenia,
  • porównującą - która wybiera i porównuje lodowe kompozycje,
  • widoku - czyli wszystkie style i animacje.

By stworzyć mechanizmy losujący i porównujący musieliśmy najpierw zdefiniować lodowe kompozycje, dzięki czemu mogliśmy identyfikować części składowe. Wymyśliliśmy więc, że każdy poziom będzie osobną tablicą, którą będziemy dodawać do obiektu reprezentującego aktualną kompozycję.

Proces tworzenia gry Ice Cream Express

 Taki sam obiekt tworzyła także część losująca, jednakże w tym przypadku ilość elementów uzależniona była od poziomu gry.

Proces tworzenia gry Ice Cream Express

W pliku konfiguracyjnym zdefiniowaliśmy z jakiego zakresu liczbowego ma być losowana kompozycja, przez co na niższych poziomach lody są najmniej skomplikowane. Musieliśmy tylko zadbać o to, by losowane gałki i ich ilość odpowiadała aktualnemu poziomowi trudności.

Jeżeli wylosowana kombinacja (wartość i kolejność elementów) zgadzała się z tą ułożoną przez gracza, gra akceptowała kompozycję. Jest jednak kilka wyjątków, na które należało zwrócić uwagę, takich jak ignorowanie kolejności wylosowanych posypek, gdyż możemy wybierać je niezależnie od kombinacji kolorów kulek.

Tymczasowy widok ograniczyliśmy początkowo do niezbędnego minimum z racji tego, iż Klient nadal pracował nad ostatecznym designem gry,. Z tego względu obrazki zastąpiliśmy wartościami wspomnianymi powyżej.

 

Stworzyliśmy także mały panel do szybkiej zmiany aktualnego poziomu (który odkrywa kolejne pokrywki ze smakami i dodatkami) oraz button do losowania nowej kompozycji. Następnie, po dostarczeniu przez Klienta ostatecznego designu, mogliśmy bez problemu zastąpić przyciski grafikami. Mechanizm historii, który umożliwiał cofanie każdej czynności, ostatecznie został zamieniony na przycisk „reset”.

Ostatnim etapem projektu było dodanie animacji. Unikając obciążenia urządzenia obliczeniami JavaScript’owymi, tam gdzie było to możliwe używaliśmy animacji CSS’owych. W celu uzyskania dodatkowych efektów wygładzania oraz animowania postaci użyliśmy biblioteki GSAP (GreenSockAnimationPlatform), którą wykorzystujemy przy większości zaawansowanych projektów tego typu. Umożliwia ona tworzenie w pełni kontrolowanych oraz dynamicznych animacji przy dużej wydajności i kompatybilności nawet ze starszymi przeglądarkami.

Animacja prezentująca grę Ice Cream Express

Po ostatecznych poprawkach do zgłoszonych przez klienta uwag przyszedł czas na wewnętrzne testy, w które zaangażowany był nie tylko nasz dział QA, ale także wielu pracowników Merixstudio z pozostałych teamów - nikt nie przepuści okazji do pogrania w godzinach pracy! ;)

Myślisz o realizacji projektu?

Skontaktuj się z nami. Przygotujemy wycenę, opowiemy o szczegółach i procesie wdrożenia.

Napisz do nas

Strona używa plików cookies. Wyrażasz zgodę na używanie cookies, zgodnie z aktualnymi ustawieniami przeglądarki.