Jeśli jeszcze nie wiesz, na czym polega stworzona przez nas gra, przed przeczytaniem tego tekstu, koniecznie musisz się tego dowiedzieć tutaj: https://turkusowystartup.pl/2019/11/09/skuteczniej-edukowac-pracownikow-grywalizacja-volkswagen/.

A jeśli wiesz, oto ciąg dalszy naszej przygody…

Po miesiącach spędzonych przed ekranem komputera, litrach zaaplikowanych kropel do oczu i kilku skurczach karku, ukończyliśmy dzieło i gra mobilna „Wejdź do gry” stała się rzeczywistością.

Jak wyglądała jej implementacja, okupiona tak wielkim poświęceniem?

Technologia hybrydowa w grze mobilnej? To działa!

Każdy projekt rozpoczyna się od decyzji. Słyszałeś też pewnie, że saper myli się tylko raz? My też musieliśmy dokonać wyboru, który mógł zaważyć na powodzeniu całego przedsięwzięcia: czy stawiamy na technologię natywną, która zapewni nam lepszą wydajność, ale będzie wymagała od nas większego nakładu czasu i pracy, czy też zaryzykujemy i wybierzemy aplikację hybrydową, która pozwoli nam zaoszczędzić i jedno, i drugie?

Gry mobilne aż proszą się o zastosowanie aplikacji natywnej i wykorzystanie bardziej niskopoziomowego języka – w grze wiele się dzieje, więc wydajność to absolutna podstawa. Ale jeśli ten sam efekt końcowy można osiągnąć w łatwiejszy sposób, dlaczego nie zaryzykować?

Konstrukcja gry mobilnej w technologii hybrydowej

Przede wszystkim tego, że aplikacja nie sprosta naszym oczekiwaniom, widoczne będą spowolnienia w grze, a my tracąc mnóstwo czasu zabrniemy w ślepy zaułek i będziemy musieli zacząć wszystko od nowa. A wierzcie nam lub nie – to by naprawdę bolało.

Ale kto nie ryzykuje, ten nie wygrywa. Aplikacja hybrydowa okazała się strzałem w dziesiątkę. Wykorzystaliśmy platformę React Native, dzięki czemu gra działała płynnie, a na ekranie bez przeszkód mogło być równocześnie animowanych mniej więcej siedem elementów. Nam to w zupełności wystarczało – nigdy nie planszy nie pojawiało się na raz więcej niż siedmiu animowanych pracowników albo siedem maszyn.

Okazało się, że trzeba było także wprowadzić ograniczenie na rozmiar tła planszy. W przypadku zbyt dużej grafiki nagle gra zaczynała mocno spowalniać. Wynikało to ze zwiększonej alokacji pamięci. Na niektórych telefonach wybrany przez nas rozmiar planszy nie sprawiał na problemu, na innych z kolei już był mocnym ograniczeniem. Metodą prób i błędów dobraliśmy rozmiar, który pozwalał na płynne działanie gry na wszystkich urządzeniach. Przekroczenie tego rozmiaru choćby o jeden piksel już powodowało zacinanie się aplikacji.

Jaka jest wydajność gry w React Native?

• znaczne skrócenie czasu rozwoju aplikacji. Gdybyśmy postawili na technologię natywną, pewnie rzeźbilibyśmy naszą grę do dzisiaj. Żartuję 😉 Ale z pewnością nie obyłoby się bez zaangażowania dodatkowych osób,
• wystarczająco dobrą wydajność,
• możliwość funkcjonowania gry w trybie hot reloading – gdy aplikacja pozostaje uruchomiona, my w tym czasie możemy wprowadzać nowy kod, który jest „wstrzykiwany” do odpowiednich plików bez utraty stanu aplikacji,
• ale przede wszystkim mogliśmy posłużyć się jednym kodem aplikacji na Android i iOS. Jakie wiązały się z tym korzyści?  – patrz ppkt. 1.

Jak zaimplementować grę mobilną?

Wszystkie plansze w „Wejdź do gry” są skonstruowane w rzucie izomerycznym i składają się z kafelków układanych jeden obok drugiego. Na każdym kafelku mogliśmy umieszczać dowolne elementy, w zależności od tego, co chcieliśmy konstruować. Ta metoda świetnie się sprawdza z dwóch powodów: po pierwsze każdą nową planszę jesteśmy w stanie stworzyć stosunkowo szybko; po drugie: istniejącą już planszę możemy efektownie rozbudować przy niewielkim nakładzie pracy.

