Uwa┼╝aj w co klikasz!

20-10-2014

„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. font_hipo

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?

Podziel si─Ö:

    Skomentuj!




    Menu Title