Rysowanie sprite'a NPC do gry, część druga - widoki "od boku" i "od tyłu".
| krok 1 |
Rysowanie rzutów innych niż przedni sprawia niektórym wiele kłopotów, ale moim zdaniem są one w istocie o wiele łatwiejsze. Mając gotowy design, paletę i proporcje, ich wykonanie może być wręcz banalne.
Jak więc narysować widok od boku tak, by odpowiadał widokowi od przodu?
To proste. Najpierw dodajemy do palety bardzo nasycony kolor, np. RGB=0/255/0, a następnie rysujemy poziome linie równoległe do najważniejszych części postaci. Przydatne okazać się mogą: czubek głowy, górna część oczu, dolna część oczu, dolna część twarzy, pas/biodra oraz dolna część dłoni.
Przyjrzyj się obrazkowi powyżej. Po cóż nam owe linie? Otóż po to, by wymienione części były w obu obrazkach na tych samych wysokościach. Szczerze powiedziawszy są one zbędne i można się bez nich obyć (zwłaszcza po nabyciu nieco doświadczenia), ale dzięki nim łatwiej mi będzie objaśniać kolejne kroki.
Gdy linie są już gotowe, należy narysować oko. Powinno być identyczne jak w rzucie od przodu. Analogicznie postępujemy z głową. Między okiem a nosem powinien być odstęp jednego lub dwóch pikseli. My damy dwa, gdyż głowa jest dość spora.
|
| krok 2 |
A teraz trudniejszy etap. WŁOSY. Jak zwykle mogą być z nimi problemy. Potrzeba nieco wyobraźni, aby narysować przyjemną dla oka fryzurę, która na dodatek będzie odpowiadać widokowi od przodu. Jeśli masz z tym kłopot, narysuj ucho i pamiętaj, że standardowa fryzura nie powinna być szersza niz trzy lub cztery piksele, licząc od ucha aż do konturu.
Jeśli chodzi o ucho, to dalej powinno mieć dwa piksele wysokości, a odległość między nim a okiem wynosić jeden lub dwa piksele.
|
| krok 3 |
Nadszedł czas na sylwetkę. Na razie niech będzie dość prosta. Klatka piersiowa powinna znajdować się bezpośrednio poniżej konturu twarzy, czy też raczej o jeden piksel w lewo. Wszystko zależy od tego, jak postać jest zbudowana. Plecy są poniżej ucha, lub jeden piksel w lewo lub w prawo. Możesz poeksperymentować.
Nogi są cieńsze niż korpus, o jeden lub dwa piksele, oraz proste, z góry na dół. Pamiętaj o umieszczeniu w odpowiednim miejscu pasa i oddzieleniu stóp od nóg.
|
| krok 4 |
Pobawmy się trochę tą nogą. Zamiast rysować ją prostą, lepiej będzie wyglądać, gdy zrobi się ją nieco ugiętą. Wystarczy przesunąć kilka pikseli w lewo. Na koniec dodajmy palce u stóp, czy też raczej czubek buta.
|
| krok 5 |
Dodajmy ręce. Z pomocą zielonych linii nie powinno być to trudne. Nie dawaj ich tylko na środek, lecz przesuń je nieco w lewo.
|
| krok 6 |
Teraz dodajmy naszej postaci nieco głębi. Moglibyśmy zostawić ją tak jak teraz, ale kłóciła by się z perspektywą teł, pasując raczej do platformówki.
Rozwiązanie? Wystarczy dodać drugą nogę, ale tak, by wyglądała, jak ustawiona dalej od kamery. Musi być mniejsza i umiejscowiona piksel wyżej. Jeśli twój pierwszy sprite ma cień, należy również dodać go tutaj.
|
| krok 7 |
To by było na tyle, kontury są gotowe. Usuń zielone linie i dodaj, lub usuń wszelkie zbędne lub brakujące piksele.
|
| krok 8 |
Krótka piłka, gdyż paletę mamy już gotową. Wypełnij wszystko podstawowymi odcieniami. To chyba najłatwiejsza część, prawda?
|
| krok 9 |
Zacznijmy od skóry. Wybierz ciemniejszy odcień i narysuj cień pod włosami (nad okiem). Jeden piksel z konturu oddzielającego twarz od ucha zamień na ten kolor, a ponadto dodaj go w kilku miejscach pod okiem, by twarz wyglądała na bardziej zaokrągloną. MOGLIBYŚMY zrobić to i z przednią częścią twarzy, ale czasami lepiej jest czegoś nie cieniować, niż pocieniować zbyt mocno.
Poeksperymentuj i sam zadecyduj, która wersja bardziej Ci odpowiada. Możesz także dodać jeden lub dwa ciemniejsze piksele na dłoniach, by nie były tak kwadratowe.
|
| krok 10 |
Szybko dodajmy guziki i klamrę u pasa.
|
| krok 11 |
Cieniowanie rękawa nie powinno nastręczać trudności, tak samo z butami, jako że już się tym zajmowaliśmy.
|
| krok 12 |
Teraz dodaj cienie do kamizelki i ją wygładź. Tylko z tym nie przesadź (jest to częsty błąd u początkujących) dając zbyt wiele cieni.
|
| krok 13 |
Czas na spodnie. Tak, tak, i tym razem zostawimy sobie włosy na deser. Ogólnie rzecz biorąc spodnie cieniujemy tak jak w przypadku rzutu od przodu, tj. poprzez przyciemnienie nogawek pod kolanami i dodanie antyaliasingu tam, gdzie jest on niezbędny.
|
| krok 14 |
Zabierzmy się za włosy. Tak jak poprzednio, tak i teraz nie mam żadnych wskazówek, gdyż możliwości ułożenia fryzury jest wiele, a każdą z nich cieniuje się inaczej. Pamiętaj o rozjaśnianiu kosmyków i dodaniu czerni poniżej ucha. Całość może zabrać trochę czasu, więc postaraj się nie zniechęcać.
|
| krok 15 |
Niektóre elementy są zbyt ciemne i za mało rozmyte. Czasami warto usunąć czarny kontur i zastąpić go ciemniejszym odcieniem danego koloru. Przyjrzyj się jak zrobiłem to z dolną częścią dłoni, a także z miejscem, gdzie kołnierzyk styka się z głową.
|
| krok 16 |
Korpus naszego ludzika nie wygląda zbyt dobrze, jako że brakuje mu głębi. Łatwo to naprawić przesuwając kontur.
|
| krok 17 |
A teraz to, o czym początkujący często zapominają - GŁĘBIA. Można ją uzyskać nie tylko przy pomocy konturów, ale, czy też raczej zwłaszcza, dzięki odpowiedniemu cieniowaniu. Nie ma to aż takiej wagi przy statycznych obrazkach, ale przy animacjach robi ogromną różnicę.
Jak to zrobić? Proste. Wystarczy zamienić ciemniejszy odcień lewej nogi na czerń, a jaśniejszy na ten ciemny. Gdyby lewa ręka była widoczna, należało by postąpić z nią identycznie.
|
| krok 18 |
I ostatnie poprawki. Postanowiłem poszerzyć chłopakowi nogawki, a także dodać brakujące rozjaśnienie na jego lewym bucie...
|
| krok 19 |
... Na koniec zaś usunąć jeden piksel z lewej nogi i przyciąć mu włosy (z tyłu).
|
| krok 20 |
Gotowe! Łatwizna.
|
| krok 21 |
Widok od tyłu jest jeszcze prostszy, gdyż nie wymaga wielkiego wysiłku. Zacznij od skopiowania widoku od przodu.
|
| krok 22 |
Trik polega na tym, aby usunąć cieniowanie i szczegóły z tych elementów, które zmieniają się, gdy postać odwraca się tyłem. Wystarczy wypełnić włosy, kamizelkę i spodnie ciemniejszym odcieniem, usunąć guziki i klamrę.
|
| krok 23 |
Przy widoku od tyłu ręce wyglądają jakby były nieco wyżej, a jeśli chodzi o dłonie, to widoczna ich część jest trochę mniejsza. Należy więc przesunąć ręce o piksel w górę i zmniejszyć dłonie o piksel lub dwa.
|
| krok 24 |
Poprawmy rękawy. Niewiele do dodania, jest to bardzo łatwe.
|
| krok 25 |
Kolej na spodnie. Ich cieniowanie jest identyczne jak poprzednio - z tym, że na odwrót. To nie uda są jaśniejsze, ale łydki. Możesz mu także dorobić małą, pikselkową pupę, jeśli masz na to ochotę.
|
| krok 26 |
Oczywiście kołnierzyk także powinien wyglądać inaczej, więc go poprawmy. Wystarczy go powiększyć.
|
| krok 27 |
Włosy. Znowu. Na szczęście przy tym widoku roboty nie ma zbyt wiele. Najpierw dodaj nieco czerni do dolnej części głowy.
|
| krok 28 |
Teraz dodaj rozjaśnienia. Wyobraźnia przestrzenna wymagana. Zawsze można poprzestać na dość prostym cieniowaniu. Zresztą ja tak zrobiłem w tym przypadku.
|
| krok 29 |
Na koniec rozbij trochę czerń, by włosy wyglądały bardziej naturalnie.
|
| krok 30 |
Jego plecy nie powalają szczegółowością, postanowiłem więc dodać kilka guzików tu i tam, a także mały wzorek na kamizelce.
|
Na koniec ponownie bonus - wszystkie kroki na jednym obrazku.
|