Akcja naszej gry w dużej mierze toczy się w hali produkcyjnej w kształcie kwadratu (widoczne na powyższym zrzucie ekranu). W jej obrębie znajdują się elementy klikalne. Możemy tworzyć też halę, która nie jest kwadratora – po prostu pewnych kafelków nie wypełniamy grafiką. Reszta planszy stanowi jedynie statyczne tło, któremu mogliśmy nadać dowolny kształt, według własnej fantazji.

Jak stworzyliśmy animacje do naszej gry?

Przy tworzeniu animacji skorzystaliśmy z biblioteki Lottie. W grze znajdziesz:

• animacje zapętlone, które idealnie nadawały się, do tego, by zobrazować powtarzalną pracę maszyn i pracowników w fabryce. Udało nam się tchnąć życie w taśmę produkcyjną przy zastosowaniu formatu JSON. Nasz niezastąpiony grafik (pozdrowienia dla Radka 😉 ) przygotował animacje w programie Adobe After Effects, z którego następnie eksportował je do formatu JSON za pomocą pluginu Bodymovin. To wszystko dało całkiem zgrabny rezultat, który możecie podziwiać tutaj:

• drugim rodzajem animacji były animacje generowane przez nas w kodzie. W ten sposób poruszaliśmy statycznymi elementami po linii produkcyjnej – np. wyprodukowanymi w fabryce szybami samochodowymi, czy maskami.

Jak animowaliśmy statyczne obrazki w kodzie?

Każda plansza „Wejdź do gry” została zaprojektowana w rzucie izometrycznym, więc elementy na linii produkcyjnej poruszały się po skosie. Dla każdego elementu musieliśmy wyznaczyć odpowiednią trajektorię ruchu.

Kiedy produkt przesunął się już po taśmie z punktu A, do punktu B, zadanie wymagało, by wykonać nad nim jakąś pracę – dokręcić/naoliwić/naprawić itp. Wówczas nad animowanym elementem pojawiał się pasek postępu, pokazujący, jak bardzo gracz będzie musiał się jeszcze nagimnastykować, zanim element zostanie ukończony. Kiedy w końcu suwak dobrnął do 100%, część, nad którą pracował gracz, przechodziła z punktu B do punktu C. I tak dalej, i tak dalej, aż do ukończenia zadania.

Mechanizmy gry w aplikacji mobilnej

Postanowiliśmy, że kolejne plansze i zadania będziemy dozować w czasie, tak by zachęcić graczy do systematyczności. Pierwszego dnia gracze mogli wykonać tylko kilka zdań, następnego kolejne. Nie można było wykonać zadań „na zapas”, a następne parę dni pławić się w dotychczasowym sukcesie. Takie rozwiązanie sprzyjało celowi gry, którym miało być konsekwentne zdobywanie i utrwalanie wiedzy. Nam z kolei pozwalało na kontrolowanie postępów graczy – tworzyliśmy mini-społeczność wśród pracowników i każdy z nich każdego dnia miał takie same szanse w grze.

Z podobnych powodów zdecydowaliśmy, że wszystkie plansze były przechowywane na serwerze, a nie w aplikacji. Pozwalało to na tworzenie nowych plansz dostępnych dla graczy, bez konieczności ponownej instalacji gry. W praktyce wyglądało to tak, że gdy udostępniliśmy aplikację graczom, to w aplikacji były przygotowane zaledwie trzy z ośmiu plansz. Na bieżąco rysowaliśmy kolejne elementy dla przyszłych plansz oraz wprowadzaliśmy teksty zadań.

O pojawieniu się nowego wyzwania, gracz zostawał informowany w powiadomieniach push, wysyłanych za pomocą Firebase’a, który ma kilka cennych zalet: pozwala na wysyłanie wiadomości masowo, zarówno na Androida, jak i na iOSa, a w dodatku jest darmowy. Dzięki wiadomościom push mogliśmy też wysyłać wiadomości wybranym graczom – np. tym, którzy zostali zaproszeni do dodatkowego quizu ze względu na taką samą liczbę punktów.

