„Nie wiedziałem w co klikam” da się często słyszeć z ust osób które zainfekowały przypadkiem swój komputer. Ale po zapoznaniu się z materiałem przedstawiającym kulisy powstawania gry Ba Ba Dum, z mych ust również padło wspomniane na początku stwierdzenie… i wirus dość szybko zaczął się rozprzestrzeniać w mojej głowie. Dopiero making of pokazuje ogrom pracy fizycznej i kreatywnej włożonej w projekt. Tysiące rysunków, linijek kodu i komórek w Excelu. To co zwykło się się dzielić na kilkuosobowy zespół specjalistów skupia w sobie dwójka doskonale znanych projektantów, Aleksandra i Daniel Mizielińscy, czyli Hipopotam Studio. Stworzyli 1500 ilustracji, multisktiptowy krój pisma Mr Dum Dum, koordynowali proces tłumaczenia, tworząc do tego specjalną aplikację, czuwali nad nagrywaniem słów, a na koniec wszystko perfekcyjnie zostało zakodowane w responsywną grę. To jest interdyscyplinarność w najczystszej postaci. Ba Ba Dum to najkrócej mówiąc gra językowa dzięki której można nauczyć się już kilkunastu języków, zagrajcie i zobaczcie sami>> A poniżej zobaczcie jak powstawała gra (making of opiera się na materiałach Hipopotam Studio).
1 ETAP: Wybór słów
Największą grupę słów stanowią oczywiście rzeczowniki – są one łatwe do opisania za pomocą języka wizualnego. W niektórych ilustracjach pojawiają się strzałki lub dodatkowy kolor ponieważ niektóre rzeczowniki, takie jak np. płatek, wymagają przedstawienia w szerszym kontekście. Dzięki takim zabiegom graficznym wiadomo, że chodzi o płatek a nie o kwiatek.
Kolejną grupą są przymiotniki. Przedstawiane są na zasadzie zestawianiu kontrastów a zawsze jeden kolor wyróżnia tę ilustracje której dot. dane słowo. Tak na przykład do przedstawienia słowa „czysty” zostały użyte dwie postacie brudna i czysta, gdzie ta druga jest wyróżniona na żółto.
Natomiast słowa dotyczące samych kolorów są przedstawiane tak jak poniżej:
Dla przedstawienia czasowników został stworzony osobny kod kolorystyczny i postać Stefana, który wykonuje przeróżne czynności. Projektanci chcąc uniknąc przedstawiania Stefana w takich sytuacjach jak np. sikanie stworzyli postać psa która rozwiązuje ten problem. Poza nielicznymi przypadkami ilustracje przedstawiają jeden kadr, chociaż tak jak przy kichaniu trzeba pokazać „przed i po”.
To tylko kilka najliczniejszych grup, w całej grze jest ich znacznie więcej, jak np. części ciała, kraje itp.
2 ETAP: Tłumaczenie
Na pierwszy rzut oka ten etap może wyglądać na bardzo prosty, jednak nic bardziej mylnego. Jedyne co tu jest łatwe, to możliwość popełnienia błędów, która w wypadku tłumaczenia pojedynczych słów jest o wiele większa niż w wypadku ciągłego tekstu. Tekst ma logiczną całość, tworzy kontekst, co pozwala łatwiej wyłapywać błędy. Dlatego Aleksandra i Daniel postanowili usprawnić ten proces.
Pierwsze tłumaczenie zawsze jest wykonywane przez native speakera lub zawodowego tłumacza i zapisywane w Excelu. Każdy wiersz to obrazek przedstawiający dane słowo oraz polskie i angielskie tłumaczenie w potocznym znaczeniu danego słowa.
Następnym krokiem jest import tak sporządzonej listy do bazy danych i sprawdzenie poprawności przez 2-4 osób, które miały do dyspozycji specjalnie zaprojektowaną do tego celu aplikację. Aplikacja ma bardzo czytelną strukturę co jest bardzo ważne przy takiej ilości danych, pozwala oceniać tłumaczenia, komentować je i weryfikować.
3 ETAP: Nagrywanie Po wcześniejszym wyborze słów, przetłumaczeniu ich i dokładnym sprawdzeniu tłumaczenia przychodzi czas na nagrywanie. Wszyscy lektorzy to najlepsi z najlepszych, dla których dany język jest mową ojczystą. Co więcej niektórzy z nich są nauczycielami lub pracują w radio przez co przywiązują bardzo dużą wagę do wymowy i dlatego brzmią tak wspaniale.
Wszystkie nagrania mają miejsce w studiu Polskiego Radia przy udziale Pana Grzegorza – producenta dźwięku. Jest to osoba, która dzięki swojemu doświadczeniu i w szczególności słuchowi odkrywała przed projektantami rzeczy o których istnieniu wielu z nas nie zdaje sobie sprawy.
Pan Grzegorz przygotowywał każdy plik audio tak żeby brzmiał perfekcyjnie bez żadnych niespodzianek, artefaktów jak klikanie, trzaskanie, szumy.
Koordynacja tłumaczeń i nagrań pierwszych dziewięciu języków zajęła 10 miesięcy. Ale dzięki zebranemu doświadczeniu praca z kolejnymi trzema trwała zaledwie 1 miesiąc.
4 ETAP: Przygotowanie obrazków
Rysowanie to dla Hipopotam Studio codzienność, a w ilustracji osiągnęli mistrzowski poziom co potwierdzają liczne nagrody jakie otrzymują za ilustrowane książki. Wizualny aspekt dodaje Ba Ba Dum wyjątkowości. Wszystkie ilustracje są rysowane odręcznie na papierze a dopiero później digitalizowane. Dosłownie powstało tysiące rysunków ponieważ gra liczy 1500 słów, a nie zawsze rysunek udaje się od razu.
Ilustracje były tworzone za pomocą czarnego uniPina i markerów Tria.
Następnie rysunki były skanowane i za pomocą Adobe Photoshop usunięto wszystkie póltony
Używanie bitmap jest kłopotliwe, choćby dlatego, że dla każdego urządzenia mobilnego czy laptopa musiałby być przygotowany osobny plik z obrazem. Jednak w wypadku tych ilustracji udało się tę przeszkodę łatwo ominąć. Każda z nich była trasowana w Illustratorze i zapisywana jako czarno biała grafika w formacie SVG.
Każdy plik został zapisany w wersji czarno białej i już więcej nie był edytowany w Illustratorze. Wszystkie zmiany kolorystyczne są dokonywane za pomocą kodu javascript przypisanego do pliku SVG, co jest ogromnym ułatwieniem pracy i nadaje całemu procesowi elastyczności.
ETAP 5: Strony błędów
Daniel Mizieliński uwielbia ukrywać detale i dopracowywać je choćby tylko dla garstki ludzi która je dostrzeże. Dlatego strony błędów nie są zwykłym komunikatem 404 mówiącym że strona nie została znaleziona, albo 403 informującym nas o tym, że dostęp do danej strony jest zakazany. W tym celu dokonano zmian w pliku .htaccess.
ETAP 6: Projekt fontu W większości swoich książek Hipopotam Studio używa własnych krojów, zaprojektowanych na potrzeby danej publikacji. Wynika to z tego, że wiedzą czego chcą i jeżeli nie znajdują odpowiedniego kroju to projektują własny. Tak też było w tym przypadku. Dla Ba Ba Dum potrzebny był krój: wąski, bez szeryfowy, zaokrąglony, gruby i wspomagający wiele języków. Zwykle praca nad fontem zaczyna się od prostych i szybkich szkiców, które następnie są dopracowywane w programie przeznaczonym do tworzenia fontów. Na próbnych wydrukach dokonywana jest techniczna korekta, zaznaczane są elementy do poprawy, po czym następuje ponowna edycja w programie. Cały proces trwał kilka miesięcy. Po wielu poprawkach i konsultacjach z innymi typografami powstał krój Mr Dum Dum, w dwóch odmianach. 
Jak widać powyżej, tworzenie cyrylicy nie jest łatwym zadaniem.
ETAP 6: Kodowanie i testowanie
Po tylu złożonych i czasochłonnych etapach przychodzi moment na coś, co zabiera najwięcej czasu. Kodowanie i testowanie to 60-70% czasu jaki projektanci spędzili nad tworzeniem gry!
To żmudna praca z JavaScript, canvas, SVG, CSS, PHP and MySQL. Więcej detali znajdziecie tu: humans.txt.
Teraz już wiesz co klikasz?
