Kultura w sieci – ilustrowana gra z chatbotem

press room

data publikacji

Ograniczenia wynikające z pandemii zmusiły branżę kultury do niemal całkowitego przeniesienia swoich działań do świata on-line. Korzystając ze wsparcia programu “Kultura w sieci”, Miejska Biblioteka Publiczna z Kalisza zwróciła się do nas z zadaniem opracowania koncepcji kreatywnej, a następnie wdrożenia edukacyjnej gry internetowej, która w angażujący sposób przedstawi historię podróżnika Stefana Szolca-Rogozińskiego.

Klient

Miejska Biblioteka Publiczna w Kaliszu

Panowie Programiści

frontend, backend, PM, QA

Sparing Digital

UX, UI, koncept

nagrody

Awwwards Mobile Excellence, Awwwards Honorable Mention, Nominacja Mobilet Trends 2020

wyzwanie

01

Jedną z wielu inicjatyw edukacyjnych prowadzonych przez Miejską Bibliotekę Publiczną im. Asnyka, jest popularyzowanie historii Stefana Szolca-Rogozińskiego – odkrywcy Kamerunu pochodzącego z Kalisza. Gdy zespół Biblioteki zgłosił się do nas z zadaniem stworzenia gry o kaliskim podróżniku, byliśmy podekscytowani zarówno tematyką projektu, jak i możliwością opracowania go “od A do Z” – od scenariusza, po wdrożenie.

założenia

02

Zgodnie z głównym założeniem, gra nie miała służyć wyłącznie rozrywce – jej dodatkowym zadaniem była rola narzędzia pomocniczego dla uczniów oraz nauczycieli historii i geografii. Już na etapie prac koncepcyjnych, musieliśmy więc odpowiednio wyważyć proporcje kontekstu historycznego z elementami zabawy, tak by wykreować wirtualne doświadczenie, które zaintryguje młodszych i starszych odbiorców.

odbiorcy

03

Główną grupą odbiorców gry są uczniowie ostatnich klas szkół podstawowych
i pierwszych klas liceów, tj. 13-16 lat. To pokolenie, dla którego świat wirtualny to nieodzowny element świata realnego – naturalne źródło rozrywki, poszukiwania wiedzy, a od niedawna (od pojawienia się pandemii) także główny kanał kontaktu z nauczycielami i kolegami z klasy.

Rozwiązanie - etapy prac

04

Aby jak najlepiej poznać historię kaliskiego podróżnika i na jej podstawie przygotować zakres prac i zarys scenariusza, połączyliśmy siły z zespołami Biblioteki i Sparing Digital aby wspólnie przeprowadzić 3 sesje warsztatowe.


Z powodu pandemii projekt realizowaliśmy w 100% zdalnie – podczas warsztatów korzystaliśmy głównie z Google Meets i Miro, gdzie na wspólnym canvasie, porządkowaliśmy fabułę i pomysły na funkcjonalności.

 

W pierwszym etapie, w oparciu o wiedzę merytoryczną zespołu klienta, przygotowaliśmy rozbudowany schemat scenariusza. Mając na uwadze średni czas zaangażowania, jaki odbiorcy są w stanie poświęcić grze webowej, ograniczyliśmy historię do najważniejszych i najciekawszych wątków, przeplatając ją zadaniami, wymagającymi od gracza skupienia i odrobiny zręczności. Całość scenariusza podzieliliśmy na 4 rozdziały symbolizujące 4 miasta, będące przełomowymi etapami podróży Szolca.

Równolegle do prac nad scenariuszem i zakresem, zespół Sparing Digital opracowywał moodboardy i propozycję konceptów kreatywnych. Zespół klienta był natomiast odpowiedzialny za przygotowanie materiałów źródłowych i nagrań podcastów, które odtwarzane w grze pełniły rolę źródła wiedzy i cennych wskazówek dla graczy.

UI i animacje

05

Koncept, który został zaproponowany klientowi, bazuje na estetyce papieru, która jest nawiązaniem do bibliotecznych księgozbiorów i historycznych materiałów źródłowych (dzienników, map). To także pomost pomiędzy światem rzeczywistym (papierowymi stronami książki), a wirtualnym (gra internetowa).

 

Wszystkie postacie pojawiające się w grze i elementy scenografii zostały zaprojektowane przez ilustratora, a następnie przeszły przez etap postprodukcji, by jak najbardziej zbliżyć ich fakturę do papieru.

Wspólnie z zespołem Sparing Digital zdecydowaliśmy, że podróż oprzemy na mechanizmie horyzontalnego przemieszczania się głównej postaci, za pomocą smooth scrolla – aby zapewnić płynny ruchu na wszystkich wspieranych przeglądarkach stworzyliśmy i dostosowaliśmy autorskie rozwiązanie poruszania postaci.

 

Wszystkie ruchy elementów gry np. roślin, płomieni w lampie naftowej, napotykanych postaci zostały zaprojektowane przez ilustratora, a następnie zanimowane i przygotowane w formie sprite’ów które zaimplementowaliśmy w grze.

Chatbot

06

Jednym z kluczowych elementów gry, który sprawia, że kontekst historyczny nabiera lekkości i staje się angażujący dla graczy jest funkcjonalność chatbota. Pełni on rolę głównego narzędzia komunikacji postaci podróżnika (w którą wciela się gracz) z pozostałymi bohaterami. Gracz ma zatem bezpośredni wpływ na to, jak ułoży się fabuła podróży – w zależności od tego, który z proponowanych przez chatbota tekstów wybierze, otrzyma inną odpowiedź, która może ułatwić lub skomplikować jego przygody.

 

Opracowanie dialogów było jednym z ważniejszych wyzwań kreatywnych – wiedzieliśmy, że to, w jaki sposób poprowadzimy narrację, będzie miało ogromny wpływ na długość interakcji nastoletniego odbiorcy z grą.

 

Mobile First

07

Dla lepszych wrażeń użytkowników korzystających z urządzeń mobilnych, stworzyliśmy wersję PWA, dzięki której możliwe jest m.in. odtworzenie gry w trybie pełnoekranowym na ekranach telefonów.

 

Gra powstała w Vue JS z wykorzystaniem najnowszej wersji silnika Phaser.

Jako uzupełnienie lokalnej kampanii promocyjnej gry, stworzyliśmy dodatkową podstronę z efektemy webAR, który rozszerzał logotyp i hasło miasta tj. “Dopisz swoją historię”. Po wejściu w zakładkę “Twoja historia” na stronie gry, a następnie skierowaniu aparatu na logotyp, użytkownik widzi okienko z czatu z wylosowanym fragmentem dialogu z gry i przyciskiem PLAY, zachęcającym do gry.