Rysowanie sprite'a NPC do gry RPG - część 1 by DE
Tutorial ten ma na celu przedstawienie sposobu narysowania prostego sprite'a postaci NPC (bohatera niezależnego), przydatnego w grze RPG, zwłaszcza jRPG, ale nie tylko. Jest to część pierwsza ciągu tutoriali, dzięki którym będzie można narysować postać w czterech rzutach i stworzyć prostą animację chodzenia.
Zakładam, że znasz podstawy pracy w edytorze graficznym obsługującym obrazki 8-bitowe, typu MSPaint, Paint Shop Pro, Gimp, Graphics Gale czy iDraw. W trakcie rysowania będziemy korzystać z siatki 24x32 piksele.
| krok 1 |
Pierwszą sprawą (i częstokroć najważniejszą) jest wykonanie linearta. Dobry lineart sprawia, że o wiele łatwiej jest pracować nad spritem, podczas gdy zły lineart może wywołaż konieczność nanoszenia wielu poprawek i utratę sporej ilości czasu.
Cóż ma ów lineart zawierać? Kontury postaci i linie oddzielające poszczególne elementy (ręce od ciała, nogi od stóp itp.). Niektórzy korzystają z więcej niż jednego koloru przy rysowaniu linearta, każdy dla innej części postaci, ale nam wystarczy jeden kolor, w tym przypadku - czarny.
Zaczniemy od głowy. Czemu od niej? Gdyż łatwiej jest dopasować ciało do głowy niż odwrotnie. Na pierwszy ogień idą oczy. Ich wielkość decyduje o wielkości głowy, ale nie tylko. Po nabraniu nieco większego doświadczenia zorientujecie się, że zmieniając wielkość oczu, można uzyskać wiele ciekawych efektów. Dla przykładu, możecie narysować kobiety z oczami większymi o jeden piksel, groźne postaci z oczami mniejszymi, starszym osobom dać inny kształt oczu itp. itd. Ponieważ nasz sprite ma mieć wygląd komiksowy (tudzież mangowy), zrobimy oczy nieco większe, niż jakie zazwyczaj mają sprite'y tej wielkości (3 piksele wysokości).
Pierwszą rzeczą, jaką musimy zrobić, jest dobór koloru czarnego. Pamiętajcie - kontury zostawimy czarne, więc lepiej użyc jaśniejszego odcienia czerni, czy też raczej koloru ciemnoszarego. Otwórzmy paletę i dodajmy ten kolor. RGB=40/40/40 powinno być odpowiednie. Nie za jasne i nie za ciemne. Zawsze można to poprawić później.
|
| krok 2 |
OK, mamy dwoje oczu. Dodajmy głowę. Tak naprawdę jest to całkiem proste. Narysujcie półkole aż do brwi i jeden lub dwa piksele poniżej oczu. Użyjemy dwóch pikseli, gdyż oczy są raczej duże. Tak jak z oczami, można pobawić się wypróbowując rożne kształty, np. bardziej kwadratowe. Wygodniej jednak jest nad tym popracować już podczas cieniowania.
|
| krok 3 |
Co dalej? Oczywiście musimy dokończyć głowę. Cały czas brakuje włosów. Zrobimy raczej prostą fryzurę, identyczną z obu stron. Przy postaciach takich jak ta włosy zajmują raczej dużo miejsca i są mało realistyczne. W sumie narysujcie co wam sie żywnie podoba, ale lepiej nie przesadzać z nastroszoną fryzurą - może się nie zmieścić w siatce, a ponadto cieniowanie takowej jest o wiele trudniejsze.
|
| krok 4 |
Głowa jest gotowa. Zabierzmy się za ciało. Ta część jest również łatwa - tułów zazwyczaj nie jest szerszy niż głowa i jest dość prosty. Oddzielcie stopy od nóg, i obie nogi od siebie samych. Dwa piksele przerwy mogą dać nieciekawy efekt, ale ciężko to zrobić inaczej. Można popróbowac z rysowaniem linii o szerokości tylko jednego piksela, ale gdy dojdziemy do animowania, będzie to wyglądało dziwacznie. Innym sposobem jest oddzielenie oczu nieparzystą liczbą pikseli i odpowiednie dopasowanie ciała, ale to również wygląda dość dziwnie.
|
| krok 5 |
Naszemu sprite'owi cały czas brakuje rąk. Jest to jedna z trudniejszych części linearta, gdyż bardzo łatwo narysować je zbyt proste, ale po kilku próbach powinny wyjść takie jak trzeba. Ręce powinny sięgać mniej więcej do połowy ud. Dobrym pomysłem byłoby także dodanie pasa, albo najzwyczajniej w świecie oddzielenie nóg od korpusu. Możemy też dodać dwa piksele na głowie, by zaznaczyć uszy.
|
| krok 6 |
Lineart jest niemal gotowy. Ale zanim zaczniemy kolorować, dobrze byłoby dodać wszystkie pozostałe detale. Po pierwsze, dłonie. Zazwyczaj są długości jednego lub dwóch pikseli, należałoby też oddzielić je pikselem lub dwoma od przedramion. Możecie rownież dodać cień pod postacią (moim zdaniem wpływa to pozytywnie na jakość sprite'ów, ale można tę część pominąć). No i coś nieobligatoryjnego - mała linia oddzielająca klatkę piersiową.
|
| krok 7 |
Cóż, lineart jest gotowy. Czas zacząć kolorowanie!
Dobór palety jest jedną z najtrudniejszych rzeczy do nauczenia. Przynajmniej takim był dla mnie... I caly czas jest to jeden z moich słabszych punktów. Tak czy siak, jezeli nie czujecie się na siłach, po prostu pożyczcie paletę z cudzych sprite'ów (najlepiej pochodzących z komercyjnych gier). Jednak pamiętajcie, że zawsze lepiej uczyć się na własnych błędach, niż bezmyślnie kopiować cudze rozwiązania. Dla potrzeb tego tutoriala będziemy tworzyć własną paletę.
Na początek dodamy odcień bieli na oczy. Czysta biel (RGB=255/255/255) jest w porządku, ale zróżnicowanie w nasyceniu kolorów składowych sprawi, że będzie jeszcze lepsza. Osobiście często robię oczy bardziej niebieskie (RGB=245/245/255), ale wybór należy do Was. Wypełnijcie oczy nowym odcieniem. Niewiele to roboty, więc w tym kroku zajmiemy się czymś jeszcze. Dobierzmy kolor skóry. To również może być dość trudne. Jeżeli nie będziecie dawać rady, po prostu przyjrzyjcie się kilku sprite'om i dobierzcie podobny odcień. Po kilku próbach powinno się udać. Nasz odcień może mieć np. takie parametry: RGB=208/170/131. Wypełnijcie nim twarz i ręce.
Przy okazji, zawsze układajacie wszystkie używane odcienie obok sprite'a, tworząc coś na kształt prawdziwej palety. Przyspiesza i uprzyjemnia to pracę.
|
| krok 8 |
Teraz pokolorujmy włosy. Możecie użyć jakiegokolwiek koloru, ale ja wybrałem brąz (RGB=147/111/80), ponieważ jest dość neutralny. Poźniej możemy go wykorzystać do cieniowania twarzy! Ponieważ brązowy to także dobry kolor na buty, możemy nim je wypełnić.
|
| krok 9 |
Zabierzmy się teraz za spodnie. Nasz chłopek będzie nosił dżinsy, możemy je więc pokolorować na niebiesko (RGB=49/113/182). Tyle.
|
| krok 10 |
Pozostała nam już tylko koszula. Jakim kolorem ją wypełnić? Można użyć czerwonego (RGB=160/70/34), ale... Hmm. Czerwony strasznie gryzie się z niebieskim! Nie wspominając o tym, że czerwień jest jednym z trudniejszych kolorów do opanowania. Należaloby więc to zmienić...
|
| krok 11 |
Tym razem użyjmy zielonego (RGB=28/143/79). Wygląda dobrze, można go więc zostawić. Ważne, by każdy element odróżniał się od siebie i nie zlewał z pozostałymi. Cóż, podstawowe kolory są gotowe, możemy więc przystąpić do cieniowania.
|
| krok 12 |
Najpierw pozbądźmy się wszystkich niepotrzebnych już części linearta. Po prostu usuńcie piksele, które nie muszą oddzielać już poszczególnych elementów. W tym miejscu dorysujemy też uszy - są to jeden lub dwa piksele umiejscowione na wysokości oczu.
|
| krok 13 |
Zadecydujmy, jaki typ koszuli będzie nosił nasz chłopek. Ponieważ ma to być przeciętny, niczym nie wyróżniający się NPC, mógłby nosić zwykłą koszulę z guzikami. Kolor 'cielisty' nada się na guziki, więc można go użyć i narysować je bez dodawania nowego koloru do palety. Wystarczy postawić nim kilka pikseli na środku i dodać pionową czarną linię.
|
| krok 14 |
Obszar wokół pasa jest mało urozmaicony, możemy więc ponownie użyć koloru ciała, by narysować sprzączkę.
|
| krok 15 |
Zauważcie, że jego mankiety nie wygladają zbyt zachęcająco, można więc dodać tam kilka dodatkowych, białych pikseli.
|
| krok 16 |
Przejdźmy do ważniejszych części. Za chwilę będziemy cieniować spodnie, ale najpierw potrzebujemy ciemniejszego odcienia błękitu. Jak go dobrać, by pasował do koloru wyjściowego? Najprostszym sposobem jest skopiowanie koloru w palecie i przesunięcie suwaków RGB w lewo. Należy jednak pamiętać, że przesunięcie wszystkich o tę samą wartość nie jest dobrym rozwiązaniem. Podstawowa zasada mówi, że im większa wartość, tym bardziej trzeba ją zmniejszyć. Krótko mowiac, najlepiej przesuwać je procentowo.
Mamy juz nasz odcień (RGB=23/71/139). Skutecznym sposobem na cieniowanie spodni jest wypełnienie przestrzeni tuż pod kolanami kolorem ciemniejszym. Nie rysujcie jednak kolan kwadratowych, trzeba je nieco zaokrąglić. Spójrzcie na przykład obok.
|
| krok 17 |
Teraz zabierzemy się za koszulę. Najpierw dobieramy kolor ciemnozielony (RGB=45/93/62).
Niewiele tu można zrobić, może oprócz dodania nieco AA na rękawach. Czym jest AA, tudzież antialiasing? Objaśnienie tego zajęłoby zbyt wiele miejsca, poza tym w sieci znajdziecie mnóstwo tutoriali opisujących to zagadnienie. Mowiąc krótko - antyaliasing, jest to sposób na 'wygładzenie' linii korzystając z odcieni ciemniejszych (lub jaśniejszych, zależy z której strony na to patrzeć). Mankiety dalej nie wygladają za dobrze, można je więc trochę przerobić. A także dodać cienie pod guzikami.
|
| krok 18 |
Czegoś nam brakuje w naszej koszuli... Kołnierza! Objaśnienie jak go wykonać jest raczej trudne - należy po prostu postawić kilka pikseli, by oddzielić go od koszuli.
|
| krok 19 |
A teraz najtrudniejszy etap ze wszystkich... WŁOSY. Uwierzcie mi, rysowanie włosów jest często najżmudniejszą i najbardziej pochłaniającą czas częścią sprite'owania. Dlaczego? Po prostu często włosy wyglądają nie tak jak trzeba i trzeba zmieniać, zmieniać, zmieniać...
Cieniowanie włosów jest łatwiejsze w sposób odwrócony, tzn. poprzez nakładanie rozjaśnien zamiast cieni. Dobierzmy kolor ciemnobrązowy (RGB=103/78/56) i wypełnijmy nim włosy.
|
| krok 20 |
Sposobem na cieniowanie włosów jest wyobrażenie sobie, jak układają się poszczególne kosmyki i rozjaśnienie ich. Ta część to naprawdę kwestia doświadczenia - z początku włosy będą zapewne wyglądać okropnie, ale powolutku powinny wychodzić coraz lepiej. Lewa i prawa część powinny być (prawie) identyczne.
|
| krok 21 |
Jeśli chcecie, możecie zróżnicować obie połowy, poprzesuwać parę pikseli tu i tam, by włosy nie wyglądały jak lustrzane odbicia.
|
| krok 22 |
Czas na coś łatwiejszego - buty. Wystarczy dodac kilka jaśniejszych pikseli na czubkach i przyciemnić gorną część.
|
| krok 23 |
W tegu typu sprite'ach nie za wiele można zrobić z twarzą. Wystarczy dodać cień tuż pod włosami używając jaśniejszego odcienia brązu (użytego na włosach), oraz kilku pikseli tuż pod oczami. Można także poeksperymentować z oczami i zamienić górny piksel bieli na kolor skóry.
|
| krok 24 |
Czegoś cały czas tu brakuje... Oczywiście chodzi o rękawy! Można by je zmienić tak, by sprite był ciekawszy. Na przykład pokolorować je na brązowo, tworząc coś na kształt kamizelki. Albo koszuli z rękawami innego koloru.
|
| krok 25 |
Powoli zbliżamy się do końca! Czas dodać kilka detali i uzupełnić kilka miejsc.
Po pierwsze spodnie. Możemy dodać kilka jaśniejszych pikseli u samego dołu, by dżinsy wyglądały, jakby miały podwinięte nogawki. NaKROKna sprawa - czarne linie oddzielające ręce od korpusu wygladają okropnie, możemy je więc zmienić na ciemnobrązowe. Na koniec obcinamy nieco chłopkowi włosy.
|
| krok 26 |
Już prawie widać linię mety.
Zedytujmy jeszcze nieco jego spodnie, dodając kieszenie.
|
| krok 27 |
Usuńmy paletę...
|
| krok 28 |
... i gotowe!
Chwila, coś jest nie tak. Aha, postać nie jest poprawnie wycentrowana.
Wystarczy przesunąć ją o jeden piksel w prawo.
|
| krok 29 |
I to na tyle. Nasz sprite jest gotowy!
|
Na koniec bonus - wszystkie kroki na jednym obrazku.
|
DE
|
|