Jako administratorzy mogliśmy też śledzić postępy każdego użytkownika w panelu administracyjnym i sprawdzać, czy rozgrywka posuwa się do przodu, a także badać, co graczom przysparza najwięcej trudności – również w quizach. Dokładnie widzieliśmy czy oraz jacy gracze przyswajają wiedzę.

Jak rozwiązaliśmy kwestię przechowywania danych personalnych graczy?

Wiadomo, że bezpieczeństwo przede wszystkim, a odkąd w życie weszło RODO, nikt nie chce mieć do czynienia z większą ilością danych osobowych, niż jest to mu absolutnie niezbędne. Więc i my w naszej bazie danych takich informacji nie gromadziliśmy.

Dla każdego gracza został utworzony unikalny hash, na podstawie jego identyfikatora pracowniczego oraz daty urodzenia. Ten hash następnie był wysyłany do naszej aplikacji. Pracownik, który chciał zalogować się do aplikacji, posługiwał się wyłącznie numerem identyfikatora i datą urodzenia. Aplikacja tworzyła w ten sam sposób hash za pomocą funkcji skrótu i porównywała z hashem w bazie danych. Jeśli się zgadzały, pracownik „wchodził do gry”.  Poza hashem w bazie danych przechowywany był wyłącznie jego nick.

Każdy pracownik miał automatycznie tworzone konto (tj. hash) w naszej grze w momencie zatrudnienia w Volkswagenie. Nikt nie musiał się nigdzie rejestrować – wystarczyło pobrać grę oraz wpisać swój identyfikator i datę urodzenia.

Zamknięta gra (wyłącznie dla pracowników firmy) oraz czas rewizji aplikacji w App Store

Niestety Apple nie zgodził się na to, aby opublikować zamkniętą aplikację w App Store. Zamkniętą, czyli dostępną wyłącznie dla pracowników korporacji. W odpowiedzi usłyszeliśmy, że aplikacja powinna być dostępna dla każdej osoby, która ją pobierze. U nas z kolei konta były zakładane wyłącznie dla osób pracujących w VW. Do tego służy konto korporacyjne w App Store, które umożliwia dystrybucję aplikacji dla zamkniętej grupy użytkowników. Nam zależało jednak, żeby z gry mogli korzystać także pracownicy na swoich prywatnych telefonach.

Aby ominąć ten problem dodaliśmy do gry możliwość rejestracji dla osób z zewnątrz. Takim osobom zakładane było konto, które pozwalało zalogować się do gry, ale z ograniczonymi możliwościami. To wystarczyło, żeby gra została zaakceptowana.

Niestety, nigdy do końca nie wiadomo kiedy można spodziewać się odpowiedzi od Apple w sprawie rewizji aplikacji. Powstała nawet specjalna strona, na której podawany jest średni czas odpowiedzi Apple – appreviewtimes.com. Nigdy jednak nie będziesz miał gwarancji, że tak będzie w Twoim przypadku. Co więcej, każda kolejna aktualizacja aplikacji wymaga kolejnego oczekiwania w postaci rewizji przez Apple.

Żeby uniknąć opóźnień w wypuszczaniu aktualizacji zdecydowaliśmy się na dystrybucję wersji na iOS przez specjalnie uruchomioną przez nas stronę WWW. Apple pozwala na taką dystrybucję aplikacji, ale wymaga to specjalnego konta w App Store. Strona musi być także odpowiednio zaprojektowana. Zaletą takiego rozwiązania jest możliwość wypuszczania nowej wersji aplikacji w dowolnym momencie, bez oczekiwania na rewizję. Wadą jest jednak to, że podczas instalacji pracownik musi wyrazić zgodę na instalację aplikacji spoza App Store. Wyświetla mu się informacja o firmie, która dystrybuuje aplikację, a do użytkownika należy decyzja, czy mu ufa.

A co z obostrzeniami wynikającymi z Ustawy o grach losowych?

Zupełnie nas nie dotyczyły. W grze nie ma żadnego elementu losowości, więc ta regulacja nie miała do niej zastosowania. Punkty były przyznawane graczom za dobre decyzje inwestycyjne i poprawne odpowiedzi w quizach. Każdy miał takie same szanse, żeby wygrać.

Grzech nie spróbować, prawda?