Na Algebrze w rogu ekranu siedzi mała postać: rysunkowy ja, w okularach i z dużą głową. Kiedy uczeń dobrze odpowie, zaciska pięść w geście „tak!”, przy błędzie łapie się za brodę i myśli, a po skończonym quizie świętuje. Chciałem, żeby strona miała kogoś, kto reaguje, zamiast suchych komunikatów, i długo wydawało mi się, że to prosta sprawa. Okazało się, że żywa, ruszająca się postać to jedna z trudniejszych rzeczy, jakie w ogóle robiłem przy stronach.
Pierwsze podejście: każdy ruch rozpisany ręcznie
W czerwcu zrobiłem pierwszą animację w narzędziu, w którym film składa się podobnie jak strona internetowa, z poleceń zapisanych tekstem. Postać w uproszczonym, kreskówkowym stylu pisała kredą na tablicy wzór f(x) = x², a czterosekundowa pętla leciała na stronie „O mnie”. Wyglądało to sympatycznie, tyle że każdy ruch trzeba było rozpisać krok po kroku, więc o drugiej, trzeciej czy dziesiątej pozie nie było nawet co myśleć.
Postać z arkuszy póz
Dlatego zacząłem od wyglądu, a ruch zostawiłem na później. Postać wygenerowałem w narzędziu do tworzenia obrazów i spisałem jej opis tak, żeby każda kolejna poza wyglądała tak samo: ta sama fryzura, grube czarne okulary, duża głowa na małym ciele, a zmieniają się tylko stroje i rekwizyty. Wyszły z tego cztery arkusze pełne póz: z kubkiem kawy, z laptopem, przy tablicy, z telefonem, a nawet w kasku za sterami minikoparki.
Pierwsza pułapka czekała już w plikach. Arkusze wyglądały, jakby postać stała na przezroczystym tle, ale szara szachownica, którą programy graficzne pokazują tam, gdzie tła nie ma, była po prostu namalowana na obrazku, więc na stronie za postacią zostałyby szare kratki. Napisałem mały program, który rozpoznaje tę szachownicę po jasnych, prawie szarych punktach, oddziela ją od postaci i tnie arkusze na osobne pozy, tym razem z naprawdę przezroczystym tłem. Z czterech arkuszy wyszło 36 póz.
Podmieniane obrazki i szkielet w Rive
Trzynastego lipca maskotka pierwszy raz trafiła na Algebrę jako zestaw obrazków, które podmieniały się w zależności od sytuacji, z delikatnym „oddychaniem”. Działało, ale postać była sztywna jak wycinanka. Jeszcze tego samego dnia spróbowałem czegoś ambitniejszego w Rive, programie do animowania postaci na stronach: rozłożyłem rysunek na osobne części, zbudowałem szkielet, który nimi porusza, i przygotowałem spokojną animację na czas, kiedy postać nic nie robi. W programie wszystko było gotowe, a zatrzymał mnie drobiazg, bo darmowy plan nie pozwalał zapisać pliku w postaci, którą dałoby się wstawić na stronę.
Wideo zamiast animacji
Następnego dnia odwróciłem problem. Zamiast animować postać samemu, oddałem gotowe pozy narzędziu, które z jednego obrazka robi pięciosekundowy filmik: postać mruga w nim, pije kawę albo stuka palcem w tablet. Zacząłem od darmowego chińskiego serwisu, w którym wszystko było tylko po chińsku. Obrazek trzeba było podsunąć formularzowi małym programem, a opisy ruchu najlepiej działały, kiedy też pisałem je po chińsku. Jeden klip powstawał dwadzieścia kilka minut, a dwie pierwsze próby poszły do kosza: w jednej kamera odjechała i postać zrobiła się malutka, w drugiej, kiedy usunąłem domyślną listę tego, czego obraz ma unikać, wszystko rozpłynęło się w szarą mgłę.
Wzorcowy klip z kawą wyszedł za trzecim razem, ale w takim tempie na komplet póz potrzebowałbym tygodni. Przeszedłem więc na płatną wersję tego samego narzędzia w innym serwisie, gdzie klip kosztuje mniej więcej dziesięć centów i jest gotowy po dwóch, trzech minutach. Napisałem do tego program, który bierze z listy kolejną pozę, stawia ją na zielonym tle, zamawia animację, wycina tło i zapisuje gotowy plik. Jednego dnia powstało szesnaście klipów.
Zielone tło, które zjadało garnitury
Z takiego narzędzia wychodzi zwykły film z tłem, a na stronie postać miała stać na dowolnym kolorze, więc tło musiało zniknąć. Każda poza szła zatem do animacji na jednolitym zielonym tle, które potem wycinałem, tak jak w telewizji wycina się zieleń za prezenterem. W teorii prosta sztuczka, w praktyce zebrałem całą listę pułapek:
- granatowe i ciemne ubrania mają kolory bliskie zieleni, więc przy zbyt łagodnym wycinaniu garnitur sypał się dziurami, a błękitna koszula potrafiła zniknąć w całości,
- przy szybkim ruchu, na przykład w klipie z chodzeniem, postać mieszała się z tłem i wychodziła półprzezroczysta jak duch,
- poza w zielonym swetrze na zielonym tle nie miała szans, więc takie pozy dostały tło w jaskrawym różu i osobne czyszczenie przebarwień,
- program, którym wycinałem tło, przy ponownym otwarciu gotowego pliku domyślnie gubił przezroczystość, jeśli nie powiedziało mu się wprost, jak ten plik czytać, więc przez chwilę szukałem błędu, którego nie było,
- Safari w ogóle nie odtwarza przezroczystości w tym rodzaju wideo, więc pokazuje zamiast klipu pierwszą klatkę jako zwykły obrazek.
Jedna poza wymagała jeszcze osobnej operacji. Nauczyciela matematyki przy tablicy nie było w żadnym arkuszu, więc powstał z innej pozy przerobionej w narzędziu do edycji obrazów, a symbol π na tablicy dorysowałem na końcu programem.
Gdzie jest dzisiaj
Od połowy lipca maskotka na Algebrze to klipy wideo z przezroczystym tłem, dobierane do sytuacji: tablet, kiedy czeka, „tak!” przy dobrej odpowiedzi, zamyślenie przy błędzie, świętowanie na koniec quizu i machanie na powitanie przy logowaniu. Te same klipy trafiły do Panelu Biznesu, gdzie w części dla właściciela postać siedzi przy laptopie.
Z całej historii wyniosłem jeden wniosek: zanim zacznę budować coś samemu, warto sprawdzić, czy da się to złożyć z gotowych klocków. Szkielet w Rive zajął mi kilka godzin i skończył się na planie cenowym, a szesnaście klipów z narzędzia do wideo kosztowało około dwóch dolarów. Najwięcej pracy i tak poszło nie w samą animację, tylko w to, co wokół niej: spójny wygląd postaci, porządne przezroczyste tło i to, żeby w każdej przeglądarce było widać przynajmniej obrazek.