K.I.D.S x Publicis: Arkanoid w PDF? To możliwe!

case studies

data publikacji

Arkanoid to gra typu block breaker, w której za pomocą małej ruchomej platformy odbija się piłeczkę i zbija klocki umieszczone wyżej. Firma Taito stworzyła i wydała ją w 1986 roku na automaty do gry. Wraz z agencją Publicis, zaproszonymi Kreatywnymi i Fundacją K.I.D.S postanowiliśmy przekształcić tego klasyka w interaktywne doświadczenie, które wspiera kampanię na rzecz 1,5% podatku.

1 – Wyzwanie

Fundacja K.I.D.S. i agencja Publicis przyszły do nas z pomysłem: "Tworzymy interaktywną grę w PIT na bazie Arkanoida i chcemy w ten sposób promować przekazanie 1,5% podatku na rzecz Fundacji. Pomożecie?". Długo nie trzeba było nas namawiać, tym bardziej, że za projektem stało ciekawe wyzwanie technologiczne.

Grę w formacie pdf zrealizował na rzecz kampanii Krzysztof Grudziński – producent, reżyser i creative director, specjalizujący się w gamingu, m.in. UEFN, technologiach XR (VR/AR), virtual production oraz interaktywnych narracjach. Jednak dosyć szybko okazało się, że format ten ma istotne ograniczenia - nie obsługuje dynamicznych animacji oraz nie może być wyświetlany na wszystkich urządzeniach. Tu wkroczyliśy my, Panowie Programiści. 

“W szczególności problematyczna była interaktywność, ponieważ jedynie natywny czytnik Chromium obsługuje kod JavaScript. Dodatkowo brak narzędzi debugujących sprawiał, że błędy nie były widoczne w konsoli, a ich wystąpienie powodowało całkowite zatrzymanie wykonywania reszty kodu” - komentuje Vladyslav Prosolupov, Tech Lider Dev w Panowie Programiści. 

2 – Rozwiązanie

Po przeanalizowaniu ograniczeń PDF zdecydowaliśmy się na alternatywne podejście. Stworzenie PDF-viewera, który wizualnie naśladuje wygląd dokumentu PDF, ale jednocześnie daje pełną swobodę w implementacji mechanik gry. W tym celu wykorzystaliśmy Phaser.js, bibliotekę do tworzenia gier 2D w przeglądarce, która zapewnia zaawansowane efekty wizualne i dynamiczną obsługę zdarzeń. 

Stworzyliśmy prototyp rozwiązania za pomocą AI, który wizualnie przypominał klasyczny PDF-viewer, ale nie korzystał jeszcze z Phaser.js. PoC pozwolił nam zweryfikować podstawowe założenia projektu i pokazać, jak można zaimplementować wymagania Klienta w nowym środowisku.

Dzięki wykorzystaniu Phaser.js mogliśmy:

  • Stworzyć interfejs użytkownika naśladujący PDF-viewer. 
  • Dodać efekty wizualne, które nie byłyby możliwe w natywnym PDF.
  • W pełni kontrolować interakcje użytkownika, co poprawiło płynność rozgrywki.

3 – Optymalizacja i analityka

Oprócz implementacji gry stworzyliśmy również middleware po stronie serwera, który dynamicznie przekierowywał użytkowników albo do pliku PDF, albo do naszego PDF-viewera. Decyzja o przekierowaniu była podejmowana na podstawie nagłówka User-Agent, według ustalonego "ratio" 80/20:

  • 80% użytkowników Chromium jest kierowanych na naszą stronę.
  • 20% użytkowników Chromium otrzymuje plik PDF.
  • Wszyscy użytkownicy mobilni oraz przeglądarek innych niż Chromium są zawsze kierowani na naszą stronę.

Dodatkowo, w systemie middleware zintegrowaliśmy narzędzie analityczne Plausible, które pozwala zbierać dane o tym, co użytkownik końcowy zobaczył na ekranie – naszą grę czy wersję w PDF. Dzięki niemu możemy także monitorować liczbę odsłon stron, kraj pochodzenia użytkowników oraz urządzenie, z którego korzystali.

4 – Dla nas nie ma że “niemożliwe” czyli QA w 3 tygodnie

Praca nad projektem trwała zaledwie trzy tygodnie, dlatego na bieżąco dostosowywaliśmy się do zmieniających się wymagań i edge case'ów. Kluczowe wyzwania obejmowały:

  • Działanie gry na różnych przeglądarkach (testowane za pomocą Browserstacka i fizycznych urządzeń).
  • Obsługę sterowania za pomocą klawiatury, myszki i żyroskopu na mobile.
  • Blokadę rozgrywki w orientacji poziomej na smartfonach.

Razem z Fundacją K.I.D.S. i Publicis stworzyliśmy unikalne, angażujące doświadczenie, które pozwala "rozliczyć się z bólem" w zupełnie nowy sposób. Użytkownicy mogą uczestniczyć w nowej odsłonie klasycznej gry, która razem z kolejnymi “zbitymi” klockami odsłania przekaz kampanii i zachęca do przekazania 1,5% podatku na dziecięcą onkologię. No i my też zachęcamy Was do dołączenia się i rozliczenia z bólem! KRS 0000793389 – skopiuj, zapisz, rozlicz. Masz pomysł na innowacyjną kampanię, która wymaga wsparcia technologicznego? Skontaktuj się z nami i razem zróbmy niemożliwe.

    link