Tworzymy postać animowaną.

Przykład opisuje tworzenie postaci (i jej animacji), w tym przypadku Potwora. Przedstawię, w miarę spójnie, dokładnie, jak ja tworzę postaci do gry „Warsztat Game”. Mam nadzieję, że dla Zainteresowanych, którzy chcieliby przyłączyć się do pracy nad grą, dokument ten może stanowić pomoc. Jednocześnie zdaję sobie sprawę, że jest to jedno z wielu rozwiązań, które może stanowić jedynie wskazówki dla własnych, indywidualnych rozwiązań.

Skupię uwagę na aspektach technicznych. Sam również programuję, tym samym tworząc grafikę, czynię to w kontekście jej używania (implementacji). Nie „zawracam kijem wizji, ani nie wyważam otwartych drzwi”, a jedynie uporządkuję, usystematyzuję pewne pojęcia.

Założenia projektowe, jak wiadomo, bo było to już szeroko omawiane w fazach projektowych, to gra z widokiem z góry (Top Down). Nie jestem zwolennikiem używania nowo-powstałych słów, rozumianych przez twórców gier, zatem nie będę tutaj używał tej nomenklatury, a skupię się na tym, aby dokument był jasny i zrozumiały.

Przystępujemy do pracy

Nasze pole działania.

Założenia są następujące. Z racji tego, że obiekty (w tym przypadku kafle, postaci, etc.) mają rozmiar 64 x 64 piksele (najczęściej jest to wielkość wyjściowa, bazowa), przygotowujemy sobie nasze „pole działania”.

Ten szkic wyjaśnia, jakie rozmiary ma podstawowe pole, na którym będziemy tworzyli grafikę.

Projekt postaci

Tak przygotowany zarys, to jeden z wielu (prostych) etapów tworzenia grafiki.

Rozkład postaci

Kolejnym etapem jest „rozłożenie” postaci na jej składowe. W naszym przykładzie są to: głowa, korpus, ramiona, ręce, stopy. Taki podział najczęściej wystarcza. Ja taki stosuję najczęściej. W naszym przypadku takie rozwiązanie sprawdza się. Nadmienię, że rozmiar „pola działania” jest niewielki, zatem „poszaleć” artystycznie nie można.

Ustalamy kolorystykę – etap wstępny

Daltoniści pewnie nieprzychylnym okiem spojrzą na tę część dokumentacji. Naszym zadanie jest ustalenie kolorystyki (wyjściowych) odcieni kolorów, które zastosujemy dla naszej postać. Ja staram się tak dobierać kolorystykę, aby korespondowała z mapą gry. Oczywiście każdy indywidualnie podchodzi do takich pojęć jak paleta barw, odcienie, światłocień itp. Tutaj przydaje się zmysł artystyczny.

Ustalamy kolorystykę – etap „malarski”

Niewiele pomogę w tej części opisu. Powiem jedynie, że stosuję proste, darmowe narzędzia graficzne. Jest wiele tego typu narzędzi do edycji grafiki rastrowej (i nie tylko rastrowej). Moje wybory to (wielu pewnie się zdziwi), ale jest to MS Paint oraz Gimp. Jeśli ktoś posiada zmysł, o którym wcześniej wspomniałem, wyobraźnię i odrobinę cierpliwości – efekt swojej pracy może wyglądać jak poniżej.

Chcę raz jeszcze podkreślić i zauważyć (szczególnie dla tych mniej cierpliwych), że nadal operuję lustrzanym odbiciem, zatem „kolorowania” nie ma tak wiele, bo połowę przecież kopiujemy.

Etap wstępnego montażu postaci

Zanim to przedstawię, podkreślę, co jest ważne, istotne, aby tworząc grafikę, zachowywać poszczególne etapy jej projektowania. Elektroniczna kartka papieru jest na tyle duża, że zawsze trzymamy gdzieś pod ręką wcześniej przygotowywane części składowe grafiki. Istnieje wtedy możliwość wymiany, modyfikacji poszczególnych elementów, zanim uznamy, że jesteśmy usatysfakcjonowani z tego, co stworzyliśmy.

Do montażu wykorzystujemy oczywiście nasz szkic, który posłuży nam jako nasz lokalny układ współrzędnych. Istotna jest też kolejność nakładania poszczególnych (ja to tak nazywam) warstw. Ustalenie kolejności jest proste. Te najbliżej podłoża, nakładamy w pierwszej kolejności.

Etap upiększania

Jak widać, postać zaczyna się powoli kształtować. Ten etap polega na upiększeniu niektórych jej składowych. Nie zawsze tak dobierzemy kształty i kolory, aby to do siebie pasowało. Ja w tym konkretnym przypadku upiększyłem korpus (szelki) oraz dodałem bardziej plastyczny wygląd głowie Potwora (trochę włosów, cienie, a nawet blizna, co jest może trudno zauważalne, mając do dyspozycji góra dziewięć pikseli). Należy też zwrócić uwagę, że takie elementy jak stopy, dłonie (czy całe ramiona), przygotowałem z myślą, o późniejszej animacji, dlatego też projektując, zawsze trzeba przewidzieć pewien zapas (ich wielkość), gdyby przyszło nam je wyodrębnić.

Raz jeszcze montujemy naszą postać

Odpowiednie dodatki, zmiana głowy, dodanie cienia, rozjaśnienia – projekt gotowy. Uznajmy, że teraz jest to zadowalające. Tym samy jest to grafika bazowa.

Zwrócę uwagę na bardzo ważną sprawę. Otóż empirycznie musimy dopasować rozstaw stóp oraz ich skrajne położenie. To będzie nam potrzebne do późniejszej animacji. Ja zawsze czuję „żal”, że stopy potworów, czasami są prawie niewidoczne. Istotne jest jednak to, aby zachowane były odpowiednie proporcje.

Animacja

Rozpoczniemy od animacji stóp naszego stwora. Poniżej przedstawione są klatki tej sekwencji animacji.

W naszym przypadku założyliśmy, że będzie osiem klatek animacji. Animujemy lewą stopę (w tym przypadku musimy przesuwać ją najpierw ku górze, /co 8 pikseli/, by potem przesuwać ją ku dołowi, zawsze stosują przesunięcie o tę samą wartość – 8 pikseli). Należy każdą sekwencję animacji wyliczyć w taki sposób, aby „ostatnia” (ósma w tym przypadku) klatka, była tym samy „dopasowana” do pierwszej. W ten sposób cała sekwencja będzie płynna. Z prawą stopą czynimy to samo, ale w odwrotnej kolejności; góra-dół.

Ja stosuję kolorowe obramowanie wokół każdej klatki, co ułatwia mi pracę, dając tym samym zawsze ten sam obszar (lokalny układ współrzędnych) odniesienia. Uwaga (obramowanie ma rozmiar 66 x 66 pikseli; pole, obszar to nasza wielkość obiektu, czyli 64 x 64 piksele).

W przypadku korpusu Potwora, jedyne, co musimy wykonać, to skopiować nasz obraz osiem razy.

Kolejna warstwa naszej animacji, to ramiona i dłonie. Jak łatwo zauważyć, w lewej (potwory też mogą być leworęczne), znajduje się oręż. Zwykła pałka.

Poszczególne ujęcia animacji ramion wykonane są według tego samego schematu, jak stopy. Różnica polega jedynie na tym, że (dla lewej i prawej części), przesuwamy tę część grafiki o jeden piksel. Nie jest to wielka różnica, ale dzięki temu postać nabierze dynamiki ruchu. Podczas maszerowania będą poruszały się ramiona, a sam efekt będzie bardziej plastyczny.

Została nam kolejna, ostatnia warstwa Potwora, jego głowa. Można podobnie, jak w przypadku stóp i dłoni animować głowę. Postać będzie zachowywała się „naturalnie”, gdy będzie zauważalny ruch głowy.

Głowę animujemy, przesuwając ją „góra-dół”, pamiętając, aby „ostatnia” klatka, była „dopasowana” do pierwszej. Pozwoliłem sobie również na szczegóły dotyczące ruchu uszu. Takie niewielkie zabiegi, zawsze poprawiają ostateczny wizerunek. Lewe ucho wędkuje ku górze, by powrócić do pierwszego ujęcia, prawe odwrotnie. Poświęcając niewiele czasu, dodając takie drobiazgi, niuanse, powodujemy, że nasz Potwór będzie „jak żywy”.

Czas na ostateczny montaż (maszerującego Potwora). To prosty zabieg, polegający na nałożeniu (w kolejności, co zostało wcześniej omówione), poszczególnych warstw sekwencji animacji.

Jak można zauważyć, pojawiły się „dziury-braki” pikseli. Retuszujemy je, wybierając najciemniejszy kolor. Po retuszu mamy kompletną sekwencję poruszającego się potwora.

Na zakończenie tej części dokumentacji, istotna uwaga. Otóż projektując grafikę, rezerwuję dwa kolory, które nigdzie nie występują w zestawie grafiki. Jest to kolor czarny i biały.

Animacja sekwencji ataku

Najpierw ustalenia, założenia dotyczące tej sekwencji animacji (atak). Nadal trzymamy się zasady, że będzie to 8 klatek animacji, (chociaż moglibyśmy przyjąć inne założenia). Nadmienię, że cały materiał zawarty w tym dokumencie, służy jedynie zobrazowaniu zasad.

Wybieramy zadowalający nas układ stóp, który będzie niezmienny podczas sekwencji animacji Potwora w ataku (to jedynie przykład i moje ustalenia dotyczące sekwencji ataku Potwora).

Dokładamy korpus.

W tej sekwencji animacji kładziemy nacisk na ruch ramion z orężem. Może to wyglądać następująco:

Animacja głowy będzie bez zmian, bierzemy ją z sekwencji już wcześniej przygotowanej – poruszanie się Potwora.

Analogicznie, jak w poprzednim przypadku, montujemy sekwencję animacji w całość, nakładając w znanej już kolejności poszczególne warstwy, pamiętając, aby dokonać retuszu „dziur”, gdy takie się pojawią.

Stany animacji

W czasie gry, nasz Potwór (czy inne postaci) będzie posiadał „stan życia” (zniszczenia) – pasek stanu. Dlatego też posiadając już komplet animacji jego poruszania i ataku, należy przygotować takie same sekwencje, dodając do nich (zwykłe kopiowanie), grafiki ran, jakie może odnieść podczas rozgrywki.

Przygotowujemy dwie rany, jedna głowy, druga innej części ciała, w tym przykładzie korpusu. Dlaczego dwie? Dlatego, bo pamiętamy, że animowaliśmy osobno te części ciała.

Rana głowy.

Rana Korpusu.

Odpowiednio, nakładając grafikę zranienia, otrzymujemy sekwencję ruchu i ataku postaci – faza zranienia.

Sekwencja śmierci Potwora

Rzeczą oczywista jest, aby gra miała to „coś”, co niezbędne. Smaczki, niuanse, drobiazgi. Ich ilość, różnorodność, w ogólnym połączeniu tego w dobrze skomponowaną całość, da wymierny, cieszący zmysły Gracza – efekt. Zaproponowany przeze mnie pomysł na sekwencję animacji śmierci Potwora, to jeden z wielu, a ten niech jedynie będzie katalizatorem, który wyzwoli wyobraźnie Zainteresowanych.

Dla „zmęczonych” powiem, że „niestety” musimy przygotować grafikę szkieletu Potwora. Nie jest to skomplikowana sprawa, wręcz banalna.

Zanim narysujemy szkielet Potwora, wybieramy klatkę bazową tej sekwencji animacji – animacji śmierci Potwora. Oczywistym jest, że wybieramy klatkę z zestawy Potwora zranionego.

Nasz szkielet można zaprojektować następująco.

A po dobraniu koloru, cieniowaniu, niewielkich zabiegach, może wyglądać jak poniżej.

Następnie wykonujemy grafikę (maskę), która posłuży do „wytworzenia” efektu zaniku, sekwencji „zamiany” Potwora w szkielet, by szkielet „zamienił” się z nicość.

Poniżej przedstawiony jest ten proces.

Wyjściowa postać (wybieramy klatkę z sekwencji rannego Potwora – powielamy ją osiem razy).

Grafika (maska) dla tej postaci

Szkielet

Nałożenie tych warstw i usunięcie kolory „maski”

Podobnie czynimy w przypadki „niwelacji” animacji szkieletu. Można zrobić nową grafikę „maski”, lub jak w tym przypadku obrócić pionowo wcześniej wykonaną i ustawić w poprawnej kolejności.

Produkt finalny, cała sekwencja śmierci Potwora, wygląda następująco:

Wstępne podsumowanie

W wyniku naszej pracy powinniśmy ostatecznie posiadać następujące zestawy poszczególnych sekwencji animacji.

Potwór się porusza

Potwór się porusza – jest ranny

Potwór atakuje

Potwór atakuje – jest ranny

Powrót ginie

Podsumowanie

Jak już wcześniej wspomniałem, zarezerwowaliśmy dwa kolory (biały i czarny). Kolor biały jest kolorem przezroczystym. Dlatego też całość grafiki zapisana jest w formacie graficznym z obsługą kanału alfa. W przypadku Warsztat Game – jest to format *.png.

Dodatkowo, gra będzie wyświetlać każdą animację dwa razy - raz normalnie, a raz jako cień - pokolorowaną na czarno, z dodaną przezroczystością i odrobinę przesuniętą. Nie wymaga to tworzenia dodatkowych plików. Przykład nałożenie Potwora i cienia:

Praca końcowa

Pozostaje nam jedynie poukładać grafikę w atlasy tekstur. Jest to jedynie przykład.

Zapisujemy taki plik(i) (*.png), uprzednio ustawiając dla koloru białego (tło) kanał alfa 100% (przezroczystość). W przypadku obrazów z cieniem, postępujemy podobnie, z tym, że dla koloru czarnego ustawiamy kanał alfa np. 50 %, który potem można programowo modyfikować (np. zmiana pory dnia, tym samym zmiana „nasycenia” cienia.

jackflower